chore(Title): update tests to new RTL standards (#8156)

* chore(Title): update tests to new RTL standards * chore(Title): update tests to new RTL standards * chore(Title): update tests to new RTL standards Co-authored-by: Drew Amunategui II <[email protected]> Co-authored-by: Drew Amunategui II <[email protected]>
patternfly · Oct 12, 2022 · f887232 · f887232
1 parent 8cea2e5
commit f887232
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 91 deletions.
diff --git a/packages/react-core/src/components/Title/__tests__/Title.test.tsx b/packages/react-core/src/components/Title/__tests__/Title.test.tsx
@@ -1,25 +1,159 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Title, TitleSizes } from '..';
-
-describe('Title', () => {
-  Object.values(TitleSizes).forEach(size => {
-    test(`${size} Title`, () => {
-      const { asFragment } = render(
-        <Title size={size} headingLevel="h1">
-          {size} Title
-        </Title>
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
-
-  test('Heading level can be set using a string value', () => {
-    render(
-      <Title size="lg" headingLevel="h3">
-        H3 Heading
-      </Title>
-    );
-    expect(screen.getByRole('heading').parentElement.querySelector('h3')).toBeInTheDocument();
-  });
+import { Title } from '../Title';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="title">
+      <Title headingLevel="h1" />
+    </div>
+  );
+  expect(screen.getByTestId('title').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Title headingLevel="h1">Test</Title>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the pf-c-title', () => {
+  render(<Title headingLevel="h1">Test</Title>);
+  expect(screen.getByRole('heading')).toHaveClass('pf-c-title');
+});
+
+test('Renders with only the class pf-c-title and the heading level modifier class pf-m-2xl by default', () => {
+  render(<Title headingLevel="h1">Test</Title>);
+  expect(screen.getByRole('heading')).toHaveClass('pf-c-title pf-m-2xl', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(
+    <Title headingLevel="h1" className="test-class">
+      Test
+    </Title>
+  );
+  expect(screen.getByRole('heading')).toHaveClass('test-class');
+});
+
+test('Renders with class name pf-m-2xl by default when "h1" is passed as heading level', () => {
+  render(<Title headingLevel="h1">Test</Title>);
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl');
+});
+
+test('Renders with class name pf-m-xl by default when "h2" is passed as heading level', () => {
+  render(<Title headingLevel="h2">Test</Title>);
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-xl');
+});
+
+test('Renders with class name pf-m-lg by default when "h3" is passed as heading level', () => {
+  render(<Title headingLevel="h3">Test</Title>);
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-lg');
+});
+
+test('Renders with class name pf-m-md by default when "h4" is passed as heading level', () => {
+  render(<Title headingLevel="h4">Test</Title>);
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
+});
+
+test('Renders with class name pf-m-md by default when "h5" is passed as heading level', () => {
+  render(<Title headingLevel="h5">Test</Title>);
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
+});
+
+test('Renders with class name pf-m-md by default when "h6" is passed as heading level', () => {
+  render(<Title headingLevel="h6">Test</Title>);
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
+});
+
+test('Renders with class name pf-m-md when "md" is passed as title size', () => {
+  render(
+    <Title headingLevel="h1" size="md">
+      Test
+    </Title>
+  );
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
+});
+
+test('Renders with class name pf-m-lg when "lg" is passed as title size', () => {
+  render(
+    <Title headingLevel="h1" size="lg">
+      Test
+    </Title>
+  );
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-lg');
+});
+
+test('Renders with class name pf-m-xl when "xl" is passed as title size', () => {
+  render(
+    <Title headingLevel="h1" size="xl">
+      Test
+    </Title>
+  );
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-xl');
+});
+
+test('Renders with class name pf-m-2xl when "2xl" is passed as title size', () => {
+  render(
+    <Title headingLevel="h1" size="2xl">
+      Test
+    </Title>
+  );
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl');
+});
+
+test('Renders with class name pf-m-3xl when "3xl" is passed as title size', () => {
+  render(
+    <Title headingLevel="h1" size="3xl">
+      Test
+    </Title>
+  );
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-3xl');
+});
+
+test('Renders with class name pf-m-4xl when "4xl" is passed as title size', () => {
+  render(
+    <Title headingLevel="h1" size="4xl">
+      Test
+    </Title>
+  );
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-4xl');
+});
+
+test('Renders with tag name "h1" when "h1" is passed as heading level', () => {
+  render(<Title headingLevel="h1">Test</Title>);
+  expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
+});
+
+test('Renders with tag name "h2" when "h2" is passed as heading level', () => {
+  render(<Title headingLevel="h2">Test</Title>);
+  expect(screen.getByRole('heading', { level: 2 })).toBeVisible();
+});
+
+test('Renders with tag name "h3" when "h3" is passed as heading level', () => {
+  render(<Title headingLevel="h3">Test</Title>);
+  expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
+});
+
+test('Renders with tag name "h4" when "h4" is passed as heading level', () => {
+  render(<Title headingLevel="h4">Test</Title>);
+  expect(screen.getByRole('heading', { level: 4 })).toBeVisible();
+});
+
+test('Renders with tag name "h5" when "h5" is passed as heading level', () => {
+  render(<Title headingLevel="h5">Test</Title>);
+  expect(screen.getByRole('heading', { level: 5 })).toBeVisible();
+});
+
+test('Renders with tag name "h6" when "h6" is passed as heading level', () => {
+  render(<Title headingLevel="h6">Test</Title>);
+  expect(screen.getByRole('heading', { level: 6 })).toBeVisible();
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <Title data-ouia-component-id="ouia-id" headingLevel="h1">
+      Test
+    </Title>
+  );
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap b/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap
@@ -1,79 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Title 2xl Title 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <h1
     class="pf-c-title pf-m-2xl"
-    data-ouia-component-id="OUIA-Generated-Title-4"
+    data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF4/Title"
     data-ouia-safe="true"
   >
-    2xl Title
+    Test
   </h1>
 </DocumentFragment>
-`;
-
-exports[`Title 3xl Title 1`] = `
-<DocumentFragment>
-  <h1
-    class="pf-c-title pf-m-3xl"
-    data-ouia-component-id="OUIA-Generated-Title-5"
-    data-ouia-component-type="PF4/Title"
-    data-ouia-safe="true"
-  >
-    3xl Title
-  </h1>
-</DocumentFragment>
-`;
-
-exports[`Title 4xl Title 1`] = `
-<DocumentFragment>
-  <h1
-    class="pf-c-title pf-m-4xl"
-    data-ouia-component-id="OUIA-Generated-Title-6"
-    data-ouia-component-type="PF4/Title"
-    data-ouia-safe="true"
-  >
-    4xl Title
-  </h1>
-</DocumentFragment>
-`;
-
-exports[`Title lg Title 1`] = `
-<DocumentFragment>
-  <h1
-    class="pf-c-title pf-m-lg"
-    data-ouia-component-id="OUIA-Generated-Title-2"
-    data-ouia-component-type="PF4/Title"
-    data-ouia-safe="true"
-  >
-    lg Title
-  </h1>
-</DocumentFragment>
-`;
-
-exports[`Title md Title 1`] = `
-<DocumentFragment>
-  <h1
-    class="pf-c-title pf-m-md"
-    data-ouia-component-id="OUIA-Generated-Title-1"
-    data-ouia-component-type="PF4/Title"
-    data-ouia-safe="true"
-  >
-    md Title
-  </h1>
-</DocumentFragment>
-`;
-
-exports[`Title xl Title 1`] = `
-<DocumentFragment>
-  <h1
-    class="pf-c-title pf-m-xl"
-    data-ouia-component-id="OUIA-Generated-Title-3"
-    data-ouia-component-type="PF4/Title"
-    data-ouia-safe="true"
-  >
-    xl Title
-  </h1>
-</DocumentFragment>
-`;
+`;