Add TS tests tooling (#661)

* install test dependencies

* change config for tests

* fix linter failing tests

* add basic test file

* add custom element registration to test

* update dependencies

* add jest config file

* fix test calls on makefile and minor fix on test

* update local npm version

* clean testm file

pyscriptjs/Makefile

@@ -68,7 +68,8 @@ examples:
 test:
 	make examples
 	npm run build
-	$(conda_run) pytest -vv $(ARGS) tests/ --log-cli-level=warning
+	make test-ts
+	make test-py
 
 test-local:
 	make examples
@@ -81,7 +82,7 @@ test-py:
 
 test-ts:
 	@echo "Tests are coming :( this is a placeholder and it's meant to fail!"
-	npm run tests
+	npm run test
 
 fmt: fmt-py fmt-ts
 	@echo "Format completed"

pyscriptjs/jest.config.js

@@ -0,0 +1,14 @@
+//jest.config.js
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jest-environment-jsdom',
+    globals: {
+      'ts-jest': {
+          tsconfig: 'tsconfig.json'
+      }
+    },
+    verbose: true,
+    testEnvironmentOptions: {
+        url: "http://localhost"
+    }
+  };

pyscriptjs/package.json

@@ -11,19 +11,24 @@
     "format": "prettier --write './src/**/*.{js,svelte,html,ts}'",
     "lint": "eslint './src/**/*.{js,svelte,html,ts}'",
     "lint:fix": "eslint --fix './src/**/*.{js,svelte,html,ts}'",
-    "xprelint": "npm run format"
+    "xprelint": "npm run format",
+    "test": "jest --coverage",
+    "test:watch": "jest --watch"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@rollup/plugin-typescript": "^8.3.2",
     "@tsconfig/svelte": "^1.0.0",
+    "@types/jest": "^28.1.6",
     "@types/js-yaml": "^4.0.5",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
     "autoprefixer": "^10.4.7",
     "eslint": "^8.14.0",
     "eslint-plugin-svelte3": "^3.4.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
     "postcss": "^8.4.13",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.7.0",
@@ -38,6 +43,7 @@
     "svelte": "^3.48.0",
     "svelte-check": "^1.0.0",
     "svelte-preprocess": "^4.10.6",
+    "ts-jest": "^28.0.7",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4"
   },

pyscriptjs/src/components/base.ts

@@ -79,16 +79,21 @@ export class BaseEvalElement extends HTMLElement {
 
     protected async _register_esm(pyodide: PyodideInterface): Promise<void> {
         const imports: { [key: string]: unknown } = {};
-
+        const nodes = document.querySelectorAll("script[type='importmap']");
-        for (const node of document.querySelectorAll("script[type='importmap']")) {
+        let importmaps: Array<any>;
+        nodes.forEach( node =>
+            {
                 let importmap;
                 try {
                     importmap = JSON.parse(node.textContent);
-                if (importmap?.imports == null) continue;
+                    if (importmap?.imports == null) return;
+                    importmaps.push(importmap);
                 } catch {
-                continue;
+                    return;
                 }
-
+            }
+        )
+        for (const importmap of importmaps){
             for (const [name, url] of Object.entries(importmap.imports)) {
                 if (typeof name != 'string' || typeof url != 'string') continue;
 
@@ -116,7 +121,7 @@ export class BaseEvalElement extends HTMLElement {
                                  : this.getSourceFromElement();
             const is_async = source.includes('asyncio')
 
-            await this._register_esm(runtime);
+            this._register_esm(runtime);
             if (is_async) {
                 <string>await runtime.runPythonAsync(
                     `output_manager.change(out="${this.outputElement.id}", err="${this.errorElement.id}", append=${this.appendOutput ? 'True' : 'False'})`,
@@ -146,13 +151,15 @@ export class BaseEvalElement extends HTMLElement {
             // check if this REPL contains errors, delete them and remove error classes
             const errorElements = document.querySelectorAll(`div[id^='${this.errorElement.id}'][error]`);
             if (errorElements.length > 0) {
-                for (const errorElement of errorElements) {
+                errorElements.forEach( errorElement =>
+                    {
                         errorElement.classList.add('hidden');
                         if (this.hasAttribute('std-err')) {
                             this.errorElement.hidden = true;
                             this.errorElement.style.removeProperty('display');
                         }
                     }
+                )
             }
             removeClasses(this.errorElement, ['bg-red-200', 'p-2']);
 

pyscriptjs/tests/unit/pyrepl.test.ts

@@ -0,0 +1,16 @@
+import 'jest';
+import { PyRepl } from '../../src/components/pyrepl';
+
+customElements.define('py-repl', PyRepl);
+
+describe('PyRepl', () => {
+    let instance: PyRepl;
+    beforeEach(() => {
+        instance = new PyRepl();
+    });
+
+    it('should get the current Repl to just instantiate', async () => {
+        expect(instance).toBeInstanceOf(PyRepl);
+    });
+
+});

pyscriptjs/tsconfig.json

@@ -21,10 +21,15 @@
      */
     "sourceMap": true,
     /** Requests the runtime types from the svelte modules by default. Needed for TS files or else you get errors. */
-    "types": ["svelte"],
+    "types": ["svelte", "jest"],
     "strict": false,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "lib": [
+      "es2016",
+      "dom",
+      "DOM.Iterable"
+    ]
   }
 }