From 5f3120b45dc5deb851e87b3375d5dce33d9e45b8 Mon Sep 17 00:00:00 2001
From: Drew Amunategui II <drewamunateguiii@drews-mbp.acasmart.jh.edu>
Date: Tue, 4 Oct 2022 14:44:48 -0400
Subject: [PATCH 1/3] chore(Title): update tests to new RTL standards

---
 .../components/Title/__tests__/Title.test.tsx | 111 ++++++++++++++----
 .../__snapshots__/Title.test.tsx.snap         |  73 +-----------
 2 files changed, 93 insertions(+), 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
index 4e6160c52f1..9ae3eb643f1 100644
--- 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,92 @@
 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 without any modifier class when size props are not passed', () => {
+  render(<Title headingLevel='h1'>Test</Title>);
+  expect(screen.getByRole('heading')).toHaveClass('pf-c-title');
+});
+
+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('Matches the snapshot', () => {
+  const { asFragment } = render(<Title headingLevel='h1'>Test</Title>);
+  expect(asFragment()).toMatchSnapshot();
+});
\ No newline at end of file
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
index 22d6b37c393..bd43c82e901 100644
--- 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-Generated-Title-17"
     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>
-`;
+`;
\ No newline at end of file

From a8e131641087c82668a0e7e9f4dd97751387f092 Mon Sep 17 00:00:00 2001
From: Drew Amunategui II <drewamunateguiii@Drews-MacBook-Pro.local>
Date: Tue, 4 Oct 2022 17:39:58 -0400
Subject: [PATCH 2/3] chore(Title): update tests to new RTL standards

---
 .../components/Title/__tests__/Title.test.tsx | 30 +++++++++++++++++++
 .../__snapshots__/Title.test.tsx.snap         |  2 +-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Title/__tests__/Title.test.tsx b/packages/react-core/src/components/Title/__tests__/Title.test.tsx
index 9ae3eb643f1..c25254ea8a0 100644
--- a/packages/react-core/src/components/Title/__tests__/Title.test.tsx
+++ b/packages/react-core/src/components/Title/__tests__/Title.test.tsx
@@ -86,6 +86,36 @@ test('Renders with class name pf-m-4xl when "4xl" is passed as title size', () =
   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 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
index bd43c82e901..b6db603068b 100644
--- 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
@@ -4,7 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <h1
     class="pf-c-title pf-m-2xl"
-    data-ouia-component-id="OUIA-Generated-Title-17"
+    data-ouia-component-id="OUIA-Generated-Title-23"
     data-ouia-component-type="PF4/Title"
     data-ouia-safe="true"
   >

From a2e736eb5c4fccd89545115ad077127b215642c8 Mon Sep 17 00:00:00 2001
From: Drew Amunategui II <drewamunateguiii@Drews-MacBook-Pro.local>
Date: Thu, 6 Oct 2022 13:19:14 -0400
Subject: [PATCH 3/3] chore(Title): update tests to new RTL standards

---
 .../components/Title/__tests__/Title.test.tsx | 99 +++++++++++++------
 .../__snapshots__/Title.test.tsx.snap         |  2 +-
 2 files changed, 69 insertions(+), 32 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
index c25254ea8a0..ea2ca674758 100644
--- a/packages/react-core/src/components/Title/__tests__/Title.test.tsx
+++ b/packages/react-core/src/components/Title/__tests__/Title.test.tsx
@@ -5,118 +5,155 @@ import { Title } from '../Title';
 test('Renders without children', () => {
   render(
     <div data-testid="title">
-      <Title headingLevel='h1'/>
+      <Title headingLevel="h1" />
     </div>
   );
   expect(screen.getByTestId('title').firstChild).toBeVisible();
 });
 
 test('Renders children', () => {
-  render(<Title headingLevel='h1'>Test</Title>);
+  render(<Title headingLevel="h1">Test</Title>);
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders without any modifier class when size props are not passed', () => {
-  render(<Title headingLevel='h1'>Test</Title>);
+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>);
+  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>);
+  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>);
+  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>);
+  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>);
+  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>);
+  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>);
+  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>);
+  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>);
+  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>);
+  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>);
+  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>);
+  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>);
+  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();
+  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();
+  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();
+  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();
+  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();
+  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();
+  render(<Title headingLevel="h6">Test</Title>);
+  expect(screen.getByRole('heading', { level: 6 })).toBeVisible();
 });
 
 test('Matches the snapshot', () => {
-  const { asFragment } = render(<Title headingLevel='h1'>Test</Title>);
+  const { asFragment } = render(
+    <Title data-ouia-component-id="ouia-id" headingLevel="h1">
+      Test
+    </Title>
+  );
   expect(asFragment()).toMatchSnapshot();
-});
\ No newline at end of file
+});
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
index b6db603068b..8f68dec74c5 100644
--- 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
@@ -4,7 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <h1
     class="pf-c-title pf-m-2xl"
-    data-ouia-component-id="OUIA-Generated-Title-23"
+    data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF4/Title"
     data-ouia-safe="true"
   >