Added tests for ListItem

Author: Eric Olkowski

packages/react-core/src/components/List/ListItem.tsx

@@ -2,18 +2,21 @@ import styles from '@patternfly/react-styles/css/components/List/list';
 import { css } from '@patternfly/react-styles';
 
 export interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
-  /** Icon for the list item */
-  icon?: React.ReactNode | null;
+  /** Additional classes added to the list item */
+  className?: string;
   /** Anything that can be rendered inside of list item */
   children: React.ReactNode;
+  /** Icon for the list item */
+  icon?: React.ReactNode | null;
 }
 
 export const ListItem: React.FunctionComponent<ListItemProps> = ({
-  icon = null,
+  className,
   children = null,
+  icon = null,
   ...props
 }: ListItemProps) => (
-  <li className={css(icon && styles.listItem)} {...props}>
+  <li className={css(icon && styles.listItem, className)} {...props}>
     {icon && <span className={css(styles.listItemIcon)}>{icon}</span>}
     <span className={icon && css(`${styles.list}__item-text`)}>{children}</span>
   </li>

packages/react-core/src/components/List/__tests__/Generated/ListItem.test.tsx

@@ -64,7 +64,7 @@ describe('Shared tests between ol and ul lists', () => {
       expect(screen.getByRole('list')).toHaveAccessibleName('Testing stuff');
     });
 
-    test(`Renders with spread props for ${component} list`, () => {
+    test(`Spreads additional props when passed for ${component} list`, () => {
       render(<List component={component} id="Test ID"></List>);
 
       expect(screen.getByRole('list')).toHaveAttribute('id', 'Test ID');
@@ -91,10 +91,16 @@ describe('Shared tests between ol and ul lists', () => {
 });
 
 describe('Ol component list', () => {
+  test(`Renders with type of "1" by default`, () => {
+    render(<List component={ListComponent.ol}></List>);
+
+    expect(screen.getByRole('list')).toHaveAttribute('type', '1');
+  });
+
   test(`Renders with type attribute when type is passed`, () => {
-    render(<List component={ListComponent.ol} type={OrderType.lowercaseRomanNumber}></List>);
+    render(<List component={ListComponent.ol} type={OrderType.uppercaseLetter}></List>);
 
-    expect(screen.getByRole('list')).toHaveAttribute('type', 'i');
+    expect(screen.getByRole('list')).toHaveAttribute('type', 'A');
   });
 });
 

packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { ListItem } from '../ListItem';
+import styles from '@patternfly/react-styles/css/components/List/list';
+
+test('Renders with children', () => {
+  render(<ListItem>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveTextContent('List item content');
+});
+
+test(`Does not render with a class by default`, () => {
+  render(<ListItem>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).not.toHaveClass();
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<ListItem className="test-class">List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveClass('test-class', { exact: true });
+});
+
+test(`Renders with icon content when icon prop is passed`, () => {
+  render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toContainHTML('<div>Icon content</div>');
+});
+
+test(`Renders with class ${styles.listItem} when icon prop is passed`, () => {
+  render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveClass(styles.listItem, { exact: true });
+});
+
+test(`Spreads additional props when passed`, () => {
+  render(<ListItem id="test-ID">List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveAttribute('id', 'test-ID');
+});
+
+test('Matches snapshot without icon', () => {
+  const { asFragment } = render(<ListItem>List item content</ListItem>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with icon', () => {
+  const { asFragment } = render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with icon 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-v6-c-list__item"
+  >
+    <span
+      class="pf-v6-c-list__item-icon"
+    >
+      <div>
+        Icon content
+      </div>
+    </span>
+    <span
+      class="pf-v6-c-list__item-text"
+    >
+      List item content
+    </span>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without icon 1`] = `
+<DocumentFragment>
+  <li
+    class=""
+  >
+    <span>
+      List item content
+    </span>
+  </li>
+</DocumentFragment>
+`;