@3t-transform/threeteeui 0.1.7 → 0.1.8

package/dist/collection/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.js

@@ -1,216 +0,0 @@
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxKeyvalueBlock } from '../tttx-keyvalue-block';
-describe('tttx-keyvalue-block', () => {
-  it('renders multiple key value pairs', async () => {
-    const keyValuePair = {
-      'Name': 'John Doe',
-      'Date of birth': '14 Jan 1981',
-      'Start of postcode': 'AB10'
-    };
-    const page = await newSpecPage({
-      components: [TttxKeyvalueBlock],
-      html: `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValuePair)}' />`
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-            <tttx-keyvalue-block keyvalues='{"Name":"John Doe","Date of birth":"14 Jan 1981","Start of postcode":"AB10"}'>
-                <mock:shadow-root>
-                    <dl>
-                        <dt>
-                            Name
-                        </dt>
-                        <dd>
-                            John Doe
-                        </dd>
-                        <dt>
-                            Date of birth
-                        </dt>
-                        <dd>
-                            14 Jan 1981
-                        </dd>
-                        <dt>
-                            Start of postcode
-                        </dt>
-                        <dd>
-                            AB10
-                        </dd>
-                    </dl>
-                </mock:shadow-root>
-            </tttx-keyvalue-block>
-        `);
-  });
-  it('renders multiple key value pairs from a stencil template', async () => {
-    const keyValuePair = {
-      'Name': 'John Doe',
-      'Date of birth': '14 Jan 1981',
-      'Start of postcode': 'AB10'
-    };
-    const page = await newSpecPage({
-      components: [TttxKeyvalueBlock],
-      template: () => (h("tttx-keyvalue-block", { keyvalues: keyValuePair }))
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-            <tttx-keyvalue-block>
-                <mock:shadow-root>
-                    <dl>
-                        <dt>
-                            Name
-                        </dt>
-                        <dd>
-                            John Doe
-                        </dd>
-                        <dt>
-                            Date of birth
-                        </dt>
-                        <dd>
-                            14 Jan 1981
-                        </dd>
-                        <dt>
-                            Start of postcode
-                        </dt>
-                        <dd>
-                            AB10
-                        </dd>
-                    </dl>
-                </mock:shadow-root>
-            </tttx-keyvalue-block>
-        `);
-  });
-  it('renders with missing keyvalue object', async () => {
-    const page = await newSpecPage({
-      components: [TttxKeyvalueBlock],
-      template: () => (h("tttx-keyvalue-block", null))
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-            <tttx-keyvalue-block>
-                <mock:shadow-root>
-                </mock:shadow-root>
-            </tttx-keyvalue-block>
-        `);
-  });
-  it('renders an array of key value subtitles', async () => {
-    const keyValueArray = [
-      { title: 'title', subTitle: 'sub', data: 'data' },
-      { title: 'title2', subTitle: 'sub2', data: 'data2' }
-    ];
-    const page = await newSpecPage({
-      components: [TttxKeyvalueBlock],
-      html: `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-            <tttx-keyvalue-block keyvalues='[{"title":"title","subTitle":"sub","data":"data"},{"title":"title2","subTitle":"sub2","data":"data2"}]'>
-                <mock:shadow-root>
-                    <dl>
-                        <dt class="mainTitle">
-                            title
-                        </dt>
-                        <dt class="subTitle">
-                            sub
-                        </dt>
-                        <dd>
-                            data
-                        </dd>
-                        <dt class="mainTitle">
-                            title2
-                        </dt>
-                        <dt class="subTitle">
-                            sub2
-                        </dt>
-                        <dd>
-                            data2
-                        </dd>
-                    </dl>
-                </mock:shadow-root>
-            </tttx-keyvalue-block>
-        `);
-  });
-  it('renders multiple horizontal key value pairs', async () => {
-    const keyValuePair = {
-      'Name': 'John Doe',
-      'Date of birth': '14 Jan 1981',
-      'Start of postcode': 'AB10'
-    };
-    const page = await newSpecPage({
-      components: [TttxKeyvalueBlock],
-      html: `<tttx-keyvalue-block horizontal="true" keyvalues='${JSON.stringify(keyValuePair)}' />`
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-            <tttx-keyvalue-block horizontal="true" keyvalues='{"Name":"John Doe","Date of birth":"14 Jan 1981","Start of postcode":"AB10"}'>
-                <mock:shadow-root>
-                    <dl class="horizontal">
-                        <div>
-                            <dt>
-                                Name
-                            </dt>
-                            <dd>
-                                John Doe
-                            </dd>
-                        </div>
-                        <div>
-                            <dt>
-                                Date of birth
-                            </dt>
-                            <dd>
-                                14 Jan 1981
-                            </dd>
-                        </div>
-                        <div>
-                            <dt>
-                                Start of postcode
-                            </dt>
-                            <dd>
-                                AB10
-                            </dd>
-                        </div>
-                    </dl>
-                </mock:shadow-root>
-            </tttx-keyvalue-block>
-        `);
-  });
-  it('renders an array of horizontal key value subtitles', async () => {
-    const keyValueArray = [
-      { title: 'title', subTitle: 'sub', data: 'data' },
-      { title: 'title2', subTitle: 'sub2', data: 'data2' }
-    ];
-    const page = await newSpecPage({
-      components: [TttxKeyvalueBlock],
-      html: `<tttx-keyvalue-block horizontal="true" keyvalues='${JSON.stringify(keyValueArray)}' />`
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-            <tttx-keyvalue-block horizontal="true" keyvalues='[{"title":"title","subTitle":"sub","data":"data"},{"title":"title2","subTitle":"sub2","data":"data2"}]'>
-                <mock:shadow-root>
-                    <dl class="horizontal">
-                        <div>
-                            <dt class="mainTitle">
-                                title
-                            </dt>
-                            <dt class="subTitle">
-                                sub
-                            </dt>
-                            <dd>
-                                data
-                            </dd>
-                        </div>
-                        <div>
-                            <dt class="mainTitle">
-                                title2
-                            </dt>
-                            <dt class="subTitle">
-                                sub2
-                            </dt>
-                            <dd>
-                                data2
-                            </dd>
-                        </div>
-                    </dl>
-                </mock:shadow-root>
-            </tttx-keyvalue-block>
-        `);
-  });
-});

package/dist/collection/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.js

@@ -1,64 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxLoadingSpinner } from '../tttx-loading-spinner';
-describe('tttx-loading-spinner', () => {
-  it('renders the loading text when the loading message prop is set to true', async () => {
-    const page = await newSpecPage({
-      components: [TttxLoadingSpinner],
-      html: '<tttx-loading-spinner></tttx-loading-spinner>',
-    });
-    page.rootInstance.loadingMessage = true;
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-      <tttx-loading-spinner>
-        <mock:shadow-root>
-          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div><div class='loading-text'>Loading, please wait...</div></div>
-        </mock:shadow-root>
-      </tttx-loading-spinner>
-    `);
-  });
-  it('renders without the loading text when the loading message prop is set to false', async () => {
-    const page = await newSpecPage({
-      components: [TttxLoadingSpinner],
-      html: '<tttx-loading-spinner></tttx-loading-spinner>',
-    });
-    page.rootInstance.loadingMessage = false;
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-      <tttx-loading-spinner>
-        <mock:shadow-root>
-          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div></div>
-        </mock:shadow-root>
-      </tttx-loading-spinner>
-    `);
-  });
-  it('renders the small spinner when the size prop is set to small', async () => {
-    const page = await newSpecPage({
-      components: [TttxLoadingSpinner],
-      html: '<tttx-loading-spinner></tttx-loading-spinner>',
-    });
-    page.rootInstance.size = 'small';
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-      <tttx-loading-spinner>
-        <mock:shadow-root>
-          <div class='spinner-container'><div class="loading-box"><span class='spinner small'></span></div></div>
-        </mock:shadow-root>
-      </tttx-loading-spinner>
-    `);
-  });
-  it('renders the large spinner when the size prop is set to large', async () => {
-    const page = await newSpecPage({
-      components: [TttxLoadingSpinner],
-      html: '<tttx-loading-spinner></tttx-loading-spinner>',
-    });
-    page.rootInstance.size = 'large';
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-      <tttx-loading-spinner>
-        <mock:shadow-root>
-          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div></div>
-        </mock:shadow-root>
-      </tttx-loading-spinner>
-    `);
-  });
-});

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

@@ -1,38 +0,0 @@
-import setErrorState from './setErrorState';
-describe('setErrorState', () => {
-  let target;
-  let errorBubble;
-  beforeEach(() => {
-    target = document.createElement('input');
-    errorBubble = document.createElement('div');
-    errorBubble.className = 'errorBubble';
-    target.parentElement = document.createElement('div');
-    target.parentElement.appendChild(errorBubble);
-  });
-  afterEach(() => {
-    target = null;
-    errorBubble = null;
-  });
-  test('should set error state correctly when hasError is true', () => {
-    setErrorState(target, true, 'Invalid value');
-    expect(target.className).toBe('invalid');
-    expect(errorBubble.innerHTML).toBe('<span class="material-symbols-rounded">warning</span>Invalid value');
-  });
-  test('should clear error state correctly when hasError is false', () => {
-    target.className = 'invalid';
-    errorBubble.innerHTML = '<span class="material-symbols-rounded">warning</span>Invalid value';
-    setErrorState(target, false, '');
-    expect(target.className).toBe('');
-    expect(errorBubble.innerHTML).toBe('');
-  });
-  test('should set error state correctly with custom error message', () => {
-    setErrorState(target, true, 'Custom error message');
-    expect(target.className).toBe('invalid');
-    expect(errorBubble.innerHTML).toBe('<span class="material-symbols-rounded">warning</span>Custom error message');
-  });
-  test('should set error state correctly with no error message', () => {
-    setErrorState(target, true, '');
-    expect(target.className).toBe('invalid');
-    expect(errorBubble.innerHTML).toBe('<span class="material-symbols-rounded">warning</span> ');
-  });
-});

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

@@ -1,214 +0,0 @@
-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

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