@planning-inspectorate/dynamic-forms 1.14.0 → 1.14.1

package/test/snapshots/secret-wish.html

@@ -0,0 +1,173 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+
+                    <h1 class="govuk-label-wrapper">
+  <label class="govuk-label govuk-label--l" for="secretWish">
+    Share a secret wish for your holiday (will be redacted).
+  </label>
+</h1>
+
+
+
+
+                <h2 class="govuk-heading-m">Redaction preview</h2>
+
+                <details id="secretWish-unredacted" class="govuk-details" data-original="">
+  <summary class="govuk-details__summary">
+    <span class="govuk-details__summary-text">
+      Original
+    </span>
+  </summary>
+  <div class="govuk-details__text">
+    
+  </div>
+</details>
+
+
+                <div class="govuk-form-group">
+  <label class="govuk-label" for="secretWish">
+    Secret wish
+  </label>
+  <textarea class="govuk-textarea" id="secretWish" name="secretWish" rows="8" readonly="true"></textarea>
+</div>
+
+
+                <div class="govuk-button-group">
+                    <button type="button" class="govuk-button govuk-button--secondary" data-module="govuk-button" id="redact-selected-text">
+  Redact selected text
+</button>
+
+                    <button type="button" class="govuk-button govuk-button--secondary" data-module="govuk-button" id="redact-undo">
+  Undo
+</button>
+
+                    <button type="button" class="govuk-button govuk-button--secondary" data-module="govuk-button" id="redact-undo-all">
+  Undo all changes
+</button>
+                </div>
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+
+        <script >
+          /**
+           * @param {HTMLTextAreaElement} textArea
+           * @param {HTMLButtonElement} redactSelectedText
+           * @param {HTMLButtonElement} redactUndo
+           * @param {HTMLButtonElement} redactUndoAll
+           * @param {HTMLDetailsElement} unredactedText
+           * @param {HTMLAnchorElement[]} rejectLinks
+           * @param {import('@azure/ai-text-analytics').PiiEntity[]} suggestions
+           */
+          function registerEventListeners({textArea, redactSelectedText, redactUndo, redactUndoAll, unredactedText, rejectLinks, suggestions}) {
+            const formGroup = textArea.parentElement;
+            const errorMessage = document.createElement('p');
+            errorMessage.id = 'secretWish-error';
+            errorMessage.classList.add('govuk-error-message');
+
+            const history = [];
+            function showError(message) {
+              formGroup.classList.add('govuk-form-group--error');
+              errorMessage.textContent = message;
+              formGroup.prepend(errorMessage);
+            }
+            function hideError() {
+              textArea.parentElement.classList.remove('govuk-form-group--error');
+              errorMessage.remove();
+            }
+            redactSelectedText.addEventListener('click', () => {
+              const { selectionStart, selectionEnd } = textArea;
+              if (selectionStart === selectionEnd) {
+                // no selected text
+                showError('Select text to redact');
+                return;
+              }
+              hideError();
+              // replace the text with the 'full block' █ character
+              const selectedText = textArea.value.substring(selectionStart, selectionEnd);
+              const redactedText = '█'.repeat(selectionEnd - selectionStart);
+              textArea.value = textArea.value.substring(0, selectionStart) + redactedText + textArea.value.substring(selectionEnd);
+              // add to history for undo functionality
+              history.push({
+                selectionStart,
+                selectionEnd,
+                selectedText
+              });
+            });
+            redactUndo.addEventListener('click', () => {
+              const { selectionStart, selectionEnd, selectedText } = history.pop() || {};
+              if (selectionStart !== undefined && selectionEnd !== undefined && selectedText) {
+                hideError();
+                textArea.value = textArea.value.substring(0, selectionStart) + selectedText + textArea.value.substring(selectionEnd);
+              } else {
+                showError('No changes to undo');
+              }
+            });
+            redactUndoAll.addEventListener('click', () => {
+              const unredated = unredactedText.dataset.original;
+              if (history.length === 0 && textArea.value === unredated) {
+                showError('No changes to undo');
+                return;
+              }
+              hideError();
+              textArea.value = unredated || '';
+              history.length = 0;
+            });
+            for (const rejectLink of rejectLinks) {
+              rejectLink.addEventListener('click', () => {
+                const index = parseInt(rejectLink.getAttribute('data-redact').replace('suggestion-reject-', ''));
+                const suggestion = suggestions[index];
+                if (rejectLink.text === 'Reject') {
+                  textArea.value = textArea.value.substring(0, suggestion.offset) + suggestion.text + textArea.value.substring(suggestion.offset + suggestion.length);
+                  rejectLink.text = 'Accept';
+                } else {
+                  const redactedText = '█'.repeat(suggestion.length);
+                  textArea.value = textArea.value.substring(0, suggestion.offset) + redactedText+ textArea.value.substring(suggestion.offset + suggestion.length);
+                  rejectLink.text = 'Reject';
+                }
+              });
+            }
+          }
+
+          function initRedact() {
+            const textArea = document.querySelector('#secretWish');
+            const redactSelectedText = document.querySelector('#redact-selected-text');
+            const redactUndo = document.querySelector('#redact-undo');
+            const redactUndoAll = document.querySelector('#redact-undo-all');
+            const unredactedText = document.querySelector('#secretWish-unredacted');
+            const rejectLinks = document.querySelectorAll('[data-redact]');
+            const suggestions = []
+
+            if (!textArea || !(textArea instanceof HTMLTextAreaElement)) {
+              return;
+            }
+            if (!redactSelectedText || !(redactSelectedText instanceof HTMLButtonElement)) {
+              return;
+            }
+            if (!redactUndo || !(redactUndo instanceof HTMLButtonElement)) {
+              return;
+            }
+            if (!redactUndoAll || !(redactUndoAll instanceof HTMLButtonElement)) {
+              return;
+            }
+            if (!unredactedText || !(unredactedText instanceof HTMLDetailsElement)) {
+              return;
+            }
+
+            registerEventListeners({textArea, redactSelectedText, redactUndo, redactUndoAll, unredactedText, rejectLinks, suggestions});
+          }
+
+          initRedact();
+        </script>
+    </div>

