|
| 1 | +import { test, expect } from "@playwright/test"; |
| 2 | +import { copyFile, readdir, stat } from "fs/promises"; |
| 3 | +import path from "path"; |
| 4 | +import { fileURLToPath } from "url"; |
| 5 | + |
| 6 | +test.describe.configure({ mode: "serial" }); |
| 7 | +test.use({ viewport: { width: 480, height: 360 } }); |
| 8 | +test.describe("ssr", () => { |
| 9 | + const urls = ["/context-svelte", "/context-react", "/preprocessor"]; |
| 10 | + |
| 11 | + test("client-rendered", async ({ page }) => { |
| 12 | + // Create Screenshots using Client Side Rendering. |
| 13 | + for (const url of urls) { |
| 14 | + await page.goto(url); |
| 15 | + await expect(page.locator('body[data-ssr="spa"]')).toBeAttached({ |
| 16 | + timeout: 10_000, |
| 17 | + }); |
| 18 | + await expect(page.locator("body")).toHaveScreenshot(); |
| 19 | + } |
| 20 | + }); |
| 21 | + |
| 22 | + test("sync screenshots", async () => { |
| 23 | + // Copy client-rendered screenshots to be used as reference for server-rendered snapshots. |
| 24 | + const snapshotsPath = path.join( |
| 25 | + path.dirname(fileURLToPath(import.meta.url)), |
| 26 | + "ssr.test.ts-snapshots", |
| 27 | + ); |
| 28 | + const files = await readdir(snapshotsPath); |
| 29 | + let checked = 0; |
| 30 | + for (const file of files) { |
| 31 | + if (file.match(/client-rendered/)) { |
| 32 | + const clientFile = path.join(snapshotsPath, file); |
| 33 | + const serverFile = path.join( |
| 34 | + snapshotsPath, |
| 35 | + file.replace("client-rendered", "no-js-server-rendered"), |
| 36 | + ); |
| 37 | + const serverInfo = await stat(serverFile).catch(() => false as const); |
| 38 | + if (!serverInfo) { |
| 39 | + await copyFile(clientFile, serverFile); |
| 40 | + } else { |
| 41 | + const clientInfo = await stat(clientFile); |
| 42 | + if (clientInfo.size !== serverInfo.size) { |
| 43 | + await copyFile(clientFile, serverFile); |
| 44 | + } |
| 45 | + } |
| 46 | + checked++; |
| 47 | + } |
| 48 | + } |
| 49 | + expect(checked).toBe(urls.length); |
| 50 | + }); |
| 51 | + test.describe("no-js", () => { |
| 52 | + test.use({ javaScriptEnabled: false }); |
| 53 | + test("server-rendered", async ({ page }) => { |
| 54 | + for (const url of urls) { |
| 55 | + await page.goto(url); |
| 56 | + await expect(page.locator("body")).toHaveScreenshot(); |
| 57 | + } |
| 58 | + }); |
| 59 | + }); |
| 60 | +}); |
0 commit comments