add the most basic of style tests

src/components/PostSummary.tsx

@@ -71,7 +71,3 @@ function authorElement(author: string) {
   const authorUrl = `/author/${author.toLowerCase().replace(/\s+/g, "-")}`;
   return <a href={authorUrl}>{author}</a>;
 }
-
-function tags(tags: string[]) {
-  return tags.map((tag) => <TagLink tag={tag} />);
-}

src/routes/_app.tsx

@@ -1,18 +1,12 @@
 import { FreshContext } from "../../deps.ts";
-import Footer from "../components/Footer.tsx";
 import Header from "../components/Header.tsx";
 import { BlogOptions } from "../plugin/blog.ts";
+import { themeFromRequest } from "../utils/theme.ts";
 
 export function AppBuilder(options: BlogOptions) {
   // deno-lint-ignore require-await
   return async (req: Request, ctx: FreshContext) => {
-    const getThemeFromCookie = (cookieHeader: string | null): string => {
-      const themeMatch = cookieHeader?.match(/theme=(dark|light)/);
-      return themeMatch ? themeMatch[1] : "auto";
-    };
-
-    const cookieHeader = req.headers.get("cookie");
-    const themeClass = getThemeFromCookie(cookieHeader);
+    const themeClass = themeFromRequest(req);
 
     const { Component } = ctx;
     return (
@@ -26,7 +20,6 @@ export function AppBuilder(options: BlogOptions) {
           <main class="flex flex-grow min-h-full">
             <Component />
           </main>
-          <Footer />
         </body>
       </html>
     );

src/routes/blog/[slug].tsx

@@ -12,16 +12,11 @@ import { Post } from "../../utils/posts.ts";
 import { BlogState } from "../_middleware.ts";
 import Disqus from "../../islands/Disqus.tsx";
 import PostSummary from "../../components/PostSummary.tsx";
+import { themeFromRequest } from "../../utils/theme.ts";
 
 export const handler: Handlers<{ theme: string; post: Post }, BlogState> = {
   async GET(req, ctx) {
-    const getThemeFromCookie = (cookieHeader: string | null): string => {
-      const themeMatch = cookieHeader?.match(/theme=(dark|light)/);
-      return themeMatch ? themeMatch[1] : "auto";
-    };
-
-    const cookieHeader = req.headers.get("cookie");
-    const theme = getThemeFromCookie(cookieHeader);
+    const theme = themeFromRequest(req);
 
     const posts = ctx.state.context.posts;
     const post = posts.find((x) => x.slug === ctx.params.slug);

src/utils/theme.ts

@@ -0,0 +1,5 @@
+export function themeFromRequest(req: Request): "light" | "dark" | "auto" {
+  const cookieHeader = req.headers.get("cookie");
+  const themeMatch = cookieHeader?.match(/theme=(dark|light)/);
+  return themeMatch ? themeMatch[1] as "light" | "dark" : "auto";
+}

tests/fixture/static/styles.css

@@ -1,10 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  #markdown-body[data-color-mode="dark"] {
-    --color-canvas-default: #000000;
-    --color-fg-default: #ffffff;
-  }
-}

tests/fixture/tailwind.config.ts

@@ -1,57 +1,10 @@
 import { type Config } from "tailwindcss";
 import { safelist } from "../../src/safelist.ts";
-import colors from "tailwindcss/colors.js";
 
 export default {
   darkMode: "class",
   content: [
     "{routes,islands,components}/**/*.{ts,tsx}",
   ],
-  theme: {
-    extend: {
-      colors: {
-        light: {
-          background: colors.white,
-          foreground: colors.black,
-          mutedBackground: colors.gray[200],
-          mutedForeground: colors.gray[700],
-          // card: colors.white,
-          // cardForeground: colors.gray[800],
-          // popover: colors.white,
-          // popoverForeground: colors.gray[800],
-          // border: colors.gray[200],
-          // input: colors.gray[200],
-          // primary: colors.blue[700],
-          // primaryForeground: colors.white,
-          // secondary: colors.green[200],
-          // secondaryForeground: colors.green[800],
-          // accent: colors.gray[100],
-          // accentForeground: colors.gray[800],
-          // destructive: colors.red[500],
-          // destructiveForeground: colors.white,
-        },
-        dark: {
-          background: colors.black,
-          foreground: colors.white,
-          mutedBackground: colors.pink[700],
-          mutedForeground: colors.gray[400],
-          // card: colors.white,
-          // cardForeground: colors.gray[800],
-          // popover: colors.white,
-          // popoverForeground: colors.gray[800],
-          // border: colors.gray[200],
-          // input: colors.gray[200],
-          // primary: colors.blue[700],
-          // primaryForeground: colors.white,
-          // secondary: colors.green[200],
-          // secondaryForeground: colors.green[800],
-          // accent: colors.gray[100],
-          // accentForeground: colors.gray[800],
-          // destructive: colors.red[500],
-          // destructiveForeground: colors.white,
-        },
-      },
-    },
-  },
   safelist: safelist,
 } satisfies Config;

tests/style_test.ts

@@ -0,0 +1,58 @@
+import { assertEquals } from "./test_deps.ts";
+import { withPage } from "./test_utils.ts";
+
+Deno.test({
+  name: "styles test",
+  async fn(t) {
+    await withPage(
+      "./tests/styles_fixture/dev.ts",
+      async (page, address) => {
+        await page.goto(`${address}/blog/markdown-test`, { waitUntil: "load" });
+        await page.setViewport({ width: 1920, height: 1080 });
+
+        const getComputedStyle = (
+          selector: string,
+          property: keyof CSSStyleDeclaration,
+        ) => {
+          return page.evaluate(
+            (selector, property) => {
+              const element = document.querySelector(selector);
+              if (!element) {
+                return null;
+              }
+              const style = globalThis.getComputedStyle(element);
+              return style[property];
+            },
+            selector,
+            property,
+          );
+        };
+
+        await t.step("page header color and theme toggle", async () => {
+          let headerColor = await getComputedStyle(
+            "#post\\:markdown-test > a > h3",
+            "color",
+          );
+          assertEquals(
+            headerColor,
+            "rgb(0, 0, 0)",
+            "header color should be black",
+          );
+          await page.click(
+            "body > header > div > nav > ul > li:nth-child(3) > button",
+          );
+          headerColor = await getComputedStyle(
+            "#post\\:markdown-test > a > h3",
+            "color",
+          );
+          assertEquals(
+            headerColor,
+            "rgb(255, 255, 255)",
+            "header color should be white",
+          );
+        });
+      },
+      {},
+    );
+  },
+});

tests/styles_fixture/blog.config.ts

@@ -0,0 +1,11 @@
+import { BlogOptions } from "../../mod.ts";
+
+export default {
+  title: "Demo Blog",
+  navbarItems: {
+    Home: "/",
+    Archive: "/archive",
+  },
+  rootPath: import.meta.url,
+  postsPerPage: 5,
+} satisfies BlogOptions;

tests/styles_fixture/deno.json

@@ -0,0 +1,23 @@
+{
+  "lock": false,
+  "tasks": {
+    "start": "deno run -A --watch=static/,routes/ dev.ts",
+    "update": "deno run -A -r https://fresh.deno.dev/update .",
+    "build": "deno run -A dev.ts build",
+    "preview": "deno run -A main.ts"
+  },
+  "imports": {
+    "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/",
+    "preact": "https://esm.sh/[email protected]",
+    "preact/": "https://esm.sh/[email protected]/",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "tailwindcss": "npm:[email protected]",
+    "tailwindcss/": "npm:/[email protected]/",
+    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
+    "$std/": "https://deno.land/[email protected]/"
+  },
+  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
+  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "exclude": ["**/_fresh/*"]
+}

tests/styles_fixture/dev.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env -S deno run -A --watch=static/,routes/
+
+import dev from "$fresh/dev.ts";
+import config from "./fresh.config.ts";
+
+import "$std/dotenv/load.ts";
+
+await dev(import.meta.url, "./main.ts", config);

tests/styles_fixture/fresh.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "$fresh/server.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
+
+import { blogPlugin } from "../../src/plugin/blog.ts";
+import blogConfig from "./blog.config.ts";
+
+export default defineConfig({
+  plugins: [tailwind(), blogPlugin(blogConfig)],
+});

tests/styles_fixture/fresh.gen.ts

@@ -0,0 +1,17 @@
+// DO NOT EDIT. This file is generated by Fresh.
+// This file SHOULD be checked into source version control.
+// This file is automatically updated during development when running `dev.ts`.
+
+import * as $_404 from "./routes/_404.tsx";
+
+import { type Manifest } from "$fresh/server.ts";
+
+const manifest = {
+  routes: {
+    "./routes/_404.tsx": $_404,
+  },
+  islands: {},
+  baseUrl: import.meta.url,
+} satisfies Manifest;
+
+export default manifest;

tests/styles_fixture/main.ts

@@ -0,0 +1,13 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
+
+import "$std/dotenv/load.ts";
+
+import { start } from "$fresh/server.ts";
+import manifest from "./fresh.gen.ts";
+import config from "./fresh.config.ts";
+
+await start(manifest, config);

tests/styles_fixture/options.ts

@@ -0,0 +1,11 @@
+import { FreshOptions } from "$fresh/server.ts";
+
+export default {
+  async render(_ctx, render) {
+    await new Promise<void>((r) => r());
+    const body = render();
+    if (typeof body !== "string") {
+      throw new Error("body is missing");
+    }
+  },
+} as FreshOptions;

tests/styles_fixture/posts/markdown-test.md

@@ -0,0 +1,27 @@
+---
+title: "Markdown Test"
+date: 2023-8-14 04:39
+author: Some Author
+tags:
+  - example
+---
+
+This should actually, you know, work.
+
+<!--more-->
+
+# Big Stuff
+
+hello
+
+## Not quite as big
+
+~~hey again~~
+
+- a
+- b
+- c
+
+1. a
+2. b
+3. c

tests/styles_fixture/routes/_404.tsx

@@ -0,0 +1,3 @@
+export default function Error404() {
+  return "Not found.";
+}

tests/styles_fixture/static/styles.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  #markdown-body[data-color-mode="dark"] {
+    --color-canvas-default: #000000;
+    --color-fg-default: #ffffff;
+  }
+}

tests/styles_fixture/tailwind.config.ts

@@ -0,0 +1,29 @@
+import { type Config } from "tailwindcss";
+import { safelist } from "../../src/safelist.ts";
+import colors from "tailwindcss/colors.js";
+
+export default {
+  darkMode: "class",
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        light: {
+          background: colors.white,
+          foreground: colors.black,
+          mutedBackground: colors.gray[200],
+          mutedForeground: colors.gray[700],
+        },
+        dark: {
+          background: colors.black,
+          foreground: colors.white,
+          mutedBackground: colors.pink[700],
+          mutedForeground: colors.gray[400],
+        },
+      },
+    },
+  },
+  safelist: safelist,
+} satisfies Config;

tests/test_utils.ts

@@ -47,6 +47,7 @@ export async function withPageName(
       await fn(page, address);
     } catch (err) {
       console.error("Error in test function:", err);
+      throw err;
     } finally {
       await browser.close();
     }