1  import { test, expect, sourceBrowsingUrl } from "@tests/support/fixtures.js";
 2  
 3  const sourceBrowsingFixture = `${sourceBrowsingUrl}/tree/main/src/true.c`;
 4  
 5  test("default theme", async ({ page }) => {
 6    await page.goto(sourceBrowsingFixture);
 7  
 8    {
 9      await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
10      await expect(page.locator("html")).toHaveAttribute(
11        "data-codefont",
12        "jetbrains",
13      );
14    }
15  });
16  
17  test("theme persistence", async ({ page }) => {
18    await page.goto(sourceBrowsingFixture);
19    await expect(
20      page.getByRole("banner").getByRole("link", { name: "source-browsing" }),
21    ).toBeVisible();
22    await page.getByRole("button", { name: "Settings" }).click();
23  
24    await page.getByText("System").click();
25    await page.getByRole("button", { name: "Light Mode" }).click();
26  
27    await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
28    await expect(page.locator("html")).toHaveAttribute("data-codefont", "system");
29  
30    await page.reload();
31  
32    await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
33    await expect(page.locator("html")).toHaveAttribute("data-codefont", "system");
34  });
35  
36  test("change theme", async ({ page }) => {
37    await page.goto(sourceBrowsingFixture);
38    await expect(
39      page.getByRole("banner").getByRole("link", { name: "source-browsing" }),
40    ).toBeVisible();
41    await page.getByRole("button", { name: "Settings" }).click();
42  
43    await page.getByRole("button", { name: "Light Mode" }).click();
44    await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
45    await expect(page.locator("body")).toHaveCSS(
46      "background-color",
47      "rgb(245, 245, 255)",
48    );
49    // Source highlighting reacts to theme change.
50    await expect(page.getByText("() {")).toHaveCSS("color", "rgb(35, 37, 99)");
51  
52    await page.getByRole("button", { name: "Dark Mode" }).click();
53    await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
54    await expect(page.locator("body")).toHaveCSS(
55      "background-color",
56      "rgb(10, 13, 16)",
57    );
58    // Source highlighting reacts to theme change.
59    await expect(page.getByText("() {")).toHaveCSS("color", "rgb(249, 249, 251)");
60  });
61  
62  test("change code font", async ({ page }) => {
63    await page.goto(sourceBrowsingFixture);
64    await expect(
65      page.getByRole("banner").getByRole("link", { name: "source-browsing" }),
66    ).toBeVisible();
67  
68    await page.getByRole("button", { name: "Settings" }).click();
69  
70    await page.getByText("System").click();
71    await expect(page.getByText("System")).toHaveClass(/selected/);
72    await expect(page.locator("html")).toHaveAttribute("data-codefont", "system");
73  
74    await page.getByText("JetBrains Mono").click();
75    await expect(page.getByText("JetBrains Mono")).toHaveClass(/selected/);
76    await expect(page.locator("html")).toHaveAttribute(
77      "data-codefont",
78      "jetbrains",
79    );
80  });