forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-20 13:36:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate DeleteServerModal to tailwind components

Browse Source
This commit is contained in:
Alejandro Celaya
2025-04-03 07:57:58 +02:00
parent 15ef29ecea
commit 01ca369388
11 changed files with 117 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
test/servers/DeleteServerButton.test.tsx
View File

@@ -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('/');
});
});