shlinkio/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-12-11 10:13:55 -06:00
Code Issues Packages Projects Releases 67 Wiki Activity

Improved sorting dropdown to display order field and order dir

Browse Source
This commit is contained in:
Alejandro Celaya 2020-12-25 11:05:50 +01:00
parent 16f4f7eac8
commit 93b4de60f6
2 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/utils/SortingDropdown.tsx
View File

@ -33,7 +33,7 @@ export default function SortingDropdown<T extends string = string>(
> >
{!isButton && <>Order by</>} {!isButton && <>Order by</>}
{isButton && !orderField && <>Order by...</>} {isButton && !orderField && <>Order by...</>}
{isButton && orderField && <>Order by: {items[orderField]} - {orderDir}</>} {isButton && orderField && `Order by: "${items[orderField]}" - "${orderDir ?? 'DESC'}"`}
</DropdownToggle> </DropdownToggle>
<DropdownMenu <DropdownMenu
right={right} right={right}

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

@ -1,9 +1,10 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { shallow, ShallowWrapper } from 'enzyme';
import { DropdownItem } from 'reactstrap'; import { DropdownItem, DropdownToggle } from 'reactstrap';
import { identity, values } from 'ramda'; import { identity, values } from 'ramda';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons'; import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons';
import SortingDropdown, { SortingDropdownProps } from '../../src/utils/SortingDropdown'; import SortingDropdown, { SortingDropdownProps } from '../../src/utils/SortingDropdown';
import { OrderDir } from '../../src/utils/utils';
describe('<SortingDropdown />', () => { describe('<SortingDropdown />', () => {
let wrapper: ShallowWrapper; let wrapper: ShallowWrapper;
@ -73,4 +74,23 @@ describe('<SortingDropdown />', () => {
expect(onChange).toHaveBeenCalledTimes(1); expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith('foo', 'DESC'); expect(onChange).toHaveBeenCalledWith('foo', 'DESC');
}); });
it.each([
[{ isButton: false }, '>Order by<' ],
[{ isButton: true }, '>Order by...<' ],
[
{ isButton: true, orderField: 'foo', orderDir: 'ASC' as OrderDir },
'Order by: &quot;Foo&quot; - &quot;ASC&quot;',
],
[
{ isButton: true, orderField: 'baz', orderDir: 'DESC' as OrderDir },
'Order by: &quot;Hello World&quot; - &quot;DESC&quot;',
],
[{ isButton: true, orderField: 'baz' }, 'Order by: &quot;Hello World&quot; - &quot;DESC&quot;' ],
])('displays expected text in toggle', (props, expectedText) => {
const wrapper = createWrapper(props);
const toggle = wrapper.find(DropdownToggle);
expect(toggle.html()).toContain(expectedText);
});
}); });