updates

patternfly · Nov 6, 2023 · 6539ca4 · 6539ca4
1 parent 26aa1d9
commit 6539ca4
Show file tree

Hide file tree

Showing 14 changed files with 219 additions and 44 deletions.
diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx
@@ -73,6 +73,7 @@ class DataList extends React.Component<DataListProps> {
     const {
       className,
       children,
+      'aria-label': ariaLabel,
       onSelectDataListItem,
       selectedDataListItemId,
       isCompact,
@@ -106,6 +107,7 @@ class DataList extends React.Component<DataListProps> {
           )}
           style={props.style}
           role="list"
+          aria-label={ariaLabel}
           {...props}
           ref={this.ref}
         >

diff --git a/packages/react-core/src/components/DataList/DataListAction.tsx b/packages/react-core/src/components/DataList/DataListAction.tsx
@@ -31,15 +31,19 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
   children,
   className,
   visibility,
-  /* eslint-disable @typescript-eslint/no-unused-vars */
   id,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   isPlainButtonAction,
-  /* eslint-enable @typescript-eslint/no-unused-vars */
   ...props
 }: DataListActionProps) => (
-  <div className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)} {...props}>
+  <div
+    className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)}
+    id={id}
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledBy}
+    {...props}
+  >
     {isPlainButtonAction ? <div className={css(styles.dataListAction)}>{children}</div> : children}
   </div>
 );

diff --git a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
@@ -11,15 +11,41 @@ import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
 test('Renders to match snapshot', () => {
   const { asFragment } = render(<DataList aria-label="list" />);
-  expect(screen.getByLabelText('list')).toBeInTheDocument();
   expect(asFragment()).toMatchSnapshot();
 });
 
+test(`Renders with default class ${styles.dataList}`, () => {
+  render(<DataList aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.dataList);
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<DataList aria-label="list" className="custom" />);
+  expect(screen.getByLabelText('list')).toHaveClass('custom');
+});
+
+test(`Renders with spread props`, () => {
+  render(<DataList aria-label="list" id="test" />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('id', 'test');
+});
+
+test(`Renders with aria-label when aria-label is passed`, () => {
+  render(<DataList aria-label="list">test</DataList>);
+  expect(screen.getByText('test')).toHaveAttribute('aria-label', 'list');
+});
+
 test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => {
   render(<DataList aria-label="list" isCompact />);
   expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
 });
 
+['nowrap', 'truncate', 'breakWord'].forEach((wrap) => {
+  test(`Renders with class ${styles.modifiers[wrap]} when wrapModifier = ${wrap} is pased`, () => {
+    render(<DataList aria-label="list" wrapModifier={wrap as 'nowrap' | 'truncate' | 'breakWord'} />);
+    expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers[wrap]);
+  });
+});
+
 const gridBreakpointClasses = {
   none: styles.modifiers.gridNone,
   always: 'pf-m-grid',
@@ -79,7 +105,7 @@ test('Does not render with a hidden input to improve a11y when onSelectableRowCh
   expect(selectableInput).not.toBeInTheDocument();
 });
 
-test('Calls onSelectableRowChange.onChange when the selectable input changes', async () => {
+test('Calls onSelectableRowChange when the selectable input changes', async () => {
   const mock = jest.fn();
   const user = userEvent.setup();
 
@@ -99,7 +125,7 @@ test('Calls onSelectableRowChange.onChange when the selectable input changes', a
   expect(mock).toHaveBeenCalled();
 });
 
-test('Does not call onSelectableRowChange.onChange when the selectable input is not changed', () => {
+test('Does not call onSelectableRowChange when the selectable input is not changed', () => {
   const mock = jest.fn();
 
   render(

diff --git a/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx
@@ -15,11 +15,11 @@ test('Renders to match snapshot', () => {
 
 test(`Renders with default class ${styles.dataListItemAction}`, () => {
   render(
-    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
+    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
       test
     </DataListAction>
   );
-  expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction);
+  expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction, { exact: true });
 });
 
 test(`Renders with custom class when className is passed`, () => {
@@ -31,33 +31,63 @@ test(`Renders with custom class when className is passed`, () => {
   expect(screen.getByText('test')).toHaveClass('test-class');
 });
 
-test('Renders button with visibliity breakpoint set', () => {
+test(`Renders with spread props`, () => {
+  render(
+    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
+      test
+    </DataListAction>
+  );
+  expect(screen.getByText('test')).toHaveAttribute('id', 'ex-action');
+});
+
+test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = true`, () => {
   render(
-    <DataListAction
-      visibility={{ default: 'hidden', lg: 'visible' }}
-      aria-labelledby="check-action-item2 check-action-action2"
-      id="check-action-action2"
-      aria-label="Actions"
-    >
+    <DataListAction id="id" aria-label="Actions" aria-labelledby="ex-action" isPlainButtonAction>
       test
     </DataListAction>
   );
+  expect(screen.getByText('test')).toHaveClass(styles.dataListAction);
+});
+
+['hidden', 'visible'].forEach((vis) => {
+  const visMod = vis as 'hidden' | 'visible';
+  test(`Has visibility - ${vis} for every breakpoint`, () => {
+    render(
+      <DataListAction
+        visibility={{ default: visMod, sm: visMod, md: visMod, lg: visMod, xl: visMod, '2xl': visMod }}
+        aria-labelledby="check-action-item2 check-action-action2"
+        id="check-action-action2"
+        aria-label="Actions"
+      >
+        test
+      </DataListAction>
+    );
 
-  expect(screen.getByText('test')).toHaveClass('pf-m-hidden');
-  expect(screen.getByText('test')).toHaveClass('pf-m-visible-on-lg');
+    if (visMod === 'hidden') {
+      expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}`]);
+    }
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnSm`]);
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnMd`]);
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnLg`]);
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnXl`]);
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]);
+  });
 });
 
