Dockercontainer and fixed deps for testing

.devcontainer/devcontainer.json

@@ -0,0 +1,5 @@
+{
+  "name": "Technical Knockout",
+  "image": "tko:latest",
+  "workspaceFolder": "/usr/src/app"
+}

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

Dockerfile

@@ -0,0 +1,49 @@
+# Use an official Node.js image as the base image
+FROM node:22-bookworm
+
+# Install necessary dependencies for make and chromium
+RUN apt-get update && apt-get install -y \
+  build-essential \
+  wget \
+  gnupg \
+  libx11-xcb1 \
+  libxcomposite1 \
+  libxcursor1 \
+  libxdamage1 \
+  libxi6 \
+  libxtst6 \
+  libnss3 \
+  libxrandr2 \
+  libasound2 \
+  libpangocairo-1.0-0 \
+  libatk-bridge2.0-0 \
+  libgtk-3-0 \
+  libgbm1 \
+  xdg-utils \
+  fonts-liberation \
+  chromium \
+  && rm -rf /var/lib/apt/lists/*
+
+# Set the working directory
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json (or yarn.lock)
+COPY package*.json ./
+
+# Install dependencies using npm or yarn
+#RUN npm install --force
+#RUN yarn && yarn install
+
+ENV CHROME_BIN=/usr/bin/chromium
+ENV CHROME_PATH=/usr/bin/chromium
+
+# Copy the rest of the application source code
+COPY . .
+
+# Set the default command to build the project using make
+#CMD ["make"]
+
+CMD ["sh", "-c", "sleep infinity"]
+
+# Expose the build directory as a volume
+VOLUME ["/usr/src/app/builds/knockout/dist"]

Makefile

@@ -2,6 +2,7 @@ NPX		:= npx
 NODE  	:= node
 NPM		:= npm
 LERNA	:= npx lerna
+DOCKER	:= docker
 
 # Some make settings
 SHELL := bash
@@ -22,12 +23,18 @@ all:: node_modules package-lock.json
 test:
 	$(LERNA) exec --stream -- $(MAKE) test
 
+test-headless:
+	$(LERNA) exec --stream -- $(MAKE) test-headless
+
 ci:
 	$(LERNA) exec --stream --concurrency=1 -- $(MAKE) test-ci
 
 lint:
 	$(NPX) standard
 
+docker-build:
+	$(DOCKER) build . --tag tko
+
 # Run the `repackage` target in every directory.  Essentially
 # homogenizes the `package.json`.
 repackage: tools/repackage.mjs
@@ -57,14 +64,17 @@ outdated-upgrade:
 
 install: package-lock.json
 
-clean:
+sweep:
+	rm -rf packages/*/dist/*
+	rm -rf builds/*/dist/*
+
+clean: sweep
 	rm -rf node_modules/
 	rm -f package-lock.json
-	rm -rf packages/*/dist/*
 	rm -rf packages/*/package-lock.json
-	rm -rf builds/*/dist/*
 	rm -rf builds/*/package-lock.json
 
+
 # Local linking of these packages, so they
 # are available for local testing/dev.
 link:

README.md

@@ -1,10 +1,8 @@
 
