deno-gfm/test/test_utils.ts at 5e110d023e59b4ebb404d1ed85765f496a6d9c7a · deer/deno-gfm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { launch, type Page } from "@astral/astral";
import { CSS, render, type RenderOptions } from "../mod.ts";

type TestCase = {
  markdown: string;
  renderOptions?: RenderOptions;
};

export type TestCases = "basicMarkdownTable" | "footnotes" | "yaml";

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   |`,
  },
  "footnotes": {
    markdown: Deno.readTextFileSync("./test/fixtures/footnote.md"),
  },
  "yaml": {
    markdown: Deno.readTextFileSync("./test/fixtures/yaml.md"),
  },
};

export async function browserTest(
  test: TestCases,
  fn: (page: Page) => Promise<void>,
) {
  const { serverProcess, address } = await startServer();

  try {
    const browser = await launch({
      args: ["--no-sandbox"],
    });

    try {
      const page = await browser.newPage(`${address}/${test}`);
      await fn(page);
    } finally {
      await browser.close();
    }
  } finally {
    serverProcess.shutdown();
  }
}

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 address = `http://localhost:8000`;

  return { serverProcess, address };
}

function wrapBody(bodyContent: string) {
  return `<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        main {
          max-width: 800px;
          margin: 0 auto;
        }
        ${CSS}
      </style>
    </head>
    <body>
      <main data-color-mode="light" data-light-theme="light" data-dark-theme="dark" class="markdown-body">
        ${bodyContent}
      </main>
    </body>
  </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;
}