@3t-transform/threeteeui 0.1.6 → 0.1.7

package/dist/collection/components/molecules/tttx-form/lib/validityCheck.spec.js

@@ -0,0 +1,214 @@
+import validityCheck from './validityCheck';
+// badInput
+// customError
+// patternMismatch
+// rangeOverflow
+// rangeUnderflow
+// stepMismatch
+// tooLong
+// tooShort
+// typeMismatch
+// valid
+// valueMissing
+describe('validityCheck', () => {
+  it('should return a valid response when there are no validation issues', async () => {
+    const preventDefault = jest.fn();
+    const event = {
+      target: {
+        value: 'test',
+        validity: {
+          valid: true
+        },
+        dataset: {}
+      },
+      preventDefault
+    };
+    const result = validityCheck(event);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(result).toStrictEqual({
+      "errorMessage": "",
+      "hasError": false,
+      "target": event.target
+    });
+  });
+  it('should return the required property when there is a value missing', async () => {
+    const preventDefault = jest.fn();
+    const event = {
+      target: {
+        dataset: {
+          required: 'This is required'
+        },
+        value: 'test',
+        validity: {
+          valid: false,
+          valueMissing: true
+        }
+      },
+      preventDefault
+    };
+    const result = validityCheck(event);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(result).toStrictEqual({
+      "errorMessage": "This is required",
+      "hasError": true,
+      "target": event.target
+    });
+  });
+  it('should return a default error message property when there is a value missing', async () => {
+    const preventDefault = jest.fn();
+    const event = {
+      target: {
+        dataset: {},
+        value: 'test',
+        validity: {
+          valid: false,
+          valueMissing: true
+        }
+      },
+      preventDefault
+    };
+    const result = validityCheck(event);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(result).toStrictEqual({
+      "errorMessage": 'This field is required',
+      "hasError": true,
+      "target": event.target
+    });
+  });
+  it('should return the pattern property when there is a patternMismatch', async () => {
+    const preventDefault = jest.fn();
+    const event = {
+      target: {
+        dataset: {
+          pattern: 'Incorrect format CUSTOM'
+        },
+        value: 'test',
+        validity: {
+          valid: false,
+          patternMismatch: true
+        }
+      },
+      preventDefault
+    };
+    const result = validityCheck(event);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(result).toStrictEqual({
+      "errorMessage": "Incorrect format CUSTOM",
+      "hasError": true,
+      "target": event.target
+    });
+  });
+  it('should return the a default error message when there is a patternMismatch', async () => {
+    const preventDefault = jest.fn();
+    const event = {
+      target: {
+        dataset: {},
+        value: 'test',
+        validity: {
+          valid: false,
+          patternMismatch: true
+        }
+      },
+      preventDefault
+    };
+    const result = validityCheck(event);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(result).toStrictEqual({
+      "errorMessage": 'Incorrect format',
+      "hasError": true,
+      "target": event.target
+    });
+  });
+  it('should return the badinput error message property when there is a badInput', async () => {
+    const preventDefault = jest.fn();
+    const event = {
+      target: {
+        dataset: {
+          badinput: 'There is a bad input'
+        },
+        value: 'test',
+        validity: {
+          valid: false,
+          badInput: true
+        }
+      },
+      preventDefault
+    };
+    const result = validityCheck(event);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(result).toStrictEqual({
+      "errorMessage": "There is a bad input",
+      "hasError": true,
+      "target": event.target
+    });
+  });
+  it('should return a default error message property when there is a badInput', async () => {
+    const preventDefault = jest.fn();
+    const event = {
+      target: {
+        value: 'test',
+        validity: {
+          valid: false,
+          badInput: true
+        },
+        dataset: {}
+      },
+      preventDefault
+    };
+    const result = validityCheck(event);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(result).toStrictEqual({
+      "errorMessage": 'Wrong input type',
+      "hasError": true,
+      "target": event.target
+    });
+  });
+  it('should return a message for an item out of range (underflow) with custom message', async () => {
+    const preventDefault = jest.fn();
+    const event = {
+      target: {
+        value: '0',
+        validity: {
+          valid: false,
+          rangeOverflow: true
+        },
+        dataset: {
+          range: 'Value is out of range'
+        }
+      },
+      preventDefault
+    };
+    const result = validityCheck(event);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(result).toStrictEqual({
+      "errorMessage": "Value is out of range",
+      "hasError": true,
+      "target": event.target
+    });
+  });
+  it('should return a message for an item out of range (underflow)', async () => {
+    const preventDefault = jest.fn();
+    const event = {
+      target: {
+        value: '0',
+        validity: {
+          valid: false,
+          rangeOverflow: true
+        },
+        dataset: {}
+      },
+      preventDefault
+    };
+    const result = validityCheck(event);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(result).toStrictEqual({
+      "errorMessage": "Invalid value",
+      "hasError": true,
+      "target": event.target
+    });
+  });
+  // it('target.validity.rangeOverflow', async () => {
+  // });  
+  // it('target.validity.rangeUnderflow', async () => {
+  // });    
+});

