464 implement frontend javascript testing

.eslintrc.js

@@ -1,19 +1,62 @@
 module.exports = {
+  // Add rules for JavaScript files
   env: {
     browser: true,
     es6: true,
     node: true,
   },
-  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'plugin:storybook/recommended',
+  ],
   plugins: ['prettier'],
   parserOptions: {
     ecmaVersion: 13,
     sourceType: 'module',
   },
   rules: {
     'prettier/prettier': 'error',
-    indent: ['error', 2],
+    // indent: ['error', 2], // Disabled as it conflicts with Prettier
     semi: ['error', 'never'],
     'no-var': 'error',
   },
+  overrides: [
+    {
+      // Add rules for Test files
+      files: ['**/*.test.{js}'],
+      env: {
+        browser: true,
+        es6: true,
+        node: true,
+      },
+      extends: [
+        'eslint:recommended',
+        'plugin:prettier/recommended',
+        'plugin:storybook/recommended',
+      ],
+      plugins: ['prettier'],
+      parserOptions: {
+        ecmaVersion: 13,
+        sourceType: 'module',
+      },
+      rules: {
+        'prettier/prettier': 'error',
+        // indent: ['error', 2], // Disabled as it conflicts with Prettier
+        semi: ['error', 'never'],
+        'no-var': 'error',
+      },
+      // Include testing globals for vitest
+      globals: {
+        vi: true,
+        describe: true,
+        it: true,
+        expect: true,
+        beforeEach: true,
+        afterEach: true,
+        beforeAll: true,
+        afterAll: true,
+      },
+    },
+  ],
 }

.github/workflows/node-ci.yml

@@ -0,0 +1,39 @@
+name: Node - CI - Lint and Test
+
+on:
+  # Trigger the workflow on push or pull request,
+  # but only for the main branch
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  run-tests:
+    name: Run tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '22'
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        run: npm install
+      - name: Run tests
+        run: npm run test-ci
+  run-lint:
+    name: Run lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '22'
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        run: npm install
+      - name: Run lint
+        run: npm run lint

.prettierrc

@@ -1,6 +1,7 @@
 {
   "trailingComma": "es5",
   "tabWidth": 2,
+  "indent": 4,
   "semi": false,
   "singleQuote": true,
   "endOfLine": "auto"

README.md

@@ -143,45 +143,11 @@ Versions can be restricted from updating within the `pyproject.toml` using stand
 
 [`pip-tools`]: https://pip-tools.readthedocs.io/en/latest/
 
-## Working with NPM
+## Frontend Node
 
 This project includes an NPM-based setup for managing front-end assets like styles, scripts, and other resources. The `package.json` file contains predefined scripts to help with building and managing assets. You don't need to run these NPM commands if you are developing the Django app locally. You should only run these commands when needed, for example if you are changing javascript dependencies or modifying SCSS files.
 
-### Prerequisites
-
-Ensure you have Node.js (v16 or higher) and NPM installed. You can verify their installation with:
-
-```bash
-npm version
-```
-
-### Installing Dependencies
-
-After cloning the repository, navigate to the project directory and install the required NPM dependencies:
-
-```bash
-npm install
-```
-
-### Building all frontend assets
-
-To build all styles, scripts, and vendor files, run:
-
-```bash
-npm run build
-```
-
-The above script performs all the following tasks, which are available as individual commands:
-
-- **Build Expanded Styles**: `npm run styles:expanded` (builds expanded human-readable css files)
-- **Build Minified Styles**: `npm run styles:minified` (builds minified css files, optimised for production)
-- **Build Expanded Scripts**: `npm run scripts:expanded` (builds expanded human-readable javascript files)
-- **Build Minified Scripts**: `npm run scripts:minified` (builds minified javascript files, optimised for production)
-- **Build Vendor Files**: `npm run vendor` (bundles and optimises third-party libraries)
-
-```bash
-npm run styles:expanded
-```
+See [Frontend Node](node/README.md) for details on working with the NPM-based frontend asset pipeline.
 
 ## Contributors
 

docs/node/README.md

@@ -0,0 +1,2 @@
+<!-- markdownlint-disable-next-line MD041 -->
+--8<-- "node/README.md"