@iamproperty/components 7.6.4--beta8 → 7.7.0

package/assets/ts/ui-tests/card.spec.ts

@@ -1,19 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import { getChartData } from '../modules/chart.module';
-import puppeteer from 'puppeteer';
-import 'expect-puppeteer';
-
-import iamCard from '../components/card/card.component';
-
-describe('The card component', () => {
-  if (!window.customElements.get(`iam-card`)) window.customElements.define(`iam-card`, iamCard);
-
-  document.body.innerHTML = `
-<iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>`;
-
-  test('should have the class of card added to it', () => {
-    let component = document.querySelector('iam-card');
-    expect(component.classList).toContain('card');
-  });
-});

package/assets/ts/ui-tests/carousel.spec.ts

@@ -1,66 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import { getChartData } from '../modules/chart.module';
-import puppeteer from 'puppeteer';
-import 'expect-puppeteer';
-
-import iamCarousel from '../components/carousel/carousel.component';
-import iamCard from '../components/card/card.component';
-
-import { getProgressMax } from '../modules/carousel';
-
-describe('The carousel component', () => {
-  if (!window.customElements.get(`iam-carousel`)) window.customElements.define(`iam-carousel`, iamCarousel);
-  if (!window.customElements.get(`iam-card`)) window.customElements.define(`iam-card`, iamCard);
-
-  document.body.innerHTML = `
-<iam-carousel>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-</iam-carousel>`;
-
-  test('should have a pip for each item', () => {
-    let component = document.querySelector('iam-carousel');
-    let value = component?.shadowRoot?.querySelectorAll('.carousel__controls button').length;
-
-    expect(value).toEqual(12);
-  });
-
-  test('should set the max value of the range input to the number of items divided by the visible items', () => {
-    expect(getProgressMax(9, 3)).toEqual(7);
-  });
-});

package/assets/ts/ui-tests/chart.spec.ts

@@ -1,71 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import { getChartData } from '../modules/chart.module';
-import puppeteer from 'puppeteer';
-import 'expect-puppeteer';
-
-import iamBarChart from '../components/barchart/barchart.component';
-
-describe('The bar chart component', () => {
-  if (!window.customElements.get(`iam-barchart`)) window.customElements.define(`iam-barchart`, iamBarChart);
-
-  document.body.innerHTML = `
-<iam-barchart>
-<table>
-  <thead>
-    <tr>
-      <th>Items</th>
-      <th>Value</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Item 1</td>
-      <td>300</td>
-    </tr>
-    <tr>
-      <td>Item 2</td>
-      <td>150</td>
-    </tr>
-    <tr>
-      <td>Item 3</td>
-      <td>100</td>
-    </tr>
-  </tbody>
-</table>
-</iam-barchart>`;
-
-  test('should sync HTML changes with the shadow dom', () => {
-    let component = document.querySelector('iam-barchart');
-    let domElement = component.querySelector('tr:first-child td:nth-child(2)');
-
-    let shadowElement = component.shadowRoot.querySelector('tr:first-child td:nth-child(2)');
-    let value = shadowElement?.innerHTML;
-
-    expect(value).toEqual('<span data-group="Item 1" part="popover">300</span>');
-  });
-
-  test('should create the min attribute as 0', () => {
-    let component = document.querySelector('iam-barchart');
-    let { min } = getChartData(component);
-
-    expect(min).toEqual(0);
-  });
-
-  test('should equal the largest single value', () => {
-    let component = document.querySelector('iam-barchart');
-    let { max } = getChartData(component);
-
-    expect(max).toEqual(300);
-  });
-
-  test('should have the class of .chart--fit-content added as there is less than 10 bars', () => {
-    let component = document.querySelector('iam-barchart');
-    expect(component.classList).toContain('chart--fit-content');
-  });
-
-  test('should have the class of .chart--no-scale added as there is less than 5 bars', () => {
-    let component = document.querySelector('iam-barchart');
-    expect(component.classList).toContain('chart--no-scale');
-  });
-});

