Migrate DeleteServerModal to tailwind components

test/__helpers__/TestModalWrapper.tsx

@@ -1,14 +1,16 @@
-import { useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC, ReactElement } from 'react';
+import { useCallback, useState } from 'react';
 
-interface RenderModalArgs {
-  isOpen: boolean;
-  toggle: () => void;
-}
+export type RenderModalArgs = {
+  open: boolean;
+  onClose: () => void;
+};
 
 export const TestModalWrapper: FC<{ renderModal: (args: RenderModalArgs) => ReactElement }> = (
   { renderModal },
 ) => {
-  const [isOpen, toggle] = useToggle(true);
-  return renderModal({ isOpen, toggle });
+  const [open, setOpen] = useState(true);
+  const onClose = useCallback(() => setOpen(false), []);
+
+  return renderModal({ open, onClose });
 };

test/servers/DeleteServerButton.test.tsx

@@ -1,18 +1,28 @@
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
+import { createMemoryHistory } from 'history';
 import type { ReactNode } from 'react';
+import { Router } from 'react-router';
 import { DeleteServerButtonFactory } from '../../src/servers/DeleteServerButton';
 import type { DeleteServerModalProps } from '../../src/servers/DeleteServerModal';
+import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<DeleteServerButton />', () => {
   const DeleteServerButton = DeleteServerButtonFactory(fromPartial({
-    DeleteServerModal: ({ isOpen }: DeleteServerModalProps) => <>DeleteServerModal {isOpen ? '[Open]' : '[Closed]'}</>,
+    DeleteServerModal: (props: DeleteServerModalProps) => <DeleteServerModal {...props} deleteServer={vi.fn()} />,
   }));
-  const setUp = (children?: ReactNode) => renderWithEvents(
-    <DeleteServerButton server={fromPartial({})} textClassName="button">{children}</DeleteServerButton>,
-  );
+  const setUp = (children?: ReactNode) => {
+    const history = createMemoryHistory({ initialEntries: ['/foo'] });
+    const result = renderWithEvents(
+      <Router location={history.location} navigator={history}>
+        <DeleteServerButton server={fromPartial({})} textClassName="button">{children}</DeleteServerButton>
+      </Router>,
+    );
+
+    return { history, ...result };
+  };
 
   it('passes a11y checks', () => checkAccessibility(setUp('Delete me')));
 
@@ -28,14 +38,21 @@ describe('<DeleteServerButton />', () => {
   });
 
   it('displays modal when button is clicked', async () => {
-    const { user, container } = setUp();
+    const { user } = setUp();
 
-    expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Closed/);
-    expect(screen.getByText(/DeleteServerModal/)).not.toHaveTextContent(/Open/);
-    if (container.firstElementChild) {
-      await user.click(container.firstElementChild);
-    }
+    expect(screen.queryByText(/Are you sure you want to remove/)).not.toBeInTheDocument();
+    await user.click(screen.getByText('Remove this server'));
+    expect(screen.getByText(/Are you sure you want to remove/)).toBeInTheDocument();
+  });
 
-    await waitFor(() => expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Open/));
+  it('navigates to home when deletion is confirmed', async () => {
+    const { user, history } = setUp();
+
+    // Open modal
+    await user.click(screen.getByText('Remove this server'));
+
+    expect(history.location.pathname).toEqual('/foo');
+    await user.click(screen.getByRole('button', { name: 'Delete' }));
+    expect(history.location.pathname).toEqual('/');
   });
 });

test/servers/DeleteServerModal.test.tsx

@@ -1,7 +1,5 @@
-import { act, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router';
 import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
@@ -10,36 +8,29 @@ import { TestModalWrapper } from '../__helpers__/TestModalWrapper';
 describe('<DeleteServerModal />', () => {
   const deleteServerMock = vi.fn();
   const serverName = 'the_server_name';
-  const setUp = async () => {
-    const history = createMemoryHistory({ initialEntries: ['/foo'] });
-    const result = await act(() => renderWithEvents(
-      <Router location={history.location} navigator={history}>
-        <TestModalWrapper
-          renderModal={(args) => (
-            <DeleteServerModal
-              {...args}
-              server={fromPartial({ name: serverName })}
-              deleteServer={deleteServerMock}
-            />
-          )}
+  const setUp = () => renderWithEvents(
+    <TestModalWrapper
+      renderModal={(args) => (
+        <DeleteServerModal
+          {...args}
+          server={fromPartial({ name: serverName })}
+          deleteServer={deleteServerMock}
         />
-      </Router>,
-    ));
-
-    return { history, ...result };
-  };
+      )}
+    />,
+  );
 
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
-  it('renders a modal window', async () => {
-    await setUp();
+  it('renders a modal window', () => {
+    setUp();
 
     expect(screen.getByRole('dialog')).toBeInTheDocument();
     expect(screen.getByRole('heading')).toHaveTextContent('Remove server');
   });
 
-  it('displays the name of the server as part of the content', async () => {
-    await setUp();
+  it('displays the name of the server as part of the content', () => {
+    setUp();
 
     expect(screen.getByText(/^Are you sure you want to remove/)).toBeInTheDocument();
     expect(screen.getByText(serverName)).toBeInTheDocument();
@@ -47,25 +38,20 @@ describe('<DeleteServerModal />', () => {
 
   it.each([
     [() => screen.getByRole('button', { name: 'Cancel' })],
-    [() => screen.getByLabelText('Close')],
+    [() => screen.getByLabelText('Close dialog')],
   ])('toggles when clicking cancel button', async (getButton) => {
-    const { user, history } = await setUp();
+    const { user } = setUp();
 
-    expect(history.location.pathname).toEqual('/foo');
     await user.click(getButton());
-
     expect(deleteServerMock).not.toHaveBeenCalled();
-    expect(history.location.pathname).toEqual('/foo'); // No navigation happens, keeping initial pathname
   });
 
   it('deletes server when clicking accept button', async () => {
-    const { user, history } = await setUp();
+    const { user } = setUp();
 
     expect(deleteServerMock).not.toHaveBeenCalled();
-    expect(history.location.pathname).toEqual('/foo');
     await user.click(screen.getByRole('button', { name: 'Delete' }));
 
     await waitFor(() => expect(deleteServerMock).toHaveBeenCalledTimes(1));
-    await waitFor(() => expect(history.location.pathname).toEqual('/'));
   });
 });

test/servers/ManageServersRowDropdown.test.tsx

@@ -9,8 +9,8 @@ import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<ManageServersRowDropdown />', () => {
   const ManageServersRowDropdown = ManageServersRowDropdownFactory(fromPartial({
-    DeleteServerModal: ({ isOpen }: { isOpen: boolean }) => (
-      <span>DeleteServerModal {isOpen ? '[OPEN]' : '[CLOSED]'}</span>
+    DeleteServerModal: ({ open }: { open: boolean }) => (
+      <span>DeleteServerModal {open ? '[OPEN]' : '[CLOSED]'}</span>
     ),
   }));
   const setAutoConnect = vi.fn();

test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap

@@ -114,7 +114,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
         tabindex="-1"
       />
       <button
-        class="dropdown-item--danger dropdown-item"
+        class="tw:text-danger dropdown-item"
         role="menuitem"
         tabindex="0"
         type="button"
@@ -259,7 +259,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
         tabindex="-1"
       />
       <button
-        class="dropdown-item--danger dropdown-item"
+        class="tw:text-danger dropdown-item"
         role="menuitem"
         tabindex="0"
         type="button"