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
+    
+  
+
+`;