feat(jest): mithril component testing (#3679)

* feat(jest): create jest config package for unit testing
* chore: housekeeping
* fix: now we need to explicitly allow importing without extension
* fix: recover EditorDriverInterface import
* feat(jest): mithril component testing
* fix: use separate `tsconfig.test.json`

Signed-off-by: Sami Mazouz <sychocouldy@gmail.com>

js-packages/jest-config/README.md

@@ -12,3 +12,11 @@ This package provides a [Jest](https://jestjs.io/) config object to run unit & i
 ```js
 module.exports = require('flarum-jest-config')();
 ```
+* If you are using TypeScript, create `tsconfig.test.json` with the following content:
+```json
+{
+  "extends": "./tsconfig.json",
+  "include": ["tests/**/*"],
+  "files": ["../../../node_modules/flarum-jest-config/shims.d.ts"]
+}
+```

js-packages/jest-config/package.json

@@ -13,6 +13,7 @@
         "jest": "^29.3.1",
         "jest-environment-jsdom": "^29.3.1",
         "js-yaml": "^4.1.0",
+        "mithril-query": "^4.0.1",
         "ts-jest": "^29.0.3"
     },
     "devDependencies": {

js-packages/jest-config/setup-env.js

@@ -5,6 +5,7 @@ import fs from 'fs';
 import jquery from 'jquery';
 import m from 'mithril';
 import flatten from 'flat';
+import './test-matchers';
 
 // Boot the Flarum app.
 function bootApp() {

js-packages/jest-config/shims.d.ts

@@ -0,0 +1,12 @@
+import 'mithril-query/mithril-query';
+
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toHaveElement(selector: any): R;
+      toContainRaw(content: any): R;
+    }
+  }
+}
+
+export {};

js-packages/jest-config/test-matchers.ts

@@ -0,0 +1,21 @@
+import { expect } from '@jest/globals';
+
+// Extend Jest with mithril component test matchers.
+expect.extend({
+  toHaveElement: intoMatcher((out: any, expected: any) => out.should.have(expected), 'Expected $received to have node $expected'),
+  toContainRaw: intoMatcher((out: any, expected: any) => out.should.contain(expected), 'Expected $received to contain $expected'),
+});
+
+function intoMatcher(callback: Function, message: string) {
+  return function (this: any, received: any, ...expected: any) {
+    try {
+      callback(received, ...expected);
+      return { pass: true, message: () => '' };
+    } catch (e) {
+      return {
+        pass: false,
+        message: () => message.replace('$expected', this.utils.printExpected(expected)).replace('$received', this.utils.printReceived('component')),
+      };
+    }
+  };
+}

js-packages/jest-config/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "flarum-tsconfig",
+}