diff --git a/test/settings/TagsSettings.test.tsx b/test/settings/TagsSettings.test.tsx index 62de1292..67abbdbb 100644 --- a/test/settings/TagsSettings.test.tsx +++ b/test/settings/TagsSettings.test.tsx @@ -1,30 +1,26 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import userEvent from '@testing-library/user-event'; +import { render, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings'; -import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown'; import { TagsSettings } from '../../src/settings/TagsSettings'; -import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps'; -import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup'; -import { FormText } from '../../src/utils/forms/FormText'; +import { capitalize } from '../../src/utils/utils'; describe('', () => { - let wrapper: ShallowWrapper; const setTagsSettings = jest.fn(); - const createWrapper = (tags?: TagsSettingsOptions) => { - wrapper = shallow(({ tags })} setTagsSettings={setTagsSettings} />); + const setUp = (tags?: TagsSettingsOptions) => ({ + user: userEvent.setup(), + ...render(({ tags })} setTagsSettings={setTagsSettings} />), + }); - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); afterEach(jest.clearAllMocks); it('renders expected amount of groups', () => { - const wrapper = createWrapper(); - const groups = wrapper.find(LabeledFormGroup); + setUp(); - expect(groups).toHaveLength(2); + expect(screen.getByText('Default display mode when managing tags:')).toBeInTheDocument(); + expect(screen.getByText('Default ordering for tags list:')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Order by...' })).toBeInTheDocument(); }); it.each([ @@ -33,50 +29,45 @@ describe('', () => { [{ defaultMode: 'cards' as TagsMode }, 'cards'], [{ defaultMode: 'list' as TagsMode }, 'list'], ])('shows expected tags displaying mode', (tags, expectedMode) => { - const wrapper = createWrapper(tags); - const dropdown = wrapper.find(TagsModeDropdown); - const formText = wrapper.find(FormText); + const { container } = setUp(tags); - expect(dropdown.prop('mode')).toEqual(expectedMode); - expect(formText.html()).toContain(`Tags will be displayed as ${expectedMode}.`); + expect(screen.getByRole('button', { name: capitalize(expectedMode) })).toBeInTheDocument(); + expect(container.querySelector('.form-text')).toHaveTextContent(`Tags will be displayed as ${expectedMode}.`); }); it.each([ ['cards' as TagsMode], ['list' as TagsMode], - ])('invokes setTagsSettings when tags mode changes', (defaultMode) => { - const wrapper = createWrapper(); - const dropdown = wrapper.find(TagsModeDropdown); + ])('invokes setTagsSettings when tags mode changes', async (defaultMode) => { + const { user } = setUp(); expect(setTagsSettings).not.toHaveBeenCalled(); - dropdown.simulate('change', defaultMode); + await user.click(screen.getByText('List')); + await user.click(screen.getByRole('menuitem', { name: capitalize(defaultMode) })); expect(setTagsSettings).toHaveBeenCalledWith({ defaultMode }); }); it.each([ - [undefined, {}], - [{}, {}], - [{ defaultOrdering: {} }, {}], - [{ defaultOrdering: { field: 'tag', dir: 'DESC' } as TagsOrder }, { field: 'tag', dir: 'DESC' }], - [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, { field: 'visits', dir: 'ASC' }], + [undefined, 'Order by...'], + [{}, 'Order by...'], + [{ defaultOrdering: {} }, 'Order by...'], + [{ defaultOrdering: { field: 'tag', dir: 'DESC' } as TagsOrder }, 'Order by: Tag - DESC'], + [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, 'Order by: Visits - ASC'], ])('shows expected ordering', (tags, expectedOrder) => { - const wrapper = createWrapper(tags); - const dropdown = wrapper.find(OrderingDropdown); - - expect(dropdown.prop('order')).toEqual(expectedOrder); + setUp(tags); + expect(screen.getByRole('button', { name: expectedOrder })).toBeInTheDocument(); }); it.each([ - [undefined, undefined], - ['tag', 'ASC'], - ['visits', undefined], - ['shortUrls', 'DESC'], - ])('invokes setTagsSettings when ordering changes', (field, dir) => { - const wrapper = createWrapper(); - const dropdown = wrapper.find(OrderingDropdown); + ['Tag', 'tag', 'ASC'], + ['Visits', 'visits', 'ASC'], + ['Short URLs', 'shortUrls', 'ASC'], + ])('invokes setTagsSettings when ordering changes', async (name, field, dir) => { + const { user } = setUp(); expect(setTagsSettings).not.toHaveBeenCalled(); - dropdown.simulate('change', field, dir); + await user.click(screen.getByText('Order by...')); + await user.click(screen.getByRole('menuitem', { name })); expect(setTagsSettings).toHaveBeenCalledWith({ defaultOrdering: { field, dir } }); }); }); 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`] = ` + +`;