@iamproperty/components 7.8.2--beta1 → 7.8.2--beta3

package/assets/js/modules/filterlist.test.js

@@ -0,0 +1,18 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import { filterTheList } from './filterlist.ts';
+const { window } = installTestDom();
+describe('Filter list module', () => {
+    it('filters list items and records the search term', () => {
+        window.dataLayer = [];
+        const list = createElement('ul');
+        const one = createElement('li', {}, 'Alpha');
+        const two = createElement('li', {}, 'Beta');
+        append(list, one, two);
+        filterTheList(list, 'alp');
+        expect(!one.classList.contains('d-none'));
+        expect(two.classList.contains('d-none'));
+        expect(window.dataLayer[0].event === 'Filtered list');
+    });
+});

package/assets/js/modules/{helper.test.js → helpers.test.js}

@@ -1,10 +1,50 @@
-import { describe, it, expect } from './test.ts';
-import { isValidPostcode } from './helpers.ts';
+import { describe, it, expect } from './test.js';
+import { getSwipeDirection, isNumeric, isTraversable, isValidPostcode, numberOfDays, resolvePath, safeID, snake, ucfirst, ucwords, unsnake, zeroPad, } from './helpers.js';
+import { installTestDom } from './test-dom.js';
 describe("MathUtils Tests", function () {
     it('should pass', function () {
         expect(1 === 1);
     });
 });
