Merge pull request #39 from NHSDigital/enhance-checkin

Progressively enhance checkin button

Author: MatMoore

.browserslistrc

@@ -1,2 +1,5 @@
 [javascripts]
 supports es6-module
+
+[node]
+node 22

.github/workflows/stage-2-test.yaml

@@ -91,15 +91,27 @@ jobs:
     name: "Linting"
     runs-on: ubuntu-latest
     timeout-minutes: 5
+
     steps:
       - name: "Checkout code"
         uses: actions/checkout@v4
-      - name: "Run linting"
-        run: |
-          make test-lint
-      - name: "Save the linting result"
-        run: |
-          echo "Nothing to save"
+
+      - name: Install poetry
+        run: pipx install poetry
+
+      - name: Set up Python
+        uses: actions/setup-python@a26af69be951a213d495a4c3e4e4022e16d87065
+        with:
+          python-version: "${{inputs.python_version}}"
+          cache: poetry
+          cache-dependency-path: ./poetry.lock
+
+      - name: Install dependencies
+        run: make dependencies
+
+      - name: Run linting
+        run: make test-lint
+
   perform-static-analysis:
     name: "Perform static analysis"
     needs: [test]

.gitignore

@@ -20,5 +20,10 @@ __pycache__
 staticfiles/
 
 # npm
+*.tsbuildinfo
 node_modules/
 manage_breast_screening/assets/compiled
+
+# jest
+.cache
+coverage

.prettierignore

@@ -0,0 +1,14 @@
+# Temporary only
+.cache/
+
+# Node.js modules
+node_modules/
+
+# Test coverage
+coverage/
+
+# Build output
+dist/
+
+# Files to ignore
+package-lock.json

.prettierrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'none',
+  overrides: [
+    {
+      files: '*.md',
+      options: {
+        embeddedLanguageFormatting: 'off',
+        singleQuote: false
+      }
+    },
+    {
+      files: '*.scss',
+      options: {
+        printWidth: 120,
+        singleQuote: false
+      }
+    }
+  ]
+}

Dockerfile

@@ -10,7 +10,7 @@ WORKDIR /app
 RUN apk add --no-cache bash
 
 # Compile static assets
-COPY .browserslistrc babel.config.json package.json package-lock.json rollup.config.mjs  ./
+COPY .browserslistrc babel.config.json package.json package-lock.json rollup.config.js  ./
 COPY manage_breast_screening ./manage_breast_screening
 RUN npm ci
 RUN npm run compile

Makefile

@@ -44,9 +44,10 @@ test: test-unit test-ui test-lint # Run all tests @Testing
 
 test-unit: # Run unit tests @Testing
 	poetry run pytest -m 'not system'
+	npm test -- --coverage
 
 test-lint: # Lint files @Testing
-	# TODO
+	npm run lint
 
 test-ui: # Run UI tests @Testing
 	poetry run pytest -m system

babel.config.json

@@ -5,9 +5,13 @@
       "@babel/preset-env",
       {
         "bugfixes": true,
-        "modules": false,
         "loose": true
       }
     ]
-  ]
+  ],
+  "env": {
+    "test": {
+      "browserslistEnv": "node"
+    }
+  }
 }

jest.config.js

@@ -0,0 +1,51 @@
+/**
+ * Jest project config defaults
+ *
+ * @type {ProjectConfig}
+ */
+const config = {
+  cacheDirectory: '<rootDir>/.cache/jest',
+  coveragePathIgnorePatterns: ['.eslintrc.js', '.test.(cjs|js)'],
+
+  // Enable Babel transforms until Jest supports ESM and `import()`
+  // See: https://jestjs.io/docs/ecmascript-modules
+  transform: {
+    '^.+\\.(cjs|js)$': ['babel-jest', { rootMode: 'upward' }]
+  }
+}
+
+/**
+ * Jest config
+ *
+ * @type {Config}
+ */
+export default {
+  collectCoverageFrom: ['**/assets/js/**/*.{cjs,js}'],
+  coverageProvider: 'v8',
+  projects: [
+    {
+      ...config,
+      displayName: 'JavaScript behaviour tests',
+      setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+      testEnvironment: 'jsdom',
+      testMatch: ['<rootDir>/**/*.test.{cjs,js}']
+    }
+  ],
+
+  // Reset mocks between tests
+  resetMocks: true,
+  resetModules: true,
+  restoreMocks: true,
+  clearMocks: true,
+
+  // Enable GitHub Actions reporter UI
+  reporters: ['default', 'github-actions']
+}
+
+/**
+ * @typedef {Exclude<Config['projects'][0], string>} ProjectConfig
+ */
+
+/**
+ * @import { Config } from 'jest'
+ */

jest.setup.js

@@ -0,0 +1,10 @@
+import '@testing-library/jest-dom'
+
+/**
+ * Mock fetch() function for jsdom
+ */
+Object.defineProperty(window, 'fetch', {
+  configurable: true,
+  writable: true,
+  value: jest.fn().mockResolvedValue(undefined)
+})