forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-02 22:01:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated sorting dropdown to accept an order object instead of two individual props

Browse Source
This commit is contained in:
Alejandro Celaya
2021-11-06 12:26:20 +01:00
parent 7169c6e083
commit ee826458be
7 changed files with 41 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
test/short-urls/ShortUrlsList.test.tsx
View File

@@ -108,23 +108,16 @@ describe('<ShortUrlsList />', () => {
});
it('handles order by through dropdown', () => {
expect(wrapper.find(SortingDropdown).prop('orderField')).not.toBeDefined();
expect(wrapper.find(SortingDropdown).prop('orderDir')).not.toBeDefined();
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual('visits');
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual('ASC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
wrapper.find(SortingDropdown).simulate('change', 'shortCode', 'DESC');
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual('shortCode');
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual('DESC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' });
wrapper.find(SortingDropdown).simulate('change', undefined, undefined);
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual(undefined);
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual(undefined);
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
expect(listShortUrlsMock).toHaveBeenCalledTimes(3);
expect(listShortUrlsMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
@@ -140,10 +133,9 @@ describe('<ShortUrlsList />', () => {
[ Mock.of<OrderBy>({ visits: 'ASC' }), 'visits', 'ASC' ],
[ Mock.of<OrderBy>({ title: 'DESC' }), 'title', 'DESC' ],
[ Mock.of<OrderBy>(), undefined, undefined ],
])('has expected initial ordering', (initialOrderBy, expectedField, expectedDir) => {
])('has expected initial ordering', (initialOrderBy, field, dir) => {
const wrapper = createWrapper(initialOrderBy);
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual(expectedField);
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual(expectedDir);
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field, dir });
});
});

9
test/tags/TagsList.test.tsx
View File

@@ -89,14 +89,11 @@ describe('<TagsList />', () => {
it('triggers ordering when sorting dropdown changes', () => {
const wrapper = createWrapper({ filteredTags: [] });
expect(wrapper.find(SortingDropdown).prop('orderField')).not.toBeDefined();
expect(wrapper.find(SortingDropdown).prop('orderDir')).not.toBeDefined();
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'tag', 'DESC');
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual('tag');
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual('DESC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' });
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual('visits');
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual('ASC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
});
it('can update current order via orderByColumn from table component', () => {

14
test/utils/SortingDropdown.test.tsx
View File

@@ -14,7 +14,7 @@ describe('<SortingDropdown />', () => {
baz: 'Hello World',
};
const createWrapper = (props: Partial<SortingDropdownProps> = {}) => {
wrapper = shallow(<SortingDropdown items={items} onChange={identity} {...props} />);
wrapper = shallow(<SortingDropdown items={items} order={{}} onChange={identity} {...props} />);
return wrapper;
};
@@ -34,7 +34,7 @@ describe('<SortingDropdown />', () => {
});
it('properly marks selected field as active with proper icon', () => {
const wrapper = createWrapper({ orderField: 'bar', orderDir: 'DESC' });
const wrapper = createWrapper({ order: { field: 'bar', dir: 'DESC' } });
const activeItem = wrapper.find('DropdownItem[active=true]');
const activeItemIcon = activeItem.first().find(FontAwesomeIcon);
@@ -55,7 +55,7 @@ describe('<SortingDropdown />', () => {
it('triggers change function when item is clicked and an order field was provided', () => {
const onChange = jest.fn();
const wrapper = createWrapper({ onChange, orderField: 'baz', orderDir: 'ASC' });
const wrapper = createWrapper({ onChange, order: { field: 'baz', dir: 'ASC' } });
const firstItem = wrapper.find(DropdownItem).first();
firstItem.simulate('click');
@@ -66,7 +66,7 @@ describe('<SortingDropdown />', () => {
it('updates order dir when already selected item is clicked', () => {
const onChange = jest.fn();
const wrapper = createWrapper({ onChange, orderField: 'foo', orderDir: 'ASC' });
const wrapper = createWrapper({ onChange, order: { field: 'foo', dir: 'ASC' } });
const firstItem = wrapper.find(DropdownItem).first();
firstItem.simulate('click');
@@ -79,14 +79,14 @@ describe('<SortingDropdown />', () => {
[{ isButton: false }, <>Order by</> ],
[{ isButton: true }, <>Order by...</> ],
[
{ isButton: true, orderField: 'foo', orderDir: 'ASC' as OrderDir },
{ isButton: true, order: { field: 'foo', dir: 'ASC' as OrderDir } },
'Order by: "Foo" - "ASC"',
],
[
{ isButton: true, orderField: 'baz', orderDir: 'DESC' as OrderDir },
{ isButton: true, order: { field: 'baz', dir: 'DESC' as OrderDir } },
'Order by: "Hello World" - "DESC"',
],
[{ isButton: true, orderField: 'baz' }, 'Order by: "Hello World" - "DESC"' ],
[{ isButton: true, order: { field: 'baz' } }, 'Order by: "Hello World" - "DESC"' ],
])('displays expected text in toggle', (props, expectedText) => {
const wrapper = createWrapper(props);
const toggle = wrapper.find(DropdownToggle);