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`] = `
+
+`;