@3t-transform/threeteeui 0.1.28 → 0.1.30

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

@@ -1,87 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxSorter } from '../tttx-sorter';
-const sorterData = { sorterOptions: [{ optionLabel: 'Expiry date' }, { optionLabel: 'Qualification name' }] };
-describe('tttx-sorter', () => {
-  it('renders without errors', async () => {
-    const page = await newSpecPage({
-      components: [TttxSorter],
-      html: `<tttx-sorter field-options-data='${JSON.stringify(sorterData)}'></tttx-sorter>`,
-    });
-    expect(page.root).toBeDefined();
-    expect(page.root)
-      .toEqualHtml(`<tttx-sorter field-options-data="{&quot;sorterOptions&quot;:[{&quot;optionLabel&quot;:&quot;Expiry date&quot;},{&quot;optionLabel&quot;:&quot;Qualification name&quot;}]}" id="sorter__undefined">
-        <mock:shadow-root>
-          <div class="sorter-container" tabindex="0">
-            <button class="arrow-toggle-button" type="button">
-              <tttx-icon color="black" icon="arrow_downward"></tttx-icon>
-            </button>
-            <div class="dropdown-selector">
-              <div class="dropdown-selector-button">
-                <div class="dropdown-selector-text"></div>
-                <div class="dropdown-selector-chevron">
-                  <tttx-icon color="black" icon="expand_more"></tttx-icon>
-                </div>
-              </div>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tttx-sorter>`);
-    expect(page.rootInstance).toBeInstanceOf(TttxSorter);
-  });
-  it('renders null without errors when no data passesd in', async () => {
-    const page = await newSpecPage({
-      components: [TttxSorter],
-      html: '<tttx-sorter></tttx-sorter>',
-    });
-    expect(page.root).toBeDefined();
-    expect(page.root).toEqualHtml(`
-        <tttx-sorter>
-          <mock:shadow-root></mock:shadow-root>
-        </tttx-sorter>`);
-    expect(page.rootInstance).toBeInstanceOf(TttxSorter);
-  });
-  it('emits sorterChangeEvent when sort toggle button is clicked', async () => {
-    const page = await newSpecPage({
-      components: [TttxSorter],
-      html: `<tttx-sorter field-options-data='${JSON.stringify(sorterData)}' sorter-key='basic-sorter'></tttx-sorter>`,
-    });
-    await page.waitForChanges();
-    const toggleButton = page.root.shadowRoot.querySelector('.arrow-toggle-button');
-    const eventSpy = jest.fn();
-    page.doc.addEventListener('sorterChangeEvent', eventSpy);
-    await page.waitForChanges();
-    await toggleButton.dispatchEvent(new Event('click'));
-    expect(eventSpy).toHaveBeenCalled();
-    expect(eventSpy.mock.calls[0][0].detail).toEqual({ sortField: '', sorterDirection: 'ascending', sorterKey: 'basic-sorter' });
-  });
-  it('emits sorterChangeEvent when sort toggle button is clicked', async () => {
-    const page = await newSpecPage({
-      components: [TttxSorter],
-      html: `<tttx-sorter field-options-data='${JSON.stringify(sorterData)}' sorter-key='basic-sorter' default-sort-direction='ascending'></tttx-sorter>`,
-    });
-    await page.waitForChanges();
-    const toggleButton = page.root.shadowRoot.querySelector('.arrow-toggle-button');
-    const eventSpy = jest.fn();
-    page.doc.addEventListener('sorterChangeEvent', eventSpy);
-    await page.waitForChanges();
-    await toggleButton.dispatchEvent(new Event('click'));
-    expect(eventSpy).toHaveBeenCalled();
-    expect(eventSpy.mock.calls[0][0].detail).toEqual({ sortField: '', sorterDirection: 'descending', sorterKey: 'basic-sorter' });
-  });
-  it('emits sorterChangeEvent when dropdown option is selected', async () => {
-    const page = await newSpecPage({
-      components: [TttxSorter],
-      html: `<tttx-sorter field-options-data='${JSON.stringify(sorterData)}' sorter-key='basic-sorter' default-sort-direction='descending'></tttx-sorter>`,
-    });
-    const dropdownSelector = page.root.shadowRoot.querySelector('.dropdown-selector');
-    await dropdownSelector.dispatchEvent(new Event('click'));
-    await page.waitForChanges();
-    const dropdownOption = page.root.shadowRoot.querySelector('.dropdown-option');
-    const eventSpy = jest.fn();
-    page.doc.addEventListener('sorterChangeEvent', eventSpy);
-    await page.waitForChanges();
-    await dropdownOption.dispatchEvent(new Event('click'));
-    expect(eventSpy).toHaveBeenCalledTimes(1);
-    expect(eventSpy.mock.calls[0][0].detail).toEqual({ sortField: 'Expiry date', sorterDirection: 'descending', sorterKey: 'basic-sorter' });
-  });
-});

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

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

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

