Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: list: add listclassnames prop and unit tests #724

Merged
merged 5 commits into from
Oct 26, 2023
Merged

fix: list: add listclassnames prop and unit tests #724

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b538e54
fix: list: add listclassnames prop and unit tests
dkilgore-eightfold Oct 10, 2023
dae3cd6
Merge branch 'main' into dkilgore-eightfold/add-listclassnames-prop
dkilgore-eightfold Oct 17, 2023
60c59f6
Merge branch 'main' into dkilgore-eightfold/add-listclassnames-prop
dkilgore-eightfold Oct 19, 2023
1be8009
Merge branch 'main' into dkilgore-eightfold/add-listclassnames-prop
dkilgore-eightfold Oct 19, 2023
d8be642
Merge branch 'main' into dkilgore-eightfold/add-listclassnames-prop
dkilgore-eightfold Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/List/List.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
};
Expand Down
35 changes: 28 additions & 7 deletions src/components/List/List.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() });

Expand All @@ -13,6 +13,7 @@ interface User {
name: string;
summary: string;
img: string;
id?: number;
}

const sampleList: User[] = [1, 2, 3, 4, 5].map((i) => ({
Expand All @@ -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>
Expand All @@ -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',
};

Expand All @@ -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();
});
});
2 changes: 2 additions & 0 deletions src/components/List/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const List = <T extends any>({
style,
itemClassNames,
itemStyle,
listClassNames,
listType = 'ul',
role,
itemProps,
Expand All @@ -25,6 +26,7 @@ export const List = <T extends any>({
}: ListProps<T>) => {
const containerClasses: string = mergeClasses([
styles.listContainer,
listClassNames,
{ [styles.vertical]: layout === 'vertical' },
]);

Expand Down
6 changes: 5 additions & 1 deletion src/components/List/List.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand All @@ -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
Expand Down
52 changes: 36 additions & 16 deletions src/components/List/__snapshots__/List.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
bwala-eightfold marked this conversation as resolved.
Show resolved Hide resolved
>
<p>
User 1
</p>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading