From 3c182a324f236ea2cd7a16a22729b6850c4d0666 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 16 Oct 2023 11:39:42 -0400
Subject: [PATCH 1/4] chore(DescriptionList): update tests

---
 .../__tests__/DescriptionList.test.tsx        | 319 +++++++++++-------
 .../DescriptionList.test.tsx.snap             | 139 ++------
 2 files changed, 218 insertions(+), 240 deletions(-)

diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
index 22431afd832..4587be102a0 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { DescriptionList } from '../DescriptionList';
 import { DescriptionListGroup } from '../DescriptionListGroup';
 import { DescriptionListTerm } from '../DescriptionListTerm';
@@ -7,124 +7,201 @@ import { DescriptionListDescription } from '../DescriptionListDescription';
 import { DescriptionListTermHelpText } from '../DescriptionListTermHelpText';
 import { DescriptionListTermHelpTextButton } from '../DescriptionListTermHelpTextButton';
 
-describe('Description List', () => {
-  test('default', () => {
-    const { asFragment } = render(<DescriptionList />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('1 col on all breakpoints', () => {
-    const { asFragment } = render(
-      <DescriptionList columnModifier={{ default: '1Col', md: '1Col', lg: '1Col', xl: '1Col', '2xl': '1Col' }} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('2 col on all breakpoints', () => {
-    const { asFragment } = render(
-      <DescriptionList columnModifier={{ default: '2Col', md: '2Col', lg: '2Col', xl: '2Col', '2xl': '2Col' }} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('3 col on all breakpoints', () => {
-    const { asFragment } = render(
-      <DescriptionList columnModifier={{ default: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Horizontal Description List', () => {
-    const { asFragment } = render(<DescriptionList isHorizontal />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Compact Description List', () => {
-    const { asFragment } = render(<DescriptionList isCompact />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Compact Horizontal Description List', () => {
-    const { asFragment } = render(<DescriptionList isCompact isHorizontal />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Fluid Horizontal Description List', () => {
-    const { asFragment } = render(<DescriptionList isFluid isHorizontal />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('alignment breakpoints', () => {
-    const { asFragment } = render(
-      <DescriptionList
-        isHorizontal
-        orientation={{
-          sm: 'horizontal',
-          md: 'vertical',
-          lg: 'horizontal',
-          xl: 'vertical',
-          '2xl': 'horizontal'
-        }}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Auto Column Widths Description List', () => {
-    const { asFragment } = render(<DescriptionList isAutoColumnWidths />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Inline Grid Description List', () => {
-    const { asFragment } = render(<DescriptionList isInlineGrid />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Auto fit Description List', () => {
-    const { asFragment } = render(<DescriptionList isAutoFit />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Auto fit with responsive grid Description List', () => {
-    const { asFragment } = render(
-      <DescriptionList isAutoFit autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Term default', () => {
-    const { asFragment } = render(
-      <DescriptionListTerm key="term-id-1" aria-labelledby="term-1">
-        test
-      </DescriptionListTerm>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Term helper text', () => {
-    const { asFragment } = render(
-      <DescriptionListTermHelpText key="term-id-1" aria-labelledby="term-1">
-        <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>
-      </DescriptionListTermHelpText>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Group', () => {
-    const { asFragment } = render(
-      <DescriptionListGroup className="custom-description-list-group" aria-labelledby="group-1">
-        test
-      </DescriptionListGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Description', () => {
-    const { asFragment } = render(
-      <DescriptionListDescription className="custom-description-list-description" aria-labelledby="description-1">
-        test
-      </DescriptionListDescription>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
+
+test('renders to match snapshot', () => {
+  const { asFragment } = render(<DescriptionList aria-label="list" />);
+  expect(screen.getByLabelText('list')).toBeInTheDocument();
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('renders custom className', () => {
+  render(<DescriptionList aria-label="list" className="custom" />);
+  expect(screen.getByLabelText('list')).toHaveClass('custom');
+});
+
+test('renders 1Col on all breakpoints', () => {
+  render(
+    <DescriptionList
+      aria-label="list"
+      columnModifier={{ default: '1Col', sm: '1Col', md: '1Col', lg: '1Col', xl: '1Col', '2xl': '1Col' }}
+    />
+  );
+  expect(screen.getByLabelText('list')).toHaveClass(
+    styles.modifiers['1Col'],
+    styles.modifiers['1ColOnSm'],
+    styles.modifiers['1ColOnMd'],
+    styles.modifiers['1ColOnLg'],
+    styles.modifiers['1ColOnXl'],
+    styles.modifiers['1ColOn_2xl']
+  );
+});
+
+test('renders 2Col on all breakpoints', () => {
+  render(
+    <DescriptionList
+      aria-label="list"
+      columnModifier={{ default: '2Col', sm: '2Col', md: '2Col', lg: '2Col', xl: '2Col', '2xl': '2Col' }}
+    />
+  );
+  expect(screen.getByLabelText('list')).toHaveClass(
+    styles.modifiers['2Col'],
+    styles.modifiers['2ColOnSm'],
+    styles.modifiers['2ColOnMd'],
+    styles.modifiers['2ColOnLg'],
+    styles.modifiers['2ColOnXl'],
+    styles.modifiers['2ColOn_2xl']
+  );
+});
+
+test('renders 3Col on all breakpoints', () => {
+  render(
+    <DescriptionList
+      aria-label="list"
+      columnModifier={{ default: '3Col', sm: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }}
+    />
+  );
+  expect(screen.getByLabelText('list')).toHaveClass(
+    styles.modifiers['3Col'],
+    styles.modifiers['3ColOnSm'],
+    styles.modifiers['3ColOnMd'],
+    styles.modifiers['3ColOnLg'],
+    styles.modifiers['3ColOnXl'],
+    styles.modifiers['3ColOn_2xl']
+  );
+});
+
+test(`renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => {
+  render(<DescriptionList aria-label="list" isHorizontal />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.horizontal);
+});
+
+test(`renders ${styles.modifiers.compact} when isCompact = true`, () => {
+  render(<DescriptionList aria-label="list" isCompact />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
+});
+
+test(`renders ${styles.modifiers.horizontal} and ${styles.modifiers.fluid} when isFluid = true`, () => {
+  render(<DescriptionList aria-label="list" isFluid />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fluid, styles.modifiers.horizontal);
+});
+
+test('renders alignment breakpoints', () => {
+  render(
+    <DescriptionList
+      aria-label="list"
+      isHorizontal
+      orientation={{
+        sm: 'horizontal',
+        md: 'vertical',
+        lg: 'horizontal',
+        xl: 'vertical',
+        '2xl': 'horizontal'
+      }}
+    />
+  );
+  expect(screen.getByLabelText('list')).toHaveClass(
+    styles.modifiers.horizontal,
+    styles.modifiers.horizontalOnSm,
+    styles.modifiers.verticalOnMd,
+    styles.modifiers.horizontalOnLg,
+    styles.modifiers.verticalOnXl,
+    styles.modifiers.horizontalOn_2xl
+  );
+});
+
+test(`renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => {
+  render(<DescriptionList aria-label="list" isAutoColumnWidths />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoColumnWidths);
+});
+
+test(`renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => {
+  render(<DescriptionList aria-label="list" isInlineGrid />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.inlineGrid);
+});
+
+test(`renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => {
+  render(<DescriptionList aria-label="list" isAutoFit />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoFit);
+});
+
+test(`renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => {
+  render(<DescriptionList aria-label="list" isFillColumns />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fillColumns);
+});
+
+test(`renders ${styles.modifiers.displayLg} when displaySize = lg`, () => {
+  render(<DescriptionList aria-label="list" displaySize="lg" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.displayLg);
+});
+
+test(`renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => {
+  render(<DescriptionList aria-label="list" displaySize="2xl" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl);
+});
+
+test('DescriptionListTerm renders to match snapshot', () => {
+  const { asFragment } = render(
+    <DescriptionListTerm key="term-id-1" aria-labelledby="term-1">
+      test
+    </DescriptionListTerm>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('DescriptionListTerm renders custom className', () => {
+  render(<DescriptionListTerm className="custom">test</DescriptionListTerm>);
+  expect(screen.getByText('test').parentElement).toHaveClass('custom');
+});
+
+test('DescriptionListTerm renders icon', () => {
+  render(<DescriptionListTerm icon={<div>icon</div>}>test</DescriptionListTerm>);
+  expect(screen.getByText('icon').parentElement).toHaveClass(styles.descriptionListTermIcon);
+});
+
+test('DescriptioinListTermHelpText renders to match snapshot', () => {
+  const { asFragment } = render(
+    <DescriptionListTermHelpText>
+      <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>
+    </DescriptionListTermHelpText>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('DescriptioinListTermHelpText renders custom className', () => {
+  render(
+    <DescriptionListTermHelpText className="custom" aria-label="help-text">
+      <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>
+    </DescriptionListTermHelpText>
+  );
+  expect(screen.getByLabelText('help-text')).toHaveClass('custom');
+});
+
+test('DescriptioinListTermHelpTextButton renders custom className', () => {
+  render(
+    <DescriptionListTermHelpText>
+      <DescriptionListTermHelpTextButton className="custom">test</DescriptionListTermHelpTextButton>
+    </DescriptionListTermHelpText>
+  );
+  expect(screen.getByText('test')).toHaveClass('custom');
+});
+
+test('DescriptionListGroup renders to match snapshot', () => {
+  const { asFragment } = render(<DescriptionListGroup>test</DescriptionListGroup>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('DescriptionListGroup renders custom className', () => {
+  render(<DescriptionListGroup className="custom">test</DescriptionListGroup>);
+  expect(screen.getByText('test')).toHaveClass('custom');
+});
+
+test('DescriptionListDescription renders to match snapshot', () => {
+  const { asFragment } = render(<DescriptionListDescription>test</DescriptionListDescription>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('DescriptionListDescription renders custom className', () => {
+  render(<DescriptionListDescription className="custom">test</DescriptionListDescription>);
+  expect(screen.getByText('test').parentElement).toHaveClass('custom');
 });
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
index b9bde9f6974..b9943761789 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
+++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
@@ -1,75 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Description List 1 col on all breakpoints 1`] = `
+exports[`DescriptioinListTermHelpText renders to match snapshot 1`] = `
 <DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-1-col pf-m-1-col-on-md pf-m-1-col-on-lg pf-m-1-col-on-xl pf-m-1-col-on-2xl"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List 2 col on all breakpoints 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-2-col pf-m-2-col-on-md pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-2-col-on-2xl"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List 3 col on all breakpoints 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-3-col pf-m-3-col-on-md pf-m-3-col-on-lg pf-m-3-col-on-xl pf-m-3-col-on-2xl"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List Auto Column Widths Description List 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-auto-column-widths"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List Auto fit Description List 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-auto-fit"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List Auto fit with responsive grid Description List 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-auto-fit"
-    style="--pf-v5-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v5-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v5-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v5-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List Compact Description List 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-compact"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List Compact Horizontal Description List 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-horizontal pf-m-compact"
-  />
+  <dt
+    class="pf-v5-c-description-list__term"
+  >
+    <span
+      class="pf-v5-c-description-list__text pf-m-help-text"
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      test
+    </span>
+  </dt>
 </DocumentFragment>
 `;
 
-exports[`Description List Description 1`] = `
+exports[`DescriptionListDescription renders to match snapshot 1`] = `
 <DocumentFragment>
   <dd
-    aria-labelledby="description-1"
-    class="pf-v5-c-description-list__description custom-description-list-description"
+    class="pf-v5-c-description-list__description"
   >
     <div
       class="pf-v5-c-description-list__text"
@@ -80,42 +31,17 @@ exports[`Description List Description 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Description List Fluid Horizontal Description List 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-horizontal pf-m-fluid"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List Group 1`] = `
+exports[`DescriptionListGroup renders to match snapshot 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="group-1"
-    class="pf-v5-c-description-list__group custom-description-list-group"
+    class="pf-v5-c-description-list__group"
   >
     test
   </div>
 </DocumentFragment>
 `;
 
-exports[`Description List Horizontal Description List 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-horizontal"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List Inline Grid Description List 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-inline-grid"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List Term default 1`] = `
+exports[`DescriptionListTerm renders to match snapshot 1`] = `
 <DocumentFragment>
   <dt
     aria-labelledby="term-1"
@@ -130,35 +56,10 @@ exports[`Description List Term default 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Description List Term helper text 1`] = `
-<DocumentFragment>
-  <dt
-    aria-labelledby="term-1"
-    class="pf-v5-c-description-list__term"
-  >
-    <span
-      class="pf-v5-c-description-list__text pf-m-help-text"
-      role="button"
-      tabindex="0"
-      type="button"
-    >
-      test
-    </span>
-  </dt>
-</DocumentFragment>
-`;
-
-exports[`Description List alignment breakpoints 1`] = `
-<DocumentFragment>
-  <dl
-    class="pf-v5-c-description-list pf-m-horizontal pf-m-horizontal-on-sm pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List default 1`] = `
+exports[`renders to match snapshot 1`] = `
 <DocumentFragment>
   <dl
+    aria-label="list"
     class="pf-v5-c-description-list"
   />
 </DocumentFragment>

From 612ae5f874fd7db096d38d263832d143a62551d1 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 24 Oct 2023 11:18:49 -0400
Subject: [PATCH 2/4] break out tests, pr feedback

---
 .../__tests__/DescriptionList.test.tsx        | 221 +++++-------------
 .../DescriptionListDescription.test.tsx       |  20 ++
 .../__tests__/DescriptionListGroup.test.tsx   |  20 ++
 .../DescriptionListHelpText.test.tsx          |  20 ++
 .../DescriptionListHelpTextButton.test.tsx    |  20 ++
 .../__tests__/DescriptionListTerm.test.tsx    |  30 +++
 .../DescriptionList.test.tsx.snap             |  59 +----
 .../DescriptionListDescription.test.tsx.snap  |  15 ++
 .../DescriptionListGroup.test.tsx.snap        |  11 +
 .../DescriptionListHelpText.test.tsx.snap     |  11 +
 ...escriptionListHelpTextButton.test.tsx.snap |  14 ++
 .../DescriptionListTerm.test.tsx.snap         |  15 ++
 12 files changed, 239 insertions(+), 217 deletions(-)
 create mode 100644 packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx
 create mode 100644 packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx
 create mode 100644 packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpText.test.tsx
 create mode 100644 packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx
 create mode 100644 packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx
 create mode 100644 packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListDescription.test.tsx.snap
 create mode 100644 packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListGroup.test.tsx.snap
 create mode 100644 packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpText.test.tsx.snap
 create mode 100644 packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpTextButton.test.tsx.snap
 create mode 100644 packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTerm.test.tsx.snap

diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
index 4587be102a0..e424d38c728 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
@@ -1,207 +1,110 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { DescriptionList } from '../DescriptionList';
-import { DescriptionListGroup } from '../DescriptionListGroup';
-import { DescriptionListTerm } from '../DescriptionListTerm';
-import { DescriptionListDescription } from '../DescriptionListDescription';
-import { DescriptionListTermHelpText } from '../DescriptionListTermHelpText';
-import { DescriptionListTermHelpTextButton } from '../DescriptionListTermHelpTextButton';
 
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 
-test('renders to match snapshot', () => {
-  const { asFragment } = render(<DescriptionList aria-label="list" />);
-  expect(screen.getByLabelText('list')).toBeInTheDocument();
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DescriptionList />);
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('renders custom className', () => {
-  render(<DescriptionList aria-label="list" className="custom" />);
-  expect(screen.getByLabelText('list')).toHaveClass('custom');
+test(`Renders default class ${styles.descriptionList}`, () => {
+  render(<DescriptionList aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.descriptionList);
 });
 
-test('renders 1Col on all breakpoints', () => {
-  render(
-    <DescriptionList
-      aria-label="list"
-      columnModifier={{ default: '1Col', sm: '1Col', md: '1Col', lg: '1Col', xl: '1Col', '2xl': '1Col' }}
-    />
-  );
-  expect(screen.getByLabelText('list')).toHaveClass(
-    styles.modifiers['1Col'],
-    styles.modifiers['1ColOnSm'],
-    styles.modifiers['1ColOnMd'],
-    styles.modifiers['1ColOnLg'],
-    styles.modifiers['1ColOnXl'],
-    styles.modifiers['1ColOn_2xl']
-  );
-});
-
-test('renders 2Col on all breakpoints', () => {
-  render(
-    <DescriptionList
-      aria-label="list"
-      columnModifier={{ default: '2Col', sm: '2Col', md: '2Col', lg: '2Col', xl: '2Col', '2xl': '2Col' }}
-    />
-  );
-  expect(screen.getByLabelText('list')).toHaveClass(
-    styles.modifiers['2Col'],
-    styles.modifiers['2ColOnSm'],
-    styles.modifiers['2ColOnMd'],
-    styles.modifiers['2ColOnLg'],
-    styles.modifiers['2ColOnXl'],
-    styles.modifiers['2ColOn_2xl']
-  );
-});
-
-test('renders 3Col on all breakpoints', () => {
-  render(
-    <DescriptionList
-      aria-label="list"
-      columnModifier={{ default: '3Col', sm: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }}
-    />
-  );
-  expect(screen.getByLabelText('list')).toHaveClass(
-    styles.modifiers['3Col'],
-    styles.modifiers['3ColOnSm'],
-    styles.modifiers['3ColOnMd'],
-    styles.modifiers['3ColOnLg'],
-    styles.modifiers['3ColOnXl'],
-    styles.modifiers['3ColOn_2xl']
-  );
+test('Renders custom className', () => {
+  render(<DescriptionList aria-label="list" className="custom" />);
+  expect(screen.getByLabelText('list')).toHaveClass('custom');
 });
 
-test(`renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => {
+Object.values(['1Col', '2Col', '3Col']).forEach((_col) => {
+  const col = _col as '1Col' | '2Col' | '3Col';
+  test(`Renders ${col} on all breakpoints`, () => {
+    render(
+      <DescriptionList
+        aria-label="list"
+        columnModifier={{ default: col, sm: col, md: col, lg: col, xl: col, '2xl': col }}
+      />
+    );
+    expect(screen.getByLabelText('list')).toHaveClass(
+      styles.modifiers[col],
+      styles.modifiers[`${col}OnSm`],
+      styles.modifiers[`${col}OnMd`],
+      styles.modifiers[`${col}OnLg`],
+      styles.modifiers[`${col}OnXl`],
+      styles.modifiers[`${col}On_2xl`]
+    );
+  });
+});
+
+test(`Renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => {
   render(<DescriptionList aria-label="list" isHorizontal />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.horizontal);
 });
 
-test(`renders ${styles.modifiers.compact} when isCompact = true`, () => {
+test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => {
   render(<DescriptionList aria-label="list" isCompact />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
 });
 
-test(`renders ${styles.modifiers.horizontal} and ${styles.modifiers.fluid} when isFluid = true`, () => {
+test(`Renders ${styles.modifiers.horizontal} and ${styles.modifiers.fluid} when isFluid = true`, () => {
   render(<DescriptionList aria-label="list" isFluid />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fluid, styles.modifiers.horizontal);
 });
 
-test('renders alignment breakpoints', () => {
-  render(
-    <DescriptionList
-      aria-label="list"
-      isHorizontal
-      orientation={{
-        sm: 'horizontal',
-        md: 'vertical',
-        lg: 'horizontal',
-        xl: 'vertical',
-        '2xl': 'horizontal'
-      }}
-    />
-  );
-  expect(screen.getByLabelText('list')).toHaveClass(
-    styles.modifiers.horizontal,
-    styles.modifiers.horizontalOnSm,
-    styles.modifiers.verticalOnMd,
-    styles.modifiers.horizontalOnLg,
-    styles.modifiers.verticalOnXl,
-    styles.modifiers.horizontalOn_2xl
-  );
-});
-
-test(`renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => {
+Object.values(['horizontal', 'vertical']).forEach((_align) => {
+  const align = _align as 'horizontal' | 'vertical';
+  test(`Renders ${align} on all breakpoints`, () => {
+    render(
+      <DescriptionList
+        aria-label="list"
+        orientation={{
+          sm: align,
+          md: align,
+          lg: align,
+          xl: align,
+          '2xl': align
+        }}
+      />
+    );
+    expect(screen.getByLabelText('list')).toHaveClass(
+      styles.modifiers[`${align}OnSm`],
+      styles.modifiers[`${align}OnMd`],
+      styles.modifiers[`${align}OnLg`],
+      styles.modifiers[`${align}OnXl`],
+      styles.modifiers[`${align}On_2xl`]
+    );
+  });
+});
+
+test(`Renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => {
   render(<DescriptionList aria-label="list" isAutoColumnWidths />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoColumnWidths);
 });
 
-test(`renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => {
+test(`Renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => {
   render(<DescriptionList aria-label="list" isInlineGrid />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.inlineGrid);
 });
 
-test(`renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => {
+test(`Renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => {
   render(<DescriptionList aria-label="list" isAutoFit />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoFit);
 });
 
-test(`renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => {
+test(`Renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => {
   render(<DescriptionList aria-label="list" isFillColumns />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fillColumns);
 });
 
-test(`renders ${styles.modifiers.displayLg} when displaySize = lg`, () => {
+test(`Renders ${styles.modifiers.displayLg} when displaySize = lg`, () => {
   render(<DescriptionList aria-label="list" displaySize="lg" />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.displayLg);
 });
 
-test(`renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => {
+test(`Renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => {
   render(<DescriptionList aria-label="list" displaySize="2xl" />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl);
 });
-
-test('DescriptionListTerm renders to match snapshot', () => {
-  const { asFragment } = render(
-    <DescriptionListTerm key="term-id-1" aria-labelledby="term-1">
-      test
-    </DescriptionListTerm>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('DescriptionListTerm renders custom className', () => {
-  render(<DescriptionListTerm className="custom">test</DescriptionListTerm>);
-  expect(screen.getByText('test').parentElement).toHaveClass('custom');
-});
-
-test('DescriptionListTerm renders icon', () => {
-  render(<DescriptionListTerm icon={<div>icon</div>}>test</DescriptionListTerm>);
-  expect(screen.getByText('icon').parentElement).toHaveClass(styles.descriptionListTermIcon);
-});
-
-test('DescriptioinListTermHelpText renders to match snapshot', () => {
-  const { asFragment } = render(
-    <DescriptionListTermHelpText>
-      <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>
-    </DescriptionListTermHelpText>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('DescriptioinListTermHelpText renders custom className', () => {
-  render(
-    <DescriptionListTermHelpText className="custom" aria-label="help-text">
-      <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>
-    </DescriptionListTermHelpText>
-  );
-  expect(screen.getByLabelText('help-text')).toHaveClass('custom');
-});
-
-test('DescriptioinListTermHelpTextButton renders custom className', () => {
-  render(
-    <DescriptionListTermHelpText>
-      <DescriptionListTermHelpTextButton className="custom">test</DescriptionListTermHelpTextButton>
-    </DescriptionListTermHelpText>
-  );
-  expect(screen.getByText('test')).toHaveClass('custom');
-});
-
-test('DescriptionListGroup renders to match snapshot', () => {
-  const { asFragment } = render(<DescriptionListGroup>test</DescriptionListGroup>);
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('DescriptionListGroup renders custom className', () => {
-  render(<DescriptionListGroup className="custom">test</DescriptionListGroup>);
-  expect(screen.getByText('test')).toHaveClass('custom');
-});
-
-test('DescriptionListDescription renders to match snapshot', () => {
-  const { asFragment } = render(<DescriptionListDescription>test</DescriptionListDescription>);
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('DescriptionListDescription renders custom className', () => {
-  render(<DescriptionListDescription className="custom">test</DescriptionListDescription>);
-  expect(screen.getByText('test').parentElement).toHaveClass('custom');
-});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx
new file mode 100644
index 00000000000..b7740a418f8
--- /dev/null
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DescriptionListDescription } from '../DescriptionListDescription';
+
+import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DescriptionListDescription>test</DescriptionListDescription>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.descriptionListDescription}`, () => {
+  render(<DescriptionListDescription>test</DescriptionListDescription>);
+  expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListDescription);
+});
+
+test('Renders custom className', () => {
+  render(<DescriptionListDescription className="custom">test</DescriptionListDescription>);
+  expect(screen.getByText('test').parentElement).toHaveClass('custom');
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx
new file mode 100644
index 00000000000..070157b3e7f
--- /dev/null
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DescriptionListGroup } from '../DescriptionListGroup';
+
+import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DescriptionListGroup>test</DescriptionListGroup>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.descriptionListGroup}`, () => {
+  render(<DescriptionListGroup>test</DescriptionListGroup>);
+  expect(screen.getByText('test')).toHaveClass(styles.descriptionListGroup);
+});
+
+test('Renders custom className', () => {
+  render(<DescriptionListGroup className="custom">test</DescriptionListGroup>);
+  expect(screen.getByText('test')).toHaveClass('custom');
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpText.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpText.test.tsx
new file mode 100644
index 00000000000..ef5518b96d4
--- /dev/null
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpText.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DescriptionListTermHelpText } from '../DescriptionListTermHelpText';
+
+import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DescriptionListTermHelpText>test</DescriptionListTermHelpText>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.descriptionListTerm}`, () => {
+  render(<DescriptionListTermHelpText>test</DescriptionListTermHelpText>);
+  expect(screen.getByText('test')).toHaveClass(styles.descriptionListTerm);
+});
+
+test('Renders custom className', () => {
+  render(<DescriptionListTermHelpText className="custom">test</DescriptionListTermHelpText>);
+  expect(screen.getByText('test')).toHaveClass('custom');
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx
new file mode 100644
index 00000000000..9f88e41bab5
--- /dev/null
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DescriptionListTermHelpTextButton } from '../DescriptionListTermHelpTextButton';
+
+import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.descriptionListText}`, () => {
+  render(<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>);
+  expect(screen.getByText('test')).toHaveClass(styles.descriptionListText);
+});
+
+test('Renders custom className', () => {
+  render(<DescriptionListTermHelpTextButton className="custom">test</DescriptionListTermHelpTextButton>);
+  expect(screen.getByText('test')).toHaveClass('custom');
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx
new file mode 100644
index 00000000000..c36a4529603
--- /dev/null
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DescriptionListTerm } from '../DescriptionListTerm';
+
+import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DescriptionListTerm>test</DescriptionListTerm>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.descriptionListTerm}`, () => {
+  render(<DescriptionListTerm>test</DescriptionListTerm>);
+  expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListTerm);
+});
+
+test(`Renders default class ${styles.descriptionListText}`, () => {
+  render(<DescriptionListTerm>test</DescriptionListTerm>);
+  expect(screen.getByText('test')).toHaveClass(styles.descriptionListText);
+});
+
+test('Renders custom className', () => {
+  render(<DescriptionListTerm className="custom">test</DescriptionListTerm>);
+  expect(screen.getByText('test').parentElement).toHaveClass('custom');
+});
+
+test('Renders icon', () => {
+  render(<DescriptionListTerm icon={<div>icon</div>}>test</DescriptionListTerm>);
+  expect(screen.getByText('icon').parentElement).toHaveClass(styles.descriptionListTermIcon);
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
index b9943761789..e59055aa1af 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
+++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap
@@ -1,65 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DescriptioinListTermHelpText renders to match snapshot 1`] = `
-<DocumentFragment>
-  <dt
-    class="pf-v5-c-description-list__term"
-  >
-    <span
-      class="pf-v5-c-description-list__text pf-m-help-text"
-      role="button"
-      tabindex="0"
-      type="button"
-    >
-      test
-    </span>
-  </dt>
-</DocumentFragment>
-`;
-
-exports[`DescriptionListDescription renders to match snapshot 1`] = `
-<DocumentFragment>
-  <dd
-    class="pf-v5-c-description-list__description"
-  >
-    <div
-      class="pf-v5-c-description-list__text"
-    >
-      test
-    </div>
-  </dd>
-</DocumentFragment>
-`;
-
-exports[`DescriptionListGroup renders to match snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-description-list__group"
-  >
-    test
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DescriptionListTerm renders to match snapshot 1`] = `
-<DocumentFragment>
-  <dt
-    aria-labelledby="term-1"
-    class="pf-v5-c-description-list__term"
-  >
-    <span
-      class="pf-v5-c-description-list__text"
-    >
-      test
-    </span>
-  </dt>
-</DocumentFragment>
-`;
-
-exports[`renders to match snapshot 1`] = `
+exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <dl
-    aria-label="list"
     class="pf-v5-c-description-list"
   />
 </DocumentFragment>
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListDescription.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListDescription.test.tsx.snap
new file mode 100644
index 00000000000..5147f1e0292
--- /dev/null
+++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListDescription.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <dd
+    class="pf-v5-c-description-list__description"
+  >
+    <div
+      class="pf-v5-c-description-list__text"
+    >
+      test
+    </div>
+  </dd>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListGroup.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListGroup.test.tsx.snap
new file mode 100644
index 00000000000..73b0656b755
--- /dev/null
+++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListGroup.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-description-list__group"
+  >
+    test
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpText.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpText.test.tsx.snap
new file mode 100644
index 00000000000..883c9a40ad7
--- /dev/null
+++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpText.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <dt
+    class="pf-v5-c-description-list__term"
+  >
+    test
+  </dt>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpTextButton.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpTextButton.test.tsx.snap
new file mode 100644
index 00000000000..1d85b2b7303
--- /dev/null
+++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpTextButton.test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v5-c-description-list__text pf-m-help-text"
+    role="button"
+    tabindex="0"
+    type="button"
+  >
+    test
+  </span>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTerm.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTerm.test.tsx.snap
new file mode 100644
index 00000000000..a99897481de
--- /dev/null
+++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTerm.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <dt
+    class="pf-v5-c-description-list__term"
+  >
+    <span
+      class="pf-v5-c-description-list__text"
+    >
+      test
+    </span>
+  </dt>
+</DocumentFragment>
+`;

From 05f51ab12fa771e8402e9612c8cbabd193b36a29 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 6 Nov 2023 09:58:15 -0500
Subject: [PATCH 3/4] updates

---
 .../__tests__/DescriptionList.test.tsx        | 34 ++++++++++++++++++-
 .../DescriptionListDescription.test.tsx       |  7 +++-
 .../__tests__/DescriptionListGroup.test.tsx   |  7 +++-
 .../DescriptionListHelpTextButton.test.tsx    |  9 ++++-
 .../__tests__/DescriptionListTerm.test.tsx    |  9 +++--
 ...x => DescriptionListTermHelpText.test.tsx} |  7 +++-
 ...DescriptionListTermHelpText.test.tsx.snap} |  0
 7 files changed, 66 insertions(+), 7 deletions(-)
 rename packages/react-core/src/components/DescriptionList/__tests__/{DescriptionListHelpText.test.tsx => DescriptionListTermHelpText.test.tsx} (79%)
 rename packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/{DescriptionListHelpText.test.tsx.snap => DescriptionListTermHelpText.test.tsx.snap} (100%)

diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
index e424d38c728..83f8ed69974 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
@@ -11,7 +11,7 @@ test('Renders to match snapshot', () => {
 
 test(`Renders default class ${styles.descriptionList}`, () => {
   render(<DescriptionList aria-label="list" />);
-  expect(screen.getByLabelText('list')).toHaveClass(styles.descriptionList);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.descriptionList, { exact: true });
 });
 
 test('Renders custom className', () => {
@@ -108,3 +108,35 @@ test(`Renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => {
   render(<DescriptionList aria-label="list" displaySize="2xl" />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl);
 });
+
+test(`Renders style when isHorizontal and horizontalTermWidthModifier is set`, () => {
+  render(
+    <DescriptionList
+      aria-label="list"
+      isHorizontal
+      horizontalTermWidthModifier={{
+        default: '12ch',
+        sm: '15ch',
+        md: '20ch',
+        lg: '28ch',
+        xl: '30ch',
+        '2xl': '35ch'
+      }}
+    />
+  );
+  expect(screen.getByLabelText('list')).toHaveStyle({
+    '--pf-v5-c-description-list--m-horizontal__term--width': '12ch',
+    '--pf-v5-c-description-list--m-horizontal__term--width-on-sm': '15ch',
+    '--pf-v5-c-description-list--m-horizontal__term--width-on-md': '20ch',
+    '--pf-v5-c-description-list--m-horizontal__term--width-on-lg': '28ch',
+    '--pf-v5-c-description-list--m-horizontal__term--width-on-xl': '30ch',
+    '--pf-v5-c-description-list--m-horizontal__term--width-on-2xl': '35ch'
+  });
+});
+
+test(`Renders style when termWidth is set`, () => {
+  render(<DescriptionList aria-label="list" isHorizontal termWidth="30px" />);
+  expect(screen.getByLabelText('list')).toHaveStyle({
+    '--pf-v5-c-description-list__term--width': '30px'
+  });
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx
index b7740a418f8..65367307167 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx
@@ -11,10 +11,15 @@ test('Renders to match snapshot', () => {
 
 test(`Renders default class ${styles.descriptionListDescription}`, () => {
   render(<DescriptionListDescription>test</DescriptionListDescription>);
-  expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListDescription);
+  expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListDescription, { exact: true });
 });
 
 test('Renders custom className', () => {
   render(<DescriptionListDescription className="custom">test</DescriptionListDescription>);
   expect(screen.getByText('test').parentElement).toHaveClass('custom');
 });
+
+test('Renders spread props', () => {
+  render(<DescriptionListDescription id="id">test</DescriptionListDescription>);
+  expect(screen.getByText('test').parentElement).toHaveAttribute('id', 'id');
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx
index 070157b3e7f..53e84b545ff 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx
@@ -11,10 +11,15 @@ test('Renders to match snapshot', () => {
 
 test(`Renders default class ${styles.descriptionListGroup}`, () => {
   render(<DescriptionListGroup>test</DescriptionListGroup>);
-  expect(screen.getByText('test')).toHaveClass(styles.descriptionListGroup);
+  expect(screen.getByText('test')).toHaveClass(styles.descriptionListGroup, { exact: true });
 });
 
 test('Renders custom className', () => {
   render(<DescriptionListGroup className="custom">test</DescriptionListGroup>);
   expect(screen.getByText('test')).toHaveClass('custom');
 });
+
+test('Renders spread props', () => {
+  render(<DescriptionListGroup id="id">test</DescriptionListGroup>);
+  expect(screen.getByText('test')).toHaveAttribute('id', 'id');
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx
index 9f88e41bab5..bb49c585450 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx
@@ -11,10 +11,17 @@ test('Renders to match snapshot', () => {
 
 test(`Renders default class ${styles.descriptionListText}`, () => {
   render(<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>);
-  expect(screen.getByText('test')).toHaveClass(styles.descriptionListText);
+  expect(screen.getByText('test')).toHaveClass(`${styles.descriptionListText} ${styles.modifiers.helpText}`, {
+    exact: true
+  });
 });
 
 test('Renders custom className', () => {
   render(<DescriptionListTermHelpTextButton className="custom">test</DescriptionListTermHelpTextButton>);
   expect(screen.getByText('test')).toHaveClass('custom');
 });
+
+test('Renders spread props', () => {
+  render(<DescriptionListTermHelpTextButton id="id">test</DescriptionListTermHelpTextButton>);
+  expect(screen.getByText('test')).toHaveAttribute('id', 'id');
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx
index c36a4529603..840db5199ea 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx
@@ -11,12 +11,12 @@ test('Renders to match snapshot', () => {
 
 test(`Renders default class ${styles.descriptionListTerm}`, () => {
   render(<DescriptionListTerm>test</DescriptionListTerm>);
-  expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListTerm);
+  expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListTerm, { exact: true });
 });
 
 test(`Renders default class ${styles.descriptionListText}`, () => {
   render(<DescriptionListTerm>test</DescriptionListTerm>);
-  expect(screen.getByText('test')).toHaveClass(styles.descriptionListText);
+  expect(screen.getByText('test')).toHaveClass(styles.descriptionListText, { exact: true });
 });
 
 test('Renders custom className', () => {
@@ -28,3 +28,8 @@ test('Renders icon', () => {
   render(<DescriptionListTerm icon={<div>icon</div>}>test</DescriptionListTerm>);
   expect(screen.getByText('icon').parentElement).toHaveClass(styles.descriptionListTermIcon);
 });
+
+test('Renders spread props', () => {
+  render(<DescriptionListTerm id="id">test</DescriptionListTerm>);
+  expect(screen.getByText('test').parentElement).toHaveAttribute('id', 'id');
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpText.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTermHelpText.test.tsx
similarity index 79%
rename from packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpText.test.tsx
rename to packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTermHelpText.test.tsx
index ef5518b96d4..1bd9779d379 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpText.test.tsx
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTermHelpText.test.tsx
@@ -11,10 +11,15 @@ test('Renders to match snapshot', () => {
 
 test(`Renders default class ${styles.descriptionListTerm}`, () => {
   render(<DescriptionListTermHelpText>test</DescriptionListTermHelpText>);
-  expect(screen.getByText('test')).toHaveClass(styles.descriptionListTerm);
+  expect(screen.getByText('test')).toHaveClass(styles.descriptionListTerm, { exact: true });
 });
 
 test('Renders custom className', () => {
   render(<DescriptionListTermHelpText className="custom">test</DescriptionListTermHelpText>);
   expect(screen.getByText('test')).toHaveClass('custom');
 });
+
+test('Renders spread props', () => {
+  render(<DescriptionListTermHelpText id="id">test</DescriptionListTermHelpText>);
+  expect(screen.getByText('test')).toHaveAttribute('id', 'id');
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpText.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTermHelpText.test.tsx.snap
similarity index 100%
rename from packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpText.test.tsx.snap
rename to packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTermHelpText.test.tsx.snap

From 3de25a3a3aa2ebcb95c426c1679afc495df05821 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 15 Nov 2023 16:29:38 -0500
Subject: [PATCH 4/4] add autofit width mod test

---
 .../__tests__/DescriptionList.test.tsx             | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
index 83f8ed69974..67f76a232b8 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
+++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
@@ -140,3 +140,17 @@ test(`Renders style when termWidth is set`, () => {
     '--pf-v5-c-description-list__term--width': '30px'
   });
 });
+
+test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () => {
+  render(
+    <DescriptionList
+      aria-label="list"
+      isAutoFit
+      autoFitMinModifier={{ default: '50px', sm: '50px', md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}
+    />
+  );
+  expect(screen.getByLabelText('list')).toHaveAttribute(
+    'style',
+    '--pf-v5-c-description-list--GridTemplateColumns--min: 50px; --pf-v5-c-description-list--GridTemplateColumns--min-on-sm: 50px; --pf-v5-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v5-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v5-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v5-c-description-list--GridTemplateColumns--min-on-2xl: 300px;'
+  );
+});