Merge pull request #552 from acelaya-forks/feature/duplicated-servers

Feature/duplicated servers

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [3.5.0] - 2022-01-01
 ### Added
 * [#407](https://github.com/shlinkio/shlink-web-client/pull/407) Improved how visits (short URLs, tags and orphan) are loaded, to avoid ending up in a page with "There are no visits matching current filter".
 
@@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
     The warning includes a link to the documentation, explaining what are the steps to get it fixed.
 
+* [#506](https://github.com/shlinkio/shlink-web-client/pull/506) Improved how servers are handled, dispaying a warning when creating or importing servers that already exist.
 * [#535](https://github.com/shlinkio/shlink-web-client/pull/535) Allowed editing default domain redirects when consuming Shlink 2.10 or newer.
 * [#531](https://github.com/shlinkio/shlink-web-client/pull/531) Added custom slug field to the basic creation form in the Overview page.
 * [#537](https://github.com/shlinkio/shlink-web-client/pull/537) Allowed to customize the ordering for every list in the app that supports it, being currently tags and short URLs.

src/common/NoMenuLayout.tsx

@@ -1,6 +1,4 @@
 import { FC } from 'react';
 import './NoMenuLayout.scss';
 
-const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper container-xl">{children}</div>;
+export const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper container-xl">{children}</div>;
-
-export default NoMenuLayout;

src/servers/CreateServer.scss

@@ -1,10 +0,0 @@
-@import '../utils/base';
-
-.create-server__label {
-  font-weight: 700;
-  cursor: pointer;
-
-  @media (min-width: $mdMin) {
-    text-align: right;
-  }
-}

src/servers/CreateServer.tsx

@@ -1,14 +1,14 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { RouterProps } from 'react-router';
 import { Button } from 'reactstrap';
 import { Result } from '../utils/Result';
-import NoMenuLayout from '../common/NoMenuLayout';
+import { NoMenuLayout } from '../common/NoMenuLayout';
-import { StateFlagTimeout } from '../utils/helpers/hooks';
+import { StateFlagTimeout, useToggle } from '../utils/helpers/hooks';
 import { ServerForm } from './helpers/ServerForm';
 import { ImportServersBtnProps } from './helpers/ImportServersBtn';
 import { ServerData, ServersMap, ServerWithId } from './data';
-import './CreateServer.scss';
+import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 
@@ -32,16 +32,30 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
   const hasServers = !!Object.keys(servers).length;
   const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
   const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
-  const handleSubmit = (serverData: ServerData) => {
+  const [ isConfirmModalOpen, toggleConfirmModal ] = useToggle();
+  const [ serverData, setServerData ] = useState<ServerData | undefined>();
+  const save = () => {
+    if (!serverData) {
+      return;
+    }
+
     const id = uuid();
 
     createServer({ ...serverData, id });
     push(`/server/${id}`);
   };
 
+  useEffect(() => {
+    const serverExists = Object.values(servers).some(
+      ({ url, apiKey }) => serverData?.url === url && serverData?.apiKey === apiKey,
+    );
+
+    serverExists ? toggleConfirmModal() : save();
+  }, [ serverData ]);
+
   return (
     <NoMenuLayout>
-      <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
+      <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={setServerData}>
         {!hasServers &&
           <ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />}
         {hasServers && <Button outline onClick={goBack}>Cancel</Button>}
@@ -50,6 +64,13 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
 
       {serversImported && <ImportResult type="success" />}
       {errorImporting && <ImportResult type="error" />}
+
+      <DuplicatedServersModal
+        isOpen={isConfirmModalOpen}
+        duplicatedServers={serverData ? [ serverData ] : []}
+        onDiscard={goBack}
+        onSave={save}
+      />
     </NoMenuLayout>
   );
 };

src/servers/EditServer.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Button } from 'reactstrap';
-import NoMenuLayout from '../common/NoMenuLayout';
+import { NoMenuLayout } from '../common/NoMenuLayout';
 import { ServerForm } from './helpers/ServerForm';
 import { withSelectedServer } from './helpers/withSelectedServer';
 import { isServerWithId, ServerData } from './data';

src/servers/ManageServers.tsx

@@ -3,7 +3,7 @@ import { Button, Row } from 'reactstrap';
 import { faFileDownload as exportIcon, faPlus as plusIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom';
-import NoMenuLayout from '../common/NoMenuLayout';
+import { NoMenuLayout } from '../common/NoMenuLayout';
 import { SimpleCard } from '../utils/SimpleCard';
 import SearchField from '../utils/SearchField';
 import { Result } from '../utils/Result';

src/servers/helpers/DuplicatedServersModal.tsx

@@ -0,0 +1,40 @@
+import { FC, Fragment } from 'react';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { ServerData } from '../data';
+
+interface DuplicatedServersModalProps {
+  duplicatedServers: ServerData[];
+  isOpen: boolean;
+  onDiscard: () => void;
+  onSave: () => void;
+}
+
+export const DuplicatedServersModal: FC<DuplicatedServersModalProps> = (
+  { isOpen, duplicatedServers, onDiscard, onSave },
+) => {
+  const hasMultipleServers = duplicatedServers.length > 1;
+
+  return (
+    <Modal centered isOpen={isOpen}>
+      <ModalHeader>Duplicated server{hasMultipleServers && 's'}</ModalHeader>
+      <ModalBody>
+        <p>{hasMultipleServers ? 'The next servers already exist:' : 'There is already a server with:'}</p>
+        <ul>
+          {duplicatedServers.map(({ url, apiKey }, index) => !hasMultipleServers ? (
+            <Fragment key={index}>
+              <li>URL: <b>{url}</b></li>
+              <li>API key: <b>{apiKey}</b></li>
+            </Fragment>
+          ) : <li key={index}><b>{url}</b> - <b>{apiKey}</b></li>)}
+        </ul>
+        <span>
+          {hasMultipleServers ? 'Do you want to ignore duplicated servers' : 'Do you want to save this server anyway'}?
+        </span>
+      </ModalBody>
+      <ModalFooter>
+        <Button color="link" onClick={onDiscard}>{hasMultipleServers ? 'Ignore duplicated' : 'Discard'}</Button>
+        <Button color="primary" onClick={onSave}>Save anyway</Button>
+      </ModalFooter>
+    </Modal>
+  );
+};

src/servers/helpers/ImportServersBtn.tsx

@@ -1,10 +1,12 @@
-import { useRef, RefObject, ChangeEvent, MutableRefObject, FC } from 'react';
+import { useRef, RefObject, ChangeEvent, MutableRefObject, FC, useState, useEffect } from 'react';
 import { Button, UncontrolledTooltip } from 'reactstrap';
-import { pipe } from 'ramda';
+import { complement, pipe } from 'ramda';
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import ServersImporter from '../services/ServersImporter';
+import { useToggle } from '../../utils/helpers/hooks';
-import { ServerData } from '../data';
+import { ServersImporter } from '../services/ServersImporter';
+import { ServerData, ServersMap } from '../data';
+import { DuplicatedServersModal } from './DuplicatedServersModal';
 import './ImportServersBtn.scss';
 
 type Ref<T> = RefObject<T> | MutableRefObject<T>;
@@ -18,11 +20,16 @@ export interface ImportServersBtnProps {
 
 interface ImportServersBtnConnectProps extends ImportServersBtnProps {
   createServers: (servers: ServerData[]) => void;
+  servers: ServersMap;
   fileRef: Ref<HTMLInputElement>;
 }
 
+const serversFiltering = (servers: ServerData[]) =>
+  ({ url, apiKey }: ServerData) => servers.some((server) => server.url === url && server.apiKey === apiKey);
+
 const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<ImportServersBtnConnectProps> => ({
   createServers,
+  servers,
   fileRef,
   children,
   onImport = () => {},
@@ -31,15 +38,37 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<Import
   className = '',
 }) => {
   const ref = fileRef ?? useRef<HTMLInputElement>();
-  const onChange = async ({ target }: ChangeEvent<HTMLInputElement>) =>
+  const [ serversToCreate, setServersToCreate ] = useState<ServerData[] | undefined>();
+  const [ duplicatedServers, setDuplicatedServers ] = useState<ServerData[]>([]);
+  const [ isModalOpen,, showModal, hideModal ] = useToggle();
+  const create = pipe(createServers, onImport);
+  const createAllServers = pipe(() => create(serversToCreate ?? []), hideModal);
+  const createNonDuplicatedServers = pipe(
+    () => create((serversToCreate ?? []).filter(complement(serversFiltering(duplicatedServers)))),
+    hideModal,
+  );
+  const onFile = async ({ target }: ChangeEvent<HTMLInputElement>) =>
     importServersFromFile(target.files?.[0])
-      .then(pipe(createServers, onImport))
+      .then(setServersToCreate)
       .then(() => {
         // Reset input after processing file
         (target as { value: string | null }).value = null;
       })
       .catch(onImportError);
 
+  useEffect(() => {
+    if (!serversToCreate) {
+      return;
+    }
+
+    const existingServers = Object.values(servers);
+    const duplicatedServers = serversToCreate.filter(serversFiltering(existingServers));
+    const hasDuplicatedServers = !!duplicatedServers.length;
+
+    !hasDuplicatedServers ? create(serversToCreate) : setDuplicatedServers(duplicatedServers);
+    hasDuplicatedServers && showModal();
+  }, [ serversToCreate ]);
+
   return (
     <>
       <Button outline id="importBtn" className={className} onClick={() => ref.current?.click()}>
@@ -49,7 +78,14 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<Import
         You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>.
       </UncontrolledTooltip>
 
-      <input type="file" accept="text/csv" className="import-servers-btn__csv-select" ref={ref} onChange={onChange} />
+      <input type="file" accept="text/csv" className="import-servers-btn__csv-select" ref={ref} onChange={onFile} />
+
+      <DuplicatedServersModal
+        isOpen={isModalOpen}
+        duplicatedServers={duplicatedServers}
+        onDiscard={createNonDuplicatedServers}
+        onSave={createAllServers}
+      />
     </>
   );
 };

src/servers/helpers/ServerError.tsx

@@ -4,7 +4,7 @@ import Message from '../../utils/Message';
 import ServersListGroup from '../ServersListGroup';
 import { DeleteServerButtonProps } from '../DeleteServerButton';
 import { isServerWithId, SelectedServer, ServersMap } from '../data';
-import NoMenuLayout from '../../common/NoMenuLayout';
+import { NoMenuLayout } from '../../common/NoMenuLayout';
 import './ServerError.scss';
 
 interface ServerErrorProps {

src/servers/helpers/ServerForm.scss

@@ -1,3 +1,10 @@
+@import '../../utils/base';
+
 .server-form .form-group:last-child {
   margin-bottom: 0;
 }
+
+.server-form__label {
+  font-weight: 700;
+  cursor: pointer;
+}

src/servers/helpers/ServerForm.tsx

@@ -12,7 +12,7 @@ interface ServerFormProps {
 }
 
 const FormGroup: FC<FormGroupContainerProps> = (props) =>
-  <FormGroupContainer {...props} labelClassName="create-server__label" />;
+  <FormGroupContainer {...props} labelClassName="server-form__label" />;
 
 export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
   const [ name, setName ] = useState('');

src/servers/helpers/withSelectedServer.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router';
 import Message from '../../utils/Message';
 import { isNotFoundServer, SelectedServer } from '../data';
-import NoMenuLayout from '../../common/NoMenuLayout';
+import { NoMenuLayout } from '../../common/NoMenuLayout';
 
 interface WithSelectedServerProps extends RouteComponentProps<{ serverId: string }> {
   selectServer: (serverId: string) => void;

src/servers/services/ServersImporter.ts

@@ -7,7 +7,7 @@ const validateServer = (server: any): server is ServerData =>
 const validateServers = (servers: any): servers is ServerData[] =>
   Array.isArray(servers) && servers.every(validateServer);
 
-export default class ServersImporter {
+export class ServersImporter {
   public constructor(private readonly csvJson: CsvJson, private readonly fileReaderFactory: () => FileReader) {}
 
   public readonly importServersFromFile = async (file?: File | null): Promise<ServerData[]> => {

src/servers/services/provideServices.ts

@@ -17,7 +17,7 @@ import { Overview } from '../Overview';
 import { ManageServers } from '../ManageServers';
 import { ManageServersRow } from '../ManageServersRow';
 import { ManageServersRowDropdown } from '../ManageServersRowDropdown';
-import ServersImporter from './ServersImporter';
+import { ServersImporter } from './ServersImporter';
 import ServersExporter from './ServersExporter';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
@@ -54,7 +54,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.serviceFactory('DeleteServerButton', DeleteServerButton, 'DeleteServerModal');
 
   bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter');
-  bottle.decorator('ImportServersBtn', connect(null, [ 'createServers' ]));
+  bottle.decorator('ImportServersBtn', connect([ 'servers' ], [ 'createServers' ]));
 
   bottle.serviceFactory('ForServerVersion', () => ForServerVersion);
   bottle.decorator('ForServerVersion', connect([ 'selectedServer' ]));

src/settings/Settings.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
 import { Row } from 'reactstrap';
-import NoMenuLayout from '../common/NoMenuLayout';
+import { NoMenuLayout } from '../common/NoMenuLayout';
 
 const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
   <>

test/common/MenuLayout.test.tsx

@@ -5,7 +5,7 @@ import { Route } from 'react-router-dom';
 import { Mock } from 'ts-mockery';
 import createMenuLayout from '../../src/common/MenuLayout';
 import { NonReachableServer, NotFoundServer, ReachableServer, SelectedServer } from '../../src/servers/data';
-import NoMenuLayout from '../../src/common/NoMenuLayout';
+import { NoMenuLayout } from '../../src/common/NoMenuLayout';
 import { SemVer } from '../../src/utils/helpers/version';
 
 describe('<MenuLayout />', () => {

test/servers/CreateServer.test.tsx

@@ -4,18 +4,21 @@ import { History } from 'history';
 import createServerConstruct from '../../src/servers/CreateServer';
 import { ServerForm } from '../../src/servers/helpers/ServerForm';
 import { ServerWithId } from '../../src/servers/data';
+import { DuplicatedServersModal } from '../../src/servers/helpers/DuplicatedServersModal';
 
 describe('<CreateServer />', () => {
   let wrapper: ShallowWrapper;
   const ImportServersBtn = () => null;
   const createServerMock = jest.fn();
   const push = jest.fn();
-  const historyMock = Mock.of<History>({ push });
+  const goBack = jest.fn();
+  const historyMock = Mock.of<History>({ push, goBack });
   const servers = { foo: Mock.all<ServerWithId>() };
   const createWrapper = (serversImported = false, importFailed = false) => {
     const useStateFlagTimeout = jest.fn()
       .mockReturnValueOnce([ serversImported, () => '' ])
-      .mockReturnValueOnce([ importFailed, () => '' ]);
+      .mockReturnValueOnce([ importFailed, () => '' ])
+      .mockReturnValue([]);
     const CreateServer = createServerConstruct(ImportServersBtn, useStateFlagTimeout);
 
     wrapper = shallow(<CreateServer createServer={createServerMock} history={historyMock} servers={servers} />);
@@ -23,10 +26,8 @@ describe('<CreateServer />', () => {
     return wrapper;
   };
 
-  afterEach(() => {
+  beforeEach(jest.clearAllMocks);
-    jest.resetAllMocks();
+  afterEach(() => wrapper?.unmount());
-    wrapper?.unmount();
-  });
 
   it('renders components', () => {
     const wrapper = createWrapper();
@@ -51,13 +52,30 @@ describe('<CreateServer />', () => {
     expect(result.prop('type')).toEqual('error');
   });
 
-  it('creates server and redirects to it when form is submitted', () => {
+  it('creates server data when form is submitted', () => {
     const wrapper = createWrapper();
     const form = wrapper.find(ServerForm);
 
+    expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([]);
     form.simulate('submit', {});
+    expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([{}]);
+  });
+
+  it('saves server and redirects on modal save', () => {
+    const wrapper = createWrapper();
+
+    wrapper.find(ServerForm).simulate('submit', {});
+    wrapper.find(DuplicatedServersModal).simulate('save');
 
     expect(createServerMock).toHaveBeenCalledTimes(1);
     expect(push).toHaveBeenCalledTimes(1);
   });
+
+  it('goes back on modal discard', () => {
+    const wrapper = createWrapper();
+
+    wrapper.find(DuplicatedServersModal).simulate('discard');
+
+    expect(goBack).toHaveBeenCalledTimes(1);
+  });
 });

test/servers/helpers/DuplicatedServersModal.test.tsx

@@ -0,0 +1,106 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { Button, ModalHeader } from 'reactstrap';
+import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
+import { ServerData } from '../../../src/servers/data';
+
+describe('<DuplicatedServersModal />', () => {
+  const onDiscard = jest.fn();
+  const onSave = jest.fn();
+  let wrapper: ShallowWrapper;
+  const createWrapper = (duplicatedServers: ServerData[] = []) => {
+    wrapper = shallow(
+      <DuplicatedServersModal isOpen duplicatedServers={duplicatedServers} onDiscard={onDiscard} onSave={onSave} />,
+    );
+
+    return wrapper;
+  };
+
+  beforeEach(jest.clearAllMocks);
+  afterEach(() => wrapper?.unmount());
+
+  it.each([
+    [[], 0 ],
+    [[ Mock.all<ServerData>() ], 2 ],
+    [[ Mock.all<ServerData>(), Mock.all<ServerData>() ], 2 ],
+    [[ Mock.all<ServerData>(), Mock.all<ServerData>(), Mock.all<ServerData>() ], 3 ],
+    [[ Mock.all<ServerData>(), Mock.all<ServerData>(), Mock.all<ServerData>(), Mock.all<ServerData>() ], 4 ],
+  ])('renders expected amount of items', (duplicatedServers, expectedItems) => {
+    const wrapper = createWrapper(duplicatedServers);
+    const li = wrapper.find('li');
+
+    expect(li).toHaveLength(expectedItems);
+  });
+
+  it.each([
+    [
+      [ Mock.all<ServerData>() ],
+      {
+        header: 'Duplicated server',
+        firstParagraph: 'There is already a server with:',
+        lastParagraph: 'Do you want to save this server anyway?',
+        discardBtn: 'Discard',
+      },
+    ],
+    [
+      [ Mock.all<ServerData>(), Mock.all<ServerData>() ],
+      {
+        header: 'Duplicated servers',
+        firstParagraph: 'The next servers already exist:',
+        lastParagraph: 'Do you want to ignore duplicated servers?',
+        discardBtn: 'Ignore duplicated',
+      },
+    ],
+  ])('renders expected texts based on amount of servers', (duplicatedServers, assertions) => {
+    const wrapper = createWrapper(duplicatedServers);
+    const header = wrapper.find(ModalHeader);
+    const p = wrapper.find('p');
+    const span = wrapper.find('span');
+    const discardBtn = wrapper.find(Button).first();
+
+    expect(header.html()).toContain(assertions.header);
+    expect(p.html()).toContain(assertions.firstParagraph);
+    expect(span.html()).toContain(assertions.lastParagraph);
+    expect(discardBtn.html()).toContain(assertions.discardBtn);
+  });
+
+  it.each([
+    [[]],
+    [[ Mock.of<ServerData>({ url: 'url', apiKey: 'apiKey' }) ]],
+  ])('displays provided server data', (duplicatedServers) => {
+    const wrapper = createWrapper(duplicatedServers);
+    const li = wrapper.find('li');
+
+    if (duplicatedServers.length === 0) {
+      expect(li).toHaveLength(0);
+    } else if (duplicatedServers.length === 1) {
+      expect(li.first().find('b').html()).toEqual(`<b>${duplicatedServers[0].url}</b>`);
+      expect(li.last().find('b').html()).toEqual(`<b>${duplicatedServers[0].apiKey}</b>`);
+    } else {
+      expect.assertions(duplicatedServers.length);
+      li.forEach((item, index) => {
+        const server = duplicatedServers[index];
+
+        expect(item.html()).toContain(`<b>${server.url}</b> - <b>${server.apiKey}</b>`);
+      });
+    }
+  });
+
+  it('invokes onDiscard when appropriate button is clicked', () => {
+    const wrapper = createWrapper();
+    const btn = wrapper.find(Button).first();
+
+    btn.simulate('click');
+
+    expect(onDiscard).toHaveBeenCalled();
+  });
+
+  it('invokes onSave when appropriate button is clicked', () => {
+    const wrapper = createWrapper();
+    const btn = wrapper.find(Button).last();
+
+    btn.simulate('click');
+
+    expect(onSave).toHaveBeenCalled();
+  });
+});

test/servers/helpers/ImportServersBtn.test.tsx

@@ -2,8 +2,9 @@ import { ReactNode } from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { UncontrolledTooltip } from 'reactstrap';
 import { Mock } from 'ts-mockery';
-import importServersBtnConstruct from '../../../src/servers/helpers/ImportServersBtn';
+import importServersBtnConstruct, { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
-import ServersImporter from '../../../src/servers/services/ServersImporter';
+import { ServersImporter } from '../../../src/servers/services/ServersImporter';
+import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
 
 describe('<ImportServersBtn />', () => {
   let wrapper: ShallowWrapper;
@@ -12,17 +13,15 @@ describe('<ImportServersBtn />', () => {
   const importServersFromFile = jest.fn().mockResolvedValue([]);
   const serversImporterMock = Mock.of<ServersImporter>({ importServersFromFile });
   const click = jest.fn();
-  const fileRef = {
+  const fileRef = { current: Mock.of<HTMLInputElement>({ click }) };
-    current: Mock.of<HTMLInputElement>({ click }),
-  };
   const ImportServersBtn = importServersBtnConstruct(serversImporterMock);
-  const createWrapper = (className?: string, children?: ReactNode) => {
+  const createWrapper = (props: Partial<ImportServersBtnProps & { children: ReactNode }> = {}) => {
     wrapper = shallow(
       <ImportServersBtn
-        createServers={createServersMock}
+        servers={{}}
-        className={className}
+        {...props}
         fileRef={fileRef}
-        children={children}
+        createServers={createServersMock}
         onImport={onImportMock}
       />,
     );
@@ -46,7 +45,7 @@ describe('<ImportServersBtn />', () => {
     [ 'foo', 'foo' ],
     [ 'bar', 'bar' ],
   ])('allows a class name to be provided', (providedClassName, expectedClassName) => {
-    const wrapper = createWrapper(providedClassName);
+    const wrapper = createWrapper({ className: providedClassName });
 
     expect(wrapper.find('#importBtn').prop('className')).toEqual(expectedClassName);
   });
@@ -56,7 +55,7 @@ describe('<ImportServersBtn />', () => {
     [ 'foo', false ],
     [ 'bar', false ],
   ])('has expected text', (children, expectToHaveDefaultText) => {
-    const wrapper = createWrapper(undefined, children);
+    const wrapper = createWrapper({ children });
 
     if (expectToHaveDefaultText) {
       expect(wrapper.find('#importBtn').html()).toContain('Import from file');
@@ -82,6 +81,16 @@ describe('<ImportServersBtn />', () => {
     await file.simulate('change', { target: { files: [ '' ] } }); // eslint-disable-line @typescript-eslint/await-thenable
 
     expect(importServersFromFile).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([
+    [ 'discard' ],
+    [ 'save' ],
+  ])('invokes callback in DuplicatedServersModal events', (event) => {
+    const wrapper = createWrapper();
+
+    wrapper.find(DuplicatedServersModal).simulate(event);
+
     expect(createServersMock).toHaveBeenCalledTimes(1);
     expect(onImportMock).toHaveBeenCalledTimes(1);
   });

test/servers/services/ServersImporter.test.ts

@@ -1,6 +1,6 @@
 import { Mock } from 'ts-mockery';
 import { CsvJson } from 'csvjson';
-import ServersImporter from '../../../src/servers/services/ServersImporter';
+import { ServersImporter } from '../../../src/servers/services/ServersImporter';
 import { RegularServer } from '../../../src/servers/data';
 
 describe('ServersImporter', () => {

test/settings/Settings.test.tsx

@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
 import createSettings from '../../src/settings/Settings';
-import NoMenuLayout from '../../src/common/NoMenuLayout';
+import { NoMenuLayout } from '../../src/common/NoMenuLayout';
 
 describe('<Settings />', () => {
   const Component = () => null;