shlink-web-client/test/servers/EditServer.test.tsx

74 lines
2.8 KiB
TypeScript
Raw Normal View History

import { fireEvent, screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
2023-12-19 01:38:34 +03:00
import { createMemoryHistory } from 'history';
2024-12-09 13:52:58 +03:00
import { Router } from 'react-router';
2023-02-18 12:40:37 +03:00
import type { ReachableServer, SelectedServer } from '../../src/servers/data';
2023-09-05 10:08:42 +03:00
import { EditServerFactory } from '../../src/servers/EditServer';
2023-09-30 11:45:52 +03:00
import { checkAccessibility } from '../__helpers__/accessibility';
2022-07-10 20:44:49 +03:00
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<EditServer />', () => {
2023-05-27 12:57:26 +03:00
const ServerError = vi.fn();
const editServerMock = vi.fn();
const defaultSelectedServer = fromPartial<ReachableServer>({
id: 'abc123',
name: 'the_name',
url: 'the_url',
apiKey: 'the_api_key',
});
2023-09-05 10:08:42 +03:00
const EditServer = EditServerFactory(fromPartial({ ServerError }));
2023-12-19 01:38:34 +03:00
const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => {
const history = createMemoryHistory({ initialEntries: ['/foo', '/bar'] });
return {
history,
...renderWithEvents(
<Router location={history.location} navigator={history}>
<EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={vi.fn()} />
</Router>,
),
};
};
2023-09-30 11:45:52 +03:00
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders nothing if selected server is not reachable', () => {
setUp(fromPartial<SelectedServer>({}));
expect(screen.queryByText('Edit')).not.toBeInTheDocument();
expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
expect(screen.queryByText('Save')).not.toBeInTheDocument();
});
it('renders server title', () => {
setUp();
expect(screen.getByText(`Edit "${defaultSelectedServer.name}"`)).toBeInTheDocument();
});
it('display the server info in the form components', () => {
setUp();
expect(screen.getByDisplayValue('the_name')).toBeInTheDocument();
expect(screen.getByDisplayValue('the_url')).toBeInTheDocument();
expect(screen.getByDisplayValue('the_api_key')).toBeInTheDocument();
});
it('edits server and redirects to it when form is submitted', async () => {
2023-12-19 01:38:34 +03:00
const { user, history } = setUp();
await user.type(screen.getByDisplayValue('the_name'), ' edited');
await user.type(screen.getByDisplayValue('the_url'), ' edited');
// TODO Using fire event because userEvent.click on the Submit button does not submit the form
// await user.click(screen.getByRole('button', { name: 'Save' }));
fireEvent.submit(screen.getByRole('form'));
expect(editServerMock).toHaveBeenCalledWith('abc123', {
name: 'the_name edited',
url: 'the_url edited',
apiKey: 'the_api_key',
});
2023-12-19 01:38:34 +03:00
// After saving we go back, to the first route from history's initialEntries
expect(history.location.pathname).toEqual('/foo');
});
});