package/assets/ts/ui-tests/data-layer.spec.js

@@ -1,68 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import createDataLayer from '../modules/data-layer';
-
-describe('createDataLayer', () => {
-  // Mocking the window object for testing
-  let mockDataLayer = [];
-  beforeEach(() => {
-    window.dataLayer = mockDataLayer;
-    document.title = 'Mock Page Title';
-  });
-
-  it('should push a "Pageview" event to dataLayer on function call', () => {
-    createDataLayer();
-    expect(window.dataLayer).toEqual([
-      {
-        event: 'Pageview',
-        pageTitle: 'Mock Page Title',
-      },
-    ]);
-  });
-
-  it('should push a "closeDetails" event when the document click target has "open" attribute and is summary element', () => {
-    // Create a mock DOM structure with a summary element having the 'open' attribute
-    document.body.innerHTML = `
-      <details>
-        <summary open>Summary Text</summary>
-      </details>
-    `;
-    const summaryElement = document.querySelector('summary');
-
-    // Simulate the click event on the summary element
-    const clickEvent = new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-    });
-    summaryElement.dispatchEvent(clickEvent);
-
-    expect(window.dataLayer).toEqual([
-      {
-        event: 'Pageview',
-        pageTitle: 'Mock Page Title',
-      },
-      {
-        event: 'openDetails',
-        detailsTitle: 'Summary Text',
-      },
-    ]);
-
-    summaryElement.dispatchEvent(clickEvent);
-    expect(window.dataLayer).toEqual([
-      {
-        event: 'Pageview',
-        pageTitle: 'Mock Page Title',
-      },
-      {
-        event: 'openDetails',
-        detailsTitle: 'Summary Text',
-      },
-      {
-        event: 'closeDetails',
-        detailsTitle: 'Summary Text',
-      },
-    ]);
-  });
-
-  // More test cases for other scenarios can be added here...
-});

package/assets/ts/ui-tests/fileupload.spec.ts

@@ -1,30 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import { getChartData } from '../modules/chart.module';
-import puppeteer from 'puppeteer';
-import 'expect-puppeteer';
-
-import iamFileupload from '../components/fileupload/fileupload.component';
-
-describe('The Fileupload component', () => {
-  if (!window.customElements.get(`iam-fileupload`)) window.customElements.define(`iam-fileupload`, iamFileupload);
-
-  document.body.innerHTML = `
-<iam-fileupload>
-  <input type="file" name="files[]" accept=".pdf, .csv, .jpg, .png" multiple="multiple" />
-</iam-fileupload>`;
-
-  test('should have a title in its UI', () => {
-    let component = document.querySelector('iam-fileupload');
-    let title = component?.shadowRoot.querySelector('.file-upload__title');
-
-    expect(title?.innerHTML).toContain('Upload file');
-  });
-
-  test('should have a button in its UI', () => {
-    let component = document.querySelector('iam-fileupload');
-    let button = component?.shadowRoot.querySelector('button');
-
-    expect(button?.innerHTML).toContain('Upload file');
-  });
-});

package/assets/ts/ui-tests/filterlist.spec.ts

@@ -1,26 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import { filterTheList } from '../modules/filterlist';
-
-const listHTML = `
-<li class="lead text-primary pb-1">Olivia Anderson</li>
-<li class="lead text-primary pb-1">Ethan Ramirez</li>
-<li class="lead text-primary pb-1">Sophia Patel</li>
-<li class="lead text-primary pb-1">Noah Jenkins</li>
-<li class="lead text-primary pb-1">Ava Thompson</li>
-<li class="lead text-primary pb-1">Lucas Myers</li>
-<li class="lead text-primary pb-1">Mia Carter</li>
-<li class="lead text-primary pb-1">Benjamin Lee</li>
-`;
-
-describe('addDataAttributes', () => {
-  let list = document.createElement('div');
-  list.innerHTML = listHTML;
-
-  filterTheList(list, 'Lucas');
-
-  test('should add a class of d-none to each item except the one containing Lucas Myers', () => {
-    expect(list.querySelectorAll('li:not(.d-none)').length).toEqual(1);
-    expect(list.querySelector('li:not(.d-none)').textContent).toEqual('Lucas Myers');
-  });
-});

