+error.svelte: vi.mock('$app/state') drives the page state so each test
can assert one of the three rendering branches — populated error message,
distinct status code, and the 'Internal Error' fallback when page.error
is null.
forgot-password/+page.svelte: prop-driven tests for the four states —
default form, success banner, error message inside the form, and the
back-to-login link href.
Refs #496.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { describe, it, expect, vi, afterEach } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page as browserPage } from 'vitest/browser';
|
|
|
|
const mockPage = {
|
|
status: 500,
|
|
error: { message: 'Internal Error' } as { message: string } | null
|
|
};
|
|
|
|
vi.mock('$app/state', () => ({
|
|
get page() {
|
|
return mockPage;
|
|
}
|
|
}));
|
|
|
|
afterEach(cleanup);
|
|
|
|
async function loadComponent() {
|
|
return (await import('./+error.svelte')).default;
|
|
}
|
|
|
|
describe('+error.svelte', () => {
|
|
it('renders the page status code prominently', async () => {
|
|
mockPage.status = 404;
|
|
mockPage.error = { message: 'Not Found' };
|
|
|
|
const ErrorPage = await loadComponent();
|
|
render(ErrorPage);
|
|
|
|
await expect.element(browserPage.getByText('404')).toBeVisible();
|
|
});
|
|
|
|
it('renders the error message text from page.error.message', async () => {
|
|
mockPage.status = 500;
|
|
mockPage.error = { message: 'Database unavailable' };
|
|
|
|
const ErrorPage = await loadComponent();
|
|
render(ErrorPage);
|
|
|
|
await expect.element(browserPage.getByText('Database unavailable')).toBeVisible();
|
|
});
|
|
|
|
it('falls back to the literal "Internal Error" when page.error is null', async () => {
|
|
mockPage.status = 500;
|
|
mockPage.error = null;
|
|
|
|
const ErrorPage = await loadComponent();
|
|
render(ErrorPage);
|
|
|
|
await expect.element(browserPage.getByText('Internal Error')).toBeVisible();
|
|
});
|
|
});
|