@@ -1,215 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxInput } from '../tttx-standalone-input';
-describe('tttx-standalone-input', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input />',
-    });
-    expect(page.root).toEqualHtml(`
-        <tttx-standalone-input>
-            <label class="inputBlock">
-              <span class="optional">
-                (optional)
-              </span>
-              <div class="input-container">
-                <input class="standalone" type="text">
-                <span class="errorBubble">
-                  <span class="material-symbols-rounded validationicon">
-                    warning
-                  </span>
-                </span>
-              </div>
-            </label>
-        </tttx-standalone-input>
-        `);
-  });
-  it('renders the input field with the left icon', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input iconleft="info" />',
-    });
-    expect(page.root).toEqualHtml(`
-        <tttx-standalone-input iconleft="info">
-            <label class="inputBlock">
-              <span class="optional">
-                (optional)
-              </span>
-              <div class="input-container">
-                <tttx-icon color="grey" icon="info" id="icon-left"></tttx-icon>
-                <input class="standalone" type="text">
-                <span class="errorBubble">
-                  <span class="material-symbols-rounded validationicon">
-                    warning
-                  </span>
-                </span>
-              </div>
-            </label>
-        </tttx-standalone-input>
-        `);
-  });
-  it('renders the input field with the right icon', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input iconright="info" />',
-    });
-    expect(page.root).toEqualHtml(`
-        <tttx-standalone-input iconright="info">
-            <label class="inputBlock">
-              <span class="optional">
-                (optional)
-              </span>
-              <div class="input-container">
-                <tttx-icon color="grey" icon="info" id="icon-right"></tttx-icon>
-                <input class="standalone" type="text">
-                <span class="errorBubble">
-                  <span class="material-symbols-rounded validationicon">
-                    warning
-                  </span>
-                </span>
-              </div>
-            </label>
-        </tttx-standalone-input>
-        `);
-  });
-  it('renders the input field with an error message', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input required showerrormsg errormsg="The field is required" />',
-    });
-    expect(page.root).toEqualHtml(`
-        <tttx-standalone-input errormsg="The field is required" required="" showerrormsg="">
-            <label class="inputBlock">
-              <div class="input-container">
-                <input class="invalid standalone" required="" type="text">
-                <span class="errorBubble visible">
-                  <span class="material-symbols-rounded validationicon">
-                    warning
-                  </span>
-                  The field is required
-                </span>
-              </div>
-            </label>
-        </tttx-standalone-input>
-        `);
-  });
-  it('renders the label as inline', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input inline />',
-    });
-    expect(page.root).toEqualHtml(`
-      <tttx-standalone-input inline="">
-          <label class="inputInline">
-            <span class="optional">
-              (optional)
-            </span>
-            <div class="input-container">
-              <input class="standalone" type="text">
-              <span class="errorBubble">
-                <span class="material-symbols-rounded validationicon">
-                  warning
-                </span>
-              </span>
-            </div>
-          </label>
-      </tttx-standalone-input>
-      `);
-  });
-  it('renders the input with an icon within the field', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input inputicon="search" />',
-    });
-    expect(page.root).toEqualHtml(`
-      <tttx-standalone-input inputicon="search">
-          <label class="inputBlock">
-            <span class="optional">
-              (optional)
-            </span>
-            <div class="input-container">
-              <tttx-icon class="input-icon" icon="search" color="grey"></tttx-icon>
-              <input class="standalone" type="text">
-              <span class="errorBubble">
-                <span class="material-symbols-rounded validationicon">
-                  warning
-                </span>
-              </span>
-            </div>
-          </label>
-      </tttx-standalone-input>
-      `);
-  });
-  it('renders the input without the errorbubble', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input showerrorbubble="false" />',
-    });
-    expect(page.root).toEqualHtml(`
-      <tttx-standalone-input showerrorbubble="false">
-          <label class="inputBlock">
-            <span class="optional">
-              (optional)
-            </span>
-            <div class="input-container">
-              <input class="standalone" type="text">
-            </div>
-          </label>
-      </tttx-standalone-input>
-      `);
-  });
-  it('can trigger onInput handler', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input />',
-    });
-    const callbackFn = jest.fn();
-    page.doc.addEventListener('valueChanged', callbackFn);
-    const input = page.root.querySelector('input');
-    input.value = 'a';
-    const event = new CustomEvent('input', { composed: true, bubbles: true });
-    input.dispatchEvent(event);
-    expect(callbackFn).toHaveBeenCalled();
-  });
-  it('can trigger onFocus handler', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input />',
-    });
-    const callbackFn = jest.fn();
-    page.doc.addEventListener('focusChanged', callbackFn);
-    const input = page.root.querySelector('input');
-    input.focus();
-    const event = new CustomEvent('focus', { composed: true, bubbles: true });
-    input.dispatchEvent(event);
-    expect(callbackFn).toHaveBeenCalled();
-  });
-  it('can trigger onBlur handler', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input />',
-    });
-    const callbackFn = jest.fn();
-    page.doc.addEventListener('blurChanged', callbackFn);
-    const input = page.root.querySelector('input');
-    input.blur();
-    const event = new CustomEvent('blur', { composed: true, bubbles: true });
-    input.dispatchEvent(event);
-    expect(callbackFn).toHaveBeenCalled();
-  });
-  it('can trigger onInvalid handler', async () => {
-    const page = await newSpecPage({
-      components: [TttxInput],
-      html: '<tttx-standalone-input />',
-    });
-    const callbackFn = jest.fn();
-    page.doc.addEventListener('invalidChanged', callbackFn);
-    const input = page.root.querySelector('input');
-    // Doesn't work:
-    // input.setCustomValidity('required');
-    // input.checkValidity();
-    const event = new CustomEvent('invalid', { composed: true, bubbles: true });
-    input.dispatchEvent(event);
-    expect(callbackFn).toHaveBeenCalled();
-  });
-});

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

