|
| 1 | +import { test, expect } from "@playwright/test"; |
| 2 | + |
| 3 | +const PHONE = { width: 390, height: 844 }; |
| 4 | + |
| 5 | +test.describe("Toolbar on narrow viewports", () => { |
| 6 | + test.beforeEach(async ({ page }) => { |
| 7 | + await page.setViewportSize(PHONE); |
| 8 | + await page.goto("/"); |
| 9 | + await page.waitForSelector(".devbar-bar"); |
| 10 | + }); |
| 11 | + |
| 12 | + test("bar stays visible and edge-anchored on a phone-width viewport", async ({ page }) => { |
| 13 | + const bar = page.locator(".devbar-bar"); |
| 14 | + await expect(bar).toBeVisible(); |
| 15 | + |
| 16 | + const box = (await bar.boundingBox())!; |
| 17 | + // Edge-anchored with an 8px inset rather than the desktop centred pill. |
| 18 | + expect(box.x).toBeLessThanOrEqual(10); |
| 19 | + expect(box.x + box.width).toBeGreaterThanOrEqual(PHONE.width - 10); |
| 20 | + expect(box.y + box.height).toBeGreaterThan(PHONE.height - 100); |
| 21 | + }); |
| 22 | + |
| 23 | + test("controls keep a touch-sized target", async ({ page }) => { |
| 24 | + const buttons = page.locator(".devbar-bar .devbar-bar-btn"); |
| 25 | + const count = await buttons.count(); |
| 26 | + expect(count).toBeGreaterThan(0); |
| 27 | + |
| 28 | + for (let i = 0; i < count; i++) { |
| 29 | + const box = (await buttons.nth(i).boundingBox())!; |
| 30 | + expect(box.width).toBeGreaterThanOrEqual(40); |
| 31 | + expect(box.height).toBeGreaterThanOrEqual(40); |
| 32 | + } |
| 33 | + }); |
| 34 | + |
| 35 | + test("trailing controls stay reachable when the row overflows the phone", async ({ page }) => { |
| 36 | + // Ten touch-sized controls are wider than 390px. They must scroll into |
| 37 | + // reach rather than sit clipped past the bar's right edge. |
| 38 | + const metrics = await page.evaluate(() => { |
| 39 | + const bar = document.querySelector<HTMLElement>(".devbar-bar")!; |
| 40 | + const buttons = bar.querySelectorAll<HTMLElement>(".devbar-bar-btn"); |
| 41 | + const last = buttons[buttons.length - 1]; |
| 42 | + const overflows = bar.scrollWidth > bar.clientWidth; |
| 43 | + const beforeRight = last.getBoundingClientRect().right; |
| 44 | + bar.scrollLeft = bar.scrollWidth; |
| 45 | + return { |
| 46 | + overflows, |
| 47 | + scrolled: bar.scrollLeft > 0, |
| 48 | + beforeRight, |
| 49 | + afterRight: last.getBoundingClientRect().right, |
| 50 | + barRight: bar.getBoundingClientRect().right, |
| 51 | + overflowX: getComputedStyle(bar).overflowX, |
| 52 | + mask: getComputedStyle(bar).maskImage || getComputedStyle(bar).webkitMaskImage, |
| 53 | + }; |
| 54 | + }); |
| 55 | + |
| 56 | + expect(metrics.overflows).toBe(true); |
| 57 | + // `overflow-x: hidden` still answers to scrollLeft, so a programmatic |
| 58 | + // scroll alone proves nothing — the axis has to be user-scrollable. |
| 59 | + expect(metrics.overflowX).toMatch(/auto|scroll/); |
| 60 | + expect(metrics.scrolled).toBe(true); |
| 61 | + expect(metrics.beforeRight).toBeGreaterThan(metrics.barRight); |
| 62 | + expect(metrics.afterRight).toBeLessThanOrEqual(metrics.barRight + 1); |
| 63 | + // A fade marks the clipped edge as "more to scroll to", not a broken bar. |
| 64 | + expect(metrics.mask).toContain("linear-gradient"); |
| 65 | + }); |
| 66 | +}); |
0 commit comments