package/dist/collection/components/molecules/tttx-form/test/tttx-form.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-form', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-form></tttx-form>');
+    const element = await page.find('tttx-form');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/molecules/tttx-form/test/tttx-form.spec.js

@@ -0,0 +1,232 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxForm } from '../tttx-form';
+describe('tttx-form', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxForm],
+      html: '<tttx-form></tttx-form>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-form>
+                <mock:shadow-root>
+                    <form>
+                        <fieldset></fieldset>
+                    </form>
+                </mock:shadow-root>
+            </tttx-form>
+        `);
+  });
+  it('renders a single form item', async () => {
+    const singleFormItemSchema = {
+      properties: {
+        input: {
+          type: 'string',
+          format: 'string',
+          form: {
+            type: 'text',
+            label: 'Input Field',
+            validation: {
+              required: {
+                message: 'Please enter something'
+              }
+            }
+          }
+        }
+      }
+    };
+    const page = await newSpecPage({
+      components: [TttxForm],
+      html: `<tttx-form formschema='${JSON.stringify(singleFormItemSchema)}'></tttx-form>`,
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-form formschema='${JSON.stringify(singleFormItemSchema)}'>
+                <mock:shadow-root>
+                    <form>
+                    <fieldset>
+                        <label class="inputBlock">
+                            Input Field
+                            <input autocomplete="off" data-required="Please enter something" name="input" placeholder="" required="" type="text" />
+                            <div class="errorBubble"></div>
+                        </label>
+                        <input class="button primary-blue" type="submit" value="Save">
+                    </fieldset>
+                    </form>
+                </mock:shadow-root>
+            </tttx-form>
+        `);
+  });
+  it('renders without validation', async () => {
+    const singleFormItemSchema = {
+      properties: {
+        input: {
+          type: 'string',
+          format: 'string',
+          form: {
+            type: 'text',
+            label: 'Input Field'
+          }
+        }
+      }
+    };
+    const page = await newSpecPage({
+      components: [TttxForm],
+      html: `<tttx-form formschema='${JSON.stringify(singleFormItemSchema)}'></tttx-form>`,
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-form formschema='${JSON.stringify(singleFormItemSchema)}'>
+                <mock:shadow-root>
+                    <form>
+                    <fieldset>
+                        <label class="inputBlock">
+                            Input Field
+                            <span class="optional">
+                                (optional)
+                            </span>
+                            <input autocomplete="off" name="input" placeholder="" type="text" />
+                            <div class="errorBubble"></div>
+                        </label>
+                        <input class="button primary-blue" type="submit" value="Save">
+                    </fieldset>
+                    </form>
+                </mock:shadow-root>
+            </tttx-form>
+        `);
+  });
+  it('renders a complex form', async () => {
+    const formSchema = {
+      properties: {
+        title: {
+          type: 'string',
+          format: 'string',
+          form: {
+            type: 'text',
+            placeholder: 'Mr, Mrs, Dr, Hon Rev',
+            label: 'Title',
+          },
+        },
+        forename: {
+          type: 'string',
+          format: 'string',
+          form: {
+            type: 'text',
+            placeholder: 'John',
+            label: 'Forename',
+            validation: {
+              required: {
+                message: 'Please enter your forename',
+              },
+            },
+          },
+        },
+        surname: {
+          type: 'string',
+          format: 'string',
+          form: {
+            type: 'text',
+            placeholder: 'Doe',
+            label: 'Surname',
+            validation: {
+              required: {
+                message: 'Please enter your surname',
+              },
+            },
+          },
+        },
+        postcode: {
+          type: 'string',
+          format: 'string',
+          form: {
+            type: 'text',
+            placeholder: 'AB10',
+            label: 'Start of postcode',
+            validation: {
+              required: {
+                message: 'Please enter the beginning of your postcode',
+              },
+              pattern: {
+                pattern: '^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$',
+                message: 'Please enter the first half of your postcode. EG: ZZ99',
+              },
+              maxlength: 4,
+            },
+          },
+        },
+        age: {
+          type: 'number',
+          format: 'number',
+          form: {
+            type: 'number',
+            placeholder: '',
+            label: 'Age',
+            validation: {
+              required: {
+                message: 'Please enter your age',
+              },
+              badInput: {
+                message: 'Please enter a number',
+              },
+            },
+          },
+        },
+        dob: {
+          type: 'string',
+          format: 'date-time',
+          form: {
+            type: 'date',
+            placeholder: '',
+            label: 'Date of birth',
+            validation: {
+              required: {
+                message: 'Please enter your date of birth',
+              },
+              minmax: {
+                min: '1900-01-01',
+                max: '2100-12-31',
+                message: 'Please enter a date between 1900 and 2100',
+              },
+            },
+          },
+        },
+      },
+    };
+    const page = await newSpecPage({
+      components: [TttxForm],
+      template: () => (h("tttx-form", { formschema: formSchema })),
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-form>
+                <mock:shadow-root>
+                    <form>
+                        <fieldset>
+                            <label class="inputBlock">Title<span class="optional">&nbsp;(optional)</span>
+                                <input autocomplete="off" name="title" placeholder="Mr, Mrs, Dr, Hon Rev" type="text" />
+                                <div class="errorBubble"></div>
+                            </label>
+                            <label class="inputBlock">Forename
+                                <input autocomplete="off" data-required="Please enter your forename" name="forename" placeholder="John" required="" type="text"/>
+                                <div class="errorBubble"></div>
+                            </label>
+                            <label class="inputBlock">Surname
+                                <input autocomplete="off" data-required="Please enter your surname" name="surname" placeholder="Doe" required="" type="text">
+                                <div class="errorBubble"></div>
+                            </label>
+                            <label class="inputBlock">Start of postcode
+                                <input autocomplete="off" data-pattern="Please enter the first half of your postcode. EG: ZZ99" data-required="Please enter the beginning of your postcode" maxlength="4" name="postcode" pattern="^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$" placeholder="AB10" required="" type="text">
+                                <div class="errorBubble"></div>
+                            </label>
+                            <label class="inputBlock">Age
+                                <input autocomplete="off" data-badinput="Please enter a number" data-required="Please enter your age" name="age" placeholder="" required="" type="number">
+                                <div class="errorBubble"></div>
+                            </label>
+                            <label class="inputBlock">Date of birth
+                                <input autocomplete="off" data-range="Please enter a date between 1900 and 2100" data-required="Please enter your date of birth" max="2100-12-31" min="1900-01-01" name="dob" placeholder="" required="" type="date">
+                                <div class="errorBubble"></div>
+                            </label>
+                            <input type="submit" class="button primary-blue" value="Save"></fieldset>
+                    </form>
+                </mock:shadow-root>
+            </tttx-form>
+        `);
+  });
+});

