From 7f6c71e8d7afebf6dfbe3c8634ebde6d3617bc96 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Tue, 16 Feb 2021 19:31:16 +0100
Subject: [PATCH] Created UserInterface test

---
 src/settings/UserInterface.tsx          |  2 +-
 test/settings/ShortUrlCreation.test.tsx |  2 +-
 test/settings/UserInterface.test.tsx    | 47 +++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 test/settings/UserInterface.test.tsx

diff --git a/src/settings/UserInterface.tsx b/src/settings/UserInterface.tsx
index 89597320..608cf65f 100644
--- a/src/settings/UserInterface.tsx
+++ b/src/settings/UserInterface.tsx
@@ -20,7 +20,7 @@ export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiS
         changeThemeInMarkup(theme);
       }}
     >
-      Use dark theme
+      Use dark theme.
     </ToggleSwitch>
   </SimpleCard>
 );
diff --git a/test/settings/ShortUrlCreation.test.tsx b/test/settings/ShortUrlCreation.test.tsx
index 07d0bd7b..1cb92d9a 100644
--- a/test/settings/ShortUrlCreation.test.tsx
+++ b/test/settings/ShortUrlCreation.test.tsx
@@ -25,7 +25,7 @@ describe('<ShortUrlCreation />', () => {
     [{ validateUrls: true }, true ],
     [{ validateUrls: false }, false ],
     [ undefined, false ],
-  ])('switch is toggled if option is tru', (shortUrlCreation, expectedChecked) => {
+  ])('switch is toggled if option is true', (shortUrlCreation, expectedChecked) => {
     const wrapper = createWrapper(shortUrlCreation);
     const toggle = wrapper.find(ToggleSwitch);
 
diff --git a/test/settings/UserInterface.test.tsx b/test/settings/UserInterface.test.tsx
new file mode 100644
index 00000000..e5c295e3
--- /dev/null
+++ b/test/settings/UserInterface.test.tsx
@@ -0,0 +1,47 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { Settings, UiSettings } from '../../src/settings/reducers/settings';
+import { UserInterface } from '../../src/settings/UserInterface';
+import ToggleSwitch from '../../src/utils/ToggleSwitch';
+import { Theme } from '../../src/utils/theme';
+
+describe('<UserInterface />', () => {
+  let wrapper: ShallowWrapper;
+  const setUiSettings = jest.fn();
+  const createWrapper = (ui?: UiSettings) => {
+    wrapper = shallow(
+      <UserInterface
+        settings={Mock.of<Settings>({ ui })}
+        setUiSettings={setUiSettings}
+      />,
+    );
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+  afterEach(jest.clearAllMocks);
+
+  it.each([
+    [{ theme: 'dark' as Theme }, true ],
+    [{ theme: 'light' as Theme }, false ],
+    [ undefined, false ],
+  ])('switch is toggled if theme is dark', (ui, expectedChecked) => {
+    const wrapper = createWrapper(ui);
+    const toggle = wrapper.find(ToggleSwitch);
+
+    expect(toggle.prop('checked')).toEqual(expectedChecked);
+  });
+
+  it.each([
+    [ true, 'dark' ],
+    [ false, 'light' ],
+  ])('invokes setUiSettings when toggle value changes', (checked, theme) => {
+    const wrapper = createWrapper();
+    const toggle = wrapper.find(ToggleSwitch);
+
+    expect(setUiSettings).not.toHaveBeenCalled();
+    toggle.simulate('change', checked);
+    expect(setUiSettings).toHaveBeenCalledWith({ theme });
+  });
+});