@@ -1,52 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxToolbar } from '../tttx-toolbar';
-describe('tttx-standalone-input', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [TttxToolbar],
-      html: `
-              <tttx-toolbar>
-                <span slot="before"><div>Before</div></span>
-                <span slot="center"><div>Center</div></span>
-                <span slot="after"><div>After</div></span>
-              </tttx-toolbar>
-            `,
-    });
-    expect(page.root).toEqualHtml(`
-          <tttx-toolbar class="bordered">
-            <mock:shadow-root>
-              <slot name="before"></slot>
-              <slot name="center"></slot>
-              <slot name="after"></slot>
-            </mock:shadow-root>
-            <span slot="before"><div>Before</div></span>
-            <span slot="center"><div>Center</div></span>
-            <span slot="after"><div>After</div></span>
-          </tttx-toolbar>
-        `);
-  });
-  it('renders without a border', async () => {
-    const page = await newSpecPage({
-      components: [TttxToolbar],
-      html: `
-            <tttx-toolbar border="false">
-              <span slot="before"><div>Before</div></span>
-              <span slot="center"><div>Center</div></span>
-              <span slot="after"><div>After</div></span>
-            </tttx-toolbar>
-          `,
-    });
-    expect(page.root).toEqualHtml(`
-        <tttx-toolbar border="false">
-          <mock:shadow-root>
-            <slot name="before"></slot>
-            <slot name="center"></slot>
-            <slot name="after"></slot>
-          </mock:shadow-root>
-          <span slot="before"><div>Before</div></span>
-          <span slot="center"><div>Center</div></span>
-          <span slot="after"><div>After</div></span>
-        </tttx-toolbar>
-      `);
-  });
-});

package/dist/collection/shared/test/domsanitiser.options.spec.js

@@ -1,23 +0,0 @@
-import domSanitiserOptions from '../domsanitiser.options';
-describe('dom sanitiser options', () => {
-  it('allows tags beginning with "tttx-"', async () => {
-    const tagName = 'tttx-custom-element';
-    const result = domSanitiserOptions.
-      CUSTOM_ELEMENT_HANDLING.
-      tagNameCheck(tagName);
-    expect(result).not.toBe(null);
-  });
-  it('disallows tags not beginning with "tttx-"', async () => {
-    const tagName = 'custom-element';
-    const result = domSanitiserOptions.
-      CUSTOM_ELEMENT_HANDLING.
-      tagNameCheck(tagName);
-    expect(result).toBe(null);
-  });
-  it('allows all attributes', async () => {
-    const result = domSanitiserOptions.
-      CUSTOM_ELEMENT_HANDLING.
-      attributeNameCheck();
-    expect(result).toBe(true);
-  });
-});