From 3cb7df4bab4e7194efcec9f8771c01dad9926aa4 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 16 Oct 2023 11:39:42 -0400
Subject: [PATCH] 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>