package/test/snapshots/travel-class.html

@@ -0,0 +1,52 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="POST" novalidate>
+                <input type="hidden" name="_csrf" value="">
+
+
+                <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper">
+    <label class="govuk-label govuk-label--l" for="travelClass">
+      Which class do you want to travel in?
+    </label>
+  </h1>
+  <select class="govuk-select" id="travelClass" name="travelClass">
+    <option value="economy" data-cy="answer-economy">Economy</option>
+    <option value="business" data-cy="answer-business">Business</option>
+    <option value="first" data-cy="answer-first">First Class</option>
+  </select>
+</div>
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+
+
+            </form>
+        </div>
+    </div>
+    <script src="/assets/js/accessible-autocomplete.min.js"></script>
+    <script >
+        if (window.accessibleAutocomplete) {
+            accessibleAutocomplete.enhanceSelectElement({
+                selectElement: document.querySelector('#travelClass'),
+                onConfirm: () => {
+                    let input = document.querySelector('#travelClass');
+                    let select = document.querySelector('#travelClass-select');
+                    let options = Array.from(select.options);
+                    if (!input.value || !options.some(option => option.value === input.value)) {
+                        select.options.selectedIndex = -1;
+                    } else {
+                        select.options.selectedIndex = options.findIndex(option => option.value === input.value);
+                    }
+                }
+            })
+        }
+    </script>

package/test/snapshots/travel-insurance-type.html

