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..67f76a232b8 100644
--- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx
+++ b/packages/react-core/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();
- expect(asFragment()).toMatchSnapshot();
- });
- test('1 col on all breakpoints', () => {
- const { asFragment } = render(
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
+import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
- test('2 col on all breakpoints', () => {
- const { asFragment } = render(
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
+test('Renders to match snapshot', () => {
+ const { asFragment } = render();
+ expect(asFragment()).toMatchSnapshot();
+});
- test('3 col on all breakpoints', () => {
- const { asFragment } = render(
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
+test(`Renders default class ${styles.descriptionList}`, () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveClass(styles.descriptionList, { exact: true });
+});
- test('Horizontal Description List', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
+test('Renders custom className', () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveClass('custom');
+});
- test('Compact Description List', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
+Object.values(['1Col', '2Col', '3Col']).forEach((_col) => {
+ const col = _col as '1Col' | '2Col' | '3Col';
+ test(`Renders ${col} on all breakpoints`, () => {
+ render(
+
+ );
+ 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();
- expect(asFragment()).toMatchSnapshot();
- });
+test(`Renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.horizontal);
+});
- test('Fluid Horizontal Description List', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
+test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
+});
+
+test(`Renders ${styles.modifiers.horizontal} and ${styles.modifiers.fluid} when isFluid = true`, () => {
+ render();
+ 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(
);
- 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();
- expect(asFragment()).toMatchSnapshot();
- });
+test(`Renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoColumnWidths);
+});
- test('Inline Grid Description List', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
+test(`Renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.inlineGrid);
+});
- test('Auto fit Description List', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
+test(`Renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoFit);
+});
- test('Auto fit with responsive grid Description List', () => {
- const { asFragment } = render(
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
+test(`Renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fillColumns);
+});
- test('Term default', () => {
- const { asFragment } = render(
-
- test
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
+test(`Renders ${styles.modifiers.displayLg} when displaySize = lg`, () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.displayLg);
+});
- test('Term helper text', () => {
- const { asFragment } = render(
-
- test
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
+test(`Renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl);
+});
- test('Group', () => {
- const { asFragment } = render(
-
- test
-
- );
- expect(asFragment()).toMatchSnapshot();
+test(`Renders style when isHorizontal and horizontalTermWidthModifier is set`, () => {
+ render(
+
+ );
+ 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(
-
- test
-
- );
- expect(asFragment()).toMatchSnapshot();
+test(`Renders style when termWidth is set`, () => {
+ render();
+ expect(screen.getByLabelText('list')).toHaveStyle({
+ '--pf-v5-c-description-list__term--width': '30px'
});
});
+
+test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () => {
+ render(
+
+ );
+ 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;'
+ );
+});
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..65367307167
--- /dev/null
+++ b/packages/react-core/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(test);
+ expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.descriptionListDescription}`, () => {
+ render(test);
+ expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListDescription, { exact: true });
+});
+
+test('Renders custom className', () => {
+ render(test);
+ expect(screen.getByText('test').parentElement).toHaveClass('custom');
+});
+
+test('Renders spread props', () => {
+ render(test);
+ 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
new file mode 100644
index 00000000000..53e84b545ff
--- /dev/null
+++ b/packages/react-core/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(test);
+ expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.descriptionListGroup}`, () => {
+ render(test);
+ expect(screen.getByText('test')).toHaveClass(styles.descriptionListGroup, { exact: true });
+});
+
+test('Renders custom className', () => {
+ render(test);
+ expect(screen.getByText('test')).toHaveClass('custom');
+});
+
+test('Renders spread props', () => {
+ render(test);
+ 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
new file mode 100644
index 00000000000..bb49c585450
--- /dev/null
+++ b/packages/react-core/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(test);
+ expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.descriptionListText}`, () => {
+ render(test);
+ expect(screen.getByText('test')).toHaveClass(`${styles.descriptionListText} ${styles.modifiers.helpText}`, {
+ exact: true
+ });
+});
+
+test('Renders custom className', () => {
+ render(test);
+ expect(screen.getByText('test')).toHaveClass('custom');
+});
+
+test('Renders spread props', () => {
+ render(test);
+ 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
new file mode 100644
index 00000000000..840db5199ea
--- /dev/null
+++ b/packages/react-core/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(test);
+ expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.descriptionListTerm}`, () => {
+ render(test);
+ expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListTerm, { exact: true });
+});
+
+test(`Renders default class ${styles.descriptionListText}`, () => {
+ render(test);
+ expect(screen.getByText('test')).toHaveClass(styles.descriptionListText, { exact: true });
+});
+
+test('Renders custom className', () => {
+ render(test);
+ expect(screen.getByText('test').parentElement).toHaveClass('custom');
+});
+
+test('Renders icon', () => {
+ render(icon}>test);
+ expect(screen.getByText('icon').parentElement).toHaveClass(styles.descriptionListTermIcon);
+});
+
+test('Renders spread props', () => {
+ render(test);
+ expect(screen.getByText('test').parentElement).toHaveAttribute('id', 'id');
+});
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTermHelpText.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTermHelpText.test.tsx
new file mode 100644
index 00000000000..1bd9779d379
--- /dev/null
+++ b/packages/react-core/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(test);
+ expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.descriptionListTerm}`, () => {
+ render(test);
+ expect(screen.getByText('test')).toHaveClass(styles.descriptionListTerm, { exact: true });
+});
+
+test('Renders custom className', () => {
+ render(test);
+ expect(screen.getByText('test')).toHaveClass('custom');
+});
+
+test('Renders spread props', () => {
+ render(test);
+ expect(screen.getByText('test')).toHaveAttribute('id', 'id');
+});
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..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,162 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Description List 1 col on all breakpoints 1`] = `
-
-
-
-`;
-
-exports[`Description List 2 col on all breakpoints 1`] = `
-
-
-
-`;
-
-exports[`Description List 3 col on all breakpoints 1`] = `
-
-
-
-`;
-
-exports[`Description List Auto Column Widths Description List 1`] = `
-
-
-
-`;
-
-exports[`Description List Auto fit Description List 1`] = `
-
-
-
-`;
-
-exports[`Description List Auto fit with responsive grid Description List 1`] = `
-
-
-
-`;
-
-exports[`Description List Compact Description List 1`] = `
-
-
-
-`;
-
-exports[`Description List Compact Horizontal Description List 1`] = `
-
-
-
-`;
-
-exports[`Description List Description 1`] = `
-
-
-
- test
-
-
-
-`;
-
-exports[`Description List Fluid Horizontal Description List 1`] = `
-
-
-
-`;
-
-exports[`Description List Group 1`] = `
-
-
- test
-
-
-`;
-
-exports[`Description List Horizontal Description List 1`] = `
-
-
-
-`;
-
-exports[`Description List Inline Grid Description List 1`] = `
-
-
-
-`;
-
-exports[`Description List Term default 1`] = `
-
-
-
- test
-
-
-
-`;
-
-exports[`Description List Term helper text 1`] = `
-
-
-
- test
-
-
-
-`;
-
-exports[`Description List alignment breakpoints 1`] = `
-
-
-
-`;
-
-exports[`Description List default 1`] = `
+exports[`Renders to match snapshot 1`] = `
+ -
+
+ test
+
+
+
+`;
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`] = `
+
+
+ test
+
+
+`;
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`] = `
+
+
+ test
+
+
+`;
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`] = `
+
+
+
+ test
+
+
+
+`;
diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTermHelpText.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTermHelpText.test.tsx.snap
new file mode 100644
index 00000000000..883c9a40ad7
--- /dev/null
+++ b/packages/react-core/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`] = `
+
+
+ test
+
+
+`;