@ukhomeoffice/formio-gds-template 2.0.2 → 3.0.0-bravo

package/src/components/select/GDSSelect.spec.ts

@@ -0,0 +1,538 @@
+import assert from 'assert';
+
+// Mock minimal browser globals needed by Form.io components in Node test environment
+/* eslint-disable @typescript-eslint/no-explicit-any */
+(global as any).matchMedia = (global as any).matchMedia || (() => ({
+    matches: false,
+    addListener: () => {},
+    removeListener: () => {},
+}));
+const mockDoc = {
+    createElement: (): Record<string, any> => ({
+        setAttribute: () => {},
+        style: {},
+        classList: { add: () => {}, remove: () => {} },
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        querySelector: () => null,
+        querySelectorAll: () => [],
+    }),
+    documentElement: {
+        style: {},
+    },
+    head: {
+        appendChild: () => {},
+    },
+    body: {
+        appendChild: () => {},
+        querySelector: () => null,
+        querySelectorAll: () => [],
+    },
+    getElementsByTagName: (): any[] => [],
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    cookie: '',
+};
+(global as any).document = mockDoc;
+const mockWindow: Record<string, any> = {
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    document: mockDoc,
+    navigator: { userAgent: 'node', cookieEnabled: true },
+    localStorage: { getItem: () => null, setItem: () => {}, removeItem: () => {} },
+    sessionStorage: { getItem: () => null, setItem: () => {}, removeItem: () => {} },
+    location: { href: 'http://localhost', origin: 'http://localhost', protocol: 'http:', host: 'localhost', hostname: 'localhost', port: '', pathname: '/', search: '', hash: '' },
+};
+(global as any).window = mockWindow;
+// inputmask accesses `navigator` as a bare global (not via window.navigator).
+// Node 24 exposes navigator as a read-only getter so we must use defineProperty.
+Object.defineProperty(global, 'navigator', {
+    value: mockWindow.navigator,
+    writable: true,
+    configurable: true,
+});
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+import GDSSelect from './GDSSelect';
+
+describe('GDSSelect', () => {
+    it('forces client-side search by clearing searchField during init', () => {
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'officer',
+            searchField: 'email',
+            dataSrc: 'url',
+            data: { url: '/users/emails' },
+        }, {});
+
+        selectComponent.init();
+        assert.strictEqual(selectComponent.component.searchField, '');
+    });
+
+    it('enables Choices search so the patched matcher owns filtering', () => {
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'officer',
+            searchField: 'email',
+            searchThreshold: 0,
+            selectThreshold: 0.5,
+            dataSrc: 'url',
+            data: { url: '/users/emails' },
+            customOptions: {
+                searchFloor: 3,
+            },
+        }, {});
+
+        const options = selectComponent.choicesOptions();
+        assert.strictEqual(options.searchChoices, true);
+        assert.strictEqual(options.searchFloor, 0);
+        assert.deepStrictEqual(options.searchFields, ['label', 'value']);
+    });
+
+    it('keeps Choices search enabled for reference data', () => {
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'currency',
+            searchThreshold: 0.3,
+            dataSrc: 'url',
+            data: { url: '/v2/entities/currency' },
+        }, {});
+
+        const options = selectComponent.choicesOptions();
+        assert.strictEqual(options.searchChoices, true);
+    });
+
+    it('updateItems re-populates choices from cache after activate() shows spinner', () => {
+        // Regression: activate() calls setLoadingItem() (spinner) then triggerUpdate()
+        // -> updateItems(null, false). Without re-calling setItems the spinner persists.
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'terminal',
+            dataSrc: 'url',
+            filter: '?mode=dataOnly',
+            data: { url: '/v2/entities/terminal' },
+        }, {});
+
+        const component = selectComponent as any;
+        // Patch GDSSelect.prototype.setItems (our override) — updateItems calls
+        // this.setItems which resolves to GDSSelect.prototype first.
+        const gdsProto = GDSSelect.prototype as any;
+        const original = gdsProto.setItems;
+        let setItemsCalled = false;
+        let setItemsArg: unknown;
+        gdsProto.setItems = (items: unknown) => { setItemsCalled = true; setItemsArg = items; };
+
+        const cachedItems = [{ id: 1, name: 'Eastern Docks' }, { id: 2, name: 'Western Docks' }];
+        component.downloadedResources = cachedItems;
+        component.loading = false;
+        component.itemsLoadedResolve = () => {};
+        // filter has no {{ so _gdsHasDynamicFilter is false and _gdsCurrentFilterKey()
+        // returns ''. _gdsFilterKey must match so the guard enters the cache path.
+        component._gdsFilterKey = '';
+        component.interpolate = () => '';
+
+        try {
+            component.updateItems(null, false);
+            assert.strictEqual(setItemsCalled, true, 'setItems must be called to restore choices from cache');
+            assert.strictEqual(setItemsArg, cachedItems, 'setItems must receive the cached downloadedResources');
+        } finally {
+            gdsProto.setItems = original;
+        }
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
+    it('updateItems skips URL re-fetch when items and the dynamic filter are unchanged', () => {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'currency',
+            dataSrc: 'url',
+            filter: '{{row.countryFilter}}',
+            data: { url: '/v2/entities/currency' },
+        }, {});
+
+        let superCalled = false;
+        // Patch the parent updateItems to detect if it is called
+        const proto = Object.getPrototypeOf(GDSSelect.prototype);
+        const original = proto.updateItems;
+        proto.updateItems = () => { superCalled = true; };
+
+        (selectComponent as any).downloadedResources = [{ value: 'USD', label: 'USD' }];
+        (selectComponent as any).itemsLoadedResolve = () => {};
+        (selectComponent as any)._gdsFilterKey = '';
+        (selectComponent as any).interpolate = () => '';
+
+        // Should NOT delegate to parent: items loaded, no search, no force
+        (selectComponent as any).updateItems(null, false);
+        assert.strictEqual(superCalled, false, 'should skip re-fetch when items are loaded');
+
+        // Should delegate to parent: force=true overrides the guard
+        (selectComponent as any).updateItems(null, true);
+        assert.strictEqual(superCalled, true, 'should allow re-fetch when forceUpdate is true');
+
+        proto.updateItems = original;
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
+    it('refreshes URL selects when an interpolated filter has changed', () => {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'port',
+            dataSrc: 'url',
+            filter: '{{row.countryFilter}}&mode=dataOnly',
+            data: { url: '/v2/entities/port' },
+        }, {});
+
+        let superCalled = false;
+        const proto = Object.getPrototypeOf(GDSSelect.prototype);
+        const original = proto.updateItems;
+        proto.updateItems = () => { superCalled = true; };
+
+        (selectComponent as any).downloadedResources = [{ value: 'PORT-1', label: 'Port 1' }];
+        (selectComponent as any).itemsLoadedResolve = () => {};
+        (selectComponent as any)._gdsFilterKey = 'countryid=eq.1';
+        (selectComponent as any).interpolate = () => 'countryid=eq.2';
+
+        (selectComponent as any).updateItems(null, false);
+
+        assert.strictEqual(superCalled, true, 'dynamic filters must be re-evaluated');
+        proto.updateItems = original;
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
+    // Regression: a select that is already visible is never redrawn by Form.io
+    // when its filter dependency changes, so changing the country a second time
+    // left the previous country's ports in place.
+    it('reloads an already-visible select when its filter dependency changes', () => {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'departurePort',
+            dataSrc: 'url',
+            filter: '{{row.departurePortFilter}}&mode=dataOnly',
+            data: { url: '/v2/entities/port' },
+        }, {});
+
+        const component = selectComponent as any;
+        const proto = Object.getPrototypeOf(GDSSelect.prototype);
+        const originalCheck = proto.checkComponentConditions;
+        // The component stays visible across both changes.
+        proto.checkComponentConditions = () => true;
+
+        const updates: unknown[][] = [];
+        component.triggerUpdate = (...args: unknown[]) => updates.push(args);
+        component.downloadedResources = [{ value: 'PORT-1', label: 'Port 1' }];
+        component.itemsLoadedResolve = () => {};
+        component._gdsFilterKey = 'filter=countryid=eq.1&mode=dataOnly';
+
+        let filterKey = 'filter=countryid=eq.1&mode=dataOnly';
+        component.interpolate = () => filterKey;
+
+        try {
+            // Unchanged dependency: no reload.
+            component.checkComponentConditions({}, {}, {});
+            assert.strictEqual(updates.length, 0, 'must not re-fetch when the filter is unchanged');
+
+            // Country changed: the port list must reload even though the
+            // component was already visible and was never redrawn.
+            filterKey = 'filter=countryid=eq.2&mode=dataOnly';
+            component.checkComponentConditions({}, {}, {});
+            assert.deepStrictEqual(updates, [[null, true]], 'must force a re-fetch when the filter changes');
+
+            // The new key is recorded, so a subsequent check does not re-request.
+            component.checkComponentConditions({}, {}, {});
+            assert.strictEqual(updates.length, 1, 'must not queue duplicate fetches');
+        }
+        finally {
+            proto.checkComponentConditions = originalCheck;
+        }
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
+    it('does not reload a lazily-loaded select before its options have loaded', () => {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'departurePort',
+            dataSrc: 'url',
+            lazyLoad: true,
+            filter: '{{row.departurePortFilter}}&mode=dataOnly',
+            data: { url: '/v2/entities/port' },
+        }, {});
+
+        const component = selectComponent as any;
+        const proto = Object.getPrototypeOf(GDSSelect.prototype);
+        const originalCheck = proto.checkComponentConditions;
+        proto.checkComponentConditions = () => true;
+
+        const updates: unknown[][] = [];
+        component.triggerUpdate = (...args: unknown[]) => updates.push(args);
+        component.interpolate = () => 'filter=countryid=eq.2';
+        // Never loaded: no recorded filter key.
+        component._gdsFilterKey = undefined;
+
+        try {
+            component.checkComponentConditions({}, {}, {});
+            assert.strictEqual(updates.length, 0, 'must not fetch before the first load');
+        }
+        finally {
+            proto.checkComponentConditions = originalCheck;
+        }
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
+    it('substring search logic: finds "usd" in "USD - United States Dollar"', () => {
+        // Test the core substring search logic directly
+        const choices = [
+            { label: 'USD - United States Dollar', active: true, rank: 1 },
+            { label: 'AUD - Australian Dollar', active: true, rank: 2 },
+            { label: 'EUR - Euro', active: true, rank: 3 },
+        ];
+
+        function substringSearch(needle: string, allChoices: typeof choices): typeof choices {
+            if (!needle) return [];
+
+            const words = needle.toLowerCase().split(/\s+/).filter(Boolean);
+
+            const matched: typeof choices = [];
+            const prefix: typeof choices = [];
+            const contains: typeof choices = [];
+
+            for (const choice of allChoices) {
+                const label = (choice.label || '').toLowerCase();
+                const allMatch = words.every((w) => label.includes(w));
+                if (!allMatch) continue;
+                if (label.startsWith(needle.toLowerCase())) {
+                    prefix.push(choice);
+                } else {
+                    contains.push(choice);
+                }
+            }
+
+            prefix.sort((a, b) => a.label.localeCompare(b.label));
+            contains.sort((a, b) => a.label.localeCompare(b.label));
+            matched.push(...prefix, ...contains);
+
+            return matched;
+        }
+
+        // Test "usd" search
+        const results = substringSearch('usd', choices);
+        assert.strictEqual(results.length, 1, 'should find 1 match for "usd"');
+        assert.strictEqual(results[0].label, 'USD - United States Dollar');
+
+        // Test "dollar" search
+        const results2 = substringSearch('dollar', choices);
+        assert.strictEqual(results2.length, 2, 'should find 2 matches for "dollar"');
+
+        // Test "united states" search
+        const results3 = substringSearch('united states', choices);
+        assert.strictEqual(results3.length, 1, 'should find 1 match for "united states"');
+        assert.strictEqual(results3[0].label, 'USD - United States Dollar');
+
+        // Test prefix match priority - "AUD" should come before "USD" when searching "AUD"
+        const results4 = substringSearch('AUD', choices);
+        assert.strictEqual(results4.length, 1, 'should find 1 match for "AUD"');
+        assert.strictEqual(results4[0].label, 'AUD - Australian Dollar');
+
+        // Test with HTML-wrapped labels (like the user's example)
+        const htmlChoices = [
+            { label: '<span>USD - United States Dollar</span>', active: true, rank: 1 },
+            { label: '<span>AUD - Australian Dollar</span>', active: true, rank: 2 },
+            { label: '<span>AED - United Arab Emirates Dirham</span>', active: true, rank: 3 },
+        ];
+
+        const htmlResults = substringSearch('usd', htmlChoices);
+        assert.strictEqual(htmlResults.length, 1, 'should find 1 match for "usd" in HTML-wrapped labels');
+        assert.strictEqual(htmlResults[0].label, '<span>USD - United States Dollar</span>');
+
+        const htmlResults2 = substringSearch('AED', htmlChoices);
+        assert.strictEqual(htmlResults2.length, 1, 'should find 1 match for "AED" in HTML-wrapped labels');
+        assert.strictEqual(htmlResults2[0].label, '<span>AED - United Arab Emirates Dirham</span>');
+
+        // Test "dollar" with HTML labels
+        const htmlResults3 = substringSearch('dollar', htmlChoices);
+        assert.strictEqual(htmlResults3.length, 2, 'should find 2 matches for "dollar" in HTML-wrapped labels');
+    });
+
+    it('dispatches Choices-compatible search results for currency codes', () => {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'currency',
+            dataSrc: 'url',
+            data: { url: '/v2/entities/currency' },
+        }, {});
+        const dispatched: any[] = [];
+        const choices: any = {
+            _currentValue: '',
+            _isSearching: false,
+            _store: {
+                choices: [
+                    { id: 1, label: '<span>USD - United States Dollar</span>' },
+                    { id: 2, label: '<span>AUD - Australian Dollar</span>' },
+                ],
+                dispatch: (action: any) => dispatched.push(action),
+            },
+        };
+
+        (selectComponent as any).choices = choices;
+        (selectComponent as any)._patchChoicesSearch();
+        const resultCount = choices._searchChoices('usd');
+
+        assert.strictEqual(resultCount, 1);
+        assert.deepStrictEqual(dispatched[0], {
+            type: 'FILTER_CHOICES',
+            results: [{
+                item: choices._store.choices[0],
+                score: 0,
+                rank: 1,
+            }],
+        });
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
+    it('getOptionTemplate: escapes XSS payloads in item data using _.escape before interpolation', () => {
+        // Security: _.escape replaces <>&"' with HTML entities before the value
+        // is embedded in the template string. No DOMPurify / parseFromString needed.
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'port',
+            dataSrc: 'url',
+            template: '<span>{{ item.name }}</span>',
+            data: { url: '/v2/entities/port' },
+        }, {});
+        // Patch interpolate to pass through so we test escaping independently of the
+        // full formio interpolation engine (which isn't available in the test env)
+        (selectComponent as any).interpolate = (tpl: string, ctx: any) =>
+            tpl.replace(/\{\{\s*item\.name\s*\}\}/g, ctx.item.name);
+        (selectComponent as any).templateData = {};
+
+        const xssPayload = '</span><script>alert(1)</script><span>';
+        const result = (selectComponent as any).getOptionTemplate({ name: xssPayload }, null, 0);
+
+        assert.ok(typeof result === 'string', 'result must be a string');
+        assert.ok(!result.includes('<script>'), `<script> must be escaped, got: ${result}`);
+        assert.ok(!result.includes('</span><script>'), 'injection sequence must not appear verbatim');
+        assert.ok(result.includes('&lt;script&gt;'), 'script tag must appear as HTML entities');
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
+    it('itemTemplate: strips XSS payloads in API data while preserving the label text', () => {
+        // Security regression test: even though we skip the outer sanitize() call,
+        // getOptionTemplate() still sanitizes before returning, so XSS in item data
+        // must never reach the DOM as executable markup.
+        //
+        // We verify this at the logic level: the label extracted from the template
+        // after getOptionTemplate() processing must not contain script tags.
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'port',
+            dataSrc: 'url',
+            template: '<span>{{ item.name }}</span>',
+            data: { url: '/v2/entities/port' },
+        }, {});
+
+        // Simulate what getOptionTemplate does: interpolate then sanitize.
+        // We patch it to return the raw interpolated string WITHOUT sanitizing
+        // so we can confirm itemTemplate handles it correctly via DOMPurify.
+        // In production, getOptionTemplate() does sanitize — so the string
+        // reaching itemTemplate is already clean.
+        const xssName = '</span><script>alert(1)</script><span>';
+        const sanitizedByGetOptionTemplate =
+            '<span></span><span></span>'; // what DOMPurify would produce
+
+        // Patch getOptionTemplate to return the already-sanitized equivalent
+        (selectComponent as any).getOptionTemplate = (_d: any, _v: any, _i: any) =>
+            sanitizedByGetOptionTemplate;
+        (selectComponent as any).t = (s: string) => s;
+        (selectComponent as any).sanitize = (s: string) => s; // already sanitized at this stage
+
+        const result = (selectComponent as any).itemTemplate({ name: xssName }, null, 0);
+        assert.ok(
+            typeof result === 'string' && !result.includes('<script>'),
+            `itemTemplate output must not contain <script>: ${result}`
+        );
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
+    it('valueComparer uses id equality for objects instead of deep comparison', () => {
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'port',
+            dataSrc: 'url',
+            data: { url: '/v2/entities/port' },
+        }, {});
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const { valueComparer } = selectComponent.choicesOptions() as any;
+
+        // Same object reference
+        const a = { id: 1, name: 'Dover' };
+        assert.strictEqual(valueComparer(a, a), true, 'same reference must be equal');
+
+        // Equal by id, different object references / extra fields
+        assert.strictEqual(valueComparer({ id: 42, name: 'Dover' }, { id: 42, name: 'Dover Port' }), true,
+            'objects with same id must be equal regardless of other fields');
+
+        // Different ids
+        assert.strictEqual(valueComparer({ id: 1, name: 'Dover' }, { id: 2, name: 'Folkestone' }), false,
+            'objects with different ids must not be equal');
+
+        // Primitives
+        assert.strictEqual(valueComparer('GBR', 'GBR'), true, 'equal strings must match');
+        assert.strictEqual(valueComparer('GBR', 'FRA'), false, 'different strings must not match');
+        assert.strictEqual(valueComparer(1, 1), true, 'equal numbers must match');
+
+        // Null / undefined edge cases
+        assert.strictEqual(valueComparer(null, null), true, 'null === null by strict equality');
+        assert.strictEqual(valueComparer(undefined, undefined), true, 'undefined === undefined by strict equality');
+        assert.strictEqual(valueComparer({ id: 1 }, null), false, 'object vs null must be false');
+    });
+
+    it('delegates loaded items to Form.io so selected values are reconciled', () => {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({ type: 'select' }, {});
+        const parent = Object.getPrototypeOf(GDSSelect.prototype);
+        const original = parent.setItems;
+        let received: unknown;
+        parent.setItems = (items: unknown) => { received = items; };
+        try {
+            const items = [{ id: 1, name: 'Port 1' }];
+            (selectComponent as any).setItems(items, false);
+            assert.strictEqual(received, items);
+        }
+        finally {
+            parent.setItems = original;
+        }
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
+    it('repatches when Choices creates a replacement instance', () => {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({ type: 'select' }, {});
+        const makeChoices = (): any => ({
+            _currentValue: '',
+            _store: {
+                choices: [],
+                dispatch: () => {},
+            },
+        });
+        const first = makeChoices();
+        const second = makeChoices();
+
+        (selectComponent as any).choices = first;
+        (selectComponent as any)._patchChoicesSearch();
+        (selectComponent as any).choices = second;
+        (selectComponent as any)._patchChoicesSearch();
+
+        assert.strictEqual(typeof first._searchChoices, 'function');
+        assert.strictEqual(typeof second._searchChoices, 'function');
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
+});