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

package/assets/ts/modules/fileupload.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import fileupload from './fileupload.ts';
+
+installTestDom();
+
+describe('File upload module', () => {
+  it('renders an existing uploaded filename', () => {
+    const component = createElement('iam-fileupload', { dataFilename: 'contract.pdf' });
+    const input = createElement('input', { type: 'file' });
+    const wrapper = createElement('div');
+    append(wrapper, createElement('div', { class: 'files' }), createElement('div', { class: 'drop-area' }));
+    append(wrapper, createElement('div', { class: 'invalid-feedback size' }), createElement('div', { class: 'invalid-feedback ext' }));
+    append(component, input);
+
+    fileupload(component, wrapper);
+
+    expect(wrapper.querySelector('.files').innerHTML.includes('contract.pdf'));
+  });
+});

package/assets/ts/modules/filterlist.test.ts

@@ -0,0 +1,22 @@
+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/ts/modules/{helper.test.ts → helpers.test.ts}

@@ -1,5 +1,19 @@
-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() {
@@ -8,6 +22,53 @@ describe("MathUtils Tests", function () {
 
 });
 
+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', () => {
   

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

@@ -0,0 +1,15 @@
+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/ts/modules/milestone-group.test.ts

@@ -0,0 +1,22 @@
+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/ts/modules/milestone.test.ts

@@ -0,0 +1,35 @@
+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/ts/modules/modal.test.ts

@@ -0,0 +1,22 @@
+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/ts/modules/nav.test.ts

@@ -0,0 +1,41 @@
+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/ts/modules/notification.test.ts

@@ -0,0 +1,15 @@
+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/ts/modules/orderablelist.test.ts

@@ -0,0 +1,19 @@
+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/ts/modules/pagination.test.ts

@@ -0,0 +1,25 @@
+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/ts/modules/password.test.ts

@@ -0,0 +1,40 @@
+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/ts/modules/table.test.ts

@@ -0,0 +1,57 @@
+/* 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/ts/modules/tabs.test.ts

@@ -0,0 +1,27 @@
+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'));
+  });
+});