Migrated CreateServer test to react testing library

test/servers/CreateServer.test.tsx

@@ -1,83 +1,84 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { useNavigate } from 'react-router-dom';
 import { CreateServer as createCreateServer } from '../../src/servers/CreateServer';
-import { ServerForm } from '../../src/servers/helpers/ServerForm';
 import { ServerWithId } from '../../src/servers/data';
-import { DuplicatedServersModal } from '../../src/servers/helpers/DuplicatedServersModal';
 
 jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
 
 describe('<CreateServer />', () => {
-  let wrapper: ShallowWrapper;
-  const ImportServersBtn = () => null;
   const createServerMock = jest.fn();
   const navigate = jest.fn();
-  const servers = { foo: Mock.all<ServerWithId>() };
-  const createWrapper = (serversImported = false, importFailed = false) => {
+  const servers = { foo: Mock.of<ServerWithId>({ url: 'https://existing_url.com', apiKey: 'existing_api_key' }) };
+  const setUp = (serversImported = false, importFailed = false) => {
     (useNavigate as any).mockReturnValue(navigate);
 
-    const useStateFlagTimeout = jest.fn()
-      .mockReturnValueOnce([serversImported, () => ''])
-      .mockReturnValueOnce([importFailed, () => ''])
-      .mockReturnValue([]);
-    const CreateServer = createCreateServer(ImportServersBtn, useStateFlagTimeout);
+    let callCount = 0;
+    const useTimeoutToggle = jest.fn().mockImplementation(() => {
+      const result = [callCount % 2 === 0 ? serversImported : importFailed, () => null];
+      callCount += 1;
+      return result;
+    });
+    const CreateServer = createCreateServer(() => <>ImportServersBtn</>, useTimeoutToggle);
 
-    wrapper = shallow(<CreateServer createServer={createServerMock} servers={servers} />);
-
-    return wrapper;
+    return {
+      user: userEvent.setup(),
+      ...render(<CreateServer createServer={createServerMock} servers={servers} />),
+    };
   };
 
   beforeEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
-
-  it('renders components', () => {
-    const wrapper = createWrapper();
-
-    expect(wrapper.find(ServerForm)).toHaveLength(1);
-    expect(wrapper.find('ImportResult')).toHaveLength(0);
-  });
 
   it('shows success message when imported is true', () => {
-    const wrapper = createWrapper(true);
-    const result = wrapper.find('ImportResult');
+    setUp(true);
 
-    expect(result).toHaveLength(1);
-    expect(result.prop('type')).toEqual('success');
+    expect(screen.getByText('Servers properly imported. You can now select one from the list :)')).toBeInTheDocument();
+    expect(
+      screen.queryByText('The servers could not be imported. Make sure the format is correct.'),
+    ).not.toBeInTheDocument();
   });
 
   it('shows error message when import failed', () => {
-    const wrapper = createWrapper(false, true);
-    const result = wrapper.find('ImportResult');
+    setUp(false, true);
 
-    expect(result).toHaveLength(1);
-    expect(result.prop('type')).toEqual('error');
+    expect(
+      screen.queryByText('Servers properly imported. You can now select one from the list :)'),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText('The servers could not be imported. Make sure the format is correct.')).toBeInTheDocument();
   });
 
-  it('creates server data when form is submitted', () => {
-    const wrapper = createWrapper();
-    const form = wrapper.find(ServerForm);
+  it('creates server data when form is submitted', async () => {
+    const { user } = setUp();
 
-    expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([]);
-    form.simulate('submit', {});
-    expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([{}]);
+    expect(createServerMock).not.toHaveBeenCalled();
+
+    await user.type(screen.getByLabelText(/^Name/), 'the_name');
+    await user.type(screen.getByLabelText(/^URL/), 'https://the_url.com');
+    await user.type(screen.getByLabelText(/^API key/), 'the_api_key');
+    fireEvent.submit(screen.getByRole('form'));
+
+    expect(createServerMock).toHaveBeenCalledWith(expect.objectContaining({
+      name: 'the_name',
+      url: 'https://the_url.com',
+      apiKey: 'the_api_key',
+    }));
+    expect(navigate).toHaveBeenCalledWith(expect.stringMatching(/^\/server\//));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
   });
 
-  it('saves server and redirects on modal save', () => {
-    const wrapper = createWrapper();
+  it('displays dialog when trying to create a duplicated server', async () => {
+    const { user } = setUp();
 
-    wrapper.find(ServerForm).simulate('submit', {});
-    wrapper.find(DuplicatedServersModal).simulate('save');
+    await user.type(screen.getByLabelText(/^Name/), 'the_name');
+    await user.type(screen.getByLabelText(/^URL/), 'https://existing_url.com');
+    await user.type(screen.getByLabelText(/^API key/), 'existing_api_key');
+    fireEvent.submit(screen.getByRole('form'));
 
-    expect(createServerMock).toHaveBeenCalledTimes(1);
-    expect(navigate).toHaveBeenCalledTimes(1);
-  });
-
-  it('goes back on modal discard', () => {
-    const wrapper = createWrapper();
-
-    wrapper.find(DuplicatedServersModal).simulate('discard');
+    await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
+    await user.click(screen.getByRole('button', { name: 'Discard' }));
 
+    expect(createServerMock).not.toHaveBeenCalled();
     expect(navigate).toHaveBeenCalledWith(-1);
   });
 });

test/servers/ManageServers.test.tsx

@@ -12,8 +12,8 @@ describe('<ManageServers />', () => {
   const serversExporter = Mock.of<ServersExporter>({ exportServers });
   const ImportServersBtn = () => null;
   const ManageServersRow = () => null;
-  const useStateFlagTimeout = jest.fn().mockReturnValue([false, jest.fn()]);
-  const ManageServers = createManageServers(serversExporter, ImportServersBtn, useStateFlagTimeout, ManageServersRow);
+  const useTimeoutToggle = jest.fn().mockReturnValue([false, jest.fn()]);
+  const ManageServers = createManageServers(serversExporter, ImportServersBtn, useTimeoutToggle, ManageServersRow);
   let wrapper: ShallowWrapper;
   const createServerMock = (value: string, autoConnect = false) => Mock.of<ServerWithId>(
     { id: value, name: value, url: value, autoConnect },
@@ -82,7 +82,7 @@ describe('<ManageServers />', () => {
   });
 
   it('shows an error message if an error occurs while importing servers', () => {
-    useStateFlagTimeout.mockReturnValue([true, jest.fn()]);
+    useTimeoutToggle.mockReturnValue([true, jest.fn()]);
 
     const wrapper = createWrapper({ foo: createServerMock('foo') });
     const result = wrapper.find(Result);

test/short-urls/helpers/CreateShortUrlResult.test.tsx

@@ -4,14 +4,14 @@ import { Tooltip } from 'reactstrap';
 import { Mock } from 'ts-mockery';
 import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult';
 import { ShortUrl } from '../../../src/short-urls/data';
-import { StateFlagTimeout } from '../../../src/utils/helpers/hooks';
+import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
 import { Result } from '../../../src/utils/Result';
 
 describe('<CreateShortUrlResult />', () => {
   let wrapper: ShallowWrapper;
   const copyToClipboard = jest.fn();
-  const useStateFlagTimeout = jest.fn(() => [false, copyToClipboard]) as StateFlagTimeout;
-  const CreateShortUrlResult = createResult(useStateFlagTimeout);
+  const useTimeoutToggle = jest.fn(() => [false, copyToClipboard]) as TimeoutToggle;
+  const CreateShortUrlResult = createResult(useTimeoutToggle);
   const createWrapper = (result: ShortUrl | null = null, error = false) => {
     wrapper = shallow(
       <CreateShortUrlResult resetCreateShortUrl={() => {}} result={result} error={error} saving={false} />,

test/short-urls/helpers/ShortUrlsRow.test.tsx

@@ -6,7 +6,7 @@ import { formatISO } from 'date-fns';
 import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow';
 import { Tag } from '../../../src/tags/helpers/Tag';
 import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
-import { StateFlagTimeout } from '../../../src/utils/helpers/hooks';
+import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { ReachableServer } from '../../../src/servers/data';
 import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
@@ -17,8 +17,8 @@ describe('<ShortUrlsRow />', () => {
   let wrapper: ShallowWrapper;
   const mockFunction = () => null;
   const ShortUrlsRowMenu = mockFunction;
-  const stateFlagTimeout = jest.fn(() => true);
-  const useStateFlagTimeout = jest.fn(() => [false, stateFlagTimeout]) as StateFlagTimeout;
+  const timeoutToggle = jest.fn(() => true);
+  const useTimeoutToggle = jest.fn(() => [false, timeoutToggle]) as TimeoutToggle;
   const colorGenerator = Mock.of<ColorGenerator>({
     getColorForKey: jest.fn(),
     setColorForKey: jest.fn(),
@@ -38,7 +38,7 @@ describe('<ShortUrlsRow />', () => {
       maxVisits: null,
     },
   };
-  const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useStateFlagTimeout);
+  const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useTimeoutToggle);
   const createWrapper = (title?: string | null) => {
     wrapper = shallow(
       <ShortUrlsRow selectedServer={server} shortUrl={{ ...shortUrl, title }} onTagClick={mockFunction} />,
@@ -129,8 +129,8 @@ describe('<ShortUrlsRow />', () => {
     const menu = col.find(CopyToClipboardIcon);
 
     expect(menu).toHaveLength(1);
-    expect(stateFlagTimeout).not.toHaveBeenCalled();
+    expect(timeoutToggle).not.toHaveBeenCalled();
     menu.simulate('copy');
-    expect(stateFlagTimeout).toHaveBeenCalledTimes(1);
+    expect(timeoutToggle).toHaveBeenCalledTimes(1);
   });
 });