Updated Short URLs list so that it allows setting default orderBy from settings

test/api/services/ShlinkApiClient.test.ts

@@ -5,7 +5,7 @@ import { OptionalString } from '../../../src/utils/utils';
 import { ShlinkDomain, ShlinkVisitsOverview } from '../../../src/api/types';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { Visit } from '../../../src/visits/types';
-import { OrderDir } from '../../../src/utils/helpers/ordering';
+import { ShortUrlsOrder } from '../../../src/short-urls/reducers/shortUrlsListParams';
 
 describe('ShlinkApiClient', () => {
   const createAxios = (data: AxiosRequestConfig) => (async () => Promise.resolve(data)) as unknown as AxiosInstance;
@@ -33,9 +33,9 @@ describe('ShlinkApiClient', () => {
     });
 
     it.each([
-      [{ visits: 'DESC' as OrderDir }, 'visits-DESC' ],
-      [{ longUrl: 'ASC' as OrderDir }, 'longUrl-ASC' ],
-      [{ longUrl: undefined as OrderDir }, undefined ],
+      [ { field: 'visits', dir: 'DESC' } as ShortUrlsOrder, 'visits-DESC' ],
+      [ { field: 'longUrl', dir: 'ASC' } as ShortUrlsOrder, 'longUrl-ASC' ],
+      [ { field: 'longUrl', dir: undefined } as ShortUrlsOrder, undefined ],
     ])('parses orderBy in params', async (orderBy, expectedOrderBy) => {
       const axiosSpy = createAxiosMock({
         data: expectedList,

test/settings/reducers/settings.test.ts

@@ -1,10 +1,12 @@
 import reducer, {
   SET_SETTINGS,
+  DEFAULT_SHORT_URLS_ORDERING,
   toggleRealTimeUpdates,
   setRealTimeUpdatesInterval,
   setShortUrlCreationSettings,
   setUiSettings,
   setVisitsSettings,
+  setTagsSettings,
 } from '../../../src/settings/reducers/settings';
 
 describe('settingsReducer', () => {
@@ -12,7 +14,8 @@ describe('settingsReducer', () => {
   const shortUrlCreation = { validateUrls: false };
   const ui = { theme: 'light' };
   const visits = { defaultInterval: 'last30Days' };
-  const settings = { realTimeUpdates, shortUrlCreation, ui, visits };
+  const shortUrlList = { defaultOrdering: DEFAULT_SHORT_URLS_ORDERING };
+  const settings = { realTimeUpdates, shortUrlCreation, ui, visits, shortUrlList };
 
   describe('reducer', () => {
     it('returns realTimeUpdates when action is SET_SETTINGS', () => {
@@ -59,4 +62,12 @@ describe('settingsReducer', () => {
       expect(result).toEqual({ type: SET_SETTINGS, visits: { defaultInterval: 'last180Days' } });
     });
   });
+
+  describe('setTagsSettings', () => {
+    it('creates action to set tags settings', () => {
+      const result = setTagsSettings({ defaultMode: 'list' });
+
+      expect(result).toEqual({ type: SET_SETTINGS, tags: { defaultMode: 'list' } });
+    });
+  });
 });

test/short-urls/ShortUrlsList.test.tsx

@@ -8,10 +8,11 @@ import { ShortUrl } from '../../src/short-urls/data';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList';
 import SortingDropdown from '../../src/utils/SortingDropdown';
-import { OrderableFields, OrderBy } from '../../src/short-urls/reducers/shortUrlsListParams';
+import { OrderableFields, ShortUrlsOrder } from '../../src/short-urls/reducers/shortUrlsListParams';
 import Paginator from '../../src/short-urls/Paginator';
 import { ReachableServer } from '../../src/servers/data';
 import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks';
+import { Settings } from '../../src/settings/reducers/settings';
 
 describe('<ShortUrlsList />', () => {
   let wrapper: ShallowWrapper;
@@ -32,7 +33,7 @@ describe('<ShortUrlsList />', () => {
     },
   });
   const ShortUrlsList = shortUrlsListCreator(ShortUrlsTable, SearchBar);
-  const createWrapper = (orderBy: OrderBy = {}) => shallow(
+  const createWrapper = (orderBy: ShortUrlsOrder = {}) => shallow(
     <ShortUrlsList
       {...Mock.of<MercureBoundProps>({ mercureInfo: { loading: true } })}
       listShortUrls={listShortUrlsMock}
@@ -43,6 +44,7 @@ describe('<ShortUrlsList />', () => {
       shortUrlsList={shortUrlsList}
       history={Mock.of<History>({ push })}
       selectedServer={Mock.of<ReachableServer>({ id: '1' })}
+      settings={Mock.all<Settings>()}
     />,
   ).dive(); // Dive is needed as this component is wrapped in a HOC
 
@@ -91,20 +93,16 @@ describe('<ShortUrlsList />', () => {
   it('handles order through table', () => {
     const orderByColumn: (field: OrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
 
-    orderByColumn('visits')();
-    orderByColumn('title')();
-    orderByColumn('shortCode')();
+    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
 
-    expect(listShortUrlsMock).toHaveBeenCalledTimes(3);
-    expect(listShortUrlsMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
-      orderBy: { visits: 'ASC' },
-    }));
-    expect(listShortUrlsMock).toHaveBeenNthCalledWith(2, expect.objectContaining({
-      orderBy: { title: 'ASC' },
-    }));
-    expect(listShortUrlsMock).toHaveBeenNthCalledWith(3, expect.objectContaining({
-      orderBy: { shortCode: 'ASC' },
-    }));
+    orderByColumn('visits')();
+    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
+
+    orderByColumn('title')();
+    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
+
+    orderByColumn('shortCode')();
+    expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
   });
 
   it('handles order through dropdown', () => {
@@ -118,21 +116,12 @@ describe('<ShortUrlsList />', () => {
 
     wrapper.find(SortingDropdown).simulate('change', undefined, undefined);
     expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
-
-    expect(listShortUrlsMock).toHaveBeenCalledTimes(3);
-    expect(listShortUrlsMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
-      orderBy: { visits: 'ASC' },
-    }));
-    expect(listShortUrlsMock).toHaveBeenNthCalledWith(2, expect.objectContaining({
-      orderBy: { shortCode: 'DESC' },
-    }));
-    expect(listShortUrlsMock).toHaveBeenNthCalledWith(3, expect.objectContaining({ orderBy: undefined }));
   });
 
   it.each([
-    [ Mock.of<OrderBy>({ visits: 'ASC' }), 'visits', 'ASC' ],
-    [ Mock.of<OrderBy>({ title: 'DESC' }), 'title', 'DESC' ],
-    [ Mock.of<OrderBy>(), undefined, undefined ],
+    [ Mock.of<ShortUrlsOrder>({ field: 'visits', dir: 'ASC' }), 'visits', 'ASC' ],
+    [ Mock.of<ShortUrlsOrder>({ field: 'title', dir: 'DESC' }), 'title', 'DESC' ],
+    [ Mock.of<ShortUrlsOrder>(), undefined, undefined ],
   ])('has expected initial ordering', (initialOrderBy, field, dir) => {
     const wrapper = createWrapper(initialOrderBy);
 

test/short-urls/reducers/shortUrlsListParams.test.ts

@@ -10,14 +10,10 @@ describe('shortUrlsListParamsReducer', () => {
       expect(reducer(undefined, { type: LIST_SHORT_URLS, params: { searchTerm: 'foo', page: '2' } } as any)).toEqual({
         page: '2',
         searchTerm: 'foo',
-        orderBy: { dateCreated: 'DESC' },
       }));
 
     it('returns default value when action is RESET_SHORT_URL_PARAMS', () =>
-      expect(reducer(undefined, { type: RESET_SHORT_URL_PARAMS } as any)).toEqual({
-        page: '1',
-        orderBy: { dateCreated: 'DESC' },
-      }));
+      expect(reducer(undefined, { type: RESET_SHORT_URL_PARAMS } as any)).toEqual({ page: '1' }));
   });
 
   describe('resetShortUrlParams', () => {