From b538e54a14f963bf96c59c0ab287ca4b165109a1 Mon Sep 17 00:00:00 2001 From: Dylan Kilgore Date: Tue, 10 Oct 2023 15:00:34 -0700 Subject: [PATCH] fix: list: add listclassnames prop and unit tests --- src/components/List/List.stories.tsx | 3 +- src/components/List/List.test.tsx | 35 ++++++++++--- src/components/List/List.tsx | 2 + src/components/List/List.types.ts | 6 ++- .../List/__snapshots__/List.test.tsx.snap | 52 +++++++++++++------ 5 files changed, 73 insertions(+), 25 deletions(-) diff --git a/src/components/List/List.stories.tsx b/src/components/List/List.stories.tsx index 306d70759..a45ec1d7c 100644 --- a/src/components/List/List.stories.tsx +++ b/src/components/List/List.stories.tsx @@ -82,10 +82,11 @@ const listArgs: Object = {

Header

), - 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 index 56bdc3ae3..c6d0544ea 100644 --- 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 = { ), layout: 'vertical', renderItem: (item: User) => ( -
+

{item.name}

{item.summary}
@@ -40,12 +41,13 @@ const listProps: ListProps = {

Header

), - 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( - - ); + const { container } = render(); expect(container.querySelector('.vertical')).toBeFalsy(); expect(container).toMatchSnapshot(); }); + + test('List uses custom props', () => { + const { container } = render(); + 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( + + ); + 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 index 41bacc595..a2fd0d6ad 100644 --- a/src/components/List/List.tsx +++ b/src/components/List/List.tsx @@ -17,6 +17,7 @@ export const List = ({ style, itemClassNames, itemStyle, + listClassNames, listType = 'ul', role, itemProps, @@ -25,6 +26,7 @@ export const List = ({ }: ListProps) => { 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 index 5c8d1d0c4..3fc0822d1 100644 --- a/src/components/List/List.types.ts +++ b/src/components/List/List.types.ts @@ -25,7 +25,7 @@ export interface ListProps extends OcBaseProps { */ header?: ReactNode; /** - * Custom classes for list item + * Custom classes for the list item. */ itemClassNames?: string; /** @@ -45,6 +45,10 @@ export interface ListProps extends OcBaseProps { * @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 index f08e5d5a4..f5763de34 100644 --- 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`] = `
  • -
    +

    User 1

    @@ -34,7 +36,9 @@ exports[`List List is horizontal 1`] = ` class="list-item my-list-item-class" style="padding: 8px 16px;" > -
    +

    User 2

    @@ -47,7 +51,9 @@ exports[`List List is horizontal 1`] = ` class="list-item my-list-item-class" style="padding: 8px 16px;" > -
    +

    User 3

    @@ -60,7 +66,9 @@ exports[`List List is horizontal 1`] = ` class="list-item my-list-item-class" style="padding: 8px 16px;" > -
    +

    User 4

    @@ -73,7 +81,9 @@ exports[`List List is horizontal 1`] = ` class="list-item my-list-item-class" style="padding: 8px 16px;" > -
    +

    User 5

    @@ -97,7 +107,7 @@ exports[`List List is horizontal 1`] = ` exports[`List Renders without crashing 1`] = `
    • -
      +

      User 1

      @@ -128,7 +140,9 @@ exports[`List Renders without crashing 1`] = ` class="list-item my-list-item-class" style="padding: 8px 16px;" > -
      +

      User 2

      @@ -141,7 +155,9 @@ exports[`List Renders without crashing 1`] = ` class="list-item my-list-item-class" style="padding: 8px 16px;" > -
      +

      User 3

      @@ -154,7 +170,9 @@ exports[`List Renders without crashing 1`] = ` class="list-item my-list-item-class" style="padding: 8px 16px;" > -
      +

      User 4

      @@ -167,7 +185,9 @@ exports[`List Renders without crashing 1`] = ` class="list-item my-list-item-class" style="padding: 8px 16px;" > -
      +

      User 5