fix: list: add listclassnames prop and unit tests (EightfoldAI#724)

EightfoldAI · Oct 26, 2023 · 91fb3ce · 91fb3ce
1 parent 23c8968
commit 91fb3ce
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 25 deletions.
diff --git a/src/components/List/List.stories.tsx b/src/components/List/List.stories.tsx
@@ -82,10 +82,11 @@ const listArgs: Object = {
       <h2>Header</h2>
     </div>
   ),
-  classNames: 'my-list-class',
+  classNames: 'my-ref-class',
   style: {},
   itemClassNames: 'my-list-item-class',
   itemStyle: { padding: '8px 16px' },
+  listClassNames: 'my-list-class',
   listType: 'ul',
   role: '',
 };

diff --git a/src/components/List/List.test.tsx b/src/components/List/List.test.tsx
@@ -3,7 +3,7 @@ import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { List, ListProps } from './';
-import { render } from '@testing-library/react';
+import { render, queryByAttribute } from '@testing-library/react';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -13,6 +13,7 @@ interface User {
   name: string;
   summary: string;
   img: string;
+  id?: number;
 }
 
 const sampleList: User[] = [1, 2, 3, 4, 5].map((i) => ({
@@ -30,7 +31,7 @@ const listProps: ListProps<User> = {
   ),
   layout: 'vertical',
   renderItem: (item: User) => (
-    <div>
+    <div id={`${item.id}`}>
       <p>{item.name}</p>
       <div>{item.summary}</div>
     </div>
@@ -40,12 +41,13 @@ const listProps: ListProps<User> = {
       <h2>Header</h2>
     </div>
   ),
-  classNames: 'my-list-class',
+  classNames: 'my-ref-class',
   style: {},
   itemClassNames: 'my-list-item-class',
   itemStyle: { padding: '8px 16px' },
+  listClassNames: 'my-list-class',
   listType: 'ul',
-  role: '',
+  role: 'list',
   'data-testid': 'test-list',
 };
 
@@ -67,10 +69,29 @@ describe('List', () => {
   });
 
   test('List is horizontal', () => {
-    const { container, getByTestId } = render(
-      <List {...listProps} layout="horizontal" />
-    );
+    const { container } = render(<List {...listProps} layout="horizontal" />);
     expect(container.querySelector('.vertical')).toBeFalsy();
     expect(container).toMatchSnapshot();
   });
+
+  test('List uses custom props', () => {
+    const { container } = render(<List {...listProps} layout="horizontal" />);
+    expect(container.querySelector('.my-list-class').getAttribute('role')).toBe(
+      'list'
+    );
+    expect(container.querySelector('.my-ref-class')).toBeTruthy();
+    expect(container.querySelector('.my-list-class')).toBeTruthy();
+    expect(container.querySelector('.my-list-item-class')).toBeTruthy();
+  });
+
+  test('Should call rowKey function and return a Key', () => {
+    const mockRowKey = jest.fn((item) => item.id);
+    const testItem: User = { id: 123, img: '', name: 'Test', summary: 'test' };
+    const { container } = render(
+      <List {...listProps} rowKey={mockRowKey} items={[testItem]} />
+    );
+    const getById = queryByAttribute.bind(null, 'id');
+    expect(mockRowKey).toHaveBeenCalledWith(testItem);
+    expect(getById(container, `${testItem.id}`)).toBeTruthy();
+  });
 });
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
@@ -17,6 +17,7 @@ export const List = <T extends any>({
   style,
   itemClassNames,
   itemStyle,
+  listClassNames,
   listType = 'ul',
   role,
   itemProps,
@@ -25,6 +26,7 @@ export const List = <T extends any>({
 }: ListProps<T>) => {
   const containerClasses: string = mergeClasses([
     styles.listContainer,
+    listClassNames,
     { [styles.vertical]: layout === 'vertical' },
   ]);
 

diff --git a/src/components/List/List.types.ts b/src/components/List/List.types.ts
@@ -25,7 +25,7 @@ export interface ListProps<T> extends OcBaseProps<HTMLDivElement> {
    */
   header?: ReactNode;
   /**
-   * Custom classes for list item
+   * Custom classes for the list item.
    */
   itemClassNames?: string;
   /**
@@ -45,6 +45,10 @@ export interface ListProps<T> extends OcBaseProps<HTMLDivElement> {
    * @default vertical
    */
   layout?: ItemLayout;
+  /**
+   * Custom classes for the list
+   */
+  listClassNames?: string;
   /**
    * The list html type
    * @default ul

diff --git a/src/components/List/__snapshots__/List.test.tsx.snap b/src/components/List/__snapshots__/List.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`List List is horizontal 1`] = `
 <div>
   <div
-    class="my-list-class"
+    class="my-ref-class"
     data-testid="test-list"
   >
     <div
@@ -14,14 +14,16 @@ exports[`List List is horizontal 1`] = `
       </h2>
     </div>
     <ul
-      class="list-container"
-      role=""
+      class="list-container my-list-class"
+      role="list"
     >
       <li
         class="list-item my-list-item-class"
         style="padding: 8px 16px;"
       >
-        <div>
+        <div
+          id="undefined"
+        >
           <p>
             User 1
           </p>
@@ -34,7 +36,9 @@ exports[`List List is horizontal 1`] = `
         class="list-item my-list-item-class"
         style="padding: 8px 16px;"
       >
-        <div>
+        <div
+          id="undefined"
+        >
           <p>
             User 2
           </p>
@@ -47,7 +51,9 @@ exports[`List List is horizontal 1`] = `
         class="list-item my-list-item-class"
         style="padding: 8px 16px;"
       >
-        <div>
+        <div
+          id="undefined"
+        >
           <p>
             User 3
           </p>
@@ -60,7 +66,9 @@ exports[`List List is horizontal 1`] = `
         class="list-item my-list-item-class"
         style="padding: 8px 16px;"
       >
-        <div>
+        <div
+          id="undefined"
+        >
           <p>
             User 4
           </p>
@@ -73,7 +81,9 @@ exports[`List List is horizontal 1`] = `
         class="list-item my-list-item-class"
         style="padding: 8px 16px;"
       >
-        <div>
+        <div
+          id="undefined"
+        >
           <p>
             User 5
           </p>
@@ -97,7 +107,7 @@ exports[`List List is horizontal 1`] = `
 exports[`List Renders without crashing 1`] = `
 <div>
   <div
-    class="my-list-class"
+    class="my-ref-class"
     data-testid="test-list"
   >
     <div
@@ -108,14 +118,16 @@ exports[`List Renders without crashing 1`] = `
       </h2>
     </div>
     <ul
-      class="list-container vertical"
-      role=""
+      class="list-container my-list-class vertical"
+      role="list"
     >
       <li
         class="list-item my-list-item-class"
         style="padding: 8px 16px;"
       >
-        <div>
+        <div
+          id="undefined"
+        >
           <p>
             User 1
           </p>
@@ -128,7 +140,9 @@ exports[`List Renders without crashing 1`] = `
         class="list-item my-list-item-class"
         style="padding: 8px 16px;"
       >
-        <div>
+        <div
+          id="undefined"
+        >
           <p>
             User 2
           </p>
@@ -141,7 +155,9 @@ exports[`List Renders without crashing 1`] = `
         class="list-item my-list-item-class"
         style="padding: 8px 16px;"
       >
-        <div>
+        <div
+          id="undefined"
+        >
           <p>
             User 3
           </p>
@@ -154,7 +170,9 @@ exports[`List Renders without crashing 1`] = `
         class="list-item my-list-item-class"
         style="padding: 8px 16px;"
       >
-        <div>
+        <div
+          id="undefined"
+        >
           <p>
             User 4
           </p>
@@ -167,7 +185,9 @@ exports[`List Renders without crashing 1`] = `
         class="list-item my-list-item-class"
         style="padding: 8px 16px;"
       >
-        <div>
+        <div
+          id="undefined"
+        >
           <p>
             User 5
           </p>