Added new setting to determine default display mode for tags

test/settings/UserInterface.test.tsx

@@ -2,21 +2,17 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Settings, UiSettings } from '../../src/settings/reducers/settings';
+import { Settings, TagsMode, UiSettings } from '../../src/settings/reducers/settings';
 import { UserInterface } from '../../src/settings/UserInterface';
 import ToggleSwitch from '../../src/utils/ToggleSwitch';
 import { Theme } from '../../src/utils/theme';
+import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
 
 describe('<UserInterface />', () => {
   let wrapper: ShallowWrapper;
   const setUiSettings = jest.fn();
   const createWrapper = (ui?: UiSettings) => {
-    wrapper = shallow(
-      <UserInterface
-        settings={Mock.of<Settings>({ ui })}
-        setUiSettings={setUiSettings}
-      />,
-    );
+    wrapper = shallow(<UserInterface settings={Mock.of<Settings>({ ui })} setUiSettings={setUiSettings} />);
 
     return wrapper;
   };
@@ -49,7 +45,7 @@ describe('<UserInterface />', () => {
   it.each([
     [ true, 'dark' ],
     [ false, 'light' ],
-  ])('invokes setUiSettings when toggle value changes', (checked, theme) => {
+  ])('invokes setUiSettings when theme toggle value changes', (checked, theme) => {
     const wrapper = createWrapper();
     const toggle = wrapper.find(ToggleSwitch);
 
@@ -57,4 +53,30 @@ describe('<UserInterface />', () => {
     toggle.simulate('change', checked);
     expect(setUiSettings).toHaveBeenCalledWith({ theme });
   });
+
+  it.each([
+    [ undefined, 'cards' ],
+    [{ theme: 'light' as Theme }, 'cards' ],
+    [{ theme: 'light' as Theme, tagsMode: 'cards' as TagsMode }, 'cards' ],
+    [{ theme: 'light' as Theme, tagsMode: 'list' as TagsMode }, 'list' ],
+  ])('shows expected tags displaying mode', (ui, expectedMode) => {
+    const wrapper = createWrapper(ui);
+    const dropdown = wrapper.find(TagsModeDropdown);
+    const small = wrapper.find('small');
+
+    expect(dropdown.prop('mode')).toEqual(expectedMode);
+    expect(small.html()).toContain(`Tags will be displayed as <b>${expectedMode}</b>.`);
+  });
+
+  it.each([
+    [ 'cards' as TagsMode ],
+    [ 'list' as TagsMode ],
+  ])('invokes setUiSettings when tags mode changes', (tagsMode) => {
+    const wrapper = createWrapper();
+    const dropdown = wrapper.find(TagsModeDropdown);
+
+    expect(setUiSettings).not.toHaveBeenCalled();
+    dropdown.simulate('change', tagsMode);
+    expect(setUiSettings).toHaveBeenCalledWith({ theme: 'light', tagsMode });
+  });
 });

test/tags/TagsList.test.tsx

@@ -8,6 +8,7 @@ import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
 import { Result } from '../../src/utils/Result';
 import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
 import SearchField from '../../src/utils/SearchField';
+import { Settings } from '../../src/settings/reducers/settings';
 
 describe('<TagsList />', () => {
   let wrapper: ShallowWrapper;
@@ -23,6 +24,7 @@ describe('<TagsList />', () => {
         forceListTags={identity}
         filterTags={filterTags}
         tagsList={Mock.of<TagsList>(tagsList)}
+        settings={Mock.all<Settings>()}
       />,
     ).dive(); // Dive is needed as this component is wrapped in a HOC
 

test/utils/utils.test.ts

@@ -1,4 +1,4 @@
-import { determineOrderDir, nonEmptyValueOrNull, rangeOf } from '../../src/utils/utils';
+import { capitalize, determineOrderDir, nonEmptyValueOrNull, rangeOf } from '../../src/utils/utils';
 
 describe('utils', () => {
   describe('determineOrderDir', () => {
@@ -60,4 +60,15 @@ describe('utils', () => {
       expect(nonEmptyValueOrNull(value)).toEqual(expected);
     });
   });
+
+  describe('capitalize', () => {
+    it.each([
+      [ 'foo', 'Foo' ],
+      [ 'BAR', 'BAR' ],
+      [ 'bAZ', 'BAZ' ],
+      [ 'with spaces', 'With spaces' ],
+    ])('sets first letter in uppercase', (value, expectedResult) => {
+      expect(capitalize(value)).toEqual(expectedResult);
+    });
+  });
 });