next-ai-draw-io/tests/e2e/language.spec.ts

import type { Page } from "@playwright/test"
import {
    expect,
    getChatInput,
    getIframe,
    getSendButton,
    openSettingsTab,
    sleep,
    test,
} from "./lib/fixtures"

/** Pick a language in the settings, then close them */
async function pickLanguage(page: Page, name: string) {
    await openSettingsTab(page, "appearance")
    await page.locator("#language-select").click()
    await page.getByRole("option", { name, exact: true }).click()
    await page.keyboard.press("Escape")
}

test.describe("Language Switching", () => {
    test("loads English by default", async ({ page }) => {
        await page.goto("/", { waitUntil: "networkidle" })
        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })

        const chatInput = getChatInput(page)
        await expect(chatInput).toBeVisible({ timeout: 10000 })

        await expect(getSendButton(page, "Send")).toBeVisible()
    })

    test("can switch to Japanese", async ({ page }) => {
        await page.goto("/", { waitUntil: "networkidle" })
        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })

        await test.step("open settings and select Japanese", async () => {
            await pickLanguage(page, "日本語")
        })

        await test.step("verify UI is in Japanese", async () => {
            await expect(getSendButton(page, "送信")).toBeVisible({
                timeout: 5000,
            })
        })
    })

    test("can switch to Chinese", async ({ page }) => {
        await page.goto("/", { waitUntil: "networkidle" })
        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })

        await test.step("open settings and select Chinese", async () => {
            await pickLanguage(page, "中文")
        })

        await test.step("verify UI is in Chinese", async () => {
            await expect(getSendButton(page, "发送")).toBeVisible({
                timeout: 5000,
            })
        })
    })

    test("language persists after reload", async ({ page }) => {
        await page.goto("/", { waitUntil: "networkidle" })
        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })

        await test.step("switch to Japanese", async () => {
            await pickLanguage(page, "日本語")
            await sleep(500)
        })

        await test.step("verify Japanese before reload", async () => {
            await expect(getSendButton(page, "送信")).toBeVisible({
                timeout: 10000,
            })
        })

        await test.step("reload and verify Japanese persists", async () => {
            await page.reload({ waitUntil: "networkidle" })
            await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
            // Wait for hydration and localStorage to be read
            await sleep(1000)
            await expect(getSendButton(page, "送信")).toBeVisible({
                timeout: 10000,
            })
        })
    })

    test("Japanese locale URL works", async ({ page }) => {
        await page.goto("/ja", { waitUntil: "networkidle" })
        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })

        await expect(getSendButton(page, "送信")).toBeVisible({
            timeout: 10000,
        })
    })

    test("Chinese locale URL works", async ({ page }) => {
        await page.goto("/zh", { waitUntil: "networkidle" })
        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })

        await expect(getSendButton(page, "发送")).toBeVisible({
            timeout: 10000,
        })
    })
})