71 lines
3.6 KiB
TypeScript
71 lines
3.6 KiB
TypeScript
import { expect, test } from '@playwright/test';
|
|
|
|
test('the home page explains the app and its guides fit the screen', async ({ page }) => {
|
|
const errors: string[] = [];
|
|
page.on('pageerror', (error) => errors.push(error.message));
|
|
await page.goto('/');
|
|
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
|
'A great floor starts with a little planning.',
|
|
);
|
|
await expect(page.getByRole('heading', { name: 'Scotia or skirting board?' })).toBeVisible();
|
|
await expect(page.getByRole('link', { name: 'Plan my floor' })).toHaveCount(1);
|
|
await expect(page.getByRole('link', { name: 'Plan my floor' }).first()).toBeInViewport();
|
|
await page.getByRole('link', { name: 'First time fitting a floor?' }).click();
|
|
await expect(page).toHaveURL(/#guide$/);
|
|
await expect(page.getByRole('heading', { name: /Your first floor/ })).toBeInViewport();
|
|
await expect(page.getByRole('link', { name: 'Open planner' })).toBeInViewport();
|
|
const header = await page.getByRole('banner').boundingBox();
|
|
const guide = await page.getByRole('heading', { name: /Your first floor/ }).boundingBox();
|
|
expect(header!.y).toBe(0);
|
|
expect(guide!.y).toBeGreaterThanOrEqual(header!.height);
|
|
await page.reload();
|
|
await expect(page.getByRole('heading', { name: /Your first floor/ })).toBeInViewport();
|
|
await page.getByRole('link', { name: 'Back to top' }).click();
|
|
await expect(page.getByRole('heading', { level: 1 })).toBeInViewport();
|
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(
|
|
page.viewportSize()!.width,
|
|
);
|
|
expect(errors).toEqual([]);
|
|
});
|
|
|
|
for (const [name, selector] of [
|
|
['header', '.landing-header'],
|
|
['hero', '.landing-hero'],
|
|
]) {
|
|
test(`the ${name} CTA opens a working planner and browser history returns home`, async ({
|
|
page,
|
|
}) => {
|
|
await page.goto('/');
|
|
if (name === 'header') {
|
|
await page.getByRole('contentinfo').scrollIntoViewIfNeeded();
|
|
await expect(page.getByRole('link', { name: 'Open planner' })).toBeInViewport();
|
|
}
|
|
await page.locator(selector).locator('a[href="?planner"]').click();
|
|
await expect(page.getByRole('heading', { name: 'Room measurements' })).toBeVisible();
|
|
await expect(page.getByLabel('Room width', { exact: true })).toHaveValue('4800');
|
|
await expect(page).toHaveURL(/\?plan=/);
|
|
await page.getByLabel('Room name', { exact: true }).fill('My first floor');
|
|
await page.getByLabel('Room name', { exact: true }).blur();
|
|
const projectUrl = page.url();
|
|
await page.reload();
|
|
await expect(page.getByLabel('Room name', { exact: true })).toHaveValue('My first floor');
|
|
await page.goBack();
|
|
await expect(page.getByRole('heading', { level: 1 })).toContainText('A great floor');
|
|
await page.goForward();
|
|
await expect(page).toHaveURL(projectUrl);
|
|
await expect(page.getByLabel('Room name', { exact: true })).toHaveValue('My first floor');
|
|
});
|
|
}
|
|
|
|
test('returning through the home page resumes the saved project', async ({ page }) => {
|
|
await page.goto('/?planner');
|
|
await page.getByLabel('Room name', { exact: true }).fill('Weekend project');
|
|
await page.getByLabel('Room name', { exact: true }).blur();
|
|
await page.getByLabel('Room width', { exact: true }).fill('4200');
|
|
await page.getByLabel('Room width', { exact: true }).blur();
|
|
await page.getByRole('link', { name: 'Floor planner home' }).click();
|
|
await expect(page.getByRole('heading', { level: 1 })).toContainText('A great floor');
|
|
await page.getByRole('link', { name: 'Plan my floor' }).first().click();
|
|
await expect(page.getByLabel('Room name', { exact: true })).toHaveValue('Weekend project');
|
|
await expect(page.getByLabel('Room width', { exact: true })).toHaveValue('4200');
|
|
});
|