@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

package/src/components/DescriptionList/__tests__/DescriptionList.test.tsx

@@ -1,130 +1,156 @@
 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';
-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();
-  });
+import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 
-  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('Renders to match snapshot', () => {
+  const { asFragment } = render(<DescriptionList />);
+  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(`Renders default class ${styles.descriptionList}`, () => {
+  render(<DescriptionList aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.descriptionList, { exact: true });
+});
 
-  test('Horizontal Description List', () => {
-    const { asFragment } = render(<DescriptionList isHorizontal />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders custom className', () => {
+  render(<DescriptionList aria-label="list" className="custom" />);
+  expect(screen.getByLabelText('list')).toHaveClass('custom');
+});
 
-  test('Compact Description List', () => {
-    const { asFragment } = render(<DescriptionList isCompact />);
-    expect(asFragment()).toMatchSnapshot();
+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('Compact Horizontal Description List', () => {
-    const { asFragment } = render(<DescriptionList isCompact isHorizontal />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => {
+  render(<DescriptionList aria-label="list" isHorizontal />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.horizontal);
+});
 
-  test('Fluid Horizontal Description List', () => {
-    const { asFragment } = render(<DescriptionList isFluid isHorizontal />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+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('alignment breakpoints', () => {
-    const { asFragment } = render(
+Object.values(['horizontal', 'vertical']).forEach((_align) => {
+  const align = _align as 'horizontal' | 'vertical';
+  test(`Renders ${align} on all breakpoints`, () => {
+    render(
       <DescriptionList
-        isHorizontal
+        aria-label="list"
         orientation={{
-          sm: 'horizontal',
-          md: 'vertical',
-          lg: 'horizontal',
-          xl: 'vertical',
-          '2xl': 'horizontal'
+          sm: align,
+          md: align,
+          lg: align,
+          xl: align,
+          '2xl': align
         }}
       />
     );
-    expect(asFragment()).toMatchSnapshot();
+    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('Auto Column Widths Description List', () => {
-    const { asFragment } = render(<DescriptionList isAutoColumnWidths />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => {
+  render(<DescriptionList aria-label="list" isAutoColumnWidths />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoColumnWidths);
+});
 
-  test('Inline Grid Description List', () => {
-    const { asFragment } = render(<DescriptionList isInlineGrid />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => {
+  render(<DescriptionList aria-label="list" isInlineGrid />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.inlineGrid);
+});
 
-  test('Auto fit Description List', () => {
-    const { asFragment } = render(<DescriptionList isAutoFit />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => {
+  render(<DescriptionList aria-label="list" isAutoFit />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoFit);
+});
 
-  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(`Renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => {
+  render(<DescriptionList aria-label="list" isFillColumns />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fillColumns);
+});
 
-  test('Term default', () => {
-    const { asFragment } = render(
-      <DescriptionListTerm key="term-id-1" aria-labelledby="term-1">
-        test
-      </DescriptionListTerm>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders ${styles.modifiers.displayLg} when displaySize = lg`, () => {
+  render(<DescriptionList aria-label="list" displaySize="lg" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.displayLg);
+});
 
-  test('Term helper text', () => {
-    const { asFragment } = render(
-      <DescriptionListTermHelpText key="term-id-1" aria-labelledby="term-1">
-        <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>
-      </DescriptionListTermHelpText>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+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('Group', () => {
-    const { asFragment } = render(
-      <DescriptionListGroup className="custom-description-list-group" aria-labelledby="group-1">
-        test
-      </DescriptionListGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
+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('Description', () => {
-    const { asFragment } = render(
-      <DescriptionListDescription className="custom-description-list-description" aria-labelledby="description-1">
-        test
-      </DescriptionListDescription>
-    );
-    expect(asFragment()).toMatchSnapshot();
+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'
   });
 });
+
+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;'
+  );
+});

package/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx

@@ -0,0 +1,25 @@
+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, { 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');
+});

package/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx

@@ -0,0 +1,25 @@
+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, { 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');
+});

package/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx

@@ -0,0 +1,27 @@
+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} ${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');
+});

package/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx

@@ -0,0 +1,35 @@
+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, { exact: true });
+});
+
+test(`Renders default class ${styles.descriptionListText}`, () => {
+  render(<DescriptionListTerm>test</DescriptionListTerm>);
+  expect(screen.getByText('test')).toHaveClass(styles.descriptionListText, { exact: true });
+});
+
+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);
+});
+
+test('Renders spread props', () => {
+  render(<DescriptionListTerm id="id">test</DescriptionListTerm>);
+  expect(screen.getByText('test').parentElement).toHaveAttribute('id', 'id');
+});

package/src/components/DescriptionList/__tests__/DescriptionListTermHelpText.test.tsx

@@ -0,0 +1,25 @@
+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, { 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');
+});

package/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap

@@ -1,162 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Description List 1 col on all breakpoints 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"
-  />
-</DocumentFragment>
-`;
-
-exports[`Description List Description 1`] = `
-<DocumentFragment>
-  <dd
-    aria-labelledby="description-1"
-    class="pf-v5-c-description-list__description custom-description-list-description"
-  >
-    <div
-      class="pf-v5-c-description-list__text"
-    >
-      test
-    </div>
-  </dd>
-</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`] = `
-<DocumentFragment>
-  <div
-    aria-labelledby="group-1"
-    class="pf-v5-c-description-list__group custom-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`] = `
-<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[`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
     class="pf-v5-c-description-list"

package/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>
+`;

package/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>
+`;

package/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>
+`;

package/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>
+`;

package/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTermHelpText.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>
+`;