fred/test/unit/play/runner.test.js at 138b9bed6ae0aed58d9dcc5a5f0de98b0f30279f · mdn/fred · 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
import assert from "node:assert/strict";
import { describe, it } from "node:test";

import { renderHtml } from "../../../vendor/yari/libs/play/index.js";

describe("play renderHtml", () => {
  const out = renderHtml({ html: "<p>ok</p>", css: "", js: "1;" });
  const body = out.slice(out.indexOf("<body>"));
  const head = out.slice(0, out.indexOf("</head>"));

  const cases = [
    {
      name: "closes unclosed tags, attribute values, and comments",
      haystack: body,
      needle: `<!-- "" '' -->`,
    },
    {
      name: "records that the runner script was reached",
      haystack: body,
      needle: "window.__mdnPlayJsStarted = true;",
    },
    {
      name: "records that the runner script ended",
      haystack: body,
      needle: "window.__mdnPlayJsEnded = true;",
    },
    {
      name: "checks the flags from the head",
      haystack: head,
      needle: "window.__mdnPlayJsStarted && window.__mdnPlayJsEnded",
    },
    {
      name: "checks the flags after DOMContentLoaded",
      haystack: head,
      needle: 'addEventListener("DOMContentLoaded"',
    },
  ];

  for (const { name, haystack, needle } of cases) {
    it(name, () => {
      assert.ok(haystack.includes(needle), `missing ${needle}`);
    });
  }

  it("places the closer and flag script between the HTML and the runner", () => {
    const html = body.indexOf("<p>ok</p>");
    const closer = body.indexOf(`<!-- "" '' -->`);
    const started = body.indexOf("__mdnPlayJsStarted = true");
    const runner = body.indexOf('id="mdn-play-js"');
    const ended = body.indexOf("__mdnPlayJsEnded = true");
    assert.ok(html < closer && closer < started && started < runner);
    assert.ok(runner < ended);
  });
});