break out into separate files, pr feedback

Author: kmcfaul

packages/react-core/src/components/DataList/__tests__/DataList.test.tsx

@@ -5,13 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import { DataList } from '../DataList';
 import { DataListItem } from '../DataListItem';
-import { DataListAction } from '../DataListAction';
-import { DataListCell } from '../DataListCell';
-import { DataListToggle } from '../DataListToggle';
-import { DataListItemCells } from '../DataListItemCells';
 import { DataListItemRow } from '../DataListItemRow';
-import { DataListContent } from '../DataListContent';
-import { Button } from '../../Button';
 
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
@@ -43,17 +37,17 @@ const gridBreakpointClasses = {
   });
 });
 
-test(`Has breakpoint - 2xl when gridBreakpoint is pased`, () => {
-  render(<DataList aria-label="list" gridBreakpoint="2xl" />);
-  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers['grid_2xl']);
+test(`Renders default class ${styles.dataList}`, () => {
+  render(<DataList key="list-id-1" aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.dataList);
 });
 
 test('Renders custom class when passed', () => {
   render(<DataList key="list-id-1" className="data-list-custom" aria-label="list" />);
   expect(screen.getByLabelText('list')).toHaveClass('data-list-custom');
 });
 
-test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
+test('Renders with a hidden input to improve a11y when onSelectableRowChange is passed', () => {
   render(
     <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
       <DataListItem>
@@ -69,7 +63,7 @@ test('List renders with a hidden input to improve a11y when selectableRow is pas
   expect(selectableInput).toBeInTheDocument();
 });
 
-test('List does not render with a hidden input to improve a11y when selectableRow is not passed', () => {
+test('Does not render with a hidden input to improve a11y when onSelectableRowChange is not passed', () => {
   render(
     <DataList aria-label="this is a simple list">
       <DataListItem>
@@ -85,7 +79,7 @@ test('List does not render with a hidden input to improve a11y when selectableRo
   expect(selectableInput).not.toBeInTheDocument();
 });
 
-test('List calls selectableRow.onChange when the selectable input changes', async () => {
+test('Calls onSelectableRowChange.onChange when the selectable input changes', async () => {
   const mock = jest.fn();
   const user = userEvent.setup();
 
@@ -105,7 +99,7 @@ test('List calls selectableRow.onChange when the selectable input changes', asyn
   expect(mock).toHaveBeenCalled();
 });
 
-test('List does not call selectableRow.onChange when the selectable input is not changed', () => {
+test('Does not call onSelectableRowChange.onChange when the selectable input is not changed', () => {
   const mock = jest.fn();
 
   render(
@@ -121,7 +115,7 @@ test('List does not call selectableRow.onChange when the selectable input is not
   expect(mock).not.toHaveBeenCalled();
 });
 
-test('Item applies selectableInputAriaLabel to the hidden input', () => {
+test('Applies selectableInputAriaLabel to the hidden input', () => {
   render(
     <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
       <DataListItem selectableInputAriaLabel="Data list item label test">
@@ -137,7 +131,7 @@ test('Item applies selectableInputAriaLabel to the hidden input', () => {
   expect(selectableInput).toHaveAccessibleName('Data list item label test');
 });
 
-test('Item defaults to labelling its input using its aria-labelledby prop', () => {
+test('Defaults to labelling its input using its aria-labelledby prop', () => {
   render(
     <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
       <DataListItem aria-labelledby="test-id">
@@ -151,7 +145,7 @@ test('Item defaults to labelling its input using its aria-labelledby prop', () =
   expect(selectableInput).toHaveAccessibleName('Test cell content');
 });
 
-test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
+test('Prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
   render(
     <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
       <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
@@ -164,233 +158,3 @@ test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () =
 
   expect(selectableInput).toHaveAccessibleName('Data list item label test');
 });
-
-test('Item renders to match snapshot', () => {
-  const { asFragment } = render(
-    <DataListItem key="item-id-1" aria-labelledby="item-1">
-      test
-    </DataListItem>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test(`Item has ${styles.modifiers.expanded} when isExpanded is passed`, () => {
-  render(
-    <DataListItem aria-labelledby="item-1" isExpanded>
-      test
-    </DataListItem>
-  );
-  expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expanded);
-});
-
-test('Item renders with custom class name', () => {
-  render(
-    <DataListItem className="data-list-item-custom" aria-labelledby="item-1">
-      test
-    </DataListItem>
-  );
-  expect(screen.getByRole('listitem')).toHaveClass('data-list-item-custom');
-});
-
-test('Item row renders to match snapshot', () => {
-  const { asFragment } = render(<DataListItemRow>test</DataListItemRow>);
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Cell renders to match snapshot', () => {
-  const { asFragment } = render(<DataListCell>Secondary</DataListCell>);
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Cells renders to match snapshot', () => {
-  const { asFragment } = render(
-    <DataListItemCells
-      dataListCells={[
-        <DataListCell key="list-id-1" id="primary-item" className="data-list-custom">
-          Primary Id
-        </DataListCell>,
-        <DataListCell key="list-id-2" id="primary-item" className="data-list-custom">
-          Primary Id 2
-        </DataListCell>
-      ]}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Cell has 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' }
-  ].forEach((testCase, index) => {
-    const testId = `cell-test-id-${index}`;
-
-    render(
-      <DataListCell data-testid={testId} width={testCase.width as any} key={index}>
-        Primary Id
-      </DataListCell>
-    );
-
-    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}`);
-  });
-});
-
-test('Cell 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' }
-  ].forEach((testCase, index) => {
-    const testId = `cell-test-id-${index}`;
-
-    render(
-      <DataListCell data-testid={testId} wrapModifier={testCase.wrapModifier} key={index}>
-        Primary Id
-      </DataListCell>
-    );
-
-    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}`);
-  });
-});
-
-test(`Cell has custom class when className is passed`, () => {
-  render(
-    <DataListCell data-testid="test" key={0} className="test-class">
-      Primary Id
-    </DataListCell>
-  );
-  expect(screen.getByTestId('test')).toHaveClass('test-class');
-});
-
-test(`Cell has ${styles.modifiers.alignRight} when alignRight is passed`, () => {
-  render(
-    <DataListCell data-testid="test" key={0} alignRight>
-      Primary Id
-    </DataListCell>
-  );
-  expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.alignRight);
-});
-
-test(`Cell has ${styles.modifiers.icon} when isIcon is passed`, () => {
-  render(
-    <DataListCell data-testid="test" key={0} isIcon>
-      Primary Id
-    </DataListCell>
-  );
-  expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.icon);
-});
-
-test(`Cell has ${styles.modifiers.noFill} when isFilled = false`, () => {
-  render(
-    <DataListCell data-testid="test" key={0} isFilled={false}>
-      Primary Id
-    </DataListCell>
-  );
-  expect(screen.getByTestId('test')).toHaveClass(styles.modifiers.noFill);
-});
-
-test('Toggle has aria label', () => {
-  render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" />);
-
-  expect(screen.getByRole('button')).not.toHaveAttribute('aria-labelledby');
-  expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Toggle details for');
-  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
-});
-
-test('Toggle has aria-expanded set when isExpanded is passed', () => {
-  render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />);
-  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
-});
-
-test('DataListAction renders to match snapshot', () => {
-  const { asFragment } = render(
-    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
-      <Button id="delete-item-1">Delete</Button>
-    </DataListAction>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test(`DataListAction has custom class when className is passed`, () => {
-  render(
-    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
-      <Button id="delete-item-1">Delete</Button>
-    </DataListAction>
-  );
-  expect(screen.getByRole('button').parentElement).toHaveClass('test-class');
-});
-
-test('DataListAction shows button with visibliity breakpoint set', () => {
-  render(
-    <DataListAction
-      visibility={{ default: 'hidden', lg: 'visible' }}
-      aria-labelledby="check-action-item2 check-action-action2"
-      id="check-action-action2"
-      aria-label="Actions"
-    >
-      <Button variant="primary">Primary</Button>
-    </DataListAction>
-  );
-
-  expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden');
-  expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-visible-on-lg');
-});
-
-test('DataListAction hides button with visibility breakpoint set', () => {
-  render(
-    <DataListAction
-      visibility={{ '2xl': 'hidden' }}
-      aria-labelledby="check-action-item2 check-action-action2"
-      id="check-action-action2"
-      aria-label="Actions"
-    >
-      <Button variant="primary">Primary</Button>
-    </DataListAction>
-  );
-
-  expect(screen.getByRole('button').parentElement).toHaveClass('pf-m-hidden-on-2xl');
-});
-
-test('DataListContent renders to match snapshot', () => {
-  const { asFragment } = render(<DataListContent aria-label="Primary Content Details"> test</DataListContent>);
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test(`DataListContent has ${styles.modifiers.noPadding} when hasNoPadding is passed`, () => {
-  render(
-    <DataListContent aria-label="Primary Content Details" hidden hasNoPadding>
-      test
-    </DataListContent>
-  );
-  expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPadding);
-});
-
-test(`DataListContent has hidden property when isHidden is passed`, () => {
-  render(
-    <DataListContent data-testid="test-id" aria-label="Primary Content Details" isHidden>
-      test
-    </DataListContent>
-  );
-  expect(screen.getByTestId('test-id')).toHaveAttribute('hidden');
-});
-
-test(`DataListContent has custom class when className is passed`, () => {
-  render(
-    <DataListContent data-testid="test-id" aria-label="Primary Content Details" className="test-class">
-      test
-    </DataListContent>
-  );
-  expect(screen.getByTestId('test-id')).toHaveClass('test-class');
-});

packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataListAction } from '../DataListAction';
+
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(
+    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
+      test
+    </DataListAction>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListItemAction}`, () => {
+  render(
+    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
+      test
+    </DataListAction>
+  );
+  expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction);
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(
+    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
+      test
+    </DataListAction>
+  );
+  expect(screen.getByText('test')).toHaveClass('test-class');
+});
+
+test('Renders button with visibliity breakpoint set', () => {
+  render(
+    <DataListAction
+      visibility={{ default: 'hidden', lg: 'visible' }}
+      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');
+});
+
+test('Does not render button with hidden breakpoint set', () => {
+  render(
+    <DataListAction
+      visibility={{ '2xl': 'hidden' }}
+      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-on-2xl');
+});