Website: use Jasmine framework for tests

strager · strager · commit ecca1458829e · 2021-05-10T00:52:11.000-07:00
I want to expand the website's code. We're gonna write some more tests,
so to make testing easier, let's try out Jasmine. Start by porting our
existing tests to Jasmine.

I tried out Jest first, but Jest doesn't like .mjs files for some
reason.
diff --git a/.github/workflows/build-and-test-web-demo.yml b/.github/workflows/build-and-test-web-demo.yml
@@ -41,9 +41,9 @@ jobs:
         run: emmake cmake --install build --component wasm-demo --prefix website/demo
 
       - name: JS configure
-        run: cd website/demo && yarn
+        run: cd website && yarn
       - name: JS test
-        run: cd website/demo && yarn test
+        run: cd website && yarn test demo/test-demo.mjs
 
       - name: upload build to workflow
         uses: actions/upload-artifact@v2
diff --git a/website/demo/test-demo.mjs b/website/demo/test-demo.mjs
@@ -14,46 +14,42 @@ function preElementWithHTML(html) {
   return element;
 }
 
-let tests = {};
-
-tests = {
-  ...tests,
-
-  "mark first word on line": () => {
+describe("markEditorText", () => {
+  it("mark first word on line", () => {
     let editor = preElementWithHTML("hello world");
     markEditorText(editor, dom.window, [{ begin: 0, end: 5 }]);
     assert.strictEqual(editor.innerHTML, "<mark>hello</mark> world");
-  },
+  });
 
-  "mark last word on line": () => {
+  it("mark last word on line", () => {
     let editor = preElementWithHTML("hello world");
     markEditorText(editor, dom.window, [{ begin: 6, end: 11 }]);
     assert.strictEqual(editor.innerHTML, "hello <mark>world</mark>");
-  },
+  });
 
-  "mark across two text nodes": () => {
+  it("mark across two text nodes", () => {
     // <pre>helloworld</pre>
     let editor = dom.window.document.createElement("pre");
     editor.appendChild(dom.window.document.createTextNode("hello"));
     editor.appendChild(dom.window.document.createTextNode("world"));
 
     markEditorText(editor, dom.window, [{ begin: 3, end: 8 }]);
     assert.strictEqual(editor.innerHTML, "hel<mark>lowor</mark>ld");
-  },
+  });
 
-  "marking deletes existing non-overlapping marks": () => {
+  it("marking deletes existing non-overlapping marks", () => {
     let editor = preElementWithHTML("<mark>hello</mark> world");
     markEditorText(editor, dom.window, [{ begin: 6, end: 11 }]);
     assert.strictEqual(editor.innerHTML, "hello <mark>world</mark>");
-  },
+  });
 
-  "marking with no marks deletes existing marks": () => {
+  it("marking with no marks deletes existing marks", () => {
     let editor = preElementWithHTML("<mark>hello</mark> <mark>world</mark>");
     markEditorText(editor, dom.window, []);
     assert.strictEqual(editor.innerHTML, "hello world");
-  },
+  });
 
-  "multiple new marks": () => {
+  it("multiple new marks", () => {
     let editor = preElementWithHTML("hello world");
     markEditorText(editor, dom.window, [
       { begin: 0, end: 5 },
@@ -63,51 +59,51 @@ tests = {
       editor.innerHTML,
       "<mark>hello</mark> <mark>world</mark>"
     );
-  },
+  });
 
-  "marking removes empty <mark>": () => {
+  it("marking removes empty <mark>", () => {
     let editor = preElementWithHTML("<mark></mark> world");
     markEditorText(editor, dom.window, [{ begin: 1, end: 6 }]);
     assert.strictEqual(editor.innerHTML, " <mark>world</mark>");
-  },
+  });
 
-  "marking preserves <br> immediately after mark": () => {
+  it("marking preserves <br> immediately after mark", () => {
     let editor = preElementWithHTML("hello<br>world");
     markEditorText(editor, dom.window, [{ begin: 0, end: 5 }]);
     assert.strictEqual(editor.innerHTML, "<mark>hello</mark><br>world");
-  },
+  });
 
-  "marking preserves <br> before inserted mark": () => {
+  it("marking preserves <br> before inserted mark", () => {
     let editor = preElementWithHTML("one<br>twothree");
     markEditorText(editor, dom.window, [{ begin: 7, end: 7 + "three".length }]);
     assert.strictEqual(editor.innerHTML, "one<br>two<mark>three</mark>");
-  },
+  });
 
-  "marking preserves <br> after inserted mark": () => {
+  it("marking preserves <br> after inserted mark", () => {
     let editor = preElementWithHTML("onetwo<br>three");
     markEditorText(editor, dom.window, [{ begin: 0, end: 3 }]);
     assert.strictEqual(editor.innerHTML, "<mark>one</mark>two<br>three");
-  },
+  });
 
-  "mark exactly over existing <mark>": () => {
+  it("mark exactly over existing <mark>", () => {
     let editor = preElementWithHTML("<mark>hello</mark> world");
     markEditorText(editor, dom.window, [{ begin: 0, end: 5 }]);
     assert.strictEqual(editor.innerHTML, "<mark>hello</mark> world");
-  },
+  });
 
-  "mark starts at end of existing <mark>": () => {
+  it("mark starts at end of existing <mark>", () => {
     let editor = preElementWithHTML("<mark>hello</mark>world");
     markEditorText(editor, dom.window, [{ begin: 5, end: 10 }]);
     assert.strictEqual(editor.innerHTML, "hello<mark>world</mark>");
-  },
+  });
 
-  "add empty mark": () => {
+  it("add empty mark", () => {
     let editor = preElementWithHTML("helloworld");
     markEditorText(editor, dom.window, [{ begin: 5, end: 5 }]);
     assert.strictEqual(editor.innerHTML, "hello<mark></mark>world");
-  },
+  });
 
-  "add empty mark immediately after non-empty mark": () => {
+  it("add empty mark immediately after non-empty mark", () => {
     let editor = preElementWithHTML("helloworld");
     markEditorText(editor, dom.window, [
       { begin: 0, end: 5 },
@@ -117,22 +113,20 @@ tests = {
       editor.innerHTML,
       "<mark>hello</mark><mark></mark>world"
     );
-  },
-};
+  });
 
-tests = {
-  ...tests,
-
-  "identical marks are merged": () => {
+  it("identical marks are merged", () => {
     let editor = preElementWithHTML("helloworld");
     markEditorText(editor, dom.window, [
       { begin: 0, end: 5 },
       { begin: 0, end: 5 },
     ]);
     assert.strictEqual(editor.innerHTML, "<mark>hello</mark>world");
-  },
+  });
+});
 
-  "marks are sorted before processing": () => {
+describe("sanitizeMarks", () => {
+  it("marks are sorted before processing", () => {
     let marks = [
       { begin: 6, end: 11 },
       { begin: 0, end: 5 },
@@ -141,41 +135,24 @@ tests = {
       { begin: 0, end: 5 },
       { begin: 6, end: 11 },
     ]);
-  },
+  });
 
-  "empty marks are preserved": () => {
+  it("empty marks are preserved", () => {
     let marks = [{ begin: 6, end: 6 }];
     assert.deepStrictEqual(sanitizeMarks(marks), [{ begin: 6, end: 6 }]);
-  },
-};
-
-tests = {
-  ...tests,
+  });
+});
 
-  "parse and lint returns errors": async () => {
+describe("parseAndLint", () => {
+  it("parse and lint returns errors", async () => {
     let input = "undeclared_variable;\nanother_undeclared_variable;\n";
     let qljs = await loadQuickLintJS();
     let marks = qljs.parseAndLint(input);
     assert.deepStrictEqual(marks, [
       { begin: 0, end: "undeclared_variable".length },
       { begin: 21, end: 21 + "another_undeclared_variable".length },
     ]);
-  },
-};
-
-async function main() {
-  for (let testName in tests) {
-    if (Object.prototype.hasOwnProperty.call(tests, testName)) {
-      let test = tests[testName];
-      console.log(`Running ${testName} ...`);
-      await test();
-    }
-  }
-  console.log("All tests passed");
-}
-main().catch((error) => {
-  console.error(error.stack);
-  process.exit(1);
+  });
 });
 
 // quick-lint-js finds bugs in JavaScript programs.
diff --git a/website/package.json b/website/package.json
@@ -1,9 +1,11 @@
 {
   "scripts": {
     "fmt": "prettier --write '**/*.css' '**/*.html' '**/*.js' '**/*.mjs'",
-    "test": "node --experimental-modules demo/test.mjs"
+    "test": "node --experimental-modules run-tests.mjs"
   },
   "devDependencies": {
+    "colors": "^1.4.0",
+    "jasmine": "^3.7.0",
     "jsdom": "16.4.0",
     "prettier": "2.1.2"
   }
diff --git a/website/run-tests.mjs b/website/run-tests.mjs
@@ -0,0 +1,127 @@
+// Copyright (C) 2020  Matthew Glazar
+// See end of file for extended copyright information.
+
+import Jasmine from "jasmine";
+import colors from "colors";
+import fs from "fs";
+
+function main() {
+  let jasmine = new Jasmine();
+  jasmine.loadConfig({
+    spec_files: ["!node_modules/**", "**/test-*.mjs"],
+    stopSpecOnExpectationFailure: true,
+    random: false,
+  });
+  jasmine.clearReporters();
+  jasmine.addReporter(new BasicReporter());
+  let { fileNames, testNames } = parseCommandLineOptions();
+  jasmine.execute(fileNames, testNames);
+}
+
+function parseCommandLineOptions() {
+  let options = process.argv.slice(2);
+
+  let fileNames = [];
+  let testNames = [];
+  for (let option of options) {
+    if (fs.existsSync(option)) {
+      fileNames.push(option);
+    } else {
+      testNames.push(option);
+    }
+  }
+  if (testNames.length > 1) {
+    console.error(
+      `${colors.red("ERROR")} only one test name filter is allowed`
+    );
+    process.exit(1);
+  }
+  return { fileNames, testNames };
+}
+
+class BasicReporter {
+  constructor() {
+    this._executedTests = 0;
+  }
+
+  jasmineStarted(_summary) {}
+
+  jasmineDone(summary) {
+    switch (summary.overallStatus) {
+      case "passed":
+        if (this._executedTests === 0) {
+          console.error(`${colors.red("ERROR")} no tests executed`);
+          process.exit(1);
+        }
+        break;
+
+      case "incomplete":
+        console.error(`${colors.red("ERROR")} ${summary.incompleteReason}`);
+        process.exit(1);
+        break;
+
+      case "failed":
+        // specDone should have killed the process already. But just in case...
+        console.error(`${colors.red("ERROR")} tests failed`);
+        process.exit(1);
+        break;
+
+      default:
+        console.error(
+          `${colors.red("ERROR")} unknown status: ${summary.overallStatus}`
+        );
+        process.exit(1);
+        break;
+    }
+  }
+
+  suiteStarted(_suite) {}
+
+  suiteDone(_suite) {}
+
+  specStarted(spec) {
+    console.error(`Running ${spec.fullName} ...`);
+  }
+
+  specDone(spec) {
+    switch (spec.status) {
+      case "passed":
+        console.error(`${colors.green("OK")}      ${spec.fullName}`);
+        this._executedTests += 1;
+        break;
+
+      case "excluded":
+        console.error(`${colors.yellow("SKIP")}    ${spec.fullName}`);
+        break;
+
+      default:
+      case "failed":
+        for (let failure of spec.failedExpectations) {
+          console.error(failure.stack);
+        }
+        console.error(`${colors.red("FAIL")}    ${spec.fullName}`);
+        process.exit(1);
+        break;
+    }
+  }
+}
+
+main();
+
+// quick-lint-js finds bugs in JavaScript programs.
+// Copyright (C) 2020  Matthew Glazar
+//
+// This file is part of quick-lint-js.
+//
+// quick-lint-js is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// quick-lint-js is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with quick-lint-js.  If not, see <https://www.gnu.org/licenses/>.
diff --git a/website/yarn.lock b/website/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,11 @@`
`1`	`1`	`{`
`2`	`2`	`"scripts": {`
`3`	`3`	`"fmt": "prettier --write '*/.css' '*/.html' '*/.js' '*/.mjs'",`
`4`		`- "test": "node --experimental-modules demo/test.mjs"`
	`4`	`+ "test": "node --experimental-modules run-tests.mjs"`
`5`	`5`	`},`
`6`	`6`	`"devDependencies": {`
	`7`	`+ "colors": "^1.4.0",`
	`8`	`+ "jasmine": "^3.7.0",`
`7`	`9`	`"jsdom": "16.4.0",`
`8`	`10`	`"prettier": "2.1.2"`
`9`	`11`	`}`