-test('Does not render button with hidden breakpoint set', () => {
+test(`Renders with aria-label when aria-label is passed`, () => {
   render(
-    <DataListAction
-      visibility={{ '2xl': 'hidden' }}
-      aria-labelledby="check-action-item2 check-action-action2"
-      id="check-action-action2"
-      aria-label="Actions"
-    >
+    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
       test
     </DataListAction>
   );
+  expect(screen.getByText('test')).toHaveAccessibleName('Actions');
+});
 
-  expect(screen.getByText('test')).toHaveClass('pf-m-hidden-on-2xl');
+test(`Renders with aria-labelledby when aria-label is passed`, () => {
+  render(
+    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
+      test
+    </DataListAction>
+  );
+  expect(screen.getByText('test')).toHaveAttribute('aria-labelledby', 'ex-action');
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx
@@ -15,7 +15,7 @@ test(`Renders default class ${styles.dataListCell}`, () => {
       Primary Id
     </DataListCell>
   );
-  expect(screen.getByTestId('test')).toHaveClass(styles.dataListCell);
+  expect(screen.getByTestId('test')).toHaveClass(styles.dataListCell, { exact: true });
 });
 
 test(`Renders custom class when className is passed`, () => {
@@ -27,13 +27,22 @@ test(`Renders custom class when className is passed`, () => {
   expect(screen.getByTestId('test')).toHaveClass('test-class');
 });
 
+test(`Renders with spread props`, () => {
+  render(
+    <DataListCell key={0} id="test">
+      Primary Id
+    </DataListCell>
+  );
+  expect(screen.getByText('Primary Id')).toHaveAttribute('id', 'test');
+});
+
 test('Renders width modifier when width is passed', () => {
   [
     { width: 1, class: '' },
-    { width: 2, class: 'pf-m-flex-2' },
-    { width: 3, class: 'pf-m-flex-3' },
-    { width: 4, class: 'pf-m-flex-4' },
-    { width: 5, class: 'pf-m-flex-5' }
+    { width: 2, class: styles.modifiers.flex_2 },
+    { width: 3, class: styles.modifiers.flex_3 },
+    { width: 4, class: styles.modifiers.flex_4 },
+    { width: 5, class: styles.modifiers.flex_5 }
   ].forEach((testCase, index) => {
     const testId = `cell-test-id-${index}`;
 
@@ -46,17 +55,22 @@ test('Renders width modifier when width is passed', () => {
     const dataListCell = screen.getByTestId(testId);
 
     testCase.class === ''
-      ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell', { exact: true })
+      ? expect(dataListCell).not.toHaveClass(
+          styles.modifiers.flex_2,
+          styles.modifiers.flex_3,
+          styles.modifiers.flex_4,
+          styles.modifiers.flex_5
+        )
       : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`, { exact: true });
   });
 });
 
 test('Has text wrap modifiers when wrapModifier is passed', () => {
   [
     { wrapModifier: null as any, class: '' },
-    { wrapModifier: 'breakWord', class: 'pf-m-break-word' },
-    { wrapModifier: 'nowrap', class: 'pf-m-nowrap' },
-    { wrapModifier: 'truncate', class: 'pf-m-truncate' }
+    { wrapModifier: 'breakWord', class: styles.modifiers.breakWord },
+    { wrapModifier: 'nowrap', class: styles.modifiers.nowrap },
+    { wrapModifier: 'truncate', class: styles.modifiers.truncate }
   ].forEach((testCase, index) => {
     const testId = `cell-test-id-${index}`;
 
@@ -69,8 +83,12 @@ test('Has text wrap modifiers when wrapModifier is passed', () => {
     const dataListCell = screen.getByTestId(testId);
 
     testCase.class === ''
-      ? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell')
-      : expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`);
+      ? expect(dataListCell).not.toHaveClass(
+          styles.modifiers.breakWord,
+          styles.modifiers.nowrap,
+          styles.modifiers.truncate
+        )
+      : expect(dataListCell).toHaveClass(`${testCase.class}`);
   });
 });
 

diff --git a/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx
@@ -3,6 +3,11 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { DataListCheck } from '../DataListCheck';
 
+test(`Renders with spread props`, () => {
+  render(<DataListCheck id="test" aria-labelledby={'string'} isChecked />);
+  expect(screen.getByRole('checkbox')).toHaveAttribute('id', 'test');
+});
+
 it('does not throw a "A component is changing an uncontrolled input of type checkbox to be controlled" error when changed if using isChecked', async () => {
   const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
   const user = userEvent.setup();

diff --git a/packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx
@@ -15,7 +15,16 @@ test(`Renders with default class ${styles.dataListExpandableContent}`, () => {
       test
     </DataListContent>
   );
-  expect(screen.getByTestId('test-id')).toHaveClass(styles.dataListExpandableContent);
+  expect(screen.getByTestId('test-id')).toHaveClass(styles.dataListExpandableContent, { exact: true });
+});
+
+test(`Renders with default class ${styles.dataListExpandableContentBody}`, () => {
+  render(
+    <DataListContent data-testid="test-id" aria-label="Primary Content Details">
+      test
+    </DataListContent>
+  );
+  expect(screen.getByText('test')).toHaveClass(styles.dataListExpandableContentBody, { exact: true });
 });
 
 test(`Renders with custom class when className is passed`, () => {
@@ -27,6 +36,24 @@ test(`Renders with custom class when className is passed`, () => {
   expect(screen.getByTestId('test-id')).toHaveClass('test-class');
 });
 
+test(`Renders with id when id is passed`, () => {
+  render(
+    <DataListContent id="idProp" data-testid="test-id" aria-label="Primary Content Details" className="test-class">
+      test
+    </DataListContent>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'idProp');
+});
+
+test(`Renders with spread props`, () => {
+  render(
+    <DataListContent dir="rtl" data-testid="test-id" aria-label="Primary Content Details">
+      test
+    </DataListContent>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('dir', 'rtl');
+});
+
 test(`Renders with class ${styles.modifiers.noPadding} when hasNoPadding is passed`, () => {
   render(
     <DataListContent aria-label="Primary Content Details" hidden hasNoPadding>

diff --git a/packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx
@@ -15,7 +15,7 @@ test('Renders to match snapshot', () => {
 
 test(`Renders with default class ${styles.dataListItem}`, () => {
   render(<DataListItem aria-labelledby="item-1">test</DataListItem>);
-  expect(screen.getByRole('listitem')).toHaveClass(styles.dataListItem);
+  expect(screen.getByRole('listitem')).toHaveClass(styles.dataListItem, { exact: true });
 });
 
 test('Renders with custom class name', () => {
@@ -27,6 +27,15 @@ test('Renders with custom class name', () => {
   expect(screen.getByRole('listitem')).toHaveClass('data-list-item-custom');
 });
 
+test('Renders with spread props', () => {
+  render(
+    <DataListItem dir="rtl" aria-labelledby="item-1">
+      test
+    </DataListItem>
+  );
+  expect(screen.getByRole('listitem')).toHaveAttribute('dir', 'rtl');
+});
+
 test(`Renders class ${styles.modifiers.expanded} when isExpanded is passed`, () => {
   render(
     <DataListItem aria-labelledby="item-1" isExpanded>

diff --git a/packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx
@@ -11,10 +11,15 @@ test('Cells renders to match snapshot', () => {
 
 test(`Renders with default class ${styles.dataListItemContent}`, () => {
   render(<DataListItemCells dataListCells="test" />);
-  expect(screen.getByText('test')).toHaveClass(styles.dataListItemContent);
+  expect(screen.getByText('test')).toHaveClass(styles.dataListItemContent, { exact: true });
 });
 
 test(`Renders with custom class when className is passed`, () => {
   render(<DataListItemCells className="custom" dataListCells="test" />);
   expect(screen.getByText('test')).toHaveClass('custom');
 });
+
+test(`Renders with spread props`, () => {
+  render(<DataListItemCells dir="rtl" dataListCells="test" />);
+  expect(screen.getByText('test')).toHaveAttribute('dir', 'rtl');
+});