Improved DuplicatedServersModal test

src/servers/helpers/DuplicatedServersModal.tsx

@@ -27,7 +27,9 @@ export const DuplicatedServersModal: FC<DuplicatedServersModalProps> = (
             </Fragment>
           ) : <li key={index}><b>{url}</b> - <b>{apiKey}</b></li>)}
         </ul>
-        {hasMultipleServers ? 'Do you want to ignore duplicated servers?' : 'Do you want to save this server anyway?'}
+        <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>

test/servers/helpers/DuplicatedServersModal.test.tsx

@@ -1,6 +1,6 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { Button } from 'reactstrap';
+import { Button, ModalHeader } from 'reactstrap';
 import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
 import { ServerData } from '../../../src/servers/data';
 
@@ -19,6 +19,51 @@ describe('<DuplicatedServersModal />', () => {
   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' }) ]],
@@ -28,9 +73,16 @@ describe('<DuplicatedServersModal />', () => {
 
     if (duplicatedServers.length === 0) {
       expect(li).toHaveLength(0);
-    } else {
+    } 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>`);
+      });
     }
   });