Javascript unit testing

Runs over all files in api/js/etemplate/<widget>/test and <app>/js/test folders

Run from the commandline with: npm jstest
Can also run & watch for changed files, check package.json for scripts.

api/js/etemplate/Et2Box/Et2Box.ts

@@ -9,8 +9,8 @@
  */
 
 
-import {css, html, LitElement} from "../../../node_modules/@lion/core/index.js";
-import {Et2Widget} from "./Et2Widget";
+import {css, html, LitElement} from "../../../../node_modules/@lion/core/index.js";
+import {Et2Widget} from "../Et2Widget";
 
 export class Et2Box extends Et2Widget(LitElement)
 {

api/js/etemplate/Et2Box/test/Et2Box.test.ts

@@ -0,0 +1,32 @@
+/**
+ * Test file for Etemplate webComponent base widget Et2Box
+ */
+import {assert, expect, fixture} from '@open-wc/testing';
+import {Et2Box} from "../Et2Box";
+import {html} from "lit-element";
+
+describe("Box widget", () =>
+{
+	// Reference to component under test
+	let element : Et2Box;
+
+	// Setup run before each test
+	beforeEach(async() =>
+	{
+		// Create an element to test with, and wait until it's ready
+		element = await fixture<Et2Box>(html`
+            <et2-box></et2-box>
+		`);
+	});
+
+	it('is defined', () =>
+	{
+		assert.instanceOf(element, Et2Box);
+	});
+
+	it('has no label', () =>
+	{
+		element.set_label("Nope");
+		assert.isEmpty(element.shadowRoot.querySelectorAll('.et2_label'));
+	})
+});

api/js/etemplate/Et2Button.ts

@@ -14,6 +14,7 @@ import {LionButton} from "../../../node_modules/@lion/button/index.js";
 import {SlotMixin} from "../../../node_modules/@lion/core/src/SlotMixin.js";
 import {Et2InputWidget} from "./et2_core_inputWidget";
 import {Et2Widget} from "./Et2Widget";
+import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
 
 export class Et2Button extends Et2InputWidget(Et2Widget(SlotMixin(LionButton)))
 {

api/js/etemplate/Et2Widget.ts

@@ -104,7 +104,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass : T) =>
 
 		disconnectedCallback()
 		{
-			this.egw().tooltipUnbind(this);
+			this.egw()?.tooltipUnbind(this);
 
 			this.removeEventListener("click", this._handleClick.bind(this));
 		}
@@ -774,7 +774,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass : T) =>
 			}
 
 			// If we're the root object, return the phpgwapi API instance
-			return egw('phpgwapi', wnd);
+			return typeof egw === "function" ? egw('phpgwapi', wnd) : null;
 		}
 	};
 

api/js/etemplate/etemplate2.ts

@@ -23,7 +23,7 @@ import {et2_nextmatch, et2_nextmatch_header_bar} from "./et2_extension_nextmatch
 import {et2_tabbox} from "./et2_widget_tabs";
 import '../jsapi/egw_json.js';
 import {egwIsMobile} from "../egw_action/egw_action_common.js";
-import './Et2Box';
+import './Et2Box/Et2Box';
 import './Et2Button';
 import './Et2Date';
 import './Et2Textarea';

package.json

@@ -6,16 +6,25 @@
   "repository": {},
   "scripts": {
     "build": "rollup -c",
-    "build:watch": "rollup -cw"
+    "build:watch": "rollup -cw",
+    "jstest": "web-test-runner",
+    "jstest:watch": "web-test-runner --watch"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
     "@babel/preset-typescript": "^7.14.5",
+    "@open-wc/testing": "^2.5.33",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-typescript": "^8.2.1",
+    "@types/chai": "^4.2.21",
     "@types/jquery": "^3.5.5",
     "@types/jqueryui": "^1.12.14",
+    "@types/mocha": "^8.2.3",
+    "@web/dev-server-esbuild": "^0.2.14",
+    "@web/dev-server-rollup": "^0.3.9",
+    "@web/test-runner": "^0.13.16",
+    "@web/test-runner-playwright": "^0.8.8",
     "grunt": "^1.3.0",
     "grunt-contrib-cssmin": "^2.2.1",
     "grunt-newer": "^1.3.0",

web-test-runner.config.mjs

@@ -0,0 +1,58 @@
+import fs from 'fs';
+import {playwrightLauncher} from '@web/test-runner-playwright';
+import {esbuildPlugin} from '@web/dev-server-esbuild';
+
+const packages =
+	// Get tests for web components (in their own directory)
+	fs.readdirSync('api/js/etemplate')
+		.filter(
+			dir => fs.statSync(`api/js/etemplate/${dir}`).isDirectory() && fs.existsSync(`api/js/etemplate/${dir}/test`),
+		)
+		.map(dir => `api/js/etemplate/${dir}/test`)
+
+		// Add any test files in app/js/test/
+		.concat(
+			fs.readdirSync('.')
+				.filter(
+					dir => fs.existsSync(`${dir}/js`) && fs.existsSync(`${dir}/js/test`) && fs.statSync(`${dir}/js/test`).isDirectory(),
+				)
+				.map(dir => `${dir}/js/test`)
+		)
+
+export default {
+	nodeResolve: true,
+	coverageConfig: {
+		report: true,
+		reportDir: 'coverage',
+		threshold: {
+			statements: 90,
+			branches: 65,
+			functions: 80,
+			lines: 90,
+		},
+	},
+	testFramework: {
+		config: {
+			timeout: '3000',
+		},
+	},
+	browsers: [
+		playwrightLauncher({product: 'firefox', concurrency: 1}),
+		playwrightLauncher({product: 'chromium'}),
+		// Dependant on specific versions of shared libraries (libicuuc.so.66, latest is .67)
+		//playwrightLauncher({ product: 'webkit' }),
+	],
+	groups: packages.map(pkg =>
+	{
+		console.log(pkg);
+		return {
+			name: pkg,
+			files: `${pkg}/**/*.test.ts`,
+		};
+	}),
+
+	plugins: [
+		// Handles typescript
+		esbuildPlugin({ts: true})
+	],
+};