From 2a70043d2700f40fdba1755d392a7fc13f2be379 Mon Sep 17 00:00:00 2001
From: kmcfaul <45077788+kmcfaul@users.noreply.github.com>
Date: Wed, 15 Nov 2023 10:19:16 -0500
Subject: [PATCH] chore(DataList): update tests (#9672)

* add spread prop test, update test

* chore(DataList): update tests

* fix merge error

* break out into separate files, pr feedback

* updates

* fix some example ids

* minor test updates

* revert action change
---
 .../src/components/DataList/DataList.tsx      |   2 +
 .../components/DataList/DataListAction.tsx    |   2 +-
 .../DataList/__tests__/DataList.test.tsx      | 444 ++++++------------
 .../__tests__/DataListAction.test.tsx         |  75 +++
 .../DataList/__tests__/DataListCell.test.tsx  | 120 +++++
 .../DataList/__tests__/DataListCheck.test.tsx |   5 +
 .../__tests__/DataListContent.test.tsx        |  73 +++
 .../DataList/__tests__/DataListItem.test.tsx  |  46 ++
 .../__tests__/DataListItemCells.test.tsx      |  25 +
 .../__tests__/DataListItemRow.test.tsx        |  44 ++
 .../__tests__/DataListToggle.test.tsx         |  61 +++
 .../__snapshots__/DataList.test.tsx.snap      | 325 +------------
 .../DataListAction.test.tsx.snap              |  11 +
 .../__snapshots__/DataListCell.test.tsx.snap  |  11 +
 .../DataListContent.test.tsx.snap             |  17 +
 .../__snapshots__/DataListItem.test.tsx.snap  |  11 +
 .../DataListItemCells.test.tsx.snap           |   9 +
 .../DataListItemRow.test.tsx.snap             |   9 +
 .../DataListToggle.test.tsx.snap              |  45 ++
 .../DataList/examples/DataListCheckboxes.tsx  |  10 +-
 .../examples/DataListMixedExpandable.tsx      |   2 +-
 21 files changed, 713 insertions(+), 634 deletions(-)
 create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx
 create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx
 create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx
 create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx
 create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx
 create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListItemRow.test.tsx
 create mode 100644 packages/react-core/src/components/DataList/__tests__/DataListToggle.test.tsx
 create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListAction.test.tsx.snap
 create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListCell.test.tsx.snap
 create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListContent.test.tsx.snap
 create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap
 create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap
 create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap
 create mode 100644 packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap

diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx
index 5b2a82a738c..817fb1c6875 100644
--- 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
index 807bf915691..ea38de0e3e7 100644
--- a/packages/react-core/src/components/DataList/DataListAction.tsx
+++ b/packages/react-core/src/components/DataList/DataListAction.tsx
@@ -35,8 +35,8 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
   id,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   isPlainButtonAction,
-  /* eslint-enable @typescript-eslint/no-unused-vars */
   ...props
 }: DataListActionProps) => (
   <div className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)} {...props}>
