setup-vitest.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+pip install $*
+nodeenv --prebuilt --python-virtualenv
+source $VIRTUAL_ENV/bin/activate # source again to activate npm from env
+npm install -g vite vitest@0.30.0 happy-dom

tests/js/dummy.test.js

@@ -0,0 +1,18 @@
+import { expect, test, vi } from 'vitest'
+import { initLiveUpdate } from 'wcs/dummy.js'
+
+test('for the record', async () => {
+  document.body.innerHTML = `
+    <form>
+      <input />
+    </div>`
+
+  initLiveUpdate()
+
+  const handlerMock = vi.fn()
+  const input = document.querySelector('input')
+  const form = document.querySelector('form').addEventListener('wcs:change', handlerMock)
+  input.dispatchEvent(new Event('change'))
+
+  expect(handlerMock).toHaveBeenCalled()
+})

tox.ini

@@ -1,6 +1,6 @@
 [tox]
 toxworkdir = {env:TMPDIR:/tmp}/tox-{env:USER}/wcs/{env:BRANCH_NAME:main}/{env:EXECUTOR_NUMBER:}
-envlist = py3-django32-codestyle-coverage, pylint
+envlist = py3-django32-codestyle-coverage, pylint, vitest
 
 [testenv]
 setenv =
@@ -80,3 +80,13 @@ commands =
 [pytest]
 filterwarnings =
   error::_pytest.warning_types.PytestCollectionWarning
+
+[testenv:vitest]
+deps = nodeenv
+allowlist_externals =
+    bash
+    npx
+install_command = bash setup-vitest.sh {packages}
+setenv =
+    NODE_PATH={envdir}/lib/node_modules
+commands = npx vitest --run

vitest.config.js

@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: 'tests/js/**/*.test.js',
+    watchExclude: ['**'],
+    alias: {
+      wcs: fileURLToPath(new URL('./wcs/qommon/static/js', import.meta.url)),
+      vitest: process.env.NODE_PATH + '/vitest'
+    },
+    environment: 'happy-dom'
+  }
+})
+

wcs/qommon/static/js/dummy.js

@@ -0,0 +1,6 @@
+export function initLiveUpdate() {
+    document.querySelector('input').addEventListener('change', (event) => {
+        const wcsChangeEvent = new Event('wcs:change')
+        event.target.closest('form').dispatchEvent(wcsChangeEvent);
+    })
+}