BangSo/apps/web/e2e/localization.spec.ts

import { expect, test } from "@playwright/test";
import { captureScreenshot } from "./helpers";

test("renders the sign-in screen in Traditional Chinese with Huninn", async ({
  page,
}, testInfo) => {
  await page.addInitScript(() => {
    localStorage.setItem("rakazo.uiLocale", "zh-TW");
  });
  await page.route("**/api/auth/get-session", (route) =>
    route.fulfill({ status: 200, contentType: "application/json", body: "null" }),
  );

  await page.goto("/sign-in");

  await expect(page.getByRole("heading", { name: "登入 BangSo Bot" })).toBeVisible();
  await expect(page.getByPlaceholder("你的電子郵件地址")).toBeVisible();
  await expect(page.getByRole("button", { name: "繼續使用電子郵件" })).toBeVisible();
  await expect(page.locator("html")).toHaveAttribute("lang", "zh-TW");
  await expect
    .poll(() => page.locator("body").evaluate((element) => getComputedStyle(element).fontFamily))
    .toContain("Huninn");

  await captureScreenshot(page, testInfo, "traditional-chinese-sign-in");
});

test("keeps the Traditional Chinese welcome brand aligned on narrow screens", async ({
  page,
}, testInfo) => {
  await page.setViewportSize({ width: 320, height: 640 });
  await page.addInitScript(() => {
    localStorage.setItem("rakazo.uiLocale", "zh-TW");
  });
  await page.route("**/api/auth/get-session", (route) =>
    route.fulfill({ status: 200, contentType: "application/json", body: "null" }),
  );

  await page.goto("/");

  const mark = page.getByTestId("welcome-mark");
  const title = page.getByTestId("welcome-title");
  await expect(mark).toBeVisible();
  await expect(title).toHaveText("BangSo Bot");
  await expect(title).toHaveCSS("font-family", /Huninn/);
  await expect(page.getByText("好幫手機器人", { exact: true })).toBeVisible();
  await expect
    .poll(() =>
      page.evaluate(() => ({
        clientWidth: document.documentElement.clientWidth,
        scrollWidth: document.documentElement.scrollWidth,
      })),
    )
    .toEqual({ clientWidth: 320, scrollWidth: 320 });

  const markBox = await mark.boundingBox();
  expect(markBox?.width).toBe(markBox?.height);
  await captureScreenshot(page, testInfo, "traditional-chinese-welcome-narrow");
});

test("keeps the welcome wordmark shorter than its mark", async ({ page }) => {
  await page.setViewportSize({ width: 1280, height: 720 });
  await page.route("**/api/auth/get-session", (route) =>
    route.fulfill({ status: 200, contentType: "application/json", body: "null" }),
  );

  await page.goto("/");

  const markBox = await page.getByTestId("welcome-mark").boundingBox();
  const wordmarkBox = await page.getByTestId("welcome-wordmark").boundingBox();
  expect(markBox).not.toBeNull();
  expect(wordmarkBox).not.toBeNull();
  expect(wordmarkBox?.height).toBeLessThanOrEqual(markBox?.height ?? 0);
});