feat(jest): create jest config package for unit testing (#3678)

* 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
* Apply suggestions from code review
* chore: yarn

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

framework/core/js/jest.config.cjs

@@ -0,0 +1 @@
+module.exports = require('flarum-jest-config')({});

framework/core/js/package.json

@@ -2,6 +2,7 @@
     "private": true,
     "name": "@flarum/core",
     "version": "0.0.0",
+    "type": "module",
     "prettier": "@flarum/prettier-config",
     "dependencies": {
         "@askvortsov/rich-icu-message-formatter": "^0.2.4",
@@ -30,6 +31,7 @@
         "bundlewatch": "^0.3.2",
         "cross-env": "^7.0.3",
         "expose-loader": "^3.1.0",
+        "flarum-jest-config": "^1.0.0",
         "flarum-tsconfig": "^1.0.2",
         "flarum-webpack-config": "^2.0.0",
         "prettier": "^2.5.1",
@@ -49,6 +51,7 @@
         "build-typings": "yarn run clean-typings && ([ -e src/@types ] && cp -r src/@types dist-typings/@types || true) && tsc && yarn run post-build-typings",
         "post-build-typings": "find dist-typings -type f -name '*.d.ts' -print0 | xargs -0 sed -i 's,../src/@types,@types,g'",
         "check-typings": "tsc --noEmit --emitDeclarationOnly false",
-        "check-typings-coverage": "typescript-coverage-report"
+        "check-typings-coverage": "typescript-coverage-report",
+        "test": "yarn node --experimental-vm-modules $(yarn bin jest)"
     }
 }

framework/core/js/src/common/utils/BasicEditorDriver.ts

@@ -1,7 +1,8 @@
 import getCaretCoordinates from 'textarea-caret';
 import insertText from './insertText';
-import EditorDriverInterface, { EditorDriverParams } from './EditorDriverInterface';
 import ItemList from './ItemList';
+import type EditorDriverInterface from './EditorDriverInterface';
+import { type EditorDriverParams } from './EditorDriverInterface';
 
 export default class BasicEditorDriver implements EditorDriverInterface {
   el: HTMLTextAreaElement;

framework/core/js/src/forum/states/ComposerState.js

@@ -2,7 +2,6 @@ import app from '../../forum/app';
 import subclassOf from '../../common/utils/subclassOf';
 import Stream from '../../common/utils/Stream';
 import ReplyComposer from '../components/ReplyComposer';
-import EditorDriverInterface from '../../common/utils/EditorDriverInterface';
 
 class ComposerState {
   constructor() {
@@ -31,7 +30,7 @@ class ComposerState {
     /**
      * A reference to the text editor that allows text manipulation.
      *
-     * @type {EditorDriverInterface|null}
+     * @type {import('../../common/utils/EditorDriverInterface')|null}
      */
     this.editor = null;
 

framework/core/js/tests/unit/common/utils/abbreviateNumber.test.ts

@@ -0,0 +1,15 @@
+import abbreviateNumber from '../../../../src/common/utils/abbreviateNumber';
+
+test('does not change small numbers', () => {
+  expect(abbreviateNumber(1)).toBe('1');
+});
+
+test('abbreviates large numbers', () => {
+  expect(abbreviateNumber(1000000)).toBe('1M');
+  expect(abbreviateNumber(100500)).toBe('100.5K');
+});
+
+test('abbreviates large numbers with decimal places', () => {
+  expect(abbreviateNumber(100500)).toBe('100.5K');
+  expect(abbreviateNumber(13234)).toBe('13.2K');
+});

framework/core/js/tsconfig.json

@@ -1,6 +1,6 @@
 // NOTE:
 // If you're looking at core's `tsconfig.json` for the "perfect"
-// tsconfig for your erxtension, look at the dedicated tsconfig
+// tsconfig for your extension, look at the dedicated tsconfig
 // repo instead.
 //
 // https://github.com/flarum/flarum-tsconfig

js-packages/jest-config/.gitignore

@@ -0,0 +1,13 @@
+node_modules
+.DS_Store
+Thumbs.db
+.vscode
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

js-packages/jest-config/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Stichting Flarum (Flarum Foundation)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

js-packages/jest-config/README.md

@@ -0,0 +1,14 @@
+# Jest config for Flarum
+
+This package provides a [Jest](https://jestjs.io/) config object to run unit & integration tests on Flarum extensions.
+
+## 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:
+```js
+module.exports = require('flarum-jest-config')();
+```

js-packages/jest-config/index.cjs

@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = (options = {}) => ({
+  testEnvironment: 'jsdom',
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      require('flarum-webpack-config/babel.config.js'),
+    ],
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        useESM: true,
+      },
+    ],
+  },
+  preset: 'ts-jest',
+  setupFilesAfterEnv: [path.resolve(__dirname, 'setup-env.js')],
+  moduleDirectories: ['node_modules', 'src'],
+  ...options,
+});

js-packages/jest-config/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "flarum-jest-config",
+    "version": "1.0.0",
+    "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",
+        "flat": "^5.0.2",
+        "jest": "^29.3.1",
+        "jest-environment-jsdom": "^29.3.1",
+        "js-yaml": "^4.1.0",
+        "ts-jest": "^29.0.3"
+    },
+    "devDependencies": {
+        "prettier": "^2.4.1"
+    }
+}

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

@@ -0,0 +1,39 @@
+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 jquery from 'jquery';
+import m from 'mithril';
+import flatten from 'flat';
+
+// 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: {},
+      },
+    ],
+    session: {
+      userId: 0,
+      csrfToken: 'test',
+    },
+  });
+  app.translator.addTranslations(flatten(jsYaml.load(fs.readFileSync('../locale/core.yml', 'utf8'))));
+  app.bootExtensions(window.flarum.extensions);
+  app.boot();
+}
+
+beforeAll(() => {
+  window.$ = jquery;
+  window.m = m;
+
+  bootApp();
+});

js-packages/webpack-config/babel.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  presets: [
+    require.resolve('@babel/preset-react'),
+    require.resolve('@babel/preset-typescript'),
+    [
+      require.resolve('@babel/preset-env'),
+      {
+        modules: false,
+        loose: true,
+      },
+    ],
+  ],
+  plugins: [
+    [require.resolve('@babel/plugin-transform-runtime'), { useESModules: true }],
+    [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+    [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
+    [
+      require.resolve('@babel/plugin-transform-react-jsx'),
+      {
+        pragma: 'm',
+        pragmaFrag: "'['",
+        useBuiltIns: true,
+      },
+    ],
+  ],
+};

js-packages/webpack-config/index.js

@@ -72,33 +72,11 @@ module.exports = function (options = {}) {
         {
           // Matches .js, .jsx, .ts, .tsx
           // See: https://regexr.com/5snjd
-          test: /\.(j|t)sx?$/,
+          test: /\.[jt]sx?$/,
           loader: require.resolve('babel-loader'),
-          options: {
+          options: require('./babel.config'),
-            presets: [
+          resolve: {
-              require.resolve('@babel/preset-react'),
+            fullySpecified: false,
-              require.resolve('@babel/preset-typescript'),
-              [
-                require.resolve('@babel/preset-env'),
-                {
-                  modules: false,
-                  loose: true,
-                },
-              ],
-            ],
-            plugins: [
-              [require.resolve('@babel/plugin-transform-runtime'), { useESModules: true }],
-              [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
-              [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }],
-              [
-                require.resolve('@babel/plugin-transform-react-jsx'),
-                {
-                  pragma: 'm',
-                  pragmaFrag: "'['",
-                  useBuiltIns: true,
-                },
-              ],
-            ],
           },
         },
       ],