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

js-packages/prettier-config/README.md

@@ -20,7 +20,7 @@ yarn add -D @flarum/prettier-config
 {
   "name": "my-cool-package",
   "version": "1.0.0",
-  "prettier": "@flarum/prettier-config",
+  "prettier": "@flarum/prettier-config"
   // ...
 }
 ```

js-packages/prettier-config/package.json

@@ -1,35 +1,35 @@
 {
-  "name": "@flarum/prettier-config",
-  "version": "1.0.0",
-  "description": "Flarum's configuration for the Prettier code formatter.",
-  "main": "prettierrc.json",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "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..'"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/flarum/prettier-config.git"
-  },
-  "keywords": [
-    "flarum"
-  ],
-  "author": "Flarum Team",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/flarum/prettier-config/issues"
-  },
-  "homepage": "https://github.com/flarum/prettier-config#readme",
-  "publishConfig": {
-    "access": "public"
-  }
+    "name": "@flarum/prettier-config",
+    "version": "1.0.0",
+    "description": "Flarum's configuration for the Prettier code formatter.",
+    "main": "prettierrc.json",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "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..'"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/flarum/prettier-config.git"
+    },
+    "keywords": [
+        "flarum"
+    ],
+    "author": "Flarum Team",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/flarum/prettier-config/issues"
+    },
+    "homepage": "https://github.com/flarum/prettier-config#readme",
+    "publishConfig": {
+        "access": "public"
+    }
 }

js-packages/prettier-config/prettierrc.json

@@ -4,4 +4,3 @@
   "tabWidth": 2,
   "trailingComma": "es5"
 }
-

js-packages/tsconfig/package.json

@@ -1,27 +1,27 @@
 {
-  "name": "flarum-tsconfig",
-  "version": "1.0.2",
-  "description": "Flarum's official Typescript config file",
-  "main": "tsconfig.json",
-  "repository": "https://github.com/flarum/flarum-tsconfig",
-  "author": "Flarum Team",
-  "license": "MIT",
-  "dependencies": {
-    "@types/jquery": "^3.5.5",
-    "@types/mithril": "^2.0.7",
-    "@types/throttle-debounce": "^2.1.0",
-    "dayjs": "^1.10.4"
-  },
-  "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-tsconfig",
+    "version": "1.0.2",
+    "description": "Flarum's official Typescript config file",
+    "main": "tsconfig.json",
+    "repository": "https://github.com/flarum/flarum-tsconfig",
+    "author": "Flarum Team",
+    "license": "MIT",
+    "dependencies": {
+        "@types/jquery": "^3.5.5",
+        "@types/mithril": "^2.0.7",
+        "@types/throttle-debounce": "^2.1.0",
+        "dayjs": "^1.10.4"
+    },
+    "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/tsconfig/tsconfig.json

@@ -16,7 +16,16 @@
     "target": "es6",
     "jsx": "preserve",
     "allowJs": true,
-    "lib": ["dom", "es5", "es2015", "es2016", "es2017", "es2018", "es2019.array", "es2020"],
+    "lib": [
+      "dom",
+      "es5",
+      "es2015",
+      "es2016",
+      "es2017",
+      "es2018",
+      "es2019.array",
+      "es2020"
+    ],
     "allowSyntheticDefaultImports": true
   }
 }

js-packages/webpack-config/src/OverrideChunkLoaderFunction.cjs

@@ -11,11 +11,13 @@ class OverrideChunkLoaderFunction {
     // The function is called by webpack so we can't just override it.
     compiler.hooks.compilation.tap('OverrideChunkLoaderFunction', (compilation) => {
       compilation.mainTemplate.hooks.requireEnsure.tap('OverrideChunkLoaderFunction', (source) => {
-        return source + '\nconst originalLoadChunk = __webpack_require__.l;\n__webpack_require__.l = flarum.reg.loadChunk.bind(flarum.reg, originalLoadChunk);';
+        return (
+          source +
+          '\nconst originalLoadChunk = __webpack_require__.l;\n__webpack_require__.l = flarum.reg.loadChunk.bind(flarum.reg, originalLoadChunk);'
+        );
       });
     });
   }
 }
 
-
 module.exports = OverrideChunkLoaderFunction;

js-packages/webpack-config/src/RegisterAsyncChunksPlugin.cjs

@@ -7,7 +7,7 @@ class RegisterAsyncChunksPlugin {
   static registry = {};
 
   processUrlPath(urlPath) {
-    if (path.sep == "\\") {
+    if (path.sep == '\\') {
       // separator on windows is "\", this will cause escape issues when used in url path.
       return urlPath.replace(/\\/g, '/');
     }

js-packages/webpack-config/src/autoChunkNameLoader.cjs

@@ -1,7 +1,7 @@
-const path = require("path");
-const {getOptions} = require("loader-utils");
-const {validate} = require("schema-utils");
-const fs = require("fs");
+const path = require('path');
+const { getOptions } = require('loader-utils');
+const { validate } = require('schema-utils');
+const fs = require('fs');
 
 const optionsSchema = {
   type: 'object',
@@ -66,7 +66,7 @@ module.exports = function autoChunkNameLoader(source) {
           chunkPath = absolutePathToImport.split(`src${path.sep}`)[1];
         }
 
-        if (path.sep == "\\") {
+        if (path.sep == '\\') {
           // separator on windows is '\', the resolver only works with '/'.
           chunkPath = chunkPath.replace(/\\/g, '/');
         }
@@ -76,7 +76,9 @@ module.exports = function autoChunkNameLoader(source) {
           webpackMode: 'lazy-once',
         };
 
-        const comment = Object.entries(webpackCommentOptions).map(([key, value]) => `${key}: '${value}'`).join(', ');
+        const comment = Object.entries(webpackCommentOptions)
+          .map(([key, value]) => `${key}: '${value}'`)
+          .join(', ');
 
         // Return the new import statement
         return `${pre}import(/* ${comment} */ '${relativePathToImport}')`;

js-packages/webpack-config/src/autoExportLoader.cjs

@@ -98,7 +98,7 @@ function addAutoExports(source, pathToModule, moduleName) {
 
         if (matches.length) {
           const map = matches.reduce((map, match) => {
-            const names = match[1] ? match[1].split(',') : (match[2] ? [match[2]] : null);
+            const names = match[1] ? match[1].split(',') : match[2] ? [match[2]] : null;
 
             if (!names) {
               return map;
@@ -179,7 +179,8 @@ module.exports = function autoExportLoader(source) {
   // Get the path of the module to be exported
   // relative to the src directory.
   // Example: src/forum/components/UserCard.js => forum/components
-  const pathToModule = path.relative(path.resolve(this.rootContext, 'src'), this.resourcePath)
+  const pathToModule = path
+    .relative(path.resolve(this.rootContext, 'src'), this.resourcePath)
     .replaceAll(path.sep, '/')
     .replace(/[A-Za-z_]+\.[A-Za-z_]+$/, '');
 

js-packages/webpack-config/src/extensionId.cjs

@@ -1,3 +1 @@
-module.exports = (name) => name === 'flarum/core'
-  ? 'core'
-  : name.replace('/flarum-ext-', '-').replace('/flarum-', '').replace('/', '-')
+module.exports = (name) => (name === 'flarum/core' ? 'core' : name.replace('/flarum-ext-', '-').replace('/flarum-', '').replace('/', '-'));

js-packages/webpack-config/src/index.cjs

@@ -1,8 +1,8 @@
 const fs = require('fs');
 const path = require('path');
 const { NormalModuleReplacementPlugin } = require('webpack');
-const RegisterAsyncChunksPlugin = require("./RegisterAsyncChunksPlugin.cjs");
-const OverrideChunkLoaderFunction = require("./OverrideChunkLoaderFunction.cjs");
+const RegisterAsyncChunksPlugin = require('./RegisterAsyncChunksPlugin.cjs');
+const OverrideChunkLoaderFunction = require('./OverrideChunkLoaderFunction.cjs');
 
 const entryPointNames = ['forum', 'admin'];
 const entryPointExts = ['js', 'ts'];
@@ -106,8 +106,8 @@ module.exports = function () {
         cacheGroups: {
           // Avoid node_modules being split into separate chunks
           defaultVendors: false,
-        }
-      }
+        },
+      },
     },
 
     output: {