package/dist/collection/components/molecules/tttx-list/test/ttttx-list.spec.e2e.js

@@ -0,0 +1,26 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-list', () => {
+  it('sanitises the html of the element property', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-list></tttx-list>');
+    await page.$eval('tttx-list', (elm) => {
+      elm.data = [{ element: '<span><tttx-icon icon="egg" color="blue"></tttx-icon></span>Test<script>alert(4)</script>' }];
+    });
+    await page.waitForChanges();
+    const element = await page.find('tttx-list');
+    expect(element).toEqualHtml(`
+    <tttx-list class="hydrated">
+        <mock:shadow-root>
+        <ul class="list">
+            <li class="item">
+            <span class="item-content">
+                <span><tttx-icon class="hydrated" icon="egg" color="blue"></tttx-icon></span>
+                Test
+            </span>
+            </li>
+        </ul>
+        </mock:shadow-root>
+    </tttx-list>
+    `);
+  });
+});

package/dist/collection/components/molecules/tttx-list/test/tttx-list.spec.js

@@ -0,0 +1,183 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxList } from '../tttx-list';
+describe('tttx-list', () => {
+  it('renders data using JS objects (with icon, clickable)', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list></tttx-list>',
+    });
+    page.rootInstance.data = [{ icon: 'info', element: '<span><tttx-icon icon="egg" color="blue" /></span> Test', clickable: true }];
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-list>
+        <mock:shadow-root>
+          <ul class="list">
+            <li class="item clickable">
+              <span class="item-content">
+                <span><tttx-icon icon="egg" color="blue"></tttx-icon></span>
+                Test
+              </span>
+              <tttx-icon class="align-right" icon="info"></tttx-icon>
+            </li>
+          </ul>
+        </mock:shadow-root>
+      </tttx-list>
+    `);
+  });
+  it('renders data using JS objects (with icon, clickable:false)', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list></tttx-list>',
+    });
+    page.rootInstance.data = [{ icon: 'info', element: '<span><tttx-icon icon="egg" color="blue" /></span> Test' }];
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+        <tttx-list>
+            <mock:shadow-root>
+            <ul class="list">
+                <li class="item">
+                <span class="item-content">
+                    <span><tttx-icon icon="egg" color="blue"></tttx-icon></span>
+                    Test
+                </span>
+                <tttx-icon class="align-right" icon="info"></tttx-icon>
+                </li>
+            </ul>
+            </mock:shadow-root>
+        </tttx-list>
+        `);
+  });
+  it('renders data using JS objects (without icon, clickable)', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list></tttx-list>',
+    });
+    page.rootInstance.data = [{ element: '<span><tttx-icon icon="egg" color="blue" /></span> Test', clickable: true }];
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+        <tttx-list>
+            <mock:shadow-root>
+            <ul class="list">
+                <li class="item clickable">
+                <span class="item-content">
+                    <span><tttx-icon icon="egg" color="blue"></tttx-icon></span>
+                    Test
+                </span>
+                </li>
+            </ul>
+            </mock:shadow-root>
+        </tttx-list>
+        `);
+  });
+  it('renders data using JS objects (without icon, clickable:false)', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list></tttx-list>',
+    });
+    page.rootInstance.data = [{ element: '<span><tttx-icon icon="egg" color="blue" /></span> Test' }];
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+        <tttx-list>
+            <mock:shadow-root>
+            <ul class="list">
+                <li class="item">
+                <span class="item-content">
+                    <span><tttx-icon icon="egg" color="blue"></tttx-icon></span>
+                    Test
+                </span>
+                </li>
+            </ul>
+            </mock:shadow-root>
+        </tttx-list>
+        `);
+  });
+  it('renders data using JSON', async () => {
+    const data = '[{ "icon": "info", "element": "<span><tttx-icon icon=\\"egg\\" color=\\"blue\\" /></span> Test", "clickable": true }]';
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: `<tttx-list data='${data}'></tttx-list>`,
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+        <tttx-list data="[{ &quot;icon&quot;: &quot;info&quot;, &quot;element&quot;: &quot;<span><tttx-icon icon=\\&quot;egg\\&quot; color=\\&quot;blue\\&quot; /></span> Test&quot;, &quot;clickable&quot;: true }]">
+            <mock:shadow-root>
+            <ul class="list">
+                <li class="item clickable">
+                <span class="item-content">
+                    <span><tttx-icon icon="egg" color="blue"></tttx-icon></span>
+                    Test
+                </span>
+                <tttx-icon class="align-right" icon="info"></tttx-icon>
+                </li>
+            </ul>
+            </mock:shadow-root>
+        </tttx-list>
+        `);
+  });
+  it('renders nothing when there is no data', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list></tttx-list>',
+    });
+    page.rootInstance.data = [];
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+        <tttx-list>
+            <mock:shadow-root>
+            <ul class="list">
+            </ul>
+            </mock:shadow-root>
+        </tttx-list>
+        `);
+  });
+  it('emits listRowClick event when a clickable row is clicked', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list name="test-list"></tttx-list>',
+    });
+    const eventSpy = jest.fn();
+    page.doc.addEventListener('listRowClick', eventSpy);
+    page.rootInstance.data = [
+      { element: '<div>Item 1</div>', clickable: true, rowData: 'Item 1' },
+      { element: '<div>Item 2</div>', clickable: false, rowData: 'Item 2' },
+    ];
+    await page.waitForChanges();
+    const clickableItem = page.root.shadowRoot.querySelector('.clickable');
+    clickableItem.dispatchEvent(new Event('click'));
+    expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+      detail: { name: 'test-list', data: 'Item 1' },
+    }));
+  });
+  it('does not emit listRowClick event when a non-clickable row is clicked', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list></tttx-list>',
+    });
+    const eventSpy = jest.fn();
+    page.doc.addEventListener('listRowClick', eventSpy);
+    page.rootInstance.data = [
+      { element: '<div>Item 1</div>', clickable: true, rowData: 'Item 1' },
+      { element: '<div>Item 2</div>', clickable: false, rowData: 'Item 2' },
+    ];
+    await page.waitForChanges();
+    const nonClickableItem = page.root.shadowRoot.querySelector(':not(.clickable)');
+    await nonClickableItem.dispatchEvent(new Event('click'));
+    expect(eventSpy).not.toHaveBeenCalled();
+  });
+  it('does not emit listRowClick event when a row without rowData is clicked', async () => {
+    const page = await newSpecPage({
+      components: [TttxList],
+      html: '<tttx-list></tttx-list>',
+    });
+    const eventSpy = jest.fn();
+    page.doc.addEventListener('listRowClick', eventSpy);
+    page.rootInstance.data = [
+      { element: '<div>Item 1</div>', clickable: true },
+      { element: '<div>Item 2</div>', clickable: false },
+    ];
+    await page.waitForChanges();
+    const nonClickableItem = page.root.shadowRoot.querySelector('.clickable');
+    await nonClickableItem.dispatchEvent(new Event('click'));
+    expect(eventSpy).not.toHaveBeenCalled();
+  });
+});

package/dist/collection/components/molecules/tttx-standalone-input/test/tttx-standalone-input.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-standalone-input', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-standalone-input></tttx-standalone-input>');
+    const element = await page.find('tttx-standalone-input');
+    expect(element).toHaveClass('hydrated');
+  });
+});