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

package/dist/collection/components/advanced/cards/tet-compare-card/test/tet-compare-card.spec.js

@@ -1,292 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetCompareCard } from "../tet-compare-card";
-const OPTIONS = {
-    bestChoiceText: 'Labākā izvēle',
-    heroTitle: 'Hero title',
-    mainTitle: 'Title',
-    subTitle: 'Subtitle',
-    infoItem: '!<tet-tooltip>Tooltip information</tet-tooltip>',
-    bulletPoints: ['Bulletpoint title1', 'Bulletpoint title2', 'Bulletpoint title3'],
-    currency: '€/mēn.',
-    price: '29.99',
-    oldPrice: '39.5',
-    term: 'Līgums uz 24 mēnešiem',
-    helper: 'This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. What do they got in there?',
-    button: '<tet-button class="tet-button" theme="light">Button</tet-button><style>.tet-button {--button-width: 10rem;}</style>',
-    link: 'https://tet.lv',
-    linkOpenBlank: true,
-    secondaryLink: 'www.tet.lv',
-    secondaryLinkText: 'Secondary link',
-    pricePrefix: 'no',
-    secondaryLinkOpenBlank: true,
-};
-describe('tet-compare-card', () => {
-    it('renders best choice card classic', async () => {
-        const page = await newSpecPage({
-            components: [TetCompareCard],
-            template: () => {
-                return (h("tet-compare-card", { class: "tet-compare-card", id: "my-card", "best-choice": "1", "can-select": "1", options: OPTIONS }));
-            },
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-compare-card best-choice="1" can-select="1" class="tet-compare-card" id="my-card">
-        <mock:shadow-root>
-          <div class="best-choice card classic full-height regular">
-            <div class="active best-choice-title center">Labākā izvēle</div>
-            <div class="image-wrapper none"></div>
-            <div class="compare-card-half-60">
-              <div class="js-resize-title title-wrapper" part="compare-card-title-wrapper">
-                <div class="title-wrapper-inner">
-                  <h3 class="hero-title">Hero title</h3>
-                  <h3 class="main-title">Title</h3>
-                  <div class="sub-title">Subtitle
-                    <div class="info-item">!
-                      <tet-tooltip>Tooltip information</tet-tooltip>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="content-wrapper js-resize-content">
-                <div class="custom-content-wrapper">
-                  <slot name="custom-slot" />
-                </div>
-                <div class="bullet-points-wrapper">
-                  <div class="bullet-point">
-                    <tet-icon class="icon" name="check-circle"></tet-icon>
-                    <div>
-                      Bulletpoint title1
-                    </div>
-                  </div>
-                  <div class="bullet-point">
-                    <tet-icon class="icon" name="check-circle"></tet-icon>
-                    <div>
-                      Bulletpoint title2
-                    </div>
-                  </div>
-                  <div class="bullet-point">
-                    <tet-icon class="icon" name="check-circle"></tet-icon>
-                    <div>
-                      Bulletpoint title3
-                    </div>
-                  </div>
-                </div>
-                <div class="upsell-block">
-                  <slot name="upsell-block-slot" />
-                </div>
-              </div>
-              <div class="divided-information-wrapper js-resize-divide-slot">
-                <slot name="divided-information-slot"></slot>
-              </div>
-            </div>
-            <div class="compare-card-half-40">
-              <div class="js-resize-price price">
-                <div class="price-wrapper">
-                  <div class="price-container">
-                    <div class="price-prefix">no</div>
-                    <div class="new-price translation-none">29,99</div>
-                    <div class="currency">
-                      <span>€/mēn.</span>
-                    </div>
-
-                  </div>
-                  <div class="old-price-container">
-                    <div class="old-price translation-none">39,50</div>
-                    <div class="old-currency">€/mēn.</div>
-                  </div>
-                </div>
-                <div class="price-information-wrapper">
-                  <slot name="price-information-slot" />
-                </div>
-                <div class="helper">
-                  <div class="term">
-                    Līgums uz 24 mēnešiem
-                  </div>
-                  <span>
-                    This thing comes fully loaded.
-                    AM/FM radio, reclining bucket seats, and... power windows.
-                    What do they got in there?
-                  </span>
-                </div>
-              </div>
-              <div class="button-wrapper">
-                <a target="_blank" href="https://tet.lv" data-form-link="https://tet.lv" tabindex="-1">
-                  <div class="button">
-                    <tet-button class="tet-button" theme="light">Button</tet-button>
-                    <style>.tet-button {--button-width: 10rem;}</style>
-                  </div>
-                </a>
-                <div class="description-wrapper js-resize-divide-slot">
-                  <slot name="description-slot" />
-                </div>
-                <div class="secondary-link tet-link center"><a target="_blank" href="www.tet.lv">Secondary link</a></div>
-              </div>
-            </div>
-            <div class="data-hidden">
-              <div data-attribute="hero-title">Hero title</div>
-              <div data-attribute="main-title">Title</div>
-              <div data-attribute="sub-title">Subtitle</div>
-              <div data-attribute="price">29,99</div>
-              <div data-attribute="old-price">39,50</div>
-              <div data-attribute="term">
-                Līgums uz 24 mēnešiem
-              </div>
-              <div data-attribute="term-text"></div>
-              <div data-attribute="helper">
-                This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. What do they got in there?
-              </div>
-              <div data-attribute="description">
-                <slot name="description-slot" />
-              </div>
-              <div data-attribute="custom-slot">
-                <slot name="custom-slot" />
-              </div>
-              <div data-attribute="bullet-points">
-                <div>Bulletpoint title1</div>
-                <div>Bulletpoint title2</div>
-                <div>Bulletpoint title3</div>
-              </div>
-              <div data-attribute="divided-information">
-                <slot name="divided-information-slot" />
-              </div>
-              <div data-attribute="price-prefix">no</div>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-compare-card>
-    `);
-    });
-    it("renders card tet-tv-plus can't select", async () => {
-        const page = await newSpecPage({
-            components: [TetCompareCard],
-            template: () => {
-                return h("tet-compare-card", { class: "tet-compare-card", id: "my-card", theme: "tet-tv-plus", options: OPTIONS });
-            },
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-compare-card class="tet-compare-card" id="my-card">
-        <mock:shadow-root>
-          <div class="card full-height regular tet-tv-plus">
-            <div class="best-choice-title center">Labākā izvēle</div>
-            <div class="image-wrapper none"></div>
-            <div class="compare-card-half-60">
-              <div class="js-resize-title title-wrapper" part="compare-card-title-wrapper">
-                <div class="title-wrapper-inner">
-                  <h3 class="hero-title">Hero title</h3>
-                  <h3 class="main-title">Title</h3>
-                  <div class="sub-title">Subtitle
-                    <div class="info-item">!
-                      <tet-tooltip>Tooltip information</tet-tooltip>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="content-wrapper js-resize-content">
-              <div class="custom-content-wrapper">
-                <slot name="custom-slot" />
-              </div>
-                <div class="bullet-points-wrapper">
-                  <div class="bullet-point">
-                    <tet-icon class="icon" name="check-circle"></tet-icon>
-                    <div>
-                      Bulletpoint title1
-                    </div>
-                  </div>
-                  <div class="bullet-point">
-                    <tet-icon class="icon" name="check-circle"></tet-icon>
-                    <div>
-                      Bulletpoint title2
-                    </div>
-                  </div>
-                  <div class="bullet-point">
-                    <tet-icon class="icon" name="check-circle"></tet-icon>
-                    <div>
-                      Bulletpoint title3
-                    </div>
-                  </div>
-                </div>
-                <div class="upsell-block">
-                  <slot name="upsell-block-slot" />
-                </div>
-              </div>
-              <div class="divided-information-wrapper js-resize-divide-slot">
-                <slot name="divided-information-slot"></slot>
-              </div>
-            </div>
-            <div class="compare-card-half-40">
-              <div class="js-resize-price price">
-                <div class="price-wrapper">
-                  <div class="price-container">
-                    <div class="price-prefix">no</div>
-                    <div class="new-price translation-none">29,99</div>
-                    <div class="currency">
-                      <span>€/mēn.</span>
-                    </div>
-                  </div>
-                  <div class="old-price-container">
-                    <div class="old-price translation-none">39,50</div>
-                    <div class="old-currency">€/mēn.</div>
-                  </div>
-                </div>
-                <div class="price-information-wrapper">
-                  <slot name="price-information-slot" />
-                </div>
-                <div class="helper">
-                  <div class="term">
-                    Līgums uz 24 mēnešiem
-                  </div>
-                  <span>
-                    This thing comes fully loaded.
-                    AM/FM radio, reclining bucket seats, and... power windows.
-                    What do they got in there?
-                  </span>
-                </div>
-              </div>
-              <div class="button-wrapper">
-                <a target="_blank" href="https://tet.lv" data-form-link="https://tet.lv" tabindex="-1" >
-                  <div class="button">
-                    <tet-button class="tet-button" theme="light">Button</tet-button>
-                    <style>.tet-button {--button-width: 10rem;}</style>
-                  </div>
-                </a>
-                <div class="description-wrapper js-resize-divide-slot">
-                  <slot name="description-slot" />
-                </div>
-                <div class="secondary-link tet-link center"><a target="_blank" href="www.tet.lv">Secondary link</a></div>
-              </div>
-            </div>
-            <div class="data-hidden">
-              <div data-attribute="hero-title">Hero title</div>
-              <div data-attribute="main-title">Title</div>
-              <div data-attribute="sub-title">Subtitle</div>
-              <div data-attribute="price">29,99</div>
-              <div data-attribute="old-price">39,50</div>
-              <div data-attribute="term">
-                Līgums uz 24 mēnešiem
-              </div>
-              <div data-attribute="term-text"></div>
-              <div data-attribute="helper">
-                This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. What do they got in there?
-              </div>
-              <div data-attribute="description">
-                <slot name="description-slot" />
-              </div>
-              <div data-attribute="custom-slot">
-                <slot name="custom-slot" />
-              </div>
-              <div data-attribute="bullet-points">
-                <div>Bulletpoint title1</div>
-                <div>Bulletpoint title2</div>
-                <div>Bulletpoint title3</div>
-              </div>
-              <div data-attribute="divided-information">
-                <slot name="divided-information-slot" />
-              </div>
-              <div data-attribute="price-prefix">no</div>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-compare-card>
-    `);
-    });
-});

package/dist/collection/components/advanced/cards/tet-compare-card-v2/test/tet-compare-card-v2.spec.js

@@ -1,40 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetCompareCardV2 } from "../tet-compare-card-v2";
-// This should match your actual CompareCardInterface and any required fields for your component to render without runtime/TS errors.
-const OPTIONS = [{
-        productCode: 'PD_TELCO_NETFLIX_PACKAGE_A_STANDARD_4G',
-        mainTitle: 'Title',
-        currency: '€/mēn.',
-        price: '29.99',
-        priceDescription: 'Īpašā cena spēkā jauniem klientiem pirmos 24 mēnešus, pēc tam - tā brīža standarta cena.',
-        oldPrice: '39.5',
-        link: 'https://tet.lv',
-        linkOpenBlank: true,
-        secondaryLink: 'www.tet.lv',
-        secondaryLinkText: 'Secondary link',
-        pricePrefix: 'no',
-        secondaryLinkOpenBlank: true,
-        preselected: true,
-        keys: ['someKey'],
-        bonuses: []
-    }];
-it('renders best choice card light', async () => {
-    const page = await newSpecPage({
-        components: [TetCompareCardV2],
-        template: () => (h("tet-compare-card-v2", { class: "tet-compare-card-v2", id: "my-card", bestChoice: true, options: OPTIONS, cardType: "dropdown", benefitTitle: "Bonusi" })),
-    });
-    page.rootInstance.allProductData = {
-        'PD_TELCO_NETFLIX_PACKAGE_A_STANDARD_4G': {
-            name: { lv: "Title" },
-            attributes: [],
-            contractTerms: [{ amount: 29.99, term: 0 }],
-            formUrl: { lv: 'https://tet.lv/' }
-        }
-    };
-    page.rootInstance.selectedProductCode = 'PD_TELCO_NETFLIX_PACKAGE_A_STANDARD_4G';
-    page.rootInstance.showLoader = false;
-    await page.waitForChanges();
-    expect(page.root.shadowRoot.innerHTML).toContain('Title');
-    expect(page.root.shadowRoot.querySelector('.card')).toBeTruthy();
-});

