test: add frontend tests (#3991)

js-packages/jest-config/README.md

@@ -4,15 +4,18 @@ This package provides a [Jest](https://jestjs.io/) config object to run unit & i
 
 ## Usage
 
-* Install the package: `yarn add --dev @flarum/jest-config`
-* Add `"type": "module"` to your `package.json`
-* Add `"test": "yarn node --experimental-vm-modules $(yarn bin jest)"` to your `package.json` scripts
-* Rename `webpack.config.js` to `webpack.config.cjs`
-* Create a `jest.config.cjs` file with the following content:
+- Install the package: `yarn add --dev @flarum/jest-config`
+- Add `"type": "module"` to your `package.json`
+- Add `"test": "yarn node --experimental-vm-modules $(yarn bin jest)"` to your `package.json` scripts
+- Rename `webpack.config.js` to `webpack.config.cjs`
+- Create a `jest.config.cjs` file with the following content:
+
 ```js
 module.exports = require('@flarum/jest-config')();
 ```
-* If you are using TypeScript, create `tsconfig.test.json` with the following content:
+
+- If you are using TypeScript, create `tsconfig.test.json` with the following content:
+
 ```json
 {
   "extends": "./tsconfig.json",

js-packages/jest-config/index.cjs

@@ -4,10 +4,7 @@ module.exports = (options = {}) => ({
   testEnvironment: 'jsdom',
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
   transform: {
-    '^.+\\.[tj]sx?$': [
-      'babel-jest',
-      require('flarum-webpack-config/babel.config.cjs'),
-    ],
+    '^.+\\.[tj]sx?$': ['babel-jest', require('flarum-webpack-config/babel.config.cjs')],
     '^.+\\.tsx?$': [
       'ts-jest',
       {
@@ -16,6 +13,7 @@ module.exports = (options = {}) => ({
     ],
   },
   preset: 'ts-jest',
+  setupFiles: [path.resolve(__dirname, 'pollyfills.js')],
   setupFilesAfterEnv: [path.resolve(__dirname, 'setup-env.js')],
   moduleDirectories: ['node_modules', 'src'],
   ...options,

js-packages/jest-config/package.json

@@ -1,35 +1,36 @@
 {
-    "name": "@flarum/jest-config",
-    "version": "1.0.1",
-    "description": "Jest config for Flarum.",
-    "main": "index.cjs",
-    "author": "Flarum Team",
-    "license": "MIT",
-    "type": "module",
-    "prettier": "@flarum/prettier-config",
-    "dependencies": {
-        "@types/jest": "^29.2.2",
-        "flarum-webpack-config": "^3.0.0",
-        "flat": "^5.0.2",
-        "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": {
-        "prettier": "^2.4.1"
-    },
-    "scripts": {
-        "dev": "echo 'skipping..'",
-        "build": "echo 'skipping..'",
-        "analyze": "echo 'skipping..'",
-        "format": "prettier --write .",
-        "format-check": "prettier --check .",
-        "clean-typings": "echo 'skipping..'",
-        "build-typings": "echo 'skipping..'",
-        "post-build-typings": "echo 'skipping..'",
-        "check-typings": "echo 'skipping..'",
-        "check-typings-coverage": "echo 'skipping..'"
-    }
+  "name": "@flarum/jest-config",
+  "version": "1.0.1",
+  "description": "Jest config for Flarum.",
+  "main": "index.cjs",
+  "author": "Flarum Team",
+  "license": "MIT",
+  "type": "module",
+  "prettier": "@flarum/prettier-config",
+  "dependencies": {
+    "@types/jest": "^29.2.2",
+    "flarum-webpack-config": "^3.0.0",
+    "flat": "^5.0.2",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "js-yaml": "^4.1.0",
+    "jsdom": "^24.0.0",
+    "mithril-query": "^4.0.1",
+    "ts-jest": "^29.0.3"
+  },
+  "devDependencies": {
+    "prettier": "^2.4.1"
+  },
+  "scripts": {
+    "dev": "echo 'skipping..'",
+    "build": "echo 'skipping..'",
+    "analyze": "echo 'skipping..'",
+    "format": "prettier --write .",
+    "format-check": "prettier --check .",
+    "clean-typings": "echo 'skipping..'",
+    "build-typings": "echo 'skipping..'",
+    "post-build-typings": "echo 'skipping..'",
+    "check-typings": "echo 'skipping..'",
+    "check-typings-coverage": "echo 'skipping..'"
+  }
 }

js-packages/jest-config/pollyfills.js

@@ -0,0 +1,3 @@
+import { TextEncoder, TextDecoder } from 'util';
+
+Object.assign(global, { TextDecoder, TextEncoder });

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

@@ -1,54 +1,61 @@
-import app from '@flarum/core/src/forum/app';
-import ForumApplication from '@flarum/core/src/forum/ForumApplication';
-import jsYaml from 'js-yaml';
-import fs from 'fs';
+import mixin from '@flarum/core/src/common/utils/mixin';
+import ExportRegistry from '@flarum/core/src/common/ExportRegistry';
 import jquery from 'jquery';
 import m from 'mithril';
-import flatten from 'flat';
+import dayjs from 'dayjs';
 import './test-matchers';
 
-// Boot the Flarum app.
-function bootApp() {
-  ForumApplication.prototype.mount = () => {};
-  window.flarum = { extensions: {} };
-  app.load({
-    apiDocument: null,
-    locale: 'en',
-    locales: {},
-    resources: [
-      {
-        type: 'forums',
-        id: '1',
-        attributes: {
-          canEditUserCredentials: true,
-        },
-      },
-      {
-        type: 'users',
-        id: '1',
-        attributes: {
-          id: 1,
-          username: 'admin',
-          displayName: 'Admin',
-          email: 'admin@machine.local',
-          joinTime: '2021-01-01T00:00:00Z',
-          isEmailConfirmed: true,
-        },
-      },
-    ],
-    session: {
-      userId: 1,
-      csrfToken: 'test',
-    },
-  });
-  app.translator.addTranslations(flatten(jsYaml.load(fs.readFileSync('../locale/core.yml', 'utf8'))));
-  app.bootExtensions(window.flarum.extensions);
-  app.boot();
-}
+import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import jsdom from 'jsdom';
 
-beforeAll(() => {
-  window.$ = jquery;
-  window.m = m;
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
 
-  bootApp();
+process.env.testing = true;
+
+const dom = new jsdom.JSDOM('', {
+  pretendToBeVisual: false,
+});
+
+// Fill in the globals Mithril.js needs to operate. Also, the first two are often
+// useful to have just in tests.
+global.window = dom.window;
+global.document = dom.window.document;
+global.requestAnimationFrame = (callback) => callback();
+
+// Some other needed pollyfills.
+window.$ = jquery;
+window.m = m;
+window.$.fn.tooltip = () => {};
+window.matchMedia = () => ({
+  addListener: () => {},
+  removeListener: () => {},
+});
+window.scrollTo = () => {};
+
+// Flarum specific globals.
+global.flarum = {
+  extensions: {},
+  reg: new (mixin(ExportRegistry, {
+    checkModule: () => true,
+  }))(),
+};
+
+// Prepare basic dom structure.
+document.body.innerHTML = `
+<div id="app">
+  <main class="App-content">
+    <div id="notices"></div>
+    <div id="content"></div>
+  </main>
+</div>
+`;
+
+beforeEach(() => {
+  flarum.reg.clear();
+});
+
+afterAll(() => {
+  dom.window.close();
 });

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

@@ -4,6 +4,8 @@ declare global {
   namespace jest {
     interface Matchers<R> {
       toHaveElement(selector: any): R;
+      toHaveElementAttr(selector: any, attribute: any, value: any): R;
+      toHaveElementAttr(selector: any, attribute: any): R;
       toContainRaw(content: any): R;
     }
   }

js-packages/jest-config/src/boostrap/admin.js

@@ -0,0 +1,18 @@
+import app from '@flarum/core/src/admin/app';
+import AdminApplication from '@flarum/core/src/admin/AdminApplication';
+import bootstrap from './common.js';
+
+export default function bootstrapAdmin(payload = {}) {
+  return bootstrap(AdminApplication, app, {
+    extensions: {},
+    settings: {},
+    permissions: {},
+    displayNameDrivers: [],
+    slugDrivers: {},
+    searchDrivers: {},
+    modelStatistics: {
+      users: 1,
+    },
+    ...payload,
+  });
+}

js-packages/jest-config/src/boostrap/common.js

@@ -0,0 +1,41 @@
+import Drawer from '@flarum/core/src/common/utils/Drawer';
+import { makeUser } from '@flarum/core/tests/factory';
+import flatten from 'flat';
+import jsYaml from 'js-yaml';
+import fs from 'fs';
+
+export default function bootstrap(Application, app, payload = {}) {
+  Application.prototype.mount = () => {};
+
+  app.load({
+    apiDocument: null,
+    locale: 'en',
+    locales: {},
+    resources: [
+      {
+        type: 'forums',
+        id: '1',
+        attributes: {
+          canEditUserCredentials: true,
+        },
+      },
+      makeUser({
+        id: '1',
+        attributes: {
+          id: 1,
+          username: 'admin',
+          displayName: 'Admin',
+          email: 'admin@machine.local',
+        },
+      }),
+    ],
+    session: {
+      userId: 1,
+      csrfToken: 'test',
+    },
+    ...payload,
+  });
+
+  app.translator.addTranslations(flatten(jsYaml.load(fs.readFileSync('../locale/core.yml', 'utf8'))));
+  app.drawer = new Drawer();
+}

js-packages/jest-config/src/boostrap/forum.js

@@ -0,0 +1,7 @@
+import app from '@flarum/core/src/forum/app';
+import ForumApplication from '@flarum/core/src/forum/ForumApplication';
+import bootstrap from './common.js';
+
+export default function bootstrapForum(payload = {}) {
+  return bootstrap(ForumApplication, app, payload);
+}

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

@@ -4,6 +4,19 @@ import { expect } from '@jest/globals';
 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'),
+  toHaveElementAttr: intoMatcher(function (out: any, selector: string, attribute: string, value: string | undefined) {
+    out.should.have(selector);
+
+    const node = out.find(selector)[0];
+
+    const attr = node[attribute] ?? node._attrsByQName[attribute]?.data ?? undefined;
+
+    const onlyTwoArgs = value === undefined;
+
+    if (!node || (!onlyTwoArgs && attr !== value) || (onlyTwoArgs && !attr)) {
+      throw new Error(`Expected ${selector} to have attribute ${attribute} with value ${value}, but found ${node[attribute]}`);
+    }
+  }, 'Expected $received to have attribute $expected with value $value'),
 });
 
 function intoMatcher(callback: Function, message: string) {

js-packages/jest-config/tsconfig.json

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