@@ -0,0 +1,56 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+
+
+<fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      Which type of travel insurance would you like?
+    </h1>
+  </legend>
+
+                        <p class="govuk-body"></p>
+
+
+                        <div class="govuk-form-group">
+  <div class="govuk-radios govuk-radios" data-module="govuk-radios">
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="travelInsuranceType" name="travelInsuranceType" type="radio" value="basic" data-cy="answer-basic">
+      <label class="govuk-label govuk-radios__label" for="travelInsuranceType">
+        Basic
+      </label>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="travelInsuranceType-2" name="travelInsuranceType" type="radio" value="comprehensive" data-cy="answer-comprehensive">
+      <label class="govuk-label govuk-radios__label" for="travelInsuranceType-2">
+        Comprehensive
+      </label>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="travelInsuranceType-3" name="travelInsuranceType" type="radio" value="premium" data-cy="answer-premium">
+      <label class="govuk-label govuk-radios__label" for="travelInsuranceType-3">
+        Premium
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+</fieldset>
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/utils/app.js

@@ -0,0 +1,41 @@
+import bodyParser from 'body-parser';
+import express from 'express';
+import session from 'express-session';
+import crypto from 'node:crypto';
+import { configureNunjucksTestEnv } from './nunjucks.js';
+
+/**
+ * Create an Express app configured for testing with Nunjucks and session support.
+ * @returns {import('express').Express}
+ */
+export function createApp() {
+	const app = express();
+
+	// configure body-parser, to populate req.body
+	// see https://expressjs.com/en/resources/middleware/body-parser.html
+	app.use(bodyParser.urlencoded({ extended: true }));
+	app.use(bodyParser.json());
+
+	app.use(
+		session({
+			secret: crypto.randomUUID(),
+			resave: false,
+			saveUninitialized: false,
+			store: new session.MemoryStore(),
+			unset: 'destroy',
+			cookie: {
+				secure: false,
+				maxAge: 86_400_000 // 1 day in milliseconds
+			}
+		})
+	);
+
+	const nunjucksEnvironment = configureNunjucksTestEnv();
+	// Set the express view engine to nunjucks
+	// calls to res.render will use nunjucks
+	nunjucksEnvironment.addGlobal('govukRebrand', true);
+	nunjucksEnvironment.express(app);
+	app.set('view engine', 'njk');
+
+	return app;
+}

package/test/utils/nunjucks.js

@@ -0,0 +1,20 @@
+import nunjucks from 'nunjucks';
+import { createRequire } from 'module';
+import path from 'path';
+import { testDir as getTestDir } from './utils.js';
+
+export function configureNunjucksTestEnv() {
+	const require = createRequire(import.meta.url);
+	const testDir = getTestDir();
+	const srcDir = path.resolve(testDir, '..', 'src');
+	const govukFrontendRoot = path.resolve(require.resolve('govuk-frontend'), '../..');
+
+	return nunjucks.configure([testDir, srcDir, govukFrontendRoot], {
+		// output with dangerous characters are escaped automatically
+		autoescape: true,
+		// automatically remove trailing newlines from a block/tag
+		trimBlocks: true,
+		// automatically remove leading whitespace from a block/tag
+		lstripBlocks: true
+	});
+}

package/test/utils/test-server.js

@@ -0,0 +1,167 @@
+import http from 'http';
+
+const DEFAULT_OPTIONS = {
+	credentials: 'include'
+};
+
+export class TestServer {
+	// Private cookie jar for storing cookies between requests
+	/** @type {Object<string, string>} */
+	#cookieJar = {};
+
+	/**
+	 * @param {import('http').RequestListener} requestListener
+	 * @param {object} [options]
+	 * @param {boolean} [options.rememberCookies] - If true, cookies are stored and sent with each request
+	 */
+	constructor(requestListener, options = {}) {
+		this.requestListener = requestListener;
+		this.server = null;
+		this.port = null;
+		this.rememberCookies = Boolean(options.rememberCookies);
+	}
+
+	/**
+	 * Starts the server on a random port.
+	 * @returns {Promise<void>}
+	 */
+	async start() {
+		if (this.server) return;
+		this.server = http.createServer(this.requestListener);
+		await new Promise((resolve, reject) => {
+			this.server.listen(0, '127.0.0.1');
+			this.server.on('listening', () => {
+				this.port = this.server.address().port;
+				resolve();
+			});
+			this.server.on('error', reject);
+		});
+	}
+
+	/**
+	 * Stops the server.
+	 * @returns {Promise<void>}
+	 */
+	async stop() {
+		if (!this.server) return;
+		await new Promise((resolve, reject) => {
+			this.server.close((err) => {
+				if (err) reject(err);
+				else resolve();
+			});
+		});
+		this.server = null;
+		this.port = null;
+	}
+
+	/**
+	 * Performs a GET request to the server.
+	 * @param {string} path
+	 * @param {RequestInit} [options]
+	 * @returns {Promise<Response>}
+	 */
+	async get(path, options = {}) {
+		if (!this.server || !this.port) {
+			throw new Error('Server is not started');
+		}
+		const fetchOptions = { headers: {}, ...DEFAULT_OPTIONS, ...options, method: 'GET' };
+		this.#addCookies(fetchOptions.headers);
+		const response = await fetch(`http://localhost:${this.port}${path}`, fetchOptions);
+		if (this.rememberCookies) {
+			this.#updateCookies(response);
+		}
+		return response;
+	}
+
+	/**
+	 * Performs a GET request to the server, following a maximum number of redirects.
+	 * @param {string} path
+	 * @param {number} maxRedirects
+	 * @param {RequestInit} [options]
+	 * @returns {Promise<Response>}
+	 */
+	async getWithRedirects(path, maxRedirects, options = {}) {
+		if (!this.server || !this.port) {
+			throw new Error('Server is not started');
+		}
+		if (maxRedirects === 0) {
+			// can just use get() directly otherwise
+			throw new Error('maxRedirects must be greater than 0');
+		}
+		let response;
+		let currentPath = path;
+		let numRedirects = 0;
+		while (true) {
+			response = await this.get(currentPath, { ...options, redirect: 'manual' });
+			if (
+				response.status >= 300 &&
+				response.status < 400 &&
+				response.headers.has('location') &&
+				numRedirects < maxRedirects
+			) {
+				currentPath = response.headers.get('location');
+				numRedirects++;
+				continue;
+			}
+			break;
+		}
+		if (this.rememberCookies) {
+			this.#updateCookies(response);
+		}
+		return response;
+	}
+
+	/**
+	 * Performs a POST request to the server.
+	 * @param {string} path
+	 * @param {object} [body]
+	 * @param {RequestInit} [options]
+	 * @returns {Promise<Response>}
+	 */
+	async post(path, body = {}, options = {}) {
+		if (!this.server || !this.port) {
+			throw new Error('Server is not started');
+		}
+		const headers = { 'Content-Type': 'application/json', ...(options.headers || {}) };
+		const fetchOptions = {
+			...DEFAULT_OPTIONS,
+			...options,
+			method: 'POST',
+			headers,
+			body: JSON.stringify(body)
+		};
+		this.#addCookies(fetchOptions.headers);
+		const response = await fetch(`http://localhost:${this.port}${path}`, fetchOptions);
+		if (this.rememberCookies) {
+			this.#updateCookies(response);
+		}
+		return response;
+	}
+
+	#addCookies(headers) {
+		if (!this.rememberCookies) return;
+		if (this.#cookies) {
+			headers.Cookie = this.#cookies;
+		}
+	}
+
+	get #cookies() {
+		return Object.entries(this.#cookieJar)
+			.map(([k, v]) => `${k}=${v}`)
+			.join('; ');
+	}
+
+	/**
+	 * Update the internal cookie jar from a fetch Response
+	 * @param {Response} response
+	 */
+	#updateCookies(response) {
+		const cookies = response.headers.getSetCookie();
+		if (!cookies) return;
+		const cookieKv = cookies.map((c) => c.split(';')[0]);
+		for (const c of cookieKv) {
+			const [k, v] = c.split('=');
+			this.#cookieJar[k] = v;
+		}
+	}
+}