package/dist/collection/components/advanced/cards/tet-compare-cards/test/tet-compare-cards.spec.js

@@ -1,65 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetCompareCards } from "../tet-compare-cards";
-const DATA = [
-    {
-        theme: 'tet-tv-plus',
-        bestChoice: false
-    },
-    {
-        theme: 'classic',
-        bestChoice: true
-    },
-    {
-        theme: 'tet-tv',
-        bestChoice: false
-    }
-];
-describe('tet-compare-cards', () => {
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetCompareCards],
-            template: () => {
-                return h("tet-compare-cards", { data: DATA });
-            }
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-compare-cards class="must-initialize">
-        <mock:shadow-root>
-          <div class="tet-compare-cards-wrapper">
-            <div class="cards default">
-              <tet-compare-card class="tet-compare-card" index="0" theme="tet-tv-plus">
-                <div slot="image-slot">
-                  <img alt="" style="width: 100%;">
-                </div>
-                <div slot="logo-slot">
-                  <img alt="" style="width: 100%;">
-                </div>
-                <div slot="description-slot"></div>
-              </tet-compare-card>
-              <tet-compare-card best-choice="" class="tet-compare-card" index="1" theme="classic">
-                <div slot="image-slot">
-                  <img alt="" style="width: 100%;">
-                </div>
-                <div slot="logo-slot">
-                  <img alt="" style="width: 100%;">
-                </div>
-                <div slot="description-slot"></div>
-              </tet-compare-card>
-              <tet-compare-card class="tet-compare-card" index="2" theme="tet-tv">
-                <div slot="image-slot">
-                  <img alt="" style="width: 100%;">
-                </div>
-                <div slot="logo-slot">
-                  <img alt="" style="width: 100%;">
-                </div>
-                <div slot="description-slot"></div>
-              </tet-compare-card>
-              </div>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-compare-cards>
-    `);
-    });
-});