-### TKO (“Technical Knockout”)
+# TKO (“Technical Knockout”)
 
 [![npm version](https://badge.fury.io/js/tko.svg)](https://badge.fury.io/js/tko)
 [![Join the chat at https://gitter.im/knockout/tko](https://badges.gitter.im/knockout/tko.svg)](https://gitter.im/knockout/tko?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Libscore](https://img.shields.io/libscore/s/ko.svg)](http://libscore.com/#ko)
-[![devDependency Status](https://david-dm.org/knockout/tko/dev-status.svg)](https://david-dm.org/knockout/tko#info=devDependencies)
 [![Circle CI](https://circleci.com/gh/knockout/tko.svg?style=shield)](https://circleci.com/gh/knockout/tko)
 [![Coverage Status](https://coveralls.io/repos/knockout/tko/badge.svg?branch=master&service=github)](https://coveralls.io/github/knockout/tko?branch=master)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
@@ -13,50 +11,57 @@
 
 **TKO** houses the monorepo of [Knockout](https://github.com/knockout/knockout).
 
-
-### Getting Started
+## Getting Started
 
 To install use one of the usual package managers e.g.
 
 - $ `yarn add @tko/build.reference`
 - $ `npm install @tko/build.reference`
 
-Over CDN 
+Over CDN
 
 - Reference Build: https://cdn.jsdelivr.net/npm/@tko/build.reference@4.0.0-alpha8/dist/build.reference.min.js
 
-#### Knockout Build
+## Knockout Build
+
 The Knockout build has some backwards compatibility that is not in the reference build.  See the build differences, here: https://tko.io/3to4
 
 It's available as `@tko/build.knockout`, and over CDN:
 
 - Knockout Build https://cdn.jsdelivr.net/npm/@tko/build.knockout@4.0.0-alpha8/dist/build.knockout.min.js
 
-
 ### Using the Monorepo
 
 | Command | Effect |
 | ------- | ------ |
-| $ `git clone git@github.com:knockout/tko` | Clone the repository.
-| $ `npm install -g yarn` otherwise | Ensure yarn is globally available
-| $ `yarn` | Install local node packages and link tko modules
-| $ `yarn test` | Run all tests. See below.
-| $ `yarn watch` | Run all tests and watch for changes. See below.
-| $ `yarn build` | Build tko\[.module\]\[.es6\]\[.min\].js files, where `.es6` version has not been transpiled
-| $ `lerna publish` | Bump versions and publish to npm registry
+| $ `git clone git@github.com:knockout/tko` | Clone the repository. |
+| $ `npm install -g yarn` | Ensure yarn is globally available |
+| $ `yarn` | Install local node packages and link tko modules |
+| $ `make` | **Currently TKO use a make file** |
+| $ `yarn test` | Run all tests. See below. |
+| $ `yarn watch` | Run all tests and watch for changes. See below. |
+| $ `yarn build` | Build tko\[.module\]\[.es6\]\[.min\].js files, where `.es6` version has not been transpiled |
+| $ `lerna publish` | Bump versions and publish to npm registry |
 
 Checkout `package.json => scripts` for more commands that can be executed with `yarn {command}`.
 
 In each individual `packages/*/` directory, you can also run (presuming `rollup` and `karma` are installed globally):
 
 | Command | Effect |
 | --- | --- |
-| $ `karma COMMAND ../../karma.conf.js [--once]`  | Test the local package, where COMMAND is e.g. `start` or `run`
-| $ `rollup -c ../../rollup.config.js`  | Build the package into the local `dist/`
-
+| $ `karma COMMAND ../../karma.conf.js [--once]`  | Test the local package, where COMMAND is e.g. `start` or `run` |
+| $ `rollup -c ../../rollup.config.js`  | Build the package into the local `dist/` |
 
 #### Testing with `yarn test` and `yarn watch`
 
+### NEW
+
+Start tests with electron: `make test`
+
+Start tests with headless-chrome: `make test-headless`
+
+### OLD
+
 The `yarn test` and `yarn watch` commands can be used in the root directory, where it will run across all tests, or alternatively in any `packages/*/` directory to run tests
 specific to that package.
 
@@ -66,12 +71,10 @@ Optional arguments to `yarn test` include:
 - `--noStartConnect` — Do not start a new Sauce Connect proxy instance for every
 test; requires that Sauce Connect be already running.
 
-
 #### `visual.html`
 
 Note that running `karma` or `rollup` will create a `visual.html` file that shows the proportional size of imports into each package.
 
-
 ### Objectives
 
 TKO aims to become a base for future versions of Knockout.  The objectives include:
@@ -88,12 +91,29 @@ TKO aims to become a base for future versions of Knockout.  The objectives inclu
     - Built-ins have first-class access to quite a bit of good Knockout code, but plugins generally have second-class access and often have to duplicate Knockout internals
     - Quality plugins have lots of boilerplate for compilation, release, documentation, and testing
 
+## Some WSL tricks
+
+Install electron-deps for "make test":
+
+```bash
+sudo apt-get install build-essential clang libdbus-1-dev libgtk-3-dev \
+libnotify-dev libasound2-dev libcap-dev \
+libcups2-dev libxtst-dev \
+libxss1 libnss3-dev gcc-multilib g++-multilib curl \
+gperf bison python3-dbusmock openjdk-8-jre
+```
+
+Install Chrome for "make test-headless":
+
+```bash
+wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+sudo apt -y install ./google-chrome-stable_current_amd64.deb
+```
 
 ## Next steps
 
 There's an [issue for that](https://github.com/knockout/tko/issues/1).
 
-
 ## License
 
 MIT license - [http://www.opensource.org/licenses/mit-license.php.](http://www.opensource.org/licenses/mit-license.php)

lerna.json

@@ -1,5 +1,3 @@
 {
-  "useWorkspaces": true,
-  "version": "4.0.0-beta1.7",
-  "lerna": "4.0.0"
+  "version": "4.0.0-beta1.7"
 }

package.json

@@ -30,33 +30,31 @@
     ]
   },
   "devDependencies": {
-    "@lerna/version": "^4.0.0",
     "@types/jasmine": "^3.10.18",
-    "@types/mocha": "^9.1.1",
+    "@types/mocha": "^10.0.10",
     "chai": "^4.5.0",
-    "electron": "^16.2.8",
-    "esbuild": "^0.17.19",
-    "fs-extra": "^10.1.0",
+    "electron": "^33.2.1",
+    "esbuild": "^0.24.0",
+    "fs-extra": "^11.2.0",
     "jquery": "^3.7.1",
     "karma": "^6.4.4",
     "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^3.2.0",
     "karma-electron-launcher": "^0.3.0",
+    "karma-esbuild": "^2.3.0",
     "karma-jasmine": "^0.1.6",
     "karma-mocha": "^2.0.1",
     "karma-sauce-launcher": "^4.3.6",
     "karma-sinon": "^1.0.5",
-    "lerna": "^4.0.0",
-    "mocha": "^9.2.2",
-    "sinon": "^12.0.1",
-    "standard": "^16.0.4",
-    "typescript": "^4.9.5"
+    "lerna": "^8.1.9",
+    "mocha": "^11.0.1",
+    "sinon": "^19.0.2",
+    "standard": "^17.1.2",
+    "typescript": "^5.7.2"
   },
   "workspaces": [
     "packages/*",
     "builds/*"
   ],
-  "private": true,
-  "dependencies": {
-    "karma-esbuild": "^2.3.0"
-  }
+  "private": true
 }

packages/binding.foreach/spec/eachBehavior.ts

@@ -34,6 +34,8 @@ import {
 
 import $ from 'jquery'
 
+import { assert } from "chai"
+
 beforeEach(function () {
   var provider = new MultiProvider({
     providers: [new DataBindProvider(), new VirtualProvider()]
@@ -926,7 +928,7 @@ describe('focus', function () {
     setTimeout(function () {
       assert.strictEqual(document.activeElement, document.body)
       done()
-    }, 50)
+    }, 1000)
   })
 
   it('does not preserves primitive targets when re-ordering', function (done) {
@@ -940,7 +942,7 @@ describe('focus', function () {
     setTimeout(function () {
       assert.strictEqual(document.activeElement, document.body)
       done()
-    }, 50)
+    }, 1000)
   })
 
   it('preserves objects when re-ordering', function (done) {
@@ -955,7 +957,7 @@ describe('focus', function () {
     setTimeout(function () {
       assert.strictEqual(document.activeElement, $target.find(':input')[2], 'o')
       done()
-    }, 50)
+    }, 1000)
   })
 
   it('preserves objects when re-ordering multiple identical', function (done) {
@@ -973,7 +975,7 @@ describe('focus', function () {
     setTimeout(function () {
       assert.strictEqual(document.activeElement, $target.find(':input')[3], 'o')
       done()
-    }, 50)
+    }, 1000)
   })
 
   it('preserves objects when re-ordering multiple identical, alt', function (done) {
@@ -990,7 +992,7 @@ describe('focus', function () {
     setTimeout(function () {
       assert.strictEqual(document.activeElement, $target.find(':input')[2], 'o')
       done()
-    }, 50)
+    }, 1000)
   })
 })
 

tools/build.mk

@@ -114,6 +114,9 @@ clean:
 test: esm
 	$(KARMA) start $(tools_dir)/karma.conf --once
 
+test-headless: esm
+	$(KARMA) start $(tools_dir)/karma.conf --once --headless-chrome
+
 watch: esm
 	$(KARMA) start $(tools_dir)/karma.conf
 

tools/karma.conf.js

@@ -119,7 +119,7 @@ function sauceConfig (config) {
   })
 }
 
-function localConfig (config) {
+function localConfig(config, useChrome) {
   config.set({
     ...CommonConfig,
     electronOpts: {
@@ -130,7 +130,14 @@ function localConfig (config) {
       fullscreenable: false,
       hasShadow: false
     },
-    browsers: ['Electron'],
+    browsers: useChrome ? 
+    ['testRunner'] : ['Electron'],
+	  customLaunchers: {
+      testRunner: {
+        base: "ChromeHeadless",
+        flags: ["--no-sandbox"]
+      }
+    },
     singleRun: argv.includes('--once')
   })
 }
@@ -139,6 +146,7 @@ module.exports = (config) => {
   if (argv.includes('--sauce')) {
     sauceConfig(config)
   } else {
-    localConfig(config)
+    const useChrome = argv.includes('--headless-chrome')
+    localConfig(config, useChrome)
   }
 }