@iamproperty/components 7.1.0--beta7 → 7.2.0

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

@@ -0,0 +1,66 @@
+// @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/tests/chart.spec.ts

@@ -35,18 +35,21 @@ describe('The bar chart component', () => {
 </table>
 </iam-barchart>`;
 
-  test('should create the min attribute as 0', () => {
+  test('should sync HTML changes with the shadow dom', () => {
     let component = document.querySelector('iam-barchart');
-    let { min } = getChartData(component);
+    let domElement = component.querySelector('tr:first-child td:nth-child(2)');
 
-    expect(min).toEqual(0);
+    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 equal the largest single value', () => {
+  test('should create the min attribute as 0', () => {
     let component = document.querySelector('iam-barchart');
-    let { max } = getChartData(component);
+    let { min } = getChartData(component);
 
-    expect(max).toEqual(300);
+    expect(min).toEqual(0);
   });
 
   test('should equal the largest single value', () => {

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

@@ -0,0 +1,30 @@
+// @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/tests/multistep.spec.ts

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