diff --git a/packages/react-core/src/components/CodeBlock/__tests__/CodeBlock.test.tsx b/packages/react-core/src/components/CodeBlock/__tests__/CodeBlock.test.tsx index d97cc37b55d..9125aed8f4e 100644 --- a/packages/react-core/src/components/CodeBlock/__tests__/CodeBlock.test.tsx +++ b/packages/react-core/src/components/CodeBlock/__tests__/CodeBlock.test.tsx @@ -1,30 +1,35 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { CodeBlock } from '../CodeBlock'; -import { CodeBlockAction } from '../CodeBlockAction'; -import { CodeBlockCode } from '../CodeBlockCode'; +import styles from '@patternfly/react-styles/css/components/CodeBlock/code-block'; -test('CodeBlock renders successfully', () => { - const { asFragment } = render(test text); - expect(asFragment()).toMatchSnapshot(); +test('CodeBlock renders', () => { + render(test text); + expect(screen.getByText('test text')).toBeVisible(); }); -test('CodeBlockAction renders successfully', () => { - const { asFragment } = render(action); - expect(asFragment()).toMatchSnapshot(); -}); +test(`CodeBlock content renders with class ${styles.codeBlockContent} by default`, () => { + render(Test); -test('CodeBlockCode renders successfully', () => { - const { asFragment } = render(action); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByText('Test')).toHaveClass(styles.codeBlockContent); }); -test('CodeBlock with components renders successfully', () => { - const { asFragment } = render( - button}> - inside pre/code tags - test outer text +test('CodeBlock renders with custom class', () => { + render( + + Test ); + + expect(screen.getByTestId('code-block')).toHaveClass('tester'); +}); + +test('Renders when actions are passed to CodeBlock', () => { + render(actions} />); + expect(screen.getByText('actions')).toBeVisible(); +}); + +test('Matches the snapshot', () => { + const { asFragment } = render(actions}>children); expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/CodeBlock/__tests__/CodeBlockAction.test.tsx b/packages/react-core/src/components/CodeBlock/__tests__/CodeBlockAction.test.tsx new file mode 100644 index 00000000000..b51934acf9e --- /dev/null +++ b/packages/react-core/src/components/CodeBlock/__tests__/CodeBlockAction.test.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { CodeBlockAction } from '../CodeBlockAction'; +import styles from '@patternfly/react-styles/css/components/CodeBlock/code-block'; + +test('CodeBlockAction renders', () => { + render(action); + expect(screen.getByText('action')).toBeVisible(); +}); + +test(`CodeBlockAction renders with class ${styles.codeBlockActions}-item by default`, () => { + render(Test); + + expect(screen.getByText('Test')).toHaveClass(`${styles.codeBlockActions}-item`); +}); + +test('CodeBlockAction renders with custom class', () => { + render(Test); + + expect(screen.getByText('Test')).toHaveClass('tester'); +}); + +test('Matches the snapshot', () => { + const { asFragment } = render(children); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/components/CodeBlock/__tests__/CodeBlockCode.test.tsx b/packages/react-core/src/components/CodeBlock/__tests__/CodeBlockCode.test.tsx new file mode 100644 index 00000000000..fce3584eb35 --- /dev/null +++ b/packages/react-core/src/components/CodeBlock/__tests__/CodeBlockCode.test.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { CodeBlockCode } from '../CodeBlockCode'; +import styles from '@patternfly/react-styles/css/components/CodeBlock/code-block'; + +test('CodeBlockCode renders', () => { + render(action); + expect(screen.getByText('action')).toBeVisible(); +}); + +test(`Renders with class ${styles.codeBlockPre} by default`, () => { + render( + + Test + + ); + + expect(screen.getByTestId('code-block-code')).toHaveClass(`${styles.codeBlockPre} test`); +}); + +test(`Renders with class ${styles.codeBlockCode} by default`, () => { + render(Test); + + expect(screen.getByText('Test')).toHaveClass(styles.codeBlockCode); +}); + +test('Renders with custom class', () => { + render(Test); + + expect(screen.getByText('Test')).toHaveClass('tester'); +}); + +test('Matches the snapshot', () => { + const { asFragment } = render(children); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap b/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap index 35d5269d68f..d31dbfd0753 100644 --- a/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap +++ b/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap @@ -1,20 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CodeBlock renders successfully 1`] = ` - - - - test text - - - -`; - -exports[`CodeBlock with components renders successfully 1`] = ` +exports[`Matches the snapshot 1`] = ` - - button + + actions - - - inside pre/code tags - - - test outer text + children `; - -exports[`CodeBlockAction renders successfully 1`] = ` - - - action - - -`; - -exports[`CodeBlockCode renders successfully 1`] = ` - - - - action - - - -`; diff --git a/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlockAction.test.tsx.snap b/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlockAction.test.tsx.snap new file mode 100644 index 00000000000..9f1d694518d --- /dev/null +++ b/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlockAction.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Matches the snapshot 1`] = ` + + + children + + +`; diff --git a/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlockCode.test.tsx.snap b/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlockCode.test.tsx.snap new file mode 100644 index 00000000000..bddc099a2ac --- /dev/null +++ b/packages/react-core/src/components/CodeBlock/__tests__/__snapshots__/CodeBlockCode.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Matches the snapshot 1`] = ` + + + + children + + + +`;
- - inside pre/code tags - -
- inside pre/code tags -
- - action - -
- action -
+ + children + +
+ children +