Added new settings card to customize short URLs lists

test/settings/Settings.test.tsx

@@ -4,7 +4,7 @@ import NoMenuLayout from '../../src/common/NoMenuLayout';
 
 describe('<Settings />', () => {
   const Component = () => null;
-  const Settings = createSettings(Component, Component, Component, Component, Component);
+  const Settings = createSettings(Component, Component, Component, Component, Component, Component);
 
   it('renders a no-menu layout with the expected settings sections', () => {
     const wrapper = shallow(<Settings />);
@@ -13,6 +13,6 @@ describe('<Settings />', () => {
 
     expect(layout).toHaveLength(1);
     expect(sections).toHaveLength(1);
-    expect((sections.prop('items') as any[]).flat()).toHaveLength(5);
+    expect((sections.prop('items') as any[]).flat()).toHaveLength(6);
   });
 });

test/settings/ShortUrlsList.test.tsx

@@ -0,0 +1,48 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from '../../src/settings/reducers/settings';
+import { ShortUrlsList } from '../../src/settings/ShortUrlsList';
+import SortingDropdown from '../../src/utils/SortingDropdown';
+import { ShortUrlsOrder } from '../../src/short-urls/data';
+
+describe('<ShortUrlsList />', () => {
+  let wrapper: ShallowWrapper;
+  const setSettings = jest.fn();
+  const createWrapper = (shortUrlsList?: ShortUrlsListSettings) => {
+    wrapper = shallow(
+      <ShortUrlsList settings={Mock.of<Settings>({ shortUrlsList })} setShortUrlsListSettings={setSettings} />,
+    );
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+  afterEach(jest.clearAllMocks);
+
+  it.each([
+    [ undefined, DEFAULT_SHORT_URLS_ORDERING ],
+    [{}, DEFAULT_SHORT_URLS_ORDERING ],
+    [{ defaultOrdering: {} }, {}],
+    [{ defaultOrdering: { field: 'longUrl', dir: 'DESC' } as ShortUrlsOrder }, { field: 'longUrl', dir: 'DESC' }],
+    [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, { field: 'visits', dir: 'ASC' }],
+  ])('shows expected ordering', (shortUrlsList, expectedOrder) => {
+    const wrapper = createWrapper(shortUrlsList);
+    const dropdown = wrapper.find(SortingDropdown);
+
+    expect(dropdown.prop('order')).toEqual(expectedOrder);
+  });
+
+  it.each([
+    [ undefined, undefined ],
+    [ 'longUrl', 'ASC' ],
+    [ 'visits', undefined ],
+    [ 'title', 'DESC' ],
+  ])('invokes setSettings when ordering changes', (field, dir) => {
+    const wrapper = createWrapper();
+    const dropdown = wrapper.find(SortingDropdown);
+
+    expect(setSettings).not.toHaveBeenCalled();
+    dropdown.simulate('change', field, dir);
+    expect(setSettings).toHaveBeenCalledWith({ defaultOrdering: { field, dir } });
+  });
+});

test/settings/reducers/settings.test.ts

@@ -7,6 +7,7 @@ import reducer, {
   setUiSettings,
   setVisitsSettings,
   setTagsSettings,
+  setShortUrlsListSettings,
 } from '../../../src/settings/reducers/settings';
 
 describe('settingsReducer', () => {
@@ -14,8 +15,8 @@ describe('settingsReducer', () => {
   const shortUrlCreation = { validateUrls: false };
   const ui = { theme: 'light' };
   const visits = { defaultInterval: 'last30Days' };
-  const shortUrlList = { defaultOrdering: DEFAULT_SHORT_URLS_ORDERING };
-  const settings = { realTimeUpdates, shortUrlCreation, ui, visits, shortUrlList };
+  const shortUrlsList = { defaultOrdering: DEFAULT_SHORT_URLS_ORDERING };
+  const settings = { realTimeUpdates, shortUrlCreation, ui, visits, shortUrlsList };
 
   describe('reducer', () => {
     it('returns realTimeUpdates when action is SET_SETTINGS', () => {
@@ -70,4 +71,12 @@ describe('settingsReducer', () => {
       expect(result).toEqual({ type: SET_SETTINGS, tags: { defaultMode: 'list' } });
     });
   });
+
+  describe('setShortUrlsListSettings', () => {
+    it('creates action to set short URLs list settings', () => {
+      const result = setShortUrlsListSettings({ defaultOrdering: DEFAULT_SHORT_URLS_ORDERING });
+
+      expect(result).toEqual({ type: SET_SETTINGS, shortUrlsList: { defaultOrdering: DEFAULT_SHORT_URLS_ORDERING } });
+    });
+  });
 });

test/short-urls/ShortUrlsList.test.tsx

@@ -41,7 +41,7 @@ describe('<ShortUrlsList />', () => {
       shortUrlsList={shortUrlsList}
       history={Mock.of<History>({ push })}
       selectedServer={Mock.of<ReachableServer>({ id: '1' })}
-      settings={Mock.of<Settings>({ shortUrlList: { defaultOrdering } })}
+      settings={Mock.of<Settings>({ shortUrlsList: { defaultOrdering } })}
     />,
   ).dive(); // Dive is needed as this component is wrapped in a HOC