75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
|
// @vitest-environment jsdom
|
|||
|
|
import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
|
|||
|
|
import { render, screen, cleanup, fireEvent } from '@testing-library/react';
|
|||
|
|
import SettingsEditor from '../SettingsEditor';
|
|||
|
|
import { NotificationProvider } from '../Notifications';
|
|||
|
|
import { ConfirmProvider } from '../ConfirmDialog';
|
|||
|
|
|
|||
|
|
const nav = vi.hoisted(() => ({ section: 'grid' }));
|
|||
|
|
vi.mock('next/navigation', () => ({
|
|||
|
|
useRouter: () => ({ refresh: () => {}, push: () => {}, replace: () => {} }),
|
|||
|
|
useParams: () => ({ section: nav.section }),
|
|||
|
|
usePathname: () => `/admin/settings/${nav.section}`,
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* A value the site would ignore is named next to its input as it is typed,
|
|||
|
|
* not only after a refused save (QA A-14).
|
|||
|
|
*/
|
|||
|
|
beforeEach(() => {
|
|||
|
|
window.sessionStorage.clear();
|
|||
|
|
vi.stubGlobal(
|
|||
|
|
'fetch',
|
|||
|
|
vi.fn(
|
|||
|
|
async () =>
|
|||
|
|
new Response(
|
|||
|
|
JSON.stringify({ settings: { title: 'Folio' }, version: 'v1', envLocks: {} }),
|
|||
|
|
{
|
|||
|
|
status: 200,
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
afterEach(() => {
|
|||
|
|
cleanup();
|
|||
|
|
vi.unstubAllGlobals();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function mount() {
|
|||
|
|
return render(
|
|||
|
|
<NotificationProvider>
|
|||
|
|
<ConfirmProvider>
|
|||
|
|
<SettingsEditor />
|
|||
|
|
</ConfirmProvider>
|
|||
|
|
</NotificationProvider>,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
describe('Settings form: values the site would ignore', () => {
|
|||
|
|
it('marks grid columns outside 1–6 at the input', async () => {
|
|||
|
|
nav.section = 'grid';
|
|||
|
|
mount();
|
|||
|
|
const columns = (await screen.findByLabelText(/Columns/)) as HTMLInputElement;
|
|||
|
|
expect(columns.getAttribute('aria-invalid')).toBeNull();
|
|||
|
|
|
|||
|
|
fireEvent.change(columns, { target: { value: '9' } });
|
|||
|
|
expect(columns.getAttribute('aria-invalid')).toBe('true');
|
|||
|
|
const error = document.getElementById(columns.getAttribute('aria-describedby')!);
|
|||
|
|
expect(error?.textContent).toBe('Must be a whole number from 1 to 6.');
|
|||
|
|
|
|||
|
|
fireEvent.change(columns, { target: { value: '4' } });
|
|||
|
|
expect(columns.getAttribute('aria-invalid')).toBeNull();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
it('marks an accent that is not hex', async () => {
|
|||
|
|
nav.section = 'theme';
|
|||
|
|
mount();
|
|||
|
|
const accent = (await screen.findByLabelText('Accent colour (hex)')) as HTMLInputElement;
|
|||
|
|
fireEvent.change(accent, { target: { value: 'rot' } });
|
|||
|
|
expect(accent.getAttribute('aria-invalid')).toBe('true');
|
|||
|
|
expect(screen.getByText('Must be a hex colour such as #e60012.')).toBeTruthy();
|
|||
|
|
});
|
|||
|
|
});
|