66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import { test, expect, type Page } from '@playwright/test';
|
|
|
|
async function login(page: Page) {
|
|
await page.goto('/login/');
|
|
await page.fill('#lg-username', 'demo');
|
|
await page.fill('#lg-password', 'demo');
|
|
await page.click('button[type=submit]');
|
|
await expect(page.getByTestId('nav-menu')).toBeVisible();
|
|
}
|
|
|
|
test('every panel tab renders without a console error', async ({ page }) => {
|
|
const errors: string[] = [];
|
|
page.on('pageerror', (e) => errors.push(String(e)));
|
|
page.on('console', (m) => m.type() === 'error' && errors.push(m.text()));
|
|
|
|
await login(page);
|
|
await expect(page.locator('.maplibregl-canvas')).toBeVisible({ timeout: 20000 });
|
|
|
|
for (const tab of ['scenarios', 'compare', 'wind', 'settings']) {
|
|
await page.getByTestId(`tab-${tab}`).click();
|
|
await expect(page.getByTestId(`tab-${tab}`)).toHaveAttribute('aria-current', 'page');
|
|
}
|
|
|
|
// The timeline and both collapse handles are always present.
|
|
await expect(page.getByTestId('timeline')).toBeVisible();
|
|
await expect(page.getByTestId('toggle-left')).toBeVisible();
|
|
await expect(page.getByTestId('toggle-right')).toBeVisible();
|
|
|
|
expect(errors).toEqual([]);
|
|
});
|
|
|
|
test('panels collapse, reopen, and remember their state across a reload', async ({ page }) => {
|
|
await login(page);
|
|
await expect(page.getByTestId('panel-left')).toBeVisible();
|
|
|
|
await page.getByTestId('toggle-left').click();
|
|
await expect(page.getByTestId('panel-left')).toHaveCount(0);
|
|
await expect(page.getByTestId('toggle-left')).toHaveAttribute('aria-expanded', 'false');
|
|
|
|
await page.reload();
|
|
await expect(page.getByTestId('panel-left')).toHaveCount(0);
|
|
|
|
await page.getByTestId('toggle-left').click();
|
|
await expect(page.getByTestId('panel-left')).toBeVisible();
|
|
});
|
|
|
|
test('both columns stay open on a narrow viewport, side by side', async ({ page }) => {
|
|
await login(page);
|
|
await page.setViewportSize({ width: 800, height: 720 });
|
|
|
|
// Below 1024px the columns share the width instead of excluding each other.
|
|
await expect(page.getByTestId('panel-left')).toBeVisible();
|
|
await expect(page.getByTestId('panel-right')).toBeVisible();
|
|
|
|
// ...and they do not overlap: the map keeps a strip between them.
|
|
const left = await page.getByTestId('panel-left').boundingBox();
|
|
const right = await page.getByTestId('panel-right').boundingBox();
|
|
expect(left).not.toBeNull();
|
|
expect(right).not.toBeNull();
|
|
expect(left!.x + left!.width).toBeLessThan(right!.x);
|
|
|
|
// Closing one leaves the other untouched.
|
|
await page.getByTestId('toggle-right').click();
|
|
await expect(page.getByTestId('panel-right')).toHaveCount(0);
|
|
await expect(page.getByTestId('panel-left')).toBeVisible();
|
|
});
|