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

package/dist/collection/components/views/tet-macd-view/test/tet-macd-view.spec.js

@@ -1,498 +0,0 @@
-const macdOrderTypes = [
-    {
-        code: 'suspend',
-        name: 'macd-order-type-suspend-name',
-        needStrongAuth: true,
-        availability: {
-            status: true,
-            contactFormSubjectCode: 'SERVICE_NEW',
-            redirectUrl: 'https://mans-pretest.tet.lv/mytet/services/v2/change/suspend/02i3N00000CKNN3QAP',
-            reason: null
-        }
-    },
-    {
-        code: 'change-of-plan',
-        name: 'macd-order-type-changeOfPlan-name',
-        needStrongAuth: true,
-        availability: {
-            status: true,
-            contactFormSubjectCode: 'SERVICE_NEW',
-            redirectUrl: 'https://tst-pieteikties.tet.lv/?lang=lv&assetId=02i3N00000C0hB9QAJ&macdOrderType=change-of-plan',
-            reason: null
-        }
-    },
-    {
-        code: 'promotion-change',
-        name: 'macd-order-type-promotionChange-name',
-        needStrongAuth: true,
-        availability: {
-            status: false,
-            contactFormSubjectCode: 'SERVICE_NEW',
-            redirectUrl: 'https://tst-pieteikties.tet.lv/?lang=lv&assetId=02i3N00000C0hB9QAJ&macdOrderType=promotion-change',
-            reason: [
-                {
-                    title: 'macd-order-type-reason-title-1',
-                    description: 'macd-order-type-reason-description-1'
-                }
-            ]
-        }
-    },
-    {
-        code: 'cease',
-        name: 'macd-order-type-cease-name',
-        needStrongAuth: true,
-        availability: {
-            status: true,
-            contactFormSubjectCode: 'SERVICE_NEW',
-            redirectUrl: 'https://tst-pieteikties.tet.lv/?lang=lv&assetId=02i3N00000C0hB9QAJ&macdOrderType=cease',
-            reason: null
-        }
-    },
-    {
-        code: 'modify',
-        name: 'macd-order-type-modify-name',
-        needStrongAuth: true,
-        availability: {
-            status: true,
-            contactFormSubjectCode: 'SERVICE_NEW',
-            redirectUrl: 'https://mans-pretest.tet.lv/mytet/services/v2/change/modify/02i3N00000CKNN3QAP',
-            reason: null
-        }
-    }
-];
-jest.mock('../../../../services/api', () => ({
-    macd: jest.fn().mockResolvedValue({
-        title: 'asset-response-title',
-        accountNumber: 13498647,
-        assetId: '02i3N00000CKNN3QAP',
-        name: 'Pēdējā Garantētā Piegāde - Beztermiņa',
-        fullAddress: 'BIEĶENSALAS IELA 21, RĪGA',
-        macdOrderTypes,
-    }),
-}));
-jest.mock('../../../../services/translations');
-import { TetMacdView } from "../tet-macd-view";
-import { Theme } from "../../../../services/theme/index";
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-const props = {
-    macdOrderTypes
-};
-describe('tet-macd-view', () => {
-    it('renders only loader when no params/data provided', async () => {
-        const page = await newSpecPage({
-            components: [TetMacdView],
-            html: `<tet-macd-view></tet-macd-view>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-macd-view>
-        <mock:shadow-root>
-          <div class="wrapper">
-            <div class="theme-light">
-              <tet-placeholder class="placeholder" height="17.8125rem"></tet-placeholder>
-              <tet-dialog footerdisplay="right" theme="light">
-                <div></div>
-                <tet-button size="medium" slot="footer" theme="light" type="secondary">
-                  macd-cancel
-                </tet-button>
-                <tet-button size="medium" slot="footer" theme="light">
-                  macd-to-communication
-                </tet-button>
-              </tet-dialog>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-macd-view>
-    `);
-    });
-    it('renders only loader when no params/data provided with the dark theme', async () => {
-        const testProps = {
-            theme: Theme.DARK
-        };
-        const page = await newSpecPage({
-            components: [TetMacdView],
-            template: () => h("tet-macd-view", Object.assign({}, testProps))
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-macd-view>
-        <mock:shadow-root>
-          <div class="wrapper">
-            <div class="theme-dark">
-              <tet-placeholder class="placeholder" height="17.8125rem"></tet-placeholder>
-              <tet-dialog footerdisplay="right" theme="dark">
-                <div></div>
-                <tet-button size="medium" slot="footer" theme="dark" type="secondary">
-                  macd-cancel
-                </tet-button>
-                <tet-button size="medium" slot="footer" theme="dark">
-                  macd-to-communication
-                </tet-button>
-              </tet-dialog>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-macd-view>
-    `);
-    });
-    it('renders all Macd Order Types', async () => {
-        const page = await newSpecPage({
-            components: [TetMacdView],
-            template: () => h("tet-macd-view", Object.assign({}, props))
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-macd-view>
-        <mock:shadow-root>
-          <div class="wrapper">
-            <div class="theme-light">
-              <ul class="macd-list">
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-suspend-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-changeOfPlan-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-promotionChange-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper multiple">
-                    <tet-icon class="cta macd-list-item-icon-wrapper-icon" name="attention"></tet-icon>
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-cease-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                   macd-order-type-modify-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-              </ul>
-              <tet-dialog footerdisplay="right" theme="light">
-                <div></div>
-                <tet-button size="medium" slot="footer" theme="light" type="secondary">
-                  macd-cancel
-                </tet-button>
-                <tet-button size="medium" slot="footer" theme="light">
-                  macd-to-communication
-                </tet-button>
-              </tet-dialog>
-           </div>
-          </div>
-        </mock:shadow-root>
-      </tet-macd-view>
-    `);
-    });
-    it('renders all Macd Order Types with the dark theme', async () => {
-        const testProps = Object.assign(Object.assign({}, props), { theme: Theme.DARK });
-        const page = await newSpecPage({
-            components: [TetMacdView],
-            template: () => h("tet-macd-view", Object.assign({}, testProps))
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-macd-view>
-        <mock:shadow-root>
-          <div class="wrapper">
-            <div class="theme-dark">
-              <ul class="macd-list">
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-suspend-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="arrow-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-changeOfPlan-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="arrow-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-promotionChange-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper multiple">
-                    <tet-icon class="cta macd-list-item-icon-wrapper-icon" name="attention"></tet-icon>
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="arrow-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-cease-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="arrow-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                   macd-order-type-modify-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="arrow-right"></tet-icon>
-                  </div>
-                </li>
-              </ul>
-              <tet-dialog footerdisplay="right" theme="dark">
-                <div></div>
-                <tet-button size="medium" slot="footer" theme="dark" type="secondary">
-                  macd-cancel
-                </tet-button>
-                <tet-button size="medium" slot="footer" theme="dark">
-                  macd-to-communication
-                </tet-button>
-              </tet-dialog>
-           </div>
-          </div>
-        </mock:shadow-root>
-      </tet-macd-view>
-    `);
-    });
-    it('renders all Macd Order Types with available true', async () => {
-        const testProps = Object.assign(Object.assign({}, props), { hideUnavailable: true });
-        const page = await newSpecPage({
-            components: [TetMacdView],
-            template: () => h("tet-macd-view", Object.assign({}, testProps))
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-macd-view>
-        <mock:shadow-root>
-          <div class="wrapper">
-            <div class="theme-light">
-              <ul class="macd-list">
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-suspend-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-changeOfPlan-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-cease-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-modify-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-              </ul>
-              <tet-dialog footerdisplay="right" theme="light">
-                <div></div>
-                <tet-button size="medium" slot="footer" theme="light" type="secondary">
-                  macd-cancel
-                </tet-button>
-                <tet-button size="medium" slot="footer" theme="light">
-                  macd-to-communication
-                </tet-button>
-              </tet-dialog>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-macd-view>
-    `);
-    });
-    it('renders all Macd Order Types except "modify"', async () => {
-        const testProps = Object.assign(Object.assign({}, props), { ignoredMacdOrderTypes: [
-                'modify'
-            ] });
-        const page = await newSpecPage({
-            components: [TetMacdView],
-            template: () => h("tet-macd-view", Object.assign({}, testProps))
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-macd-view>
-        <mock:shadow-root>
-          <div class="wrapper">
-            <div class="theme-light">
-              <ul class="macd-list">
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-suspend-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-changeOfPlan-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-promotionChange-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper multiple">
-                    <tet-icon class="cta macd-list-item-icon-wrapper-icon" name="attention"></tet-icon>
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-cease-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-              </ul>
-              <tet-dialog footerdisplay="right" theme="light">
-                <div></div>
-                <tet-button size="medium" slot="footer" theme="light" type="secondary">
-                  macd-cancel
-                </tet-button>
-                <tet-button size="medium" slot="footer" theme="light">
-                  macd-to-communication
-                </tet-button>
-              </tet-dialog>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-macd-view>
-    `);
-    });
-    it('renders all Macd Order Types from mocked api response', async () => {
-        const testProps = {
-            accessToken: '123'
-        };
-        const page = await newSpecPage({
-            components: [TetMacdView],
-            template: () => h("tet-macd-view", Object.assign({}, testProps))
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-macd-view>
-        <mock:shadow-root>
-          <div class="wrapper">
-            <div class="theme-light">
-              <ul class="macd-list">
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-suspend-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-changeOfPlan-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-promotionChange-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper multiple">
-                    <tet-icon class="cta macd-list-item-icon-wrapper-icon" name="attention"></tet-icon>
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-cease-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-                <li class="macd-list-item">
-                  <span class="macd-list-item-name">
-                    macd-order-type-modify-name
-                  </span>
-                  <div class="macd-list-item-icon-wrapper">
-                    <tet-icon class="action macd-list-item-icon-wrapper-icon" name="chevron-right"></tet-icon>
-                  </div>
-                </li>
-              </ul>
-              <tet-dialog footerdisplay="right" theme="light">
-                <div></div>
-                <tet-button size="medium" slot="footer" theme="light" type="secondary">
-                  macd-cancel
-                </tet-button>
-                <tet-button size="medium" slot="footer" theme="light">
-                  macd-to-communication
-                </tet-button>
-              </tet-dialog>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-macd-view>
-    `);
-    });
-    it('renders Error notification', async () => {
-        const testProps = {
-            showLoader: false,
-            showErrorNotification: true,
-        };
-        const page = await newSpecPage({
-            components: [TetMacdView],
-            template: () => h("tet-macd-view", Object.assign({}, testProps))
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-macd-view>
-        <mock:shadow-root>
-          <div class="wrapper">
-            <div class="theme-light">
-              <tet-notification class="macd-error-notification" content="macd-error-loading" icon="attention" theme="classic" type="warning"></tet-notification>
-              <tet-dialog footerdisplay="right" theme="light">
-                <div></div>
-                <tet-button size="medium" slot="footer" theme="light" type="secondary">
-                  macd-cancel
-                </tet-button>
-                <tet-button size="medium" slot="footer" theme="light">
-                  macd-to-communication
-                </tet-button>
-              </tet-dialog>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-macd-view>
-    `);
-    });
-});

package/dist/collection/components/views/tet-price-view/test/tet-price-view.spec.js

@@ -1,98 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetPriceView } from "../tet-price-view";
-describe('tet-price-view', () => {
-    it('renders default (grey background, size L) with required price', async () => {
-        const page = await newSpecPage({
-            components: [TetPriceView],
-            html: `<tet-price-view euro-price="12"></tet-price-view>`
-        });
-        const container = page.root.shadowRoot.querySelector('.price-view__container');
-        expect(container).not.toBeNull();
-        expect(container.classList.contains('price-view__grey')).toBe(true);
-        expect(container.classList.contains('price-view__white')).toBe(false);
-        expect(container.classList.contains('price-view__black')).toBe(false);
-        expect(container.classList.contains('price-view__yellow')).toBe(false);
-        const euro = page.root.shadowRoot.querySelector('.price-view__euro');
-        expect(euro.textContent).toBe('12€');
-        const cents = page.root.shadowRoot.querySelector('.price-view__cents');
-        expect(cents).not.toBeNull();
-        expect(cents.textContent).toBe('');
-        const type = page.root.shadowRoot.querySelector('.price-view__type');
-        expect(type).toBeNull();
-    });
-    it('renders monthly price with cents and monthly suffix', async () => {
-        const page = await newSpecPage({
-            components: [TetPriceView],
-            html: `<tet-price-view euro-price="15" cents-price="99" price-type="monthly"></tet-price-view>`
-        });
-        const euro = page.root.shadowRoot.querySelector('.price-view__euro');
-        expect(euro.textContent).toBe('15');
-        const cents = page.root.shadowRoot.querySelector('.price-view__cents');
-        expect(cents.textContent).toBe('99');
-        const type = page.root.shadowRoot.querySelector('.price-view__type');
-        expect(type.textContent).toBe('€/mēn.');
-        const centsContainer = page.root.shadowRoot.querySelector('.price-view__cents-container');
-        expect(centsContainer).not.toBeNull();
-    });
-    it('renders one-time price with euro sign and empty type span', async () => {
-        const page = await newSpecPage({
-            components: [TetPriceView],
-            html: `<tet-price-view euro-price="199" price-type="one-time"></tet-price-view>`
-        });
-        const euro = page.root.shadowRoot.querySelector('.price-view__euro');
-        expect(euro.textContent).toBe('199€');
-        const cents = page.root.shadowRoot.querySelector('.price-view__cents');
-        expect(cents).not.toBeNull();
-        expect(cents.textContent).toBe('');
-        const type = page.root.shadowRoot.querySelector('.price-view__type');
-        expect(type.textContent).toBe('');
-        const centsContainer = page.root.shadowRoot.querySelector('.price-view__cents-container');
-        expect(centsContainer).not.toBeNull();
-    });
-    it('applies background color variants as classes', async () => {
-        const pageWhite = await newSpecPage({
-            components: [TetPriceView],
-            html: `<tet-price-view euro-price="9" background="white"></tet-price-view>`
-        });
-        expect(pageWhite.root.shadowRoot.querySelector('.price-view__container').classList.contains('price-view__white')).toBe(true);
-        const pageBlack = await newSpecPage({
-            components: [TetPriceView],
-            html: `<tet-price-view euro-price="9" background="black"></tet-price-view>`
-        });
-        expect(pageBlack.root.shadowRoot.querySelector('.price-view__container').classList.contains('price-view__black')).toBe(true);
-        const pageYellow = await newSpecPage({
-            components: [TetPriceView],
-            html: `<tet-price-view euro-price="9" background="yellow"></tet-price-view>`
-        });
-        expect(pageYellow.root.shadowRoot.querySelector('.price-view__container').classList.contains('price-view__yellow')).toBe(true);
-    });
-    it('renders heading and footer text with footer decoration type', async () => {
-        const page = await newSpecPage({
-            components: [TetPriceView],
-            html: `<tet-price-view euro-price="5" heading-text="Special" footer-text="Old price" footer-text-type="crossed-out"></tet-price-view>`
-        });
-        const heading = page.root.shadowRoot.querySelector('.price-view__heading');
-        expect(heading.textContent).toBe('Special');
-        const footer = page.root.shadowRoot.querySelector('.price-view__footer');
-        expect(footer.textContent).toBe('Old price');
-        expect(footer.getAttribute('style')).toContain('text-decoration: line-through');
-    });
-    it('applies size M styles for container and text scales', async () => {
-        const page = await newSpecPage({
-            components: [TetPriceView],
-            html: `<tet-price-view euro-price="25" size="M"></tet-price-view>`
-        });
-        const container = page.root.shadowRoot.querySelector('.price-view__container');
-        const style = container.getAttribute('style') || '';
-        expect(style).toContain('width: 7rem');
-        expect(style).toContain('height: 7rem');
-    });
-    it('sets custom font on price block', async () => {
-        const page = await newSpecPage({
-            components: [TetPriceView],
-            html: `<tet-price-view euro-price="30" font="Gilroy, sans-serif"></tet-price-view>`
-        });
-        const price = page.root.shadowRoot.querySelector('.price-view__price');
-        expect(price.getAttribute('style')).toContain('font-family: Gilroy, sans-serif');
-    });
-});