task/CDD-3279-BE-SPIKE-investigate-tooling-for-javascript-testing-CMS

.dockerignore

@@ -34,3 +34,6 @@ venv/
 
 # Existing local SQLite database
 db.sqlite3
+
+# Spec files used for jest tests
+**/*.spec.js

.github/workflows/actions.yml

@@ -131,6 +131,18 @@ jobs:
         run: |
           source uhd.sh
           uhd tests unit
+      - name: Run jest tests
+        run: |
+          source uhd.sh
+          uhd tests jest-ci
+      - name: Unit tests coverage comment
+        # must use the full sha1 to satisfy Sonar.
+        # we are using v1 - full sha1 below.
+        uses: ukhsa-internal/jest-coverage-comment-action@35f93b7420c590576a1484506b85578f87a6bb4a
+        with:
+          coverage-summary-path: ./coverage/coverage-summary.json
+          junitxml-path: ./junit.xml
+          title: Unit tests coverage
 
   ###############################################################################
   # Integration tests

.gitignore

@@ -248,4 +248,16 @@ fabric.properties
 
 
 # Static files collected by the Django app
-metrics/static/
+metrics/static/
+
+# Node dependencies
+node_modules/
+
+# Jest coverage output
+coverage/
+
+# Jest cache
+.jest-cache/
+
+# npm logs
+npm-debug.log*

README.md

@@ -11,12 +11,33 @@ on your development system. For Mac users this will require `homebrew`.
 
 For a guide on setting up home brew please find details on the following link https://brew.sh/
 
+### Install Postgresql
+
 Once homebrew has been set up you can run the following command to install `postgressql`
 
 ```bash
 brew install postgresql
 ```
 
+### Install node / npm and packages
+
+Run the following command to install both node and npm - we need this to support jest for JavaScript testing: 
+
+```bash
+brew install node
+
+node -v && npm -v
+v25.9.0 # <== current node version
+11.12.1 # <== current npm version
+```
+
+Run the following command to install node packages
+
+```bash
+npm install
+```
+
+
 ## Standard command tooling
 
 To unify commonly used commands for local development, there is a script at the root level of the project.

auth_content/static/js/permission_set.js

@@ -342,4 +342,6 @@
 
   // Initialize when DOM is ready
   document.addEventListener("DOMContentLoaded", initialize);
-})();
+  module.exports = { setToWildcard, WILDCARD_ID_VALUE };
+}
+)();

auth_content/static/js/permission_set.spec.js

@@ -0,0 +1,30 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const { setToWildcard, WILDCARD_ID_VALUE } = require("./permission_set.js");
+
+describe("setToWildcard", () => {
+  test("sets dropdown to wildcard state correctly", () => {
+    // Arrange: create a fake select element
+    const select = document.createElement("select");
+
+    // Add some existing options to ensure it gets cleared
+    const oldOption = document.createElement("option");
+    oldOption.value = "123";
+    oldOption.textContent = "Old";
+    select.appendChild(oldOption);
+    select.value = "123";
+
+    // Act
+    setToWildcard(select, "* All Items");
+
+    // Assert
+    expect(select.children.length).toBe(1);
+
+    const option = select.children[0];
+    expect(option.value).toBe(WILDCARD_ID_VALUE);
+    expect(option.textContent).toBe("* All Items");
+    expect(select.value).toBe(WILDCARD_ID_VALUE);
+  });
+});

jest.config.js

@@ -0,0 +1,72 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  testEnvironment: 'jsdom',
+
+  // 1. Where Jest looks for tests
+  roots: [
+    '<rootDir>/auth_content/static/js',
+    '<rootDir>/cms/dashboard/static/js'
+  ],
+
+  // 2. How Jest finds test files
+  testMatch: [
+    '**/*.spec.js',
+  ],
+
+  // 3. Ignore junk when discovering tests
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/static/admin/',
+    '/static/vendor/',
+    '/static/rest_framework/',
+    '/static/debug_toolbar/',
+    '/static/wagtail',
+    '/staticfiles/',
+    '/collected_static/',
+    String.raw`/static/.*\.[0-9a-f]{6,}\.js$`
+  ],
+
+  // 4. Coverage ON
+  collectCoverage: true,
+
+  // 5. What files to include in coverage
+  collectCoverageFrom: [
+    '<rootDir>/auth_content/static/js/**/*.js',
+    '<rootDir>/cms/dashboard/static/js/**/*.js',
+
+    // EXCLUDE everything we don’t own
+    '!**/node_modules/**',
+    '!**/static/**/vendor/**',
+    '!**/static/admin/**',
+    '!**/static/rest_framework/**',
+    '!**/static/debug_toolbar/**',
+    '!**/static/wagtail*/**',
+  ],
+
+  // 6. Coverage output
+  coverageDirectory: '<rootDir>/coverage',
+
+  // 7. Coverage formats
+  coverageReporters: ['json-summary', 'text'],
+
+  // 8. Optional but useful
+  modulePathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+  ],
+
+  // 9. Coverage threshold
+  coverageThreshold: {
+    global: {
+      statements: 100,
+      branches: 100,
+      functions: 100,
+      lines: 100,
+    },
+  },
+
+  // 10. After jest environment has been loaded, run custom setup
+  setupFilesAfterEnv: ['./jest.setup.js'],
+
+  // 11. Reporters
+  reporters: ['default', 'jest-junit'],
+};

jest.setup.js

@@ -0,0 +1,2 @@
+// Extend Jest with DOM matchers for all tests
+require("@testing-library/jest-dom");