package/assets/ts/ui-tests/multistep.spec.ts

@@ -1,78 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import { getChartData } from '../modules/chart.module';
-import puppeteer from 'puppeteer';
-import 'expect-puppeteer';
-
-import iamMultiStep from '../components/multi-step/multi-step.component';
-
-describe('The Multi-step component', () => {
-  if (!window.customElements.get(`iam-multi-step`)) window.customElements.define(`iam-multi-step`, iamMultiStep);
-
-  document.body.innerHTML = `
-<iam-multi-step>
-  <form>
-    <span class="h3">Multi-step modal title</span>
-
-    <fieldset data-title="Personal details">
-      <div>
-        <label for="input1">Name 1</label>
-        <input type="text" id="input1" name="input1" placeholder="Optional placeholder text" required="" />
-        <span class="invalid-feedback">This field is required</span>
-      </div>
-    </fieldset>
-    <fieldset data-title="Property details">
-      <div>
-        <label for="input2">Name 2</label>
-        <input type="text" id="input2" name="input2" placeholder="Optional placeholder text" required="" />
-        <span class="invalid-feedback">This field is required</span>
-      </div>
-    </fieldset>
-    <fieldset data-title="Location">
-      <div>
-        <label for="input3">Name 3</label>
-        <input
-          type="text"
-          id="input3"
-          name="input3"
-          placeholder="Optional placeholder text"
-          required=""
-          class="is-invalid"
-        />
-        <span class="invalid-feedback">This field is required</span>
-      </div>
-    </fieldset>
-    <fieldset data-title="Submit property">
-      <div>
-        <label for="input4">Name 4</label>
-        <input type="text" id="input4" name="input4" placeholder="Optional placeholder text" required="" />
-        <span class="invalid-feedback">This field is required</span>
-      </div>
-    </fieldset>
-    <button class="btn btn-primary colour-success" type="submit">Register</button>
-  </form>
-
-</iam-multi-step>`;
-
-  test('should add the active class to the first fieldset element', () => {
-    let component = document.querySelector('iam-multi-step');
-    let fieldset = component.querySelector('fieldset');
-
-    expect(fieldset.classList).toContain('active');
-  });
-
-  test('should have a next button added to each fieldset element', () => {
-    let component = document.querySelector('iam-multi-step');
-    let fieldset = component.querySelector('fieldset');
-    let button = fieldset.querySelector('.btn--wrapper button[data-next]');
-
-    expect(button?.innerHTML).toContain('Next');
-  });
-
-  test('should have a steps list created using the data-title attributes for content', () => {
-    let component = document.querySelector('iam-multi-step');
-    let button = component?.shadowRoot.querySelector('.steps button');
-
-    expect(button?.innerHTML).toContain('Personal details');
-  });
-});

package/assets/ts/ui-tests/slider.spec.ts

@@ -1,27 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import * as tableModule from '../modules/table';
-import puppeteer from 'puppeteer';
-import 'expect-puppeteer';
-
-import iamSlider from '../components/slider/slider.component';
-
-describe('The slider component', () => {
-  if (!window.customElements.get(`iam-slider`)) window.customElements.define(`iam-slider`, iamSlider);
-
-  test('should always show the minimum and maximum values that it can be set', () => {
-    document.body.innerHTML = `<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>`;
-    let component = document.querySelector('iam-slider');
-
-    expect(component.shadowRoot.innerHTML).toContain('<div class="col min pe-2">0</div>');
-    expect(component.shadowRoot.innerHTML).toContain('<div class="col max ps-2">100</div>');
-  });
-
-  test('should always have a secondary way of inputing the value i.e. a number input field', () => {
-    document.body.innerHTML = `<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>`;
-    let component = document.querySelector('iam-slider');
-
-    expect(component.querySelectorAll('input[type="number"]').length).toEqual(1);
-    expect(component.shadowRoot.querySelectorAll('input[type="range"]').length).toEqual(1);
-  });
-});

