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