diff --git a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
index a7a5bc878c1..f28b8cd6f2c 100644
--- a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
@@ -5,346 +5,182 @@ 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 { Dropdown, DropdownList, DropdownItem } from '../../Dropdown';
-import { MenuToggle } from '../../MenuToggle';
-import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
-describe('DataList', () => {
-  test('List default', () => {
-    const { asFragment } = render(<DataList aria-label="this is a simple list" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
-  test('List compact', () => {
-    const { asFragment } = render(<DataList aria-label="this is a simple list" isCompact />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DataList aria-label="list" />);
+  expect(asFragment()).toMatchSnapshot();
+});
 
-  describe('DataList variants', () => {
-    ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach((oneBreakpoint) => {
-      test(`Breakpoint - ${oneBreakpoint}`, () => {
-        const { asFragment } = render(
-          <DataList aria-label="this is a simple list" gridBreakpoint={oneBreakpoint as any} />
-        );
-        expect(asFragment()).toMatchSnapshot();
-      });
-    });
-  });
+test(`Renders with default class ${styles.dataList}`, () => {
+  render(<DataList aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.dataList);
+});
 
-  test('List draggable', () => {
-    const { asFragment } = render(<DataList aria-label="this is a simple list" isCompact onDragFinish={jest.fn()} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders with custom class when className is passed`, () => {
+  render(<DataList aria-label="list" className="custom" />);
+  expect(screen.getByLabelText('list')).toHaveClass('custom');
+});
 
-  test('List', () => {
-    const { asFragment } = render(
-      <DataList key="list-id-1" className="data-list-custom" aria-label="this is a simple list" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders with spread props`, () => {
+  render(<DataList aria-label="list" id="test" />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('id', 'test');
+});
 
-  test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
-        <DataListItem>
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
+test(`Renders with aria-label when aria-label is passed`, () => {
+  render(<DataList aria-label="list">test</DataList>);
+  expect(screen.getByText('test')).toHaveAccessibleName('list');
+});
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => {
+  render(<DataList aria-label="list" isCompact />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
+});
 
-    expect(selectableInput).toBeInTheDocument();
+['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]);
   });
+});
 
-  test('List does not render with a hidden input to improve a11y when selectableRow is not passed', () => {
-    render(
-      <DataList aria-label="this is a simple list">
-        <DataListItem>
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
-
-    const selectableInput = screen.queryByRole('radio', { hidden: true });
-
-    expect(selectableInput).not.toBeInTheDocument();
+const gridBreakpointClasses = {
+  none: styles.modifiers.gridNone,
+  always: 'pf-m-grid',
+  sm: styles.modifiers.gridSm,
+  md: styles.modifiers.gridMd,
+  lg: styles.modifiers.gridLg,
+  xl: styles.modifiers.gridXl,
+  '2xl': styles.modifiers.grid_2xl
+};
+
+['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach((oneBreakpoint) => {
+  test(`Has breakpoint - ${oneBreakpoint} when gridBreakpoint is pased`, () => {
+    render(<DataList aria-label="list" gridBreakpoint={oneBreakpoint as any} />);
+    expect(screen.getByLabelText('list')).toHaveClass(gridBreakpointClasses[oneBreakpoint]);
   });
+});
 
-  test('List calls selectableRow.onChange when the selectable input changes', async () => {
-    const mock = jest.fn();
-    const user = userEvent.setup();
-
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
-        <DataListItem id="item-test-id">
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
-
-    const selectableInput = screen.getByRole('radio', { hidden: true });
-    await user.click(selectableInput);
+test(`Renders default class ${styles.dataList}`, () => {
+  render(<DataList key="list-id-1" aria-label="list" />);
+  expect(screen.getByLabelText('list')).toHaveClass(styles.dataList);
+});
 
-    expect(mock).toHaveBeenCalled();
-  });
+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 does not call selectableRow.onChange when the selectable input is not changed', () => {
-    const mock = jest.fn();
+test('Renders with a hidden input to improve a11y when onSelectableRowChange is passed', () => {
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
+      <DataListItem>
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
 
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
-        <DataListItem id="item-test-id">
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-    expect(mock).not.toHaveBeenCalled();
-  });
-
-  test('Item applies selectableInputAriaLabel to the hidden input', () => {
-    render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
-        <DataListItem selectableInputAriaLabel="Data list item label test">
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
+  expect(selectableInput).toBeInTheDocument();
+});
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+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>
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
 
-    expect(selectableInput).toHaveAccessibleName('Data list item label test');
-  });
+  const selectableInput = screen.queryByRole('radio', { hidden: true });
 
-  test('Item 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">
-          <p id="test-id">Test cell content</p>
-        </DataListItem>
-      </DataList>
-    );
+  expect(selectableInput).not.toBeInTheDocument();
+});
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+test('Calls onSelectableRowChange when the selectable input changes', async () => {
+  const mock = jest.fn();
+  const user = userEvent.setup();
 
-    expect(selectableInput).toHaveAccessibleName('Test cell content');
-  });
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
+      <DataListItem id="item-test-id">
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
+      </DataListItem>
+    </DataList>
+  );
 
-  test('Item 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">
-          <p id="test-id">Test cell content</p>
-        </DataListItem>
-      </DataList>
-    );
+  const selectableInput = screen.getByRole('radio', { hidden: true });
+  await user.click(selectableInput);
 
-    const selectableInput = screen.getByRole('radio', { hidden: true });
+  expect(mock).toHaveBeenCalled();
+});
 