package/assets/ts/ui-tests/table.spec.ts

@@ -1,91 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import * as tableModule from '../modules/table';
-import puppeteer from 'puppeteer';
-import 'expect-puppeteer';
-
-const basicTable = `<thead>
-  <tr>
-    <th>Heading 1</th>
-    <th>Heading 2</th>
-    <th>Heading 3</th>
-    <th>Heading 4</th>
-    <th>Heading 5</th>
-    <th>Heading 6</th>
-  </tr>
-</thead>
-<tbody>
-  <tr>
-    <td>Cell 1</td>
-    <td>Low</td>
-    <td>Cell 3</td>
-    <td>Cell 4</td>
-    <td>Cell 5</td>
-    <td>Cell 6</td>
-  </tr>
-  <tr>
-    <td>Cell 1</td>
-    <td>Low</td>
-    <td><a href="/link">View information</a></td>
-    <td>Cell 4</td>
-    <td>Cell 5</td>
-    <td>Cell 6</td>
-  </tr>
-  <tr>
-    <td>Different Cell 1</td>
-    <td>Medium</td>
-    <td><a href="/link">View information</a></td>
-    <td>Cell 4</td>
-    <td>Cell 5</td>
-    <td>Cell 6</td>
-  </tr>
-  <tr>
-    <td>Different Cell 1</td>
-    <td>High</td>
-    <td><a href="/link">View information</a></td>
-    <td>Cell 4</td>
-    <td>Cell 5</td>
-    <td>Cell 6</td>
-  </tr>
-</tbody>`;
-
-describe('addDataAttributes', () => {
-  const table = document.createElement('table');
-  table.innerHTML = basicTable;
-
-  tableModule.addDataAttributes(table);
-
-  test('should add data-label attribute to the table cells', () => {
-    expect(table.querySelector('tbody td').getAttribute('data-label')).toEqual('Heading 1');
-    expect(table.querySelector('tbody td:nth-child(2)').getAttribute('data-label')).toEqual('Heading 2');
-  });
-
-  test('should add data-content attribute to the table cells if the content matches a pre-defined list', () => {
-    expect(table.querySelector('tbody tr:nth-child(2) td:nth-child(2)').getAttribute('data-content')).toEqual('low');
-    expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').getAttribute('data-content')).toEqual('medium');
-  });
-});
-
-describe('sortTable', () => {
-  const table = document.createElement('table');
-  table.innerHTML = basicTable;
-  const form = document.createElement('form');
-  form.innerHTML += `<div><select type="select" name="sort" id="sort" class="form-select" data-sort=""><option value="-1">Sort by</option><option value="high" data-sort="Heading 2" data-order="High,Medium,Low" selected="selected">high to low</option></select></div>`;
-  const savedTableBody = table.querySelector('tbody');
-
-  tableModule.addDataAttributes(table);
-  tableModule.sortTable(table, form, savedTableBody);
-
-  test('should sort the table from high to low', () => {
-    expect(table.querySelector('tbody tr:nth-child(1) td:nth-child(2)').textContent).toEqual('High');
-    expect(table.querySelector('tbody tr:nth-child(2) td:nth-child(2)').textContent).toEqual('Medium');
-    expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').textContent).toEqual('Low');
-  });
-});
-
-describe('formatCell', () => {
-  test('should format the text correctly', () => {
-    expect(tableModule.formatCell('date', '2023-05-15 12:10:45.000000')).toEqual('15 May 23');
-    expect(tableModule.formatCell('capitalise', 'low')).toEqual('Low');
-  });
-});