Update tests. 💼

README.md

@@ -92,6 +92,10 @@ npx playwright test --project "Booker API Tests"
 npx playwright test --project "Playground UI Tests"
 ```
 
+```shell
+npx playwright test --project "Ludic UI Tests"
+```
+
 ## 📜 Rationale
 
 As an existential note, this project is not intended to [immanentize the eschaton](https://en.wikipedia.org/wiki/Immanentize_the_eschaton). (Just in case anyone was worried.)

playwright.config.ts

@@ -63,6 +63,15 @@ export default defineConfig({
         ...devices["Desktop Chrome"],
       },
     },
+    {
+      name: "Ludic UI Tests",
+      testDir: "./tests/ui/ludic",
+      testMatch: "**/*.spec.ts",
+      use: {
+        baseURL: "https://testerstories.com",
+        ...devices["Desktop Chrome"],
+      },
+    },
     // {
     //   name: "chromium",
     //   testDir: "./tests/ui",

tests/ui/ludic/ludic.spec.ts

@@ -0,0 +1,102 @@
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/xyzzy/ludic/article/precis.html");
+});
+
+test("page has expected title text", async ({ page }) => {
+  const pageHeader = page.locator("h1");
+  await expect(pageHeader).toBeVisible();
+  await expect(pageHeader).toHaveText("A Ludic Historian Précis");
+});
+
+test("header conditionally displays", async ({ page }) => {
+  const header = page.locator("header");
+
+  // Initial state: header should have the 'nav-down' class.
+  await expect(header).toHaveClass("nav-down");
+
+  // Scroll down and verify the class change.
+  await page.evaluate("window.scrollTo(0, document.body.scrollHeight)");
+  await expect(header).toHaveClass("nav-up");
+
+  // Note that above isn't actually making sure that the element
+  // is not visible. So that has to be tested for. However, the
+  // following will not work:
+  //   await expect(header).toBeVisible();
+  // This is because the opacity and positioning of the element
+  // change but the display of the element does not. Playwright
+  // does not check opacity of the element when determining the
+  // visibility.
+  // https://playwright.dev/docs/actionability#visible
+
+  await expect(header).not.toHaveCSS("opacity", "1");
+
+  // Scroll up and verify class changes back.
+  await page.evaluate("window.scrollTo(0, 0)");
+  await expect(header).toHaveClass("nav-down");
+
+  // Now it's necessary to make sure the header is visible.
+  // As per the above, the following would not work:
+  //   await expect(header.isVisible).toBe(true);
+
+  await expect(header).toHaveCSS("opacity", "1");
+});
+
+test("scroll-to-top widget has conditional visibility", async ({ page }) => {
+  const progressScroll = page.locator("#progress-scroll");
+
+  // Initially, the widget should be hidden because it
+  // does not display when the user is scrolled to the top.
+  await expect(progressScroll).toHaveCSS("visibility", "hidden");
+
+  // Here we'll simulate scrolling to make the widget visible.
+  await page.evaluate("window.scrollTo(0, document.body.scrollHeight)");
+  await expect(progressScroll).toHaveCSS("visibility", "visible");
+
+  // The widget normally has a three second timer that causes it
+  // to disappear if there is no scrolling within that three
+  // seconds. However, that does not apply if the widget is at
+  // the bottom of the screen. So here the check is to wait for
+  // three seconds but make sure that the widget is still visible.
+  await page.waitForTimeout(3000);
+  await expect(progressScroll).toHaveCSS("visibility", "visible");
+
+  // Now we'll simulate scrolling back up a little.
+  await page.evaluate("window.scrollTo(0, document.body.scrollHeight / 2)");
+
+  // Wait for three seconds and check if the widget is hidden. It
+  // should be because it's not at the top or bottom fo the viewport.
+  await page.waitForTimeout(3000);
+  await expect(progressScroll).toHaveCSS("visibility", "hidden");
+});
+
+test("dark/light mode changes background", async ({ page }) => {
+  const lightModeLabel = page.locator('label[for="mode-light"]');
+  const darkModeLabel = page.locator('label[for="mode-dark"]');
+  const body = page.locator("body");
+
+  await lightModeLabel.click();
+
+  // Here the goal is to get the computed style from
+  // the browser.
+  const lightBgColor = await body.evaluate(
+    () => getComputedStyle(document.body).backgroundColor,
+  );
+
+  // While the CSS uses hsla, the computed style will
+  // in the form of rgb. So the following, although it
+  // exactly matches the CSS styling, would not work:
+  //   expect(lightBgColor).toBe("hsla(0, 0%, 100%, 1)");
+  expect(lightBgColor).toBe("rgb(255, 255, 255)");
+
+  await darkModeLabel.click();
+
+  const darkBgColor = await body.evaluate(
+    () => getComputedStyle(document.body).backgroundColor,
+  );
+
+  // As above, the following would not work:
+  //   expect(darkBgColor).toBe("hsla(0, 0%, 0%, 1)");
+  expect(darkBgColor).toBe("rgb(0, 0, 0)");
+});

tests/ui/playground/landing.page.spec.ts

@@ -39,7 +39,7 @@ test.describe("menu navigation", async () => {
 
   menuItems.forEach((item) => {
     test(`(Variant 2) menu contains ${item}`, async () => {
-      await landingPage.toBeInNavigationMenu(item);
+      await landingPage.checkNavigationMenuFor(item);
     });
   });
 });

tests/ui/playground/landing.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test";
 
 test.describe("menu navigation", async () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto("https://testerstories.com/xyzzy/");
+    await page.goto("/xyzzy/");
   });
 
   test("menu is initially not visible", async ({ page }) => {

tests/ui/playground/pages/landing.page.ts

@@ -28,7 +28,7 @@ export class LandingPage {
     return this.page.locator(`text=${itemText}`);
   }
 
-  async toBeInNavigationMenu(itemText: string) {
+  async checkNavigationMenuFor(itemText: string) {
     const listItem: Locator = this.menuItemByText(itemText);
     await expect(listItem).toBeVisible();
   }