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('', () => { - let wrapper: ShallowWrapper; const setUiSettings = jest.fn(); - const createWrapper = (ui?: UiSettings) => { - wrapper = shallow(({ ui })} setUiSettings={setUiSettings} />); + const setUp = (ui?: UiSettings) => ({ + user: userEvent.setup(), + ...render(({ ui })} setUiSettings={setUiSettings} />), + }); - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); afterEach(jest.clearAllMocks); it.each([ @@ -24,32 +19,32 @@ describe('', () => { [{ 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[` shows different icons based on theme 1`] = ` + +`; + +exports[` shows different icons based on theme 2`] = ` + +`; + +exports[` shows different icons based on theme 3`] = ` + +`;