chore(CodeBlock): update tests (#9546)

* chore: update codeblock tests

* chore(CodeBlock): update to use getByText

* PR feedback from Eric and Titani

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(<CodeBlock>test text</CodeBlock>);
-  expect(asFragment()).toMatchSnapshot();
+test('CodeBlock renders', () => {
+  render(<CodeBlock>test text</CodeBlock>);
+  expect(screen.getByText('test text')).toBeVisible();
 });
 
-test('CodeBlockAction renders successfully', () => {
-  const { asFragment } = render(<CodeBlockAction>action</CodeBlockAction>);
-  expect(asFragment()).toMatchSnapshot();
-});
+test(`CodeBlock content renders with class ${styles.codeBlockContent} by default`, () => {
+  render(<CodeBlock>Test</CodeBlock>);
 
-test('CodeBlockCode renders successfully', () => {
-  const { asFragment } = render(<CodeBlockCode>action</CodeBlockCode>);
-  expect(asFragment()).toMatchSnapshot();
+  expect(screen.getByText('Test')).toHaveClass(styles.codeBlockContent);
 });
 
-test('CodeBlock with components renders successfully', () => {
-  const { asFragment } = render(
-    <CodeBlock actions={<CodeBlockAction>button</CodeBlockAction>}>
-      <CodeBlockCode>inside pre/code tags</CodeBlockCode>
-      test outer text
+test('CodeBlock renders with custom class', () => {
+  render(
+    <CodeBlock data-testid="code-block" className="tester">
+      Test
     </CodeBlock>
   );
+
+  expect(screen.getByTestId('code-block')).toHaveClass('tester');
+});
+
+test('Renders when actions are passed to CodeBlock', () => {
+  render(<CodeBlock actions={<div>actions</div>} />);
+  expect(screen.getByText('actions')).toBeVisible();
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CodeBlock actions={<div>actions</div>}>children</CodeBlock>);
   expect(asFragment()).toMatchSnapshot();
 });

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(<CodeBlockAction>action</CodeBlockAction>);
+  expect(screen.getByText('action')).toBeVisible();
+});
+
+test(`CodeBlockAction renders with class ${styles.codeBlockActions}-item by default`, () => {
+  render(<CodeBlockAction>Test</CodeBlockAction>);
+
+  expect(screen.getByText('Test')).toHaveClass(`${styles.codeBlockActions}-item`);
+});
+
+test('CodeBlockAction renders with custom class', () => {
+  render(<CodeBlockAction className="tester">Test</CodeBlockAction>);
+
+  expect(screen.getByText('Test')).toHaveClass('tester');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CodeBlockAction>children</CodeBlockAction>);
+  expect(asFragment()).toMatchSnapshot();
+});

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(<CodeBlockCode>action</CodeBlockCode>);
+  expect(screen.getByText('action')).toBeVisible();
+});
+
+test(`Renders with class ${styles.codeBlockPre} by default`, () => {
+  render(
+    <CodeBlockCode data-testid="code-block-code" className="test">
+      Test
+    </CodeBlockCode>
+  );
+
+  expect(screen.getByTestId('code-block-code')).toHaveClass(`${styles.codeBlockPre} test`);
+});
+
+test(`Renders with class ${styles.codeBlockCode} by default`, () => {
+  render(<CodeBlockCode>Test</CodeBlockCode>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.codeBlockCode);
+});
+
+test('Renders with custom class', () => {
+  render(<CodeBlockCode codeClassName="tester">Test</CodeBlockCode>);
+
+  expect(screen.getByText('Test')).toHaveClass('tester');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CodeBlockCode>children</CodeBlockCode>);
+  expect(asFragment()).toMatchSnapshot();
+});

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`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-code-block"
-  >
-    <div
-      class="pf-v5-c-code-block__content"
-    >
-      test text
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`CodeBlock with components renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-code-block"
@@ -25,51 +11,16 @@ exports[`CodeBlock with components renders successfully 1`] = `
       <div
         class="pf-v5-c-code-block__actions"
       >
-        <div
-          class="pf-v5-c-code-block__actions-item"
-        >
-          button
+        <div>
+          actions
         </div>
       </div>
     </div>
     <div
       class="pf-v5-c-code-block__content"
     >
-      <pre
-        class="pf-v5-c-code-block__pre"
-      >
-        <code
-          class="pf-v5-c-code-block__code"
-        >
-          inside pre/code tags
-        </code>
-      </pre>
-      test outer text
+      children
     </div>
   </div>
 </DocumentFragment>
 `;
-
-exports[`CodeBlockAction renders successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-code-block__actions-item"
-  >
-    action
-  </div>
-</DocumentFragment>
-`;
-
-exports[`CodeBlockCode renders successfully 1`] = `
-<DocumentFragment>
-  <pre
-    class="pf-v5-c-code-block__pre"
-  >
-    <code
-      class="pf-v5-c-code-block__code"
-    >
-      action
-    </code>
-  </pre>
-</DocumentFragment>
-`;

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`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-code-block__actions-item"
+  >
+    children
+  </div>
+</DocumentFragment>
+`;

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`] = `
+<DocumentFragment>
+  <pre
+    class="pf-v5-c-code-block__pre"
+  >
+    <code
+      class="pf-v5-c-code-block__code"
+    >
+      children
+    </code>
+  </pre>
+</DocumentFragment>
+`;