NuklearRabbitandClaude Sonnet 5
845db14e17
The 420px "compact topbar" breakpoint left a gap: at 421-440px the demo-guide trigger, badge, operator block and logout button together overflowed the viewport (introduced by this session's language-switcher addition). Widen the breakpoint to 440px. Adds a dedicated Playwright spec asserting no horizontal overflow across the brief's full 7-breakpoint matrix (1440x1000 down to 360x800) in all three supported languages. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import { expect, test, type APIRequestContext } from "@playwright/test";
|
|
|
|
async function resetDemoData(request: APIRequestContext) {
|
|
await request.post("/api/v1/demo/login", { data: { role: "operations_manager" } });
|
|
await request.post("/api/v1/demo/reset");
|
|
}
|
|
|
|
// Cross-checks the responsive shell across the exact breakpoint matrix from the polish
|
|
// brief (1440x1000, 1280x800, 1024x768, 768x1024, 430x932, 390x844, 360x800) in all three
|
|
// supported languages -- both that nothing overflows horizontally and that the localized
|
|
// heading text still renders (rather than being silently truncated away).
|
|
const BREAKPOINTS: { width: number; height: number }[] = [
|
|
{ width: 1440, height: 1000 },
|
|
{ width: 1280, height: 800 },
|
|
{ width: 1024, height: 768 },
|
|
{ width: 768, height: 1024 },
|
|
{ width: 430, height: 932 },
|
|
{ width: 390, height: 844 },
|
|
{ width: 360, height: 800 },
|
|
];
|
|
|
|
const LANGUAGES: { code: string; attentionTitle: string }[] = [
|
|
{ code: "nl-BE", attentionTitle: "Aandachtspunten" },
|
|
{ code: "en-GB", attentionTitle: "Attention queue" },
|
|
{ code: "fr-BE", attentionTitle: "File d'attention" },
|
|
];
|
|
|
|
test.beforeEach(async ({ request }) => {
|
|
await resetDemoData(request);
|
|
});
|
|
|
|
for (const language of LANGUAGES) {
|
|
test.describe(`${language.code}`, () => {
|
|
for (const bp of BREAKPOINTS) {
|
|
test(`no horizontal overflow at ${bp.width}x${bp.height}`, async ({ page }) => {
|
|
await page.addInitScript(
|
|
(lang) => localStorage.setItem("fleetops.language", lang),
|
|
language.code,
|
|
);
|
|
await page.setViewportSize({ width: bp.width, height: bp.height });
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: /begeleide demo|guided demo|démo guidée/i }).click();
|
|
await expect(page).toHaveURL(/\/dashboard/);
|
|
|
|
await expect(page.getByRole("heading", { name: language.attentionTitle })).toBeVisible();
|
|
|
|
const dimensions = await page.evaluate(() => ({
|
|
scroll: document.documentElement.scrollWidth,
|
|
client: document.documentElement.clientWidth,
|
|
}));
|
|
expect(dimensions.scroll, `${language.code} @ ${bp.width}x${bp.height}`).toBeLessThanOrEqual(
|
|
dimensions.client + 1,
|
|
);
|
|
});
|
|
}
|
|
});
|
|
}
|