Frontend: upgrade to Chai 5.x

frontend/.mocharc.json

@@ -0,0 +1,21 @@
+{
+    "diff": true,
+    "extension": [
+      "ts"
+    ],
+    "reporter": "spec",
+    "slow": 75,
+    "timeout": 200000,
+    "ui": "bdd",
+    "require": [
+      "mocha.env",
+      "ts-node/register",
+      "jsdom-global/register"
+    ],
+    "node-option": [
+      "disable-warning=ExperimentalWarning",
+      "experimental-specifier-resolution=node",
+      "loader=ts-node/esm"
+    ],
+    "spec": "tests/**/*.spec.ts"
+}

frontend/mocha.env

@@ -0,0 +1 @@
+process.env.TS_NODE_PROJECT = 'tsconfig.json'

frontend/package.json

@@ -1,6 +1,7 @@
 {
   "name": "learn",
   "version": "1.0.0",
+  "type": "module",
   "description": "",
   "private": true,
   "dependencies": {
@@ -16,13 +17,13 @@
     "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.8",
+    "@babel/cli": "^7.25.9",
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@types/ace": "0.0.52",
-    "@types/chai": "^4.3.17",
-    "@types/chai-as-promised": "^7.1.8",
+    "@types/chai": "^5.0.1",
+    "@types/chai-as-promised": "^8.0.1",
     "@types/chai-dom": "^1.11.3",
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
@@ -35,8 +36,8 @@
     "amd-loader": "^0.0.8",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
-    "chai": "^4.5.0",
-    "chai-as-promised": "^7.1.2",
+    "chai": "^5.1.2",
+    "chai-as-promised": "^8.0.0",
     "chai-dom": "^1.12.0",
     "chunks-2-json-webpack-plugin": "^1.0.4",
     "clean-webpack-plugin": "^4.0.0",
@@ -89,11 +90,11 @@
     "whatwg-url": "^14"
   },
   "scripts": {
-    "dev": "webpack serve --open --config webpack.dev.js",
+    "dev": "webpack serve --open --config webpack.dev.cjs",
     "tsc": "tsc --noEmit",
     "eslint": "eslint --ext .ts src/ tests/",
-    "sandbox": "webpack --env sandbox --config webpack.prod.js",
-    "production": "webpack --config webpack.prod.js",
+    "sandbox": "webpack --env sandbox --config webpack.prod.cjs",
+    "production": "webpack --config webpack.prod.cjs",
     "test": "TS_NODE_COMPILER_OPTIONS='{\"strict\":false}' mocha --exit",
     "cover": "nyc yarn run test",
     "doc": "typedoc src --out docs"
@@ -147,20 +148,5 @@
       "src/index.ts"
     ]
   },
-  "mocha": {
-    "diff": true,
-    "extension": [
-      "ts"
-    ],
-    "reporter": "spec",
-    "slow": 75,
-    "timeout": 200000,
-    "ui": "bdd",
-    "require": [
-      "ts-node/register",
-      "jsdom-global/register"
-    ],
-    "spec": "tests/**/*.spec.ts"
-  },
   "packageManager": "[email protected]"
 }

frontend/src/ts/widget.ts

@@ -1,4 +1,4 @@
-import cookies from 'typescript-cookies';
+import {Cookies} from 'typescript-cookies'
 
 import {Area, OutputArea, LabContainer} from './areas';
 import {Editor, EditorTheme} from './editor';