+describe('The general helper functions', () => {
+    installTestDom();
+    it('should identify numeric strings only', () => {
+        expect(isNumeric('12.5'));
+        expect(!isNumeric(''));
+        expect(!isNumeric('abc'));
+        expect(!isNumeric(12));
+    });
+    it('should format simple string values', () => {
+        expect(zeroPad(7, 3) === '007');
+        expect(ucfirst('hello') === 'Hello');
+        expect(ucwords('hello world') === 'Hello World');
+        expect(unsnake('hello_world') === 'hello world');
+        expect(snake('hello world') === 'hello_world');
+        expect(safeID('Hello world!') === 'hello_world');
+    });
+    it('should count inclusive date ranges', () => {
+        expect(numberOfDays('01/01/2026', '03/01/2026') === 3);
+    });
+    it('should resolve nested object paths', () => {
+        const data = { user: { name: 'Ada', roles: ['admin'] } };
+        expect(resolvePath(data, 'user.name', '') === 'Ada');
+        expect(resolvePath(data, 'user.roles[0]', '') === 'admin');
+        expect(resolvePath(data, 'account.name', 'fallback') === 'fallback');
+    });
+    it('should identify traversable values', () => {
+        expect(isTraversable([]));
+        expect(isTraversable({}));
+        expect(!isTraversable(null));
+        expect(!isTraversable('value'));
+    });
+    it('should detect swipe direction', () => {
+        expect(getSwipeDirection(100, 100, 20, 100) === 'left');
+        expect(getSwipeDirection(100, 100, 180, 100) === 'right');
+        expect(getSwipeDirection(100, 100, 100, 20) === 'top');
+        expect(getSwipeDirection(100, 100, 100, 180) === 'bottom');
+        expect(getSwipeDirection(100, 100, 101, 101) === 'tap');
+    });
+});
 describe('The postcode helper function', () => {
     // #region valid pattern variations
     it('should return true when testing the postcode "ne33hd"', () => {

package/assets/js/modules/integration-tests.test.js

@@ -0,0 +1,12 @@
+import { describe, expect, it } from './test.ts';
+import { installTestDom } from './test-dom.ts';
+import { silenceConsole } from './test-utils.ts';
+import integrationTests from './integration-tests.ts';
+const { window } = installTestDom();
+describe('Integration tests module', () => {
+    it('runs integration checks against an empty document', () => {
+        silenceConsole(() => integrationTests());
+        expect(window.integrationTestsIntro.includes('component or element'));
+        expect(Array.isArray(window.integrationTests));
+    });
+});

package/assets/js/modules/milestone-group.test.js

@@ -0,0 +1,18 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import milestoneGroup from './milestone-group.ts';
+installTestDom();
+describe('Milestone group module', () => {
+    it('toggles future milestone visibility', () => {
+        const group = createElement('iam-milestone-group', { dataShowAllToggle: 'true' });
+        let opened = false;
+        group.addEventListener('show-future-items', () => {
+            opened = true;
+        });
+        milestoneGroup(group);
+        group.children[0].click();
+        expect(group.classList.contains('show-all'));
+        expect(group.children[0].innerHTML === 'Hide next steps');
+        expect(opened);
+    });
+});

package/assets/js/modules/milestone.test.js

@@ -0,0 +1,31 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import milestone from './milestone.ts';
+installTestDom();
+describe('Milestone module', () => {
+    it('adds milestone status and task details', () => {
+        const milestoneElement = createElement('iam-milestone', {
+            dataStatus: 'Current',
+            dataItems: JSON.stringify([
+                {
+                    name: 'Checks',
+                    description: 'Run checks',
+                    date_completed: '2026-01-01',
+                    actions: [
+                        { action: 'One', date_completed: '2026-01-01' },
+                        { action: 'Two' },
+                    ],
+                },
+            ]),
+        });
+        milestoneElement.shadowRoot = createElement('shadow-root');
+        const wrap = createElement('div', { class: 'milestone-wrap' });
+        const tasks = createElement('div', { class: 'task-wrap' });
+        append(milestoneElement.shadowRoot, wrap, tasks);
+        milestone(milestoneElement);
+        expect(milestoneElement.classList.contains('current'));
+        expect(wrap.children[0].innerHTML === 'Current Step');
+        expect(tasks.children[0].querySelector('summary').innerHTML.includes('(1/2)'));
+    });
+});

package/assets/js/modules/modal.test.js

@@ -0,0 +1,18 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import { closeModal, openModal } from './modal.ts';
+const { window } = installTestDom();
+describe('Modal module', () => {
+    it('opens and closes modal dialogs with data layer events', () => {
+        window.dataLayer = [];
+        const dialog = createElement('dialog');
+        const modal = createElement('iam-modal', { id: 'confirm' });
+        append(dialog, modal);
+        openModal(modal);
+        closeModal(modal);
+        expect(dialog.open === false);
+        expect(window.dataLayer[0].event === 'openModal');
+        expect(window.dataLayer[1].event === 'closeModal');
+    });
+});

package/assets/js/modules/nav.test.js

@@ -0,0 +1,37 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import { populateLinks, setEnabledLinks } from './nav.ts';
+installTestDom();
+describe('Navigation module', () => {
+    it('builds navigation links and enables linked destinations', () => {
+        const links = [
+            {
+                title: 'Sales',
+                productKey: 'sales',
+                featureKey: 'dashboard',
+                destinations: {
+                    unlinked: '/sales',
+                    linkedEnabled: '/linked',
+                    linkedDisabled: '/disabled',
+                },
+            },
+        ];
+        const component = createElement('nav');
+        component.innerHTML = populateLinks(links);
+        const link = createElement('a', {
+            dataProduct: 'sales',
+            dataFeature: 'dashboard',
+            dataEnabled: '/linked',
+            href: '/sales',
+            target: '_blank',
+        });
+        append(component, link);
+        setEnabledLinks(component, {
+            attributes: { products: { sales: { features: { dashboard: true } } } },
+        });
+        expect(populateLinks(links).includes('data-product="sales"'));
+        expect(link.getAttribute('href') === '/linked');
+        expect(!link.hasAttribute('target'));
+    });
+});

package/assets/js/modules/notification.test.js

@@ -0,0 +1,11 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { closeNotification } from './notification.ts';
+installTestDom();
+describe('Notification module', () => {
+    it('hides notifications', () => {
+        const notification = createElement('div');
+        closeNotification(notification);
+        expect(notification.classList.contains('d-none'));
+    });
+});

package/assets/js/modules/orderablelist.test.js

@@ -0,0 +1,15 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import orderlist from './orderablelist.ts';
+installTestDom();
+describe('Orderable list module', () => {
+    it('sets sortable list semantics', () => {
+        const list = createElement('ol');
+        append(list, createElement('li', {}, 'First'), createElement('li', {}, 'Second'));
+        orderlist(list);
+        expect(list.getAttribute('role') === 'list');
+        expect(list.children[0].getAttribute('draggable') === 'true');
+        expect(list.children[1].getAttribute('data-order') === '2');
+    });
+});

package/assets/js/modules/pagination.test.js

@@ -0,0 +1,21 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import createPaginationButtons from './pagination.ts';
+installTestDom();
+describe('Pagination module', () => {
+    it('renders pagination controls from controller attributes', () => {
+        const controller = createElement('iam-table', {
+            dataPages: '3',
+            dataPage: '2',
+            dataTotal: '30',
+            dataShow: '10',
+            dataIncrement: '10',
+        });
+        const pagination = createElement('div');
+        const result = createPaginationButtons(controller, pagination);
+        expect(result === true);
+        expect(pagination.innerHTML.includes('<option value="2" selected>2</option>'));
+        expect(pagination.innerHTML.includes('data-page="1"'));
+        expect(pagination.innerHTML.includes('data-page="3"'));
+    });
+});

package/assets/js/modules/password.test.js

@@ -0,0 +1,33 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import { changeType, checkPWDStrength } from './password.ts';
+const { document } = installTestDom();
+describe('Password module', () => {
+    it('toggles password input visibility', () => {
+        const wrapper = createElement('div');
+        const input = createElement('input', { type: 'password' });
+        input.type = 'password';
+        const toggle = createElement('span', { dataAltClass: 'is-visible' });
+        const button = createElement('button', { class: 'is-hidden' });
+        append(toggle, button);
+        append(wrapper, input, toggle);
+        changeType(toggle);
+        toggle.dispatchEvent(new Event('click'));
+        expect(input.getAttribute('type') === 'text');
+        expect(button.getAttribute('class') === 'is-visible');
+    });
+    it('writes password strength feedback without the breach check when already checked', () => {
+        const input = createElement('input', {
+            dataStrengthChecker: 'strength',
+            minlength: '8',
+            value: 'Aa1!aaaa',
+        });
+        const feedback = createElement('div', { id: 'strength', class: 'invalid-feedback' });
+        append(document.body, input, feedback);
+        checkPWDStrength(input, 'success');
+        expect(feedback.getAttribute('data-strength') === '5');
+        expect(feedback.innerHTML.includes('Very strong'));
+        expect(!feedback.classList.contains('invalid-feedback'));
+    });
+});

package/assets/js/modules/table.test.js

@@ -0,0 +1,42 @@
+/* eslint-disable */
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import { addDataAttributes, formatCell, sortTableByValues } from './table.ts';
+installTestDom();
+const makeTable = () => {
+    const table = createElement('table');
+    const thead = createElement('thead');
+    const headRow = createElement('tr');
+    const tbody = createElement('tbody');
+    append(thead, append(headRow, createElement('th', {}, 'Name'), createElement('th', {}, 'Score')));
+    append(tbody, append(createElement('tr'), createElement('td', { dataLabel: 'Name' }, 'Bravo'), createElement('td', { dataLabel: 'Score' }, '2')), append(createElement('tr'), createElement('td', { dataLabel: 'Name' }, 'Alpha'), createElement('td', { dataLabel: 'Score' }, '10')));
+    append(table, thead, tbody);
+    return { table, tbody };
+};
+describe('Table module', () => {
+    it('formats and sorts table data', () => {
+        const { table, tbody } = makeTable();
+        sortTableByValues(table, 'Score', 'asc');
+        expect(formatCell('capitalise', 'alpha') === 'Alpha');
+        expect(tbody.innerHTML.indexOf('2') < tbody.innerHTML.indexOf('10'));
+    });
+    it('adds data labels and content markers to table cells', () => {
+        const table = createElement('table');
+        const thead = createElement('thead');
+        const headRow = createElement('tr');
+        const statusHeading = createElement('th', {}, 'Status');
+        const dateHeading = createElement('th', { dataFormat: 'capitalise' }, 'Name');
+        const tbody = createElement('tbody');
+        const row = createElement('tr');
+        append(headRow, statusHeading, dateHeading);
+        append(thead, headRow);
+        append(row, createElement('td', {}, 'Complete'), createElement('td', {}, 'alpha'));
+        append(tbody, row);
+        append(table, thead, tbody);
+        addDataAttributes(table);
+        expect(row.children[0].getAttribute('data-label') === 'Status');
+        expect(row.children[0].getAttribute('data-content') === 'complete');
+        expect(row.children[1].innerHTML === 'Alpha');
+    });
+});

package/assets/js/modules/tabs.test.js

@@ -0,0 +1,23 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import { openFirstTab, toggleTab } from './tabs.ts';
+installTestDom();
+describe('Tabs module', () => {
+    it('toggles tabs and opens the first tab by default', () => {
+        const tabs = createElement('iam-tabs');
+        const first = createElement('details');
+        const second = createElement('details');
+        const buttonOne = createElement('button', { dataIndex: '0' });
+        const buttonTwo = createElement('button', { dataIndex: '1' });
+        tabs.shadowRoot = createElement('shadow-root');
+        const links = createElement('div', { class: 'tabs__links' });
+        append(links, buttonOne, buttonTwo);
+        append(tabs.shadowRoot, links);
+        append(tabs, first, second);
+        toggleTab([first, second], buttonTwo);
+        openFirstTab(tabs);
+        expect(!first.hasAttribute('open'));
+        expect(second.hasAttribute('open'));
+    });
+});