updates

Author: kmcfaul

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(<DescriptionList aria-label="list" />);
-  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(<DescriptionList aria-label="list" displaySize="2xl" />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl);
 });
+
+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(`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'
+  });
+});

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(<DescriptionListDescription>test</DescriptionListDescription>);
-  expect(screen.getByText('test').parentElement).toHaveClass(styles.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');
+});

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(<DescriptionListGroup>test</DescriptionListGroup>);
-  expect(screen.getByText('test')).toHaveClass(styles.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');
+});

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(<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>);
-  expect(screen.getByText('test')).toHaveClass(styles.descriptionListText);
+  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');
+});

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(<DescriptionListTerm>test</DescriptionListTerm>);
-  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(<DescriptionListTerm>test</DescriptionListTerm>);
-  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(<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');
+});

packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpText.test.tsx renamed to 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(<DescriptionListTermHelpText>test</DescriptionListTermHelpText>);
-  expect(screen.getByText('test')).toHaveClass(styles.descriptionListTerm);
+  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');
+});