chore: refactor server tests (#99)

deno.json

@@ -6,6 +6,7 @@
     "dev": "deno run -A --unstable --watch --no-check ./example/main.ts",
     "ok": "deno fmt --check && deno lint && deno task check:types && deno task test",
     "report": "deno coverage cov_profile --html",
+    "server": "deno run -A --watch=test/,mod.ts ./test/runTestServer.ts",
     "test": "deno test --allow-read --allow-env --allow-write --allow-run --allow-net"
   },
   "fmt": {

test/runTestServer.ts

@@ -0,0 +1,2 @@
+import { startServer } from "./test_utils.ts";
+startServer();

test/server_test.ts

@@ -1,22 +1,8 @@
 import { assert } from "./test_deps.ts";
-import { render } from "../mod.ts";
-import { browserTest, setupHtmlWithCss } from "./test_utils.ts";
+import { browserTest } from "./test_utils.ts";
 
 Deno.test("basic md table with dollar signs", async () => {
-  const markdown = `| Fruit Name | Quantity | Unit Cost per Item | Subtotal |
-  |------------|----------|--------------------|----------|
-  | Apple      | 1        | $1.50              | $1.50    |
-  | Pear       | 2        | $2.00              | $4.00    |
-  | Orange     | 3        | $2.50              | $7.50    |
-  | Grape      | 60       | $0.05              | $3.00    |
-  | Total      |          |                    | $16.00   |`;
-
-  const body = render(markdown);
-  const html = setupHtmlWithCss(body);
-
-  await browserTest(html, async (page, address) => {
-    await page.goto(`${address}`);
-
+  await browserTest("basicMarkdownTable", async (page) => {
     await page.waitForSelector("table", { timeout: 1000 });
     const tableExists = await page.evaluate(() => {
       const table = document.querySelector("table");
@@ -64,7 +50,7 @@ Deno.test("basic md table with dollar signs", async () => {
           if (!element) {
             return null;
           }
-          const style = window.getComputedStyle(element);
+          const style = globalThis.getComputedStyle(element);
           return style[property];
         },
         selector,

test/test_utils.ts

@@ -1,12 +1,30 @@
 import { Page, puppeteer } from "./test_deps.ts";
-import { CSS } from "../mod.ts";
+import { CSS, render, RenderOptions } from "../mod.ts";
+
+type TestCase = {
+  markdown: string;
+  renderOptions?: RenderOptions;
+};
+
+export type TestCases = "basicMarkdownTable";
+
+export const testCases: Record<TestCases, TestCase> = {
+  "basicMarkdownTable": {
+    markdown: `| Fruit Name | Quantity | Unit Cost per Item | Subtotal |
+|------------|----------|--------------------|----------|
+| Apple      | 1        | $1.50              | $1.50    |
+| Pear       | 2        | $2.00              | $4.00    |
+| Orange     | 3        | $2.50              | $7.50    |
+| Grape      | 60       | $0.05              | $3.00    |
+| Total      |          |                    | $16.00   |`,
+  },
+};
 
 export async function browserTest(
-  htmlContent: string,
-  fn: (page: Page, address: string) => Promise<void>,
-  port = 8000,
+  test: TestCases,
+  fn: (page: Page) => Promise<void>,
 ) {
-  const { serverProcess, address } = await startServer(htmlContent, port);
+  const { serverProcess, address } = await startServer();
 
   try {
     const browser = await puppeteer.launch({
@@ -16,7 +34,8 @@ export async function browserTest(
 
     try {
       const page = await browser.newPage();
-      await fn(page, address);
+      await page.goto(`${address}/${test}`);
+      await fn(page);
     } finally {
       await browser.close();
     }
@@ -25,22 +44,34 @@ export async function browserTest(
   }
 }
 
-function startServer(htmlContent: string, port: number) {
-  const serverProcess = Deno.serve({ port }, (_req) => {
+export function startServer() {
+  const serverProcess = Deno.serve((req) => {
+    const route = req.url.replace("http://localhost:8000/", "");
+    let body = "";
+    if (isTestCase(route)) {
+      const testCase = testCases[route];
+      body = render(testCase.markdown, testCase.renderOptions);
+    } else if (route === "") {
+      body = render(generateIndexMarkdown());
+    } else if (route === "favicon.ico") {
+      // swallow
+    } else {
+      console.log(route);
+      throw new Error("Invalid route specified");
+    }
+    const htmlContent = wrapBody(body);
+
     return new Response(htmlContent, {
       headers: { "Content-Type": "text/html" },
     });
   });
 
-  const hostname = "localhost";
-  const address = `http://${hostname}:${port}`;
-
-  console.log(`Server running at ${address}`);
+  const address = `http://localhost:8000`;
 
   return { serverProcess, address };
 }
 
-export function setupHtmlWithCss(bodyContent: string): string {
+function wrapBody(bodyContent: string) {
   return `<!DOCTYPE html>
   <html lang="en">
     <head>
@@ -62,3 +93,15 @@ export function setupHtmlWithCss(bodyContent: string): string {
   </html>
 `;
 }
+
+function generateIndexMarkdown() {
+  let markdown = "# Deno GFM Server Tests\n";
+  markdown += Object.keys(testCases).map((testCase) => {
+    return `- [${testCase}](http://localhost:8000/${testCase})`;
+  }).join("\n");
+  return markdown;
+}
+
+function isTestCase(route: string): route is TestCases {
+  return route in testCases;
+}