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>

framework/core/js/tests/integration/common/components/Alert.test.ts

@@ -0,0 +1,49 @@
+import Alert from '../../../../src/common/components/Alert';
+import m from 'mithril';
+import mq from 'mithril-query';
+import { jest } from '@jest/globals';
+
+describe('Alert displays as expected', () => {
+  it('should display alert messages with an icon', () => {
+    const alert = mq(m(Alert, { type: 'error' }, 'Shoot!'));
+    expect(alert).toContainRaw('Shoot!');
+    expect(alert).toHaveElement('i.icon');
+  });
+
+  it('should display alert messages with a custom icon when using a title', () => {
+    const alert = mq(Alert, { type: 'error', icon: 'fas fa-users', title: 'Woops..' });
+    expect(alert).toContainRaw('Woops..');
+    expect(alert).toHaveElement('i.fas.fa-users');
+  });
+
+  it('should display alert messages with a title', () => {
+    const alert = mq(m(Alert, { type: 'error', title: 'Error Title' }, 'Shoot!'));
+    expect(alert).toContainRaw('Shoot!');
+    expect(alert).toContainRaw('Error Title');
+    expect(alert).toHaveElement('.Alert-title');
+  });
+
+  it('should display alert messages with custom controls', () => {
+    const alert = mq(Alert, { type: 'error', controls: [m('button', { className: 'Button--test' }, 'Click me!')] });
+    expect(alert).toHaveElement('button.Button--test');
+  });
+});
+
+describe('Alert is dismissible', () => {
+  it('should show dismiss button', function () {
+    const alert = mq(m(Alert, { dismissible: true }, 'Shoot!'));
+    expect(alert).toHaveElement('button.Alert-dismiss');
+  });
+
+  it('should call ondismiss when dismiss button is clicked', function () {
+    const ondismiss = jest.fn();
+    const alert = mq(Alert, { dismissible: true, ondismiss });
+    alert.click('.Alert-dismiss');
+    expect(ondismiss).toHaveBeenCalled();
+  });
+
+  it('should not be dismissible if not chosen', function () {
+    const alert = mq(Alert, { type: 'error', dismissible: false });
+    expect(alert).not.toHaveElement('button.Alert-dismiss');
+  });
+});

framework/core/js/tsconfig.test.json

@@ -0,0 +1,5 @@
+{
+    "extends": "./tsconfig.json",
+    "include": ["tests/**/*"],
+    "files": ["../../../node_modules/flarum-jest-config/shims.d.ts"]
+}

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",
+}