@tet/tet-components 1.3.157-testing → 1.4.0-staging

package/dist/collection/components/basic/steppers/tet-stepper-v3/test/tet-stepper-v3.spec.js

@@ -1,135 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetStepperV3 } from "../tet-stepper-v3";
-describe('tet-stepper-v3', () => {
-    it('renders an empty stepper when no data provided', async () => {
-        const page = await newSpecPage({
-            components: [TetStepperV3],
-            html: `<tet-stepper-v3></tet-stepper-v3>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-stepper-v3>
-        <mock:shadow-root>
-          <ol class="stepper light"></ol>
-        </mock:shadow-root>
-      </tet-stepper-v3>
-    `);
-    });
-    it('renders an empty stepper with dark theme', async () => {
-        const page = await newSpecPage({
-            components: [TetStepperV3],
-            html: `<tet-stepper-v3 theme="dark"></tet-stepper-v3>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-stepper-v3 theme="dark">
-        <mock:shadow-root>
-          <ol class="stepper dark"></ol>
-        </mock:shadow-root>
-      </tet-stepper-v3>
-    `);
-    });
-    it('renders a stepper with 4 steps', async () => {
-        const stepperData = [
-            {
-                icon: 'check',
-                active: true,
-                title: 'Tikko',
-                description: 'Pieteikums nosūtīts',
-            },
-            {
-                icon: 'check',
-                active: true,
-                title: 'Tikko',
-                description: 'Pieteikums Saņemts',
-            },
-            {
-                icon: 'circle',
-                active: true,
-                title: 'Sestdiena 25.03.2023',
-                description: 'Pakalpojums tiks apturēts',
-            },
-            {
-                icon: 'circle-not-active',
-                active: false,
-                title: 'Otrdiena 25.04.2023',
-                description: 'Pakalpojums tiks automātiski atjaunots',
-            },
-        ];
-        const page = await newSpecPage({
-            components: [TetStepperV3],
-            template: () => h("tet-stepper-v3", { stepperData: stepperData }),
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-stepper-v3>
-       <mock:shadow-root>
-         <ol class="light stepper">
-           <li class="step">
-             <div class="active status-wrapper">
-                <div class="line top"></div>
-                <div class="line bottom next-step-active"></div>
-                <div class="check-icon">
-                    <tet-icon class="check" name="check"></tet-icon>
-                </div>
-             </div>
-             <div class="content">
-                <div class="content-title">
-                    Tikko
-                </div>
-                <div class="content-description">
-                    Pieteikums nosūtīts
-                </div>
-               </div>
-           </li>
-           <li class="step">
-             <div class="active status-wrapper">
-                <div class="line top"></div>
-                <div class="line bottom next-step-active"></div>
-                <div class="check-icon">
-                    <tet-icon class="check" name="check"></tet-icon>
-                </div>
-             </div>
-             <div class="content">
-                <div class="content-title">
-                    Tikko
-                </div>
-                <div class="content-description">
-                    Pieteikums Saņemts
-                </div>
-               </div>
-           </li>
-           <li class="step">
-             <div class="active status-wrapper">
-                <div class="line top"></div>
-                <div class="line bottom"></div>
-                <div class="circle"></div>
-             </div>
-             <div class="content">
-                <div class="content-title">
-                    Sestdiena 25.03.2023
-                </div>
-                <div class="content-description">
-                    Pakalpojums tiks apturēts
-                </div>
-               </div>
-           </li>
-           <li class="step">
-             <div class="status-wrapper">
-                <div class="line top"></div>
-                <div class="line bottom"></div>
-                <div class="circle"></div>
-             </div>
-             <div class="content">
-                <div class="content-title">
-                    Otrdiena 25.04.2023
-                </div>
-                <div class="content-description">
-                    Pakalpojums tiks automātiski atjaunots
-                </div>
-               </div>
-           </li>
-         </ol>
-       </mock:shadow-root>
-      </tet-stepper-v3>
-    `);
-    });
-});

package/dist/collection/components/simple/inputs/tet-dropdown/test/tet-dropdown.spec.js

@@ -1,122 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetDropdown } from "../tet-dropdown";
-const OPTIONS = [
-    {
-        label: 'Apple',
-        value: '0',
-    },
-    {
-        label: 'Banana',
-        value: '0',
-    },
-    {
-        label: 'Pineapple',
-        value: '0',
-    },
-];
-describe('tet-dropdown', () => {
-    describe('renders', () => {
-        it('should render', async () => {
-            const page = await newSpecPage({
-                components: [TetDropdown],
-                template: () => {
-                    return h("tet-dropdown", { label: "Label", options: OPTIONS });
-                },
-            });
-            expect(page.root).toEqualHtml(`
-        <tet-dropdown>
-          <mock:shadow-root>
-            <div class="dropdown light">
-              <div class="dropdown__wrapper">
-                <label id="dropdown-label" htmlfor="dropdown-button" class="tet-input__label">Label</label>
-                  <div class="dropdown__button-wrapper">
-                    <button
-                    id="dropdown-button"
-                    class="dropdown__button"
-                    aria-labelledby="dropdown-label"
-                    aria-haspopup="listbox"
-                    aria-controls="dropdown-options"
-                    tabindex="0">
-                      <span class="dropdown__button__selected">
-                        Select an option
-                      </span>
-                      <tet-icon class="dropdown__chevron-icon dropdown__icon" name="chevron-down"></tet-icon>
-                  </button>
-                </div>
-              </div>
-              <div class="dropdown__options-focus-wrapper">
-                <div class="dropdown__options-scroll-wrapper">
-                  <ul
-                    id="dropdown-options"
-                    class="dropdown__options"
-                    role="listbox"
-                    tabindex="-1"
-                    aria-labelledby="dropdown-button">
-                    <li
-                      class="dropdown__option dropdown__option--single"
-                      role="option"
-                      tabindex="0"
-                      data-value="0">
-                      Apple
-                    </li>
-                    <li
-                      class="dropdown__option dropdown__option--single"
-                      role="option"
-                      tabindex="0"
-                      data-value="0">
-                      Banana
-                    </li>
-                    <li
-                      class="dropdown__option dropdown__option--single"
-                      role="option"
-                      tabindex="0"
-                      data-value="0">
-                      Pineapple
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </mock:shadow-root>
-        </tet-dropdown>
-      `);
-        });
-    });
-    describe('unit tests', () => {
-        it('single-select options should select properly', async () => {
-            const page = await newSpecPage({
-                components: [TetDropdown],
-                template: () => {
-                    return h("tet-dropdown", { options: OPTIONS });
-                },
-            });
-            const component = page.body.querySelector('tet-dropdown');
-            if (component === undefined) {
-                throw new Error('Could not find `tet-dropdown` component');
-            }
-            await component.selectOption(0, false);
-            expect(await component.getSelectedOptions()).toEqual([OPTIONS[0]]);
-            await component.selectOption(1, false);
-            expect(await component.getSelectedOptions()).toEqual([OPTIONS[1]]);
-        });
-        it('multi-select options should select properly', async () => {
-            const page = await newSpecPage({
-                components: [TetDropdown],
-                template: () => {
-                    return h("tet-dropdown", { "allow-multiple": true, options: OPTIONS });
-                },
-            });
-            const component = page.body.querySelector('tet-dropdown');
-            if (component === undefined) {
-                throw new Error('Could not find `tet-dropdown` component');
-            }
-            await component.selectOption(0, false);
-            expect(await component.getSelectedOptions()).toEqual([OPTIONS[0]]);
-            await component.selectOption(1, false);
-            expect(await component.getSelectedOptions()).toEqual([OPTIONS[0], OPTIONS[1]]);
-            await component.selectOption(0, false);
-            expect(await component.getSelectedOptions()).toEqual([OPTIONS[1]]);
-        });
-    });
-});

package/dist/collection/components/simple/inputs/tet-input/test/tet-input.spec.js

@@ -1,110 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetInput } from "../tet-input";
-import { h } from "@stencil/core";
-import { RequiredValidator } from "../../../../../services/validators/index";
-describe('tet-input', () => {
-    it('renders simple input', async () => {
-        const page = await newSpecPage({
-            components: [TetInput],
-            html: `<tet-input></tet-input>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-input>
-        <label class="classic">
-          <div class="input-container tet-input__classic">
-            <input autocomplete="off" class="tet-input__base tet-input__classic" placeholder="" type="text" value=""/>
-          </div>
-        </label>
-      </tet-input>
-    `);
-    });
-    it('renders left and right icons', async () => {
-        const page = await newSpecPage({
-            components: [TetInput],
-            html: `<tet-input icon-left="search" icon-right="close-circle"></tet-input>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-input icon-left="search" icon-right="close-circle">
-        <label class="classic">
-          <div class="input-container tet-input__classic">
-            <input
-              autocomplete="off"
-              class="tet-input__base tet-input__classic with-icon--left with-icon--right"
-              placeholder=""
-              type="text"
-              value=""
-            />
-            <tet-icon accessibilitylabel=""  class="icon icon-left" name="search"></tet-icon>
-            <tet-icon accessibilitylabel=""  class="icon icon-right" name="close-circle"></tet-icon>
-          </div>
-        </label>
-      </tet-input>
-    `);
-    });
-    it('renders label', async () => {
-        const page = await newSpecPage({
-            components: [TetInput],
-            html: `<tet-input label="Test Label"></tet-input>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-input label="Test Label">
-        <label class="classic">
-          <span class="tet-input__classic tet-input__label">Test Label</span>
-          <div class="input-container tet-input__classic">
-            <input autocomplete="off" class="tet-input__base tet-input__classic" placeholder="" type="text" value=""/>
-          </div>
-        </label>
-      </tet-input>
-    `);
-    });
-    it('renders error state', async () => {
-        const page = await newSpecPage({
-            components: [TetInput],
-            html: `<tet-input error></tet-input>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-input error>
-        <label class="classic">
-          <div class="input-container tet-input__classic">
-            <input
-              autocomplete="off"
-              class="error tet-input__base tet-input__classic"
-              placeholder=""
-              type="text"
-              value=""
-            />
-          </div>
-        </label>
-      </tet-input>
-    `);
-    });
-    it('renders error messages', async () => {
-        const validators = [new RequiredValidator('Test required validation message')];
-        const page = await newSpecPage({
-            components: [TetInput],
-            template: () => h("tet-input", { validators: validators, theme: "dark" }),
-        });
-        // Trigger validation
-        await page.root.validateInput();
-        await page.waitForChanges();
-        expect(page.root).toEqualHtml(`
-      <tet-input>
-        <label class="dark">
-          <div class="input-container tet-input__dark">
-            <input
-              autocomplete="off"
-              class="error tet-input__base tet-input__dark"
-              placeholder=""
-              type="text"
-              value=""
-            />
-          </div>
-        </label>
-        <div class="errors tet-input__dark">
-          <p class="tet-input__error-message">Test required validation message</p>
-        </div>
-      </tet-input>
-    `);
-        expect(await page.root.getErrors()).toStrictEqual(['Test required validation message']);
-    });
-});

package/dist/collection/components/simple/inputs/tet-range-slider/test/tet-range-slider.spec.js

@@ -1,145 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetRangeSlider } from "../tet-range-slider";
-describe('tet-range-slider', () => {
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetRangeSlider],
-            template: () => h("tet-range-slider", { minValue: 0, maxValue: 600, defaultValue: 300 }),
-        });
-        expect(page.root).toEqualHtml(`
-        <tet-range-slider>
-          <mock:shadow-root>
-          <div class="range-slider range-slider--secondary range-slider--small light">
-          <div class="range-slider__input-container">
-            <tet-input
-              accessibilitylabel=""
-              input-class="range-slider__input"
-              input-type="number"
-              input-value="300"
-              inputtabindex="3"
-              theme="light"
-            ></tet-input>
-          </div>
-          <div class="range-slider__container">
-            <tet-button class="range-slider__control range-slider__control--left" iconmode="" tabindex="2" theme="light">
-              <tet-icon class="range-slider__control--icon" name="remove"></tet-icon>
-            </tet-button>
-            <div class="range-slider__slider-container" draggable="false" style="overflow-x: scroll;">
-              <div class="range-slider__slider-wrapper">
-                <input
-                  class="range-slider__slider"
-                  id="rangeInput"
-                  list="steplist"
-                  max="600"
-                  min="0"
-                  step="1"
-                  type="range"
-                  value="300"
-                  tabindex="1"
-                >
-              </div>
-              <div class="range-slider__track range-slider__track--background"></div>
-              <div class="range-slider__track range-slider__track--progress" style="width: 50%;"></div>
-              <div class="range-slider__tick-container">
-                <span class="range-slider__tick"></span>
-                <span class="range-slider__tick"></span>
-              </div>
-              <div class="hidden range-slider__data-label-container">
-                <span class="range-slider__data-label" style="left: calc(0% - 1.5rem);">
-                  0
-                </span>
-                <span class="range-slider__data-label" style="left: calc(100% - 1.5rem);">
-                  600
-                </span>
-              </div>
-            </div>
-            <div class="range-slider__current-step-container hidden">
-              <div aria-live="polite" class="range-slider__current-step">
-                1/0
-              </div>
-            </div>
-            <div class="range-slider__tooltip-handle" style="left: 0px;">
-              <div aria-live="polite" class="range-slider__tooltip translation-none" style="--tooltip-offset: 0rem;">
-                0
-              </div>
-            </div>
-              <tet-button class="range-slider__control range-slider__control--right" iconmode="" tabindex="4" theme="light">
-                <tet-icon class="range-slider__control--icon" name="add"></tet-icon>
-              </tet-button>
-          </div>
-        </div>
-          </mock:shadow-root>
-        </tet-range-slider>
-      `);
-    });
-    it('renders correctly with size="large" and theme="dark"', async () => {
-        const page = await newSpecPage({
-            components: [TetRangeSlider],
-            template: () => h("tet-range-slider", { minValue: 0, maxValue: 600, defaultValue: 300, size: "large", theme: "dark" }),
-        });
-        expect(page.root).toEqualHtml(`
-        <tet-range-slider>
-          <mock:shadow-root>
-          <div class="range-slider range-slider--secondary range-slider--large dark">
-          <div class="range-slider__input-container">
-            <tet-input
-              accessibilitylabel=""
-              input-class="range-slider__input"
-              input-type="number"
-              input-value="300"
-              theme="dark"
-            ></tet-input>
-          </div>
-          <div class="range-slider__container">
-            <tet-button class="range-slider__control range-slider__control--left" iconmode="" theme="dark">
-              <tet-icon class="range-slider__control--icon" name="remove"></tet-icon>
-            </tet-button>
-            <div class="range-slider__slider-container" draggable="false">
-              <div class="range-slider__slider-wrapper">
-                <input
-                  class="range-slider__slider"
-                  id="rangeInput"
-                  list="steplist"
-                  max="600"
-                  min="0"
-                  step="1"
-                  type="range"
-                  value="300"
-                >
-              </div>
-              <div class="range-slider__track range-slider__track--background"></div>
-              <div class="range-slider__track range-slider__track--progress" style="width: 50%;"></div>
-              <div class="range-slider__tick-container">
-                <span class="range-slider__tick"></span>
-                <span class="range-slider__tick"></span>
-              </div>
-              <div class="range-slider__data-label-container">
-                <span class="range-slider__data-label" style="left: calc(0% - 1.5rem);">
-                  0
-                </span>
-                <span class="range-slider__data-label" style="left: calc(100% - 1.5rem);">
-                  600
-                </span>
-              </div>
-            </div>
-            <div class="range-slider__current-step-container hidden">
-              <div aria-live="polite" class="range-slider__current-step">
-                1/0
-              </div>
-            </div>
-            <div class="range-slider__tooltip-handle" style="left: 0px;">
-              <div aria-live="polite" class="range-slider__tooltip translation-none" style="--tooltip-offset: 0rem;">
-                0
-              </div>
-            </div>
-            <tet-button class="range-slider__control range-slider__control--right" iconmode="" theme="dark">
-              <tet-icon class="range-slider__control--icon" name="add"></tet-icon>
-            </tet-button>
-          </div>
-        </div>
-          </mock:shadow-root>
-        </tet-range-slider>
-      `);
-    });
-});

package/dist/collection/components/simple/lists/tet-news-card-list/test/tet-news-card-list.spec.js

@@ -1,111 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetNewsCardList } from "../tet-news-card-list";
-const ITEMS = [
-    {
-        imageSrc: 'https://picsum.photos/seed/1/700/560',
-        imageAlt: 'Alt text',
-        title: 'Test title 1',
-        date: '13.10.1992',
-        redirectText: 'Redirect',
-        redirectHref: '#',
-        redirectNewTab: true,
-    },
-    {
-        imageSrc: 'https://picsum.photos/seed/2/350/280',
-        title: 'Test title 2',
-        date: '13.10.1992',
-        redirectText: 'Redirect',
-        redirectHref: '#',
-    },
-    {
-        imageSrc: 'https://picsum.photos/seed/3/350/280',
-        title: 'Test title 3',
-        date: '13.10.1992',
-        redirectText: 'Redirect',
-        redirectHref: '#',
-    },
-];
-describe('tet-news-card-list', () => {
-    it('renders empty', async () => {
-        const page = await newSpecPage({
-            components: [TetNewsCardList],
-            template: () => h("tet-news-card-list", { withScrollbar: false, withMouseDrag: false }),
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-news-card-list>
-        <mock:shadow-root>
-          <tet-card-list controlscrollamount="350" initialscrollamount="0" withcontrols="" withoverflowopacity=""
-          exportparts="card-list, card-list-container" part="card-list-component" theme="light"></tet-card-list>
-        </mock:shadow-root>
-      </tet-news-card-list>
-    `);
-    });
-    it('renders a list with items in dark theme', async () => {
-        const page = await newSpecPage({
-            components: [TetNewsCardList],
-            template: () => (h("tet-news-card-list", { items: ITEMS, withScrollbar: false, withMouseDrag: false, theme: "dark" })),
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-news-card-list>
-        <mock:shadow-root>
-          <tet-card-list
-            controlscrollamount="350"
-            initialscrollamount="0"
-            withcontrols=""
-            withoverflowopacity=""
-            exportparts="card-list, card-list-container"
-            part="card-list-component"
-            theme="dark"
-          >
-            <div class="tet-news-card dark" part="card-list-item">
-              <a data-index="0" class="tet-news-card__link-container" href="#" target="_blank">
-                <div class="tet-news-card__image__container">
-                  <div class="tet-news-card__image">
-                    <img alt="Alt text" src="https://picsum.photos/seed/1/700/560">
-                  </div>
-                </div>
-                <span class="tet-news-card__date">13.10.1992</span><span class="tet-news-card__title">Test title 1</span>
-                <span class="tet-news-card__divider"></span>
-                <div class="tet-news-card__link">
-                  <span class="tet-news-card__underline">Redirect</span>
-                  <tet-icon class="tet-news-card__link-icon" name="chevron-right"></tet-icon>
-                </div>
-              </a>
-            </div>
-            <div class="tet-news-card dark" part="card-list-item">
-            <a data-index="1" class="tet-news-card__link-container" href="#" target="">
-                <div class="tet-news-card__image__container">
-                  <div class="tet-news-card__image" >
-                    <img alt="" src="https://picsum.photos/seed/2/350/280">
-                  </div>
-                </div>
-                <span class="tet-news-card__date">13.10.1992</span><span class="tet-news-card__title">Test title 2</span>
-                <span class="tet-news-card__divider"></span>
-                <div class="tet-news-card__link">
-                  <span class="tet-news-card__underline">Redirect</span>
-                  <tet-icon class="tet-news-card__link-icon" name="chevron-right"></tet-icon>
-                </div>
-              </a>
-            </div>
-            <div class="tet-news-card dark" part="card-list-item">
-            <a data-index="2" class="tet-news-card__link-container" href="#" target="">
-              <div class="tet-news-card__image__container">
-                <div class="tet-news-card__image" >
-                  <img alt="" src="https://picsum.photos/seed/3/350/280">
-                </div>
-              </div>
-              <span class="tet-news-card__date">13.10.1992</span><span class="tet-news-card__title">Test title 3</span>
-              <span class="tet-news-card__divider"></span>
-              <div class="tet-news-card__link">
-                <span class="tet-news-card__underline">Redirect</span>
-                <tet-icon class="tet-news-card__link-icon" name="chevron-right"></tet-icon>
-              </div>
-              </a>
-            </div>
-          </tet-card-list>
-        </mock:shadow-root>
-      </tet-news-card-list>
-    `);
-    });
-});