73 lines
2.3 KiB
JavaScript
73 lines
2.3 KiB
JavaScript
/**
|
|
* 认证页复用全站三态主题协议；按钮必须如实说明当前模式，不能承诺下一次一定变深/浅色。
|
|
*/
|
|
import assert from "node:assert/strict";
|
|
import { test } from "node:test";
|
|
import { appOrigin, scenario } from "./helpers/console-browser.mjs";
|
|
|
|
test(
|
|
"auth theme control describes and persists the shared three-mode cycle",
|
|
{ timeout: 20000 },
|
|
(t) =>
|
|
scenario(t, {}, async (page) => {
|
|
await page.emulateMedia({ colorScheme: "light" });
|
|
await page.goto(`${appOrigin}/login`);
|
|
const themeButton = page.getByRole("button", {
|
|
name: "切换主题，当前跟随系统",
|
|
exact: true,
|
|
});
|
|
await themeButton.waitFor();
|
|
assert.equal(
|
|
await page
|
|
.locator("html")
|
|
.evaluate((html) => html.classList.contains("app-dark")),
|
|
false,
|
|
);
|
|
await themeButton.click();
|
|
await page
|
|
.getByRole("button", { name: "切换主题，当前浅色", exact: true })
|
|
.waitFor();
|
|
assert.equal(
|
|
await page.evaluate(() => localStorage.getItem("theme")),
|
|
"light",
|
|
);
|
|
await page
|
|
.getByRole("button", { name: "切换主题，当前浅色", exact: true })
|
|
.click();
|
|
await page
|
|
.getByRole("button", { name: "切换主题，当前深色", exact: true })
|
|
.waitFor();
|
|
assert.equal(
|
|
await page
|
|
.locator("html")
|
|
.evaluate((html) => html.classList.contains("app-dark")),
|
|
true,
|
|
);
|
|
await page.reload();
|
|
await page
|
|
.getByRole("button", { name: "切换主题，当前深色", exact: true })
|
|
.waitFor();
|
|
await page
|
|
.getByRole("button", { name: "切换主题，当前深色", exact: true })
|
|
.click();
|
|
await page
|
|
.getByRole("button", { name: "切换主题，当前跟随系统", exact: true })
|
|
.waitFor();
|
|
assert.equal(
|
|
await page
|
|
.locator("html")
|
|
.evaluate((html) => html.classList.contains("app-dark")),
|
|
false,
|
|
);
|
|
await page.emulateMedia({ colorScheme: "dark" });
|
|
await page.waitForFunction(() =>
|
|
document.documentElement.classList.contains("app-dark"),
|
|
);
|
|
return {
|
|
currentModeDescribed: true,
|
|
explicitModePersisted: true,
|
|
automaticModeTracksSystem: true,
|
|
};
|
|
}),
|
|
);
|