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();
- 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();
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl);
});
+
+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(`Renders style when termWidth is set`, () => {
+ render();
+ 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(test);
- expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListDescription);
+ 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
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(test);
- expect(screen.getByText('test')).toHaveClass(styles.descriptionListGroup);
+ 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
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(test);
- expect(screen.getByText('test')).toHaveClass(styles.descriptionListText);
+ 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
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(test);
- 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(test);
- 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(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__/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(test);
- expect(screen.getByText('test')).toHaveClass(styles.descriptionListTerm);
+ 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__/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