package/test/utils/test-server.test.js

@@ -0,0 +1,75 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import express from 'express';
+import cookieParser from 'cookie-parser';
+import { TestServer } from './test-server.js';
+
+// Basic express app for testing
+function createApp() {
+	const app = express();
+	app.use(express.json());
+	app.use(cookieParser());
+
+	app.get('/hello', (req, res) => {
+		res.send('world');
+	});
+
+	app.post('/echo', (req, res) => {
+		res.json(req.body);
+	});
+
+	app.get('/set-cookie', (req, res) => {
+		res.cookie('foo', 'bar');
+		res.send('cookie set');
+	});
+
+	app.get('/check-cookie', (req, res) => {
+		const foo = req.cookies ? req.cookies.foo : undefined;
+		res.json({ foo });
+	});
+
+	return app;
+}
+
+/**
+ * @param {import('node:test').TestContext} ctx
+ * @returns {Promise<TestServer>}
+ */
+async function newTestServer(ctx) {
+	const server = new TestServer(createApp());
+	await server.start();
+	ctx.after(async () => await server.stop());
+	return server;
+}
+
+describe('TestServer', () => {
+	it('should GET /hello', async (ctx) => {
+		const server = await newTestServer(ctx);
+		const res = await server.get('/hello');
+		assert.equal(res.status, 200);
+		const text = await res.text();
+		assert.equal(text, 'world');
+	});
+
+	it('should POST /echo', async (ctx) => {
+		const server = await newTestServer(ctx);
+		const payload = { foo: 'bar' };
+		const res = await server.post('/echo', payload);
+		assert.equal(res.status, 200);
+		const json = await res.json();
+		assert.deepEqual(json, payload);
+	});
+
+	it('should handle cookies', async (ctx) => {
+		const server = await newTestServer(ctx);
+		server.rememberCookies = true;
+		// Set cookie
+		let res = await server.get('/set-cookie');
+		assert.equal(res.status, 200);
+		// Now check cookie is sent back
+		res = await server.get('/check-cookie');
+		assert.equal(res.status, 200);
+		const json = await res.json();
+		assert.equal(json.foo, 'bar');
+	});
+});

package/{src/lib/test-utils.js → test/utils/utils.js}

@@ -1,11 +1,13 @@
-import { mock } from 'node:test';
-import { createRequire } from 'node:module';
-import nunjucks from 'nunjucks';
 import path from 'path';
-import { fileURLToPath } from 'url';
+import { mock } from 'node:test';
+
+export function testDir() {
+	return path.join(path.dirname(new URL(import.meta.url).pathname), '..');
+}
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+export function snapshotsDir() {
+	return path.join(testDir(), 'snapshots');
+}
 
 /**
  * @returns {import('pino').BaseLogger}
@@ -28,7 +30,6 @@ export const mockReq = () => ({
 	params: {},
 	body: {}
 });
-
 export const mockRes = () => {
 	const res = {
 		locals: {},
@@ -43,13 +44,11 @@ export const mockRes = () => {
 	return res;
 };
 
-export function configureNunjucks() {
-	const require = createRequire(import.meta.url);
-	const paths = [
-		// get the path to the govuk-frontend folder, in node_modules, using the node require resolution
-		path.resolve(require.resolve('govuk-frontend'), '../..'),
-		// path to src folder
-		path.join(__dirname, '..')
-	];
-	return nunjucks.configure(paths);
+/**
+ * escapes all RegExp meta-characters in a string
+ * @param {string} s
+ * @returns {string}
+ */
+export function escapeForRegExp(s) {
+	return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }

package/test/views/layout-check-your-answers.njk

@@ -0,0 +1 @@
+{% extends "components/task-list/index.njk" %}