diff --git a/e2e/blog.spec.ts b/e2e/blog.spec.ts index 26c7dae..54b9715 100644 --- a/e2e/blog.spec.ts +++ b/e2e/blog.spec.ts @@ -99,13 +99,27 @@ for (const skin of ["standard", "terminal"] as const) ); if (path.includes(introSlug)) { await expect(page.locator(".product-screens-hero")).toHaveCount(0); - await expect(page.locator(".product-screens-row img")).toHaveCount( - 3 - ); - await expect(page.locator(".product-screens-row")).toHaveCSS( - "overflow-x", - "auto" - ); + const shots = page.locator(".product-screens-row img"); + await expect(shots).toHaveCount(3); + if (width < 720) { + const boxes = await shots.evaluateAll((images) => + images.map((image) => { + const box = image.getBoundingClientRect(); + return { top: box.top, right: box.right, left: box.left }; + }) + ); + expect(boxes[1].top).toBeGreaterThan(boxes[0].top); + expect(boxes[2].top).toBeGreaterThan(boxes[1].top); + for (const box of boxes) { + expect(box.left).toBeGreaterThanOrEqual(-1); + expect(box.right).toBeLessThanOrEqual(width + 1); + } + } else { + await expect(page.locator(".product-screens-row")).toHaveCSS( + "overflow-x", + "auto" + ); + } const stack = page.locator(".mobile-stack"); const appwrite = stack.getByText("Appwrite", { exact: true }); await appwrite.scrollIntoViewIfNeeded(); diff --git a/e2e/localization.spec.ts b/e2e/localization.spec.ts index 51d211a..94cdbcb 100644 --- a/e2e/localization.spec.ts +++ b/e2e/localization.spec.ts @@ -180,11 +180,7 @@ for (const width of [639, 640, 1099, 1100]) await page.goto(`/pl/?skin=${skin}&theme=dark`); const brand = await page.locator(".brand").boundingBox(), switchBox = await page.locator(".language-switch").boundingBox(); - if (width < 640) - expect(switchBox!.y).toBeGreaterThanOrEqual( - brand!.y + brand!.height - 1 - ); - else expect(Math.abs(switchBox!.y - brand!.y)).toBeLessThan(15); + expect(Math.abs(switchBox!.y - brand!.y)).toBeLessThan(15); expect( await page.evaluate( () => document.documentElement.scrollWidth <= innerWidth diff --git a/src/components/Blog/ProductScreens.tsx b/src/components/Blog/ProductScreens.tsx index 9d8cbf3..72c9daa 100644 --- a/src/components/Blog/ProductScreens.tsx +++ b/src/components/Blog/ProductScreens.tsx @@ -54,11 +54,7 @@ export function ProductScreens({ locale = "en" }: { locale?: BlogLocale }) { className="product-screens-row" tabIndex={0} role="region" - aria-label={ - pl - ? "Ekrany aplikacji. Na wąskim ekranie przewiń w poziomie." - : "App screens. On a narrow screen, scroll sideways." - } + aria-label={pl ? "Ekrany aplikacji" : "App screens"} > {shots[locale].map((shot, index) => (