@@ -18,6 +18,12 @@ interface EditorView {
 
 type EditorMap = Map<string, EditorView>;
 
+const cookies = new Cookies({
+  path: '/',
+  secure: true,
+  samesite: 'none',
+})
+
 /**
  * Defines the widget behavior
  * @class Widget

frontend/tests/ts/areas.spec.ts

@@ -1,7 +1,8 @@
 // Import testing libs
-import chai, {expect} from 'chai';
+import { expect, use } from 'chai';
 import chaiDom from 'chai-dom';
-chai.use(chaiDom);
+
+const chai = use(chaiDom);
 
 // Import package under test
 import {Area, OutputArea, LabArea, makeLabArea, LabContainer}

frontend/tests/ts/dom-utils.spec.ts

@@ -1,8 +1,7 @@
 // Import testing libs
-import chai, {expect} from 'chai';
+import { expect, use } from 'chai';
 import chaiDom from 'chai-dom';
-
-chai.use(chaiDom);
+const chai = use(chaiDom);
 
 import {getElemById, getElemsByClass, getElemsByTag}
   from '../../src/ts/dom-utils';

frontend/tests/ts/download.spec.ts

@@ -1,6 +1,8 @@
-import chai, {expect} from 'chai';
+import { expect, use } from 'chai';
+import chaiDom from 'chai-dom';
 import chaiAsPromised from 'chai-as-promised';
-chai.use(chaiAsPromised);
+
+const chai = use(chaiDom);
 
 import {
   getLanguages,

frontend/tests/ts/editor.spec.ts

@@ -1,8 +1,8 @@
 // Import testing libs
-import chai, {expect} from 'chai';
+import { expect, use } from 'chai';
 import chaiDom from 'chai-dom';
 
-chai.use(chaiDom);
+const chai = use(chaiDom);
 
 import ace from 'brace';
 

frontend/tests/ts/scrolltop.spec.ts

@@ -1,8 +1,8 @@
 // Import testing libs
-import chai, {expect} from 'chai';
+import { expect, use } from 'chai';
 import chaiDom from 'chai-dom';
 
-chai.use(chaiDom);
+const chai = use(chaiDom);
 
 import {scrollTop} from '../../src/ts/scrolltop';
 

frontend/tests/ts/server.spec.ts

@@ -1,7 +1,8 @@
 // Import testing libs
-import chai, {expect} from 'chai';
-import chaiAsPromised from 'chai-as-promised';
-chai.use(chaiAsPromised);
+import { expect, use } from 'chai';
+import chaiDom from 'chai-dom';
+
+const chai = use(chaiDom);
 
 import {Server, WebSocket} from 'mock-socket';
 

frontend/tests/ts/widget.spec.ts

@@ -1,10 +1,11 @@
 // Import testing libs
-import chai, {expect} from 'chai';
+import { expect, use } from 'chai';
 import chaiAsPromised from 'chai-as-promised';
 import chaiDom from 'chai-dom';
 import {Client, Server, WebSocket} from 'mock-socket';
-chai.use(chaiDom);
-chai.use(chaiAsPromised);
+
+// const chai = use(chaiDom);
+const chai = use(chaiAsPromised);
 
 import {readFileSync} from 'fs';
 import {resolve} from 'path';
@@ -22,6 +23,12 @@ import {getElemsByTag, getElemById, getElemsByClass}
 
 global.WebSocket = WebSocket;
 
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 /**
  * Helper function to fill DOM from a file
  *

frontend/tsconfig.json

@@ -3,13 +3,13 @@
         "allowSyntheticDefaultImports": true,
         "sourceMap": true,
         "allowJs": true,
-        "target": "es2022",
         "esModuleInterop": true,
         "downlevelIteration": true,
         "strict": true,
-        "lib": ["es2022"],
-        "module": "CommonJS",
-        "moduleResolution": "node"
+        "lib": ["es2023"],
+        "module": "es2020",
+        "target": "es2022",
+        "moduleResolution": "bundler"
     },
     "include": [
         "./src/**/*"

frontend/webpack.dev.js → frontend/webpack.dev.cjs

@@ -3,7 +3,7 @@ const { merge } = require('webpack-merge');
 const exec = require('child_process').exec;
 const WatchPlugin = require('webpack-watch-files-plugin').default;
 const ShellPlugin = require('webpack-shell-plugin-next');
-const common = require('./webpack.common.js');
+const common = require('./webpack.common.cjs');
 
 module.exports = function(env) {
   const common_config = common(env);

frontend/webpack.prod.js → frontend/webpack.prod.cjs

@@ -1,7 +1,7 @@
 const { merge } = require('webpack-merge');
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const TerserPlugin = require('terser-webpack-plugin');
-const common = require('./webpack.common.js');
+const common = require('./webpack.common.cjs');
 
 const terser_config = function(env) {
   const staging = (env && env.staging);