-    expect(selectableInput).toHaveAccessibleName('Data list item label test');
-  });
+test('Does not call onSelectableRowChange when the selectable input is not changed', () => {
+  const mock = jest.fn();
 
-  test('Item default', () => {
-    const { asFragment } = render(
-      <DataListItem key="item-id-1" aria-labelledby="item-1">
-        test
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
+      <DataListItem id="item-test-id">
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
       </DataListItem>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+    </DataList>
+  );
 
-  test('Item expanded', () => {
-    render(
-      <DataListItem aria-labelledby="item-1" isExpanded>
-        test
-      </DataListItem>
-    );
-    expect(screen.getByRole('listitem')).toHaveClass(`${styles.dataListItem} ${styles.modifiers.expanded}`);
-  });
+  expect(mock).not.toHaveBeenCalled();
+});
 
-  test('Item', () => {
-    const { asFragment } = render(
-      <DataListItem className="data-list-item-custom" aria-labelledby="item-1">
-        test
+test('Applies selectableInputAriaLabel to the hidden input', () => {
+  render(
+    <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
+      <DataListItem selectableInputAriaLabel="Data list item label test">
+        <DataListItemRow aria-labelledby="test-id">
+          <p id="test-id">Test</p>
+        </DataListItemRow>
       </DataListItem>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('item row default', () => {
-    const { asFragment } = render(<DataListItemRow>test</DataListItemRow>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Cell default', () => {
-    const { asFragment } = render(<DataListCell>Secondary</DataListCell>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Cells', () => {
-    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 with width modifier', () => {
-    [
-      { 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(styles.dataListCell)
-        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
-    });
-  });
+    </DataList>
+  );
 
-  test('Cell with text modifiers', () => {
-    [
-      { 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(styles.dataListCell)
-        : expect(dataListCell).toHaveClass(`${styles.dataListCell} ${testCase.class}`);
-    });
-  });
-
-  test('Toggle default with aria label', () => {
-    render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" />);
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-    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');
-  });
+  expect(selectableInput).toHaveAccessibleName('Data list item label test');
+});
 
-  test('Toggle expanded', () => {
-    render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />);
-    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
-  });
+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">
+        <p id="test-id">Test cell content</p>
+      </DataListItem>
+    </DataList>
+  );
 
-  test('DataListAction dropdown', () => {
-    const { asFragment } = render(
-      <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" isPlainButtonAction>
-        <Dropdown toggle={(toggleRef) => <MenuToggle ref={toggleRef} />}>
-          <DropdownList>
-            <DropdownItem onClick={jest.fn()} key="action-1">
-              action-1
-            </DropdownItem>
-            ,
-            <DropdownItem onClick={jest.fn()} key="action-2">
-              action-2
-            </DropdownItem>
-          </DropdownList>
-        </Dropdown>
-      </DataListAction>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-  test('DataListAction button', () => {
-    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 visibility - show button when lg', () => {
-    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');
-  });
+  expect(selectableInput).toHaveAccessibleName('Test cell content');
+});
 
-  test('DataListAction visibility - hide button on 2xl', () => {
-    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('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">
+        <p id="test-id">Test cell content</p>
+      </DataListItem>
+    </DataList>
+  );
 
-  test('DataListContent', () => {
-    const { asFragment } = render(<DataListContent aria-label="Primary Content Details"> test</DataListContent>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+  const selectableInput = screen.getByRole('radio', { hidden: true });
 
-  test('DataListContent hasNoPadding', () => {
-    const { asFragment } = render(
-      <DataListContent aria-label="Primary Content Details" hidden hasNoPadding>
-        test
-      </DataListContent>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(selectableInput).toHaveAccessibleName('Data list item label test');
 });
diff --git a/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx
new file mode 100644
index 00000000000..38745263caa
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx
@@ -0,0 +1,75 @@
+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">
+      test
+    </DataListAction>
+  );
+  expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction, { exact: true });
+});
+
+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 with spread props`, () => {
+  render(
+    <DataListAction dir="rtl" aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
+      test
+    </DataListAction>
+  );
+  expect(screen.getByText('test')).toHaveAttribute('dir', 'rtl');
+});
+
+test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = true`, () => {
+  render(
+    <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>
+    );
+
+    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`]);
+  });
+});
diff --git a/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx
new file mode 100644
index 00000000000..6e5954384fa
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataListCell } from '../DataListCell';
+
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+
+test('Cell renders to match snapshot', () => {
+  const { asFragment } = render(<DataListCell>Secondary</DataListCell>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders default class ${styles.dataListCell}`, () => {
+  render(
+    <DataListCell data-testid="test" key={0}>
+      Primary Id
+    </DataListCell>
+  );
+  expect(screen.getByTestId('test')).toHaveClass(styles.dataListCell, { exact: true });
+});
+
+test(`Renders 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(`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: 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}`;
+
+    render(
+      <DataListCell data-testid={testId} width={testCase.width as any} key={index}>
+        Primary Id
+      </DataListCell>
+    );
+
+    const dataListCell = screen.getByTestId(testId);
+
+    testCase.class === ''
+      ? 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: styles.modifiers.breakWord },
+    { wrapModifier: 'nowrap', class: styles.modifiers.nowrap },
+    { wrapModifier: 'truncate', class: styles.modifiers.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).not.toHaveClass(
+          styles.modifiers.breakWord,
+          styles.modifiers.nowrap,
+          styles.modifiers.truncate
+        )
+      : expect(dataListCell).toHaveClass(`${testCase.class}`);
+  });
+});
+
+test(`Renders with class ${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(`Renders with class ${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(`Renders with class ${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);
+});
diff --git a/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx
index 9e69ff734e8..fa1424c746f 100644
--- 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
new file mode 100644
index 00000000000..912bb48f0de
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataListContent } from '../DataListContent';
+
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DataListContent aria-label="Primary Content Details"> test</DataListContent>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListExpandableContent}`, () => {
+  render(
+    <DataListContent data-testid="test-id" aria-label="Primary Content Details">
+      test
+    </DataListContent>
+  );
+  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`, () => {
+  render(
+    <DataListContent data-testid="test-id" aria-label="Primary Content Details" className="test-class">
+      test
+    </DataListContent>
+  );
+  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>
+      test
+    </DataListContent>
+  );
+  expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPadding);
+});
+
+test(`Renders with 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');
+});
diff --git a/packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx
new file mode 100644
index 00000000000..54f358c8e83
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataListItem } from '../DataListItem';
+
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(
+    <DataListItem key="item-id-1" aria-labelledby="item-1">
+      test
+    </DataListItem>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListItem}`, () => {
+  render(<DataListItem aria-labelledby="item-1">test</DataListItem>);
+  expect(screen.getByRole('listitem')).toHaveClass(styles.dataListItem, { exact: true });
+});
+
+test('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('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>
+      test
+    </DataListItem>
+  );
+  expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expanded);
+});
diff --git a/packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx
new file mode 100644
index 00000000000..e8419f2b361
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataListItemCells } from '../DataListItemCells';
+
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+
+test('Cells renders to match snapshot', () => {
+  const { asFragment } = render(<DataListItemCells dataListCells={[]} />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListItemContent}`, () => {
+  render(<DataListItemCells dataListCells="test" />);
+  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');
+});
diff --git a/packages/react-core/src/components/DataList/__tests__/DataListItemRow.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListItemRow.test.tsx
new file mode 100644
index 00000000000..74ec2e6fafc
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/DataListItemRow.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataListItemRow } from '../DataListItemRow';
+
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+
+test('Item row renders to match snapshot', () => {
+  const { asFragment } = render(<DataListItemRow>test</DataListItemRow>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListItemRow}`, () => {
+  render(<DataListItemRow data-testid="test">test</DataListItemRow>);
+  expect(screen.getByTestId('test')).toHaveClass(styles.dataListItemRow, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(
+    <DataListItemRow className="custom" data-testid="test">
+      test
+    </DataListItemRow>
+  );
+  expect(screen.getByTestId('test')).toHaveClass('custom');
+});
+
+test(`Renders with spread props`, () => {
+  render(
+    <DataListItemRow dir="rtl" data-testid="test">
+      test
+    </DataListItemRow>
+  );
+  expect(screen.getByTestId('test')).toHaveAttribute('dir', 'rtl');
+});
+
+['nowrap', 'truncate', 'breakWord'].forEach((wrap) => {
+  test(`Renders with class ${styles.modifiers[wrap]} when wrapModifier = ${wrap} is pased`, () => {
+    render(
+      <DataListItemRow data-testid="test" wrapModifier={wrap as 'nowrap' | 'truncate' | 'breakWord'}>
+        test
+      </DataListItemRow>
+    );
+    expect(screen.getByTestId('test')).toHaveClass(styles.modifiers[wrap]);
+  });
+});
diff --git a/packages/react-core/src/components/DataList/__tests__/DataListToggle.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListToggle.test.tsx
new file mode 100644
index 00000000000..8f7f8b4cd9b
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/DataListToggle.test.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataListToggle } from '../DataListToggle';
+
+import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<DataListToggle id="ex-toggle2" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default class ${styles.dataListToggle}`, () => {
+  render(<DataListToggle id="ex-toggle2" />);
+  expect(screen.getByRole('button').parentElement).toHaveClass(styles.dataListToggle);
+});
+
+test(`Renders with default class ${styles.dataListItemControl}`, () => {
+  render(<DataListToggle id="ex-toggle2" />);
+  expect(screen.getByRole('button').parentElement?.parentElement).toHaveClass(styles.dataListItemControl, {
+    exact: true
+  });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<DataListToggle className="custom" id="ex-toggle2" />);
+  expect(screen.getByRole('button').parentElement?.parentElement).toHaveClass('custom');
+});
+
+test(`Renders with spread props`, () => {
+  render(<DataListToggle dir="rtl" id="ex-toggle2" />);
+  expect(screen.getByRole('button').parentElement?.parentElement).toHaveAttribute('dir', 'rtl');
+});
+
+test(`Renders with spread buttonProps`, () => {
+  render(<DataListToggle buttonProps={{ isDisabled: true }} id="ex-toggle2" />);
+  expect(screen.getByRole('button')).toHaveAttribute('disabled');
+});
+
+test('Renders aria-labelledby by default when no custom aria-label is passed', () => {
+  render(<DataListToggle rowid="row" id="ex-toggle2" />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-labelledby', 'row ex-toggle2');
+});
+
+test('Does not render aria-labelledby when custom aria-label is passed', () => {
+  render(<DataListToggle aria-label="Toggle details for" id="ex-toggle2" />);
+
+  expect(screen.getByRole('button')).not.toHaveAttribute('aria-labelledby');
+  expect(screen.getByRole('button')).toHaveAccessibleName('Toggle details for');
+});
+
+test(`Renders with ariaControls when ariaControls is passed`, () => {
+  render(<DataListToggle aria-controls="control" id="ex-toggle2" />);
+  expect(screen.getByRole('button')).toHaveAttribute('aria-controls', 'control');
+});
+
+test('Renders with aria-expanded when isExpanded = true', () => {
+  render(<DataListToggle isExpanded id="ex-toggle2" />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+});
diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap
index ee9d1720bb9..c8bebb7725c 100644
--- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap
+++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap
@@ -1,332 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DataList Cell default 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__cell"
-  >
-    Secondary
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList Cells 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-content"
-  >
-    <div
-      class="pf-v5-c-data-list__cell data-list-custom"
-      id="primary-item"
-    >
-      Primary Id
-    </div>
-    <div
-      class="pf-v5-c-data-list__cell data-list-custom"
-      id="primary-item"
-    >
-      Primary Id 2
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - 2xl 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-2xl"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - always 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - lg 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-lg"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - md 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-md"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - none 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-none"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - sm 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-sm"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - xl 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-xl"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataListAction button 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-action"
-  >
-    <button
-      aria-disabled="false"
-      class="pf-v5-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-1"
-      data-ouia-component-type="PF5/Button"
-      data-ouia-safe="true"
-      id="delete-item-1"
-      type="button"
-    >
-      Delete
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList DataListAction dropdown 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-action"
-  >
-    <div
-      class="pf-v5-c-data-list__action"
-    >
-      <button
-        aria-expanded="false"
-        class="pf-v5-c-menu-toggle"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-menu-toggle__text"
-        />
-        <span
-          class="pf-v5-c-menu-toggle__controls"
-        >
-          <span
-            class="pf-v5-c-menu-toggle__toggle-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 320 512"
-              width="1em"
-            >
-              <path
-                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-              />
-            </svg>
-          </span>
-        </span>
-      </button>
-      <div
-        class="pf-v5-c-menu"
-        data-ouia-component-id="OUIA-Generated-Dropdown-1"
-        data-ouia-component-type="PF5/Dropdown"
-        data-ouia-safe="true"
-        style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
-      >
-        <div
-          class="pf-v5-c-menu__content"
-        >
-          <ul
-            class="pf-v5-c-menu__list"
-            role="menu"
-          >
-            <li
-              class="pf-v5-c-menu__list-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-1"
-              data-ouia-component-type="PF5/DropdownItem"
-              data-ouia-safe="true"
-              role="none"
-            >
-              <button
-                class="pf-v5-c-menu__item"
-                role="menuitem"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="pf-v5-c-menu__item-main"
-                >
-                  <span
-                    class="pf-v5-c-menu__item-text"
-                  >
-                    action-1
-                  </span>
-                </span>
-              </button>
-            </li>
-            ,
-            <li
-              class="pf-v5-c-menu__list-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-2"
-              data-ouia-component-type="PF5/DropdownItem"
-              data-ouia-safe="true"
-              role="none"
-            >
-              <button
-                class="pf-v5-c-menu__item"
-                role="menuitem"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="pf-v5-c-menu__item-main"
-                >
-                  <span
-                    class="pf-v5-c-menu__item-text"
-                  >
-                    action-2
-                  </span>
-                </span>
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList DataListContent 1`] = `
-<DocumentFragment>
-  <section
-    aria-label="Primary Content Details"
-    class="pf-v5-c-data-list__expandable-content"
-    id=""
-  >
-    <div
-      class="pf-v5-c-data-list__expandable-content-body"
-    >
-       test
-    </div>
-  </section>
-</DocumentFragment>
-`;
-
-exports[`DataList DataListContent hasNoPadding 1`] = `
-<DocumentFragment>
-  <section
-    aria-label="Primary Content Details"
-    class="pf-v5-c-data-list__expandable-content"
-    hidden=""
-    id=""
-  >
-    <div
-      class="pf-v5-c-data-list__expandable-content-body pf-m-no-padding"
-    >
-      test
-    </div>
-  </section>
-</DocumentFragment>
-`;
-
-exports[`DataList Item 1`] = `
-<DocumentFragment>
-  <li
-    aria-labelledby="item-1"
-    class="pf-v5-c-data-list__item data-list-item-custom"
-    id=""
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList Item default 1`] = `
-<DocumentFragment>
-  <li
-    aria-labelledby="item-1"
-    class="pf-v5-c-data-list__item"
-    id=""
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList List 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-md data-list-custom"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList List compact 1`] = `
+exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-compact pf-m-grid-md"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList List default 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
+    aria-label="list"
     class="pf-v5-c-data-list pf-m-grid-md"
     role="list"
   />
 </DocumentFragment>
 `;
