From 10e50efb3365e0aa1392a5077289dd33fca1cca5 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Tue, 7 Jun 2022 20:22:30 +0200
Subject: [PATCH] Migrated UserInterfaceSettings test to react testing library

---
 test/settings/UserInterfaceSettings.test.tsx  | 53 ++++++++----------
 .../UserInterfaceSettings.test.tsx.snap       | 55 +++++++++++++++++++
 2 files changed, 79 insertions(+), 29 deletions(-)
 create mode 100644 test/settings/__snapshots__/UserInterfaceSettings.test.tsx.snap

diff --git a/test/settings/UserInterfaceSettings.test.tsx b/test/settings/UserInterfaceSettings.test.tsx
index ce0945c2..e10517ac 100644
--- a/test/settings/UserInterfaceSettings.test.tsx
+++ b/test/settings/UserInterfaceSettings.test.tsx
@@ -1,22 +1,17 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 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 { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
-import { ToggleSwitch } from '../../src/utils/ToggleSwitch';
 import { Theme } from '../../src/utils/theme';
 
 describe('<UserInterfaceSettings />', () => {
-  let wrapper: ShallowWrapper;
   const setUiSettings = jest.fn();
-  const createWrapper = (ui?: UiSettings) => {
-    wrapper = shallow(<UserInterfaceSettings settings={Mock.of<Settings>({ ui })} setUiSettings={setUiSettings} />);
+  const setUp = (ui?: UiSettings) => ({
+    user: userEvent.setup(),
+    ...render(<UserInterfaceSettings settings={Mock.of<Settings>({ ui })} setUiSettings={setUiSettings} />),
+  });
 
-    return wrapper;
-  };
-
-  afterEach(() => wrapper?.unmount());
   afterEach(jest.clearAllMocks);
 
   it.each([
@@ -24,32 +19,32 @@ describe('<UserInterfaceSettings />', () => {
     [{ theme: 'light' as Theme }, false],
     [undefined, false],
   ])('toggles switch if theme is dark', (ui, expectedChecked) => {
-    const wrapper = createWrapper(ui);
-    const toggle = wrapper.find(ToggleSwitch);
+    setUp(ui);
 
-    expect(toggle.prop('checked')).toEqual(expectedChecked);
+    if (expectedChecked) {
+      expect(screen.getByLabelText('Use dark theme.')).toBeChecked();
+    } else {
+      expect(screen.getByLabelText('Use dark theme.')).not.toBeChecked();
+    }
   });
 
   it.each([
-    [{ theme: 'dark' as Theme }, faMoon],
-    [{ theme: 'light' as Theme }, faSun],
-    [undefined, faSun],
-  ])('shows different icons based on theme', (ui, expectedIcon) => {
-    const wrapper = createWrapper(ui);
-    const icon = wrapper.find(FontAwesomeIcon);
-
-    expect(icon.prop('icon')).toEqual(expectedIcon);
+    [{ theme: 'dark' as Theme }],
+    [{ theme: 'light' as Theme }],
+    [undefined],
+  ])('shows different icons based on theme', (ui) => {
+    setUp(ui);
+    expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
   });
 
   it.each([
-    [true, 'dark'],
-    [false, 'light'],
-  ])('invokes setUiSettings when theme toggle value changes', (checked, theme) => {
-    const wrapper = createWrapper();
-    const toggle = wrapper.find(ToggleSwitch);
+    ['light' as Theme, 'dark' as Theme],
+    ['dark' as Theme, 'light' as Theme],
+  ])('invokes setUiSettings when theme toggle value changes', async (initialTheme, expectedTheme) => {
+    const { user } = setUp({ theme: initialTheme });
 
     expect(setUiSettings).not.toHaveBeenCalled();
-    toggle.simulate('change', checked);
-    expect(setUiSettings).toHaveBeenCalledWith({ theme });
+    await user.click(screen.getByLabelText('Use dark theme.'));
+    expect(setUiSettings).toHaveBeenCalledWith({ theme: expectedTheme });
   });
 });
diff --git a/test/settings/__snapshots__/UserInterfaceSettings.test.tsx.snap b/test/settings/__snapshots__/UserInterfaceSettings.test.tsx.snap
new file mode 100644
index 00000000..907a8b66
--- /dev/null
+++ b/test/settings/__snapshots__/UserInterfaceSettings.test.tsx.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<UserInterfaceSettings /> shows different icons based on theme 1`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-moon user-interface__theme-icon"
+  data-icon="moon"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+exports[`<UserInterfaceSettings /> shows different icons based on theme 2`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-sun user-interface__theme-icon"
+  data-icon="sun"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+exports[`<UserInterfaceSettings /> shows different icons based on theme 3`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-sun user-interface__theme-icon"
+  data-icon="sun"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"
+    fill="currentColor"
+  />
+</svg>
+`;