Added react testing library and add test for DomainDropdown

test/domains/DomainRow.test.tsx

@@ -1,11 +1,8 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { Button, UncontrolledTooltip } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBan as forbiddenIcon, faEdit as editIcon } from '@fortawesome/free-solid-svg-icons';
 import { ShlinkDomainRedirects } from '../../src/api/types';
 import { DomainRow } from '../../src/domains/DomainRow';
-import { ReachableServer, SelectedServer } from '../../src/servers/data';
+import { SelectedServer } from '../../src/servers/data';
 import { Domain } from '../../src/domains/data';
 
 describe('<DomainRow />', () => {
@@ -25,65 +22,6 @@ describe('<DomainRow />', () => {
 
   afterEach(() => wrapper?.unmount());
 
-  it.skip.each([
-    [Mock.of<Domain>({ domain: '', isDefault: true }), undefined, 1, 1, 'defaultDomainBtn'],
-    [Mock.of<Domain>({ domain: '', isDefault: false }), undefined, 0, 0, undefined],
-    [Mock.of<Domain>({ domain: 'foo.com', isDefault: true }), undefined, 1, 1, 'defaultDomainBtn'],
-    [Mock.of<Domain>({ domain: 'foo.bar.com', isDefault: true }), undefined, 1, 1, 'defaultDomainBtn'],
-    [Mock.of<Domain>({ domain: 'foo.baz', isDefault: false }), undefined, 0, 0, undefined],
-    [
-      Mock.of<Domain>({ domain: 'foo.baz', isDefault: true }),
-      Mock.of<ReachableServer>({ version: '2.10.0' }),
-      1,
-      0,
-      undefined,
-    ],
-    [
-      Mock.of<Domain>({ domain: 'foo.baz', isDefault: true }),
-      Mock.of<ReachableServer>({ version: '2.9.0' }),
-      1,
-      1,
-      'defaultDomainBtn',
-    ],
-    [
-      Mock.of<Domain>({ domain: 'foo.baz', isDefault: false }),
-      Mock.of<ReachableServer>({ version: '2.9.0' }),
-      0,
-      0,
-      undefined,
-    ],
-    [
-      Mock.of<Domain>({ domain: 'foo.baz', isDefault: false }),
-      Mock.of<ReachableServer>({ version: '2.10.0' }),
-      0,
-      0,
-      undefined,
-    ],
-  ])('shows proper components based on provided domain and selectedServer', (
-    domain,
-    selectedServer,
-    expectedDefaultDomainIcons,
-    expectedDisabledComps,
-    expectedDomainId,
-  ) => {
-    const wrapper = createWrapper(domain, selectedServer);
-    const defaultDomainComp = wrapper.find('td').first().find('DefaultDomain');
-    const disabledBtn = wrapper.find(Button).findWhere((btn) => !!btn.prop('disabled'));
-    const tooltip = wrapper.find(UncontrolledTooltip);
-    const button = wrapper.find(Button);
-    const icon = wrapper.find(FontAwesomeIcon);
-
-    expect(defaultDomainComp).toHaveLength(expectedDefaultDomainIcons);
-    expect(disabledBtn).toHaveLength(expectedDisabledComps);
-    expect(button.prop('disabled')).toEqual(expectedDisabledComps > 0);
-    expect(icon.prop('icon')).toEqual(expectedDisabledComps > 0 ? forbiddenIcon : editIcon);
-    expect(tooltip).toHaveLength(expectedDisabledComps);
-
-    if (expectedDisabledComps > 0) {
-      expect(tooltip.prop('target')).toEqual(expectedDomainId);
-    }
-  });
-
   it.each([
     [undefined, 3],
     [Mock.of<ShlinkDomainRedirects>(), 3],

test/domains/helpers/DomainDropdown.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { Mock } from 'ts-mockery';
+import { MemoryRouter } from 'react-router-dom';
+import { DomainDropdown } from '../../../src/domains/helpers/DomainDropdown';
+import { Domain } from '../../../src/domains/data';
+import { ReachableServer, SelectedServer } from '../../../src/servers/data';
+import { SemVer } from '../../../src/utils/helpers/version';
+
+describe('<DomainDropdown />', () => {
+  const editDomainRedirects = jest.fn().mockResolvedValue(undefined);
+  const setUp = (domain?: Domain, selectedServer?: SelectedServer) => render(
+    <MemoryRouter>
+      <DomainDropdown
+        domain={domain ?? Mock.all<Domain>()}
+        selectedServer={selectedServer ?? Mock.all<SelectedServer>()}
+        editDomainRedirects={editDomainRedirects}
+      />
+    </MemoryRouter>,
+  );
+
+  afterEach(jest.clearAllMocks);
+
+  it('renders expected menu items', () => {
+    setUp();
+
+    expect(screen.queryByText('Visit stats')).not.toBeInTheDocument();
+    expect(screen.getByText('Edit redirects')).toBeInTheDocument();
+  });
+
+  it.each([
+    [true, '_DEFAULT'],
+    [false, ''],
+  ])('points first link to the proper section', (isDefault, expectedLink) => {
+    setUp(
+      Mock.of<Domain>({ domain: 'foo.com', isDefault }),
+      Mock.of<ReachableServer>({ version: '3.1.0', id: '123' }),
+    );
+
+    expect(screen.getByText('Visit stats')).toHaveAttribute('href', `/server/123/domain/foo.com${expectedLink}/visits`);
+  });
+
+  it.each([
+    [true, '2.9.0' as SemVer, false],
+    [true, '2.10.0' as SemVer, true],
+    [false, '2.9.0' as SemVer, true],
+  ])('allows editing certain the domains', (isDefault, serverVersion, canBeEdited) => {
+    setUp(
+      Mock.of<Domain>({ domain: 'foo.com', isDefault }),
+      Mock.of<ReachableServer>({ version: serverVersion, id: '123' }),
+    );
+
+    if (canBeEdited) {
+      expect(screen.getByText('Edit redirects')).not.toHaveAttribute('disabled');
+    } else {
+      expect(screen.getByText('Edit redirects')).toHaveAttribute('disabled');
+    }
+  });
+
+  it.each([
+    ['foo.com'],
+    ['bar.org'],
+    ['baz.net'],
+  ])('displays modal when editing redirects', async (domain) => {
+    setUp(Mock.of<Domain>({ domain, isDefault: false }));
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.queryByRole('form')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText('Edit redirects'));
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
+
+    expect(editDomainRedirects).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByText('Save'));
+    expect(editDomainRedirects).toHaveBeenCalledWith(domain, expect.anything());
+
+    await waitForElementToBeRemoved(() => screen.queryByRole('dialog'));
+  });
+
+  it('displays dropdown when clicked', async () => {
+    setUp();
+
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { expanded: false }));
+    expect(await screen.findByRole('menu')).toBeInTheDocument();
+  });
+});