-
-exports[`DataList List draggable 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-compact pf-m-grid-md"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList item row default 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-row"
-  />
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListAction.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListAction.test.tsx.snap
new file mode 100644
index 00000000000..cf61bf5eabf
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListAction.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-action"
+  >
+    test
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListCell.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListCell.test.tsx.snap
new file mode 100644
index 00000000000..8dfb9393730
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListCell.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cell renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__cell"
+  >
+    Secondary
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListContent.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListContent.test.tsx.snap
new file mode 100644
index 00000000000..15736a7aa11
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListContent.test.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <section
+    aria-label="Primary Content Details"
+    class="pf-v5-c-data-list__expandable-content"
+    id=""
+  >
+    <div
+      class="pf-v5-c-data-list__expandable-content-body"
+    >
+       test
+    </div>
+  </section>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap
new file mode 100644
index 00000000000..1f0da0b84eb
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <li
+    aria-labelledby="item-1"
+    class="pf-v5-c-data-list__item"
+    id=""
+  />
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap
new file mode 100644
index 00000000000..05d99f283e7
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cells renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-content"
+  />
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap
new file mode 100644
index 00000000000..bacaa0a7320
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Item row renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-row"
+  />
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap
new file mode 100644
index 00000000000..cd3276482cf
--- /dev/null
+++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-control"
+  >
+    <div
+      class="pf-v5-c-data-list__toggle"
+    >
+      <button
+        aria-controls="false"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-label="Details"
+        aria-labelledby=" ex-toggle2"
+        class="pf-v5-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        id="ex-toggle2"
+        type="button"
+      >
+        <div
+          class="pf-v5-c-data-list__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
index c4eb52d718c..8f3ca384ddd 100644
--- a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
@@ -166,8 +166,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
           </DataListAction>
           <DataListAction
             visibility={{ default: 'hidden', lg: 'visible' }}
-            aria-labelledby="check-action-item2 check-action-action2"
-            id="check-action-action2"
+            aria-labelledby="check-action-item2 check-action-action2a"
+            id="check-action-action2a"
             aria-label="Actions"
           >
             <Button variant="primary">Primary</Button>
@@ -192,7 +192,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
           <DataListAction
             visibility={{ xl: 'hidden' }}
             aria-labelledby="check-action-item3 check-action-action3"
-            id="check-actiokn-action3"
+            id="check-action-action3"
             aria-label="Actions"
             isPlainButtonAction
           >
@@ -231,8 +231,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
           </DataListAction>
           <DataListAction
             visibility={{ default: 'hidden', xl: 'visible' }}
-            aria-labelledby="check-action-item3 check-action-action3"
-            id="check-action-action3"
+            aria-labelledby="check-action-item3 check-action-action3a"
+            id="check-action-action3a"
             aria-label="Actions"
           >
             <Button variant="primary">Primary</Button>
diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
index 87648fdc0ed..7f6a33c6b9b 100644
--- a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
@@ -162,7 +162,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               ]}
             />
             <DataListAction
-              aria-labelledby="m-ex-item2 mex-action2"
+              aria-labelledby="m-ex-item2 m-ex-action2"
               id="m-ex-action2"
               aria-label="Actions"
               isPlainButtonAction