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

package/dist/collection/components/simple/text-blocks/tet-dialog/test/tet-dialog.spec.js

@@ -1,84 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetDialog } from "../tet-dialog";
-import { h } from "@stencil/core";
-import { MockHTMLElement } from "@stencil/core/mock-doc";
-// @ts-ignore until issue with HTMLDialogElement in jsdom is resolved https://github.com/jsdom/jsdom/issues/3294
-MockHTMLElement.prototype.showModal = jest.fn();
-// @ts-ignore
-MockHTMLElement.prototype.close = jest.fn();
-const props = {
-    isOpen: true,
-    headerTitle: 'Title',
-    closeOnEscape: false,
-    closeOnOverlayClick: false,
-    titleId: 'dialog-title'
-};
-describe('tet-dialog', () => {
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetDialog],
-            template: () => h("tet-dialog", Object.assign({}, props))
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-dialog is-open="">
-        <mock:shadow-root>
-          <dialog>
-            <div part="overlay" class="dialog--theme-classic dialog__overlay dialog__overlay--visible">
-              <div part="dialog" class="dialog dialog--theme-classic" aria-labelledby="dialog-title" >
-                <div part="header" class="dialog__header">
-                  <slot name="header">
-                    <h2 class="dialog__title" id="dialog-title">Title</h2>
-                  </slot>
-                  <button class="dialog__close-button" aria-label="components-availability-close">
-                    <tet-icon class="dialog__close-icon" name="close" aria-hidden="true"></tet-icon>
-                  </button>
-                </div>
-                <div part="body" class="dialog__body">
-                  <slot></slot>
-                </div>
-                <div part="footer" class="dialog__footer dialog__footer--left">
-                  <slot name="footer"></slot>
-                </div>
-              </div>
-            </div>
-          </dialog>
-        </mock:shadow-root>
-      </tet-dialog>
-    `);
-    });
-    it('renders with content', async () => {
-        const page = await newSpecPage({
-            components: [TetDialog],
-            template: () => (h("tet-dialog", Object.assign({}, props), h("h1", null, "Hello!"), h("p", null, "This is some \"body\" content."), h("p", { slot: "footer" }, "And this is some footer content!")))
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-dialog is-open="">
-        <mock:shadow-root>
-          <dialog>
-            <div part="overlay" class="dialog--theme-classic dialog__overlay dialog__overlay--visible">
-              <div part="dialog" class="dialog dialog--theme-classic" aria-labelledby="dialog-title" >
-                <div part="header" class="dialog__header">
-                  <slot name="header">
-                    <h2 class="dialog__title" id="dialog-title">Title</h2>
-                  </slot>
-                  <button class="dialog__close-button" aria-label="components-availability-close">
-                    <tet-icon class="dialog__close-icon" name="close" aria-hidden="true"></tet-icon>
-                  </button>
-                </div>
-                <div part="body" class="dialog__body">
-                  <slot></slot>
-                </div>
-                <div part="footer" class="dialog__footer dialog__footer--left">
-                  <slot name="footer"></slot>
-                </div>
-              </div>
-            </div>
-          </dialog>
-        </mock:shadow-root>
-        <h1>Hello!</h1>
-        <p>This is some "body" content.</p>
-        <p slot="footer">And this is some footer content!</p>
-      </tet-dialog>
-    `);
-    });
-});

package/dist/collection/components/simple/text-blocks/tet-inline-message/test/tet-inline-message.spec.js

@@ -1,22 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetInlineMessage } from "../tet-inline-message";
-describe('tet-inline-message', () => {
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetInlineMessage],
-            html: `<tet-inline-message theme="dark"></tet-inline-message>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-inline-message theme="dark">
-        <mock:shadow-root>
-          <div class="container dark attention">
-           <tet-icon class="container__icon" name="attention"></tet-icon>
-           <div class="content">
-             <slot name="title"></slot>
-             <slot name="description"></slot>
-           </div>
-        </mock:shadow-root>
-      </tet-inline-message>
-    `);
-    });
-});

package/dist/collection/components/simple/text-blocks/tet-notification/test/tet-notification.spec.js

@@ -1,88 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetNotification } from "../tet-notification";
-describe('tet-notification', () => {
-    it('type of info default', async () => {
-        const page = await newSpecPage({
-            components: [TetNotification],
-            html: `<tet-notification header-title="Title content" content="Message content"></tet-notification>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-notification header-title="Title content" content="Message content">
-        <mock:shadow-root>
-          <div class="notification classic">
-            <div class="item info">
-              <div class="header">
-                <tet-icon class="message-icon notification-icon"></tet-icon>
-                <div class="title">Title content</div>
-                <div class='close-icon-wrapper' tabindex="0">
-                  <tet-icon class="close-icon notification-icon" name="close"></tet-icon>
-                </div>
-              </div>
-              <div class="content">
-                <span>Message content</span>
-                <div>
-                  <slot name="button"></slot>
-                </div>
-              </div>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-notification>
-    `);
-    });
-    it('type of warning default - close button disabled', async () => {
-        const page = await newSpecPage({
-            components: [TetNotification],
-            html: `<tet-notification type="warning"></tet-notification>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-notification type="warning">
-        <mock:shadow-root>
-          <div class="notification classic">
-            <div class="item warning">
-              <div class="header">
-                <tet-icon class="message-icon notification-icon"></tet-icon>
-                <div class="title"></div>
-              </div>
-              <div class="content">
-                <span></span>
-                <div>
-                  <slot name="button"></slot>
-                </div>
-              </div>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-notification>
-    `);
-    });
-    it('type of warning custom - close button enabled', async () => {
-        const page = await newSpecPage({
-            components: [TetNotification],
-            html: `<tet-notification type="warning" allow-close="true"></tet-notification>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-notification type="warning" allow-close="true">
-        <mock:shadow-root>
-          <div class="notification classic">
-            <div class="item warning">
-              <div class="header">
-                <tet-icon class="message-icon notification-icon"></tet-icon>
-                <div class="title"></div>
-                <div class="close-icon-wrapper" tabindex="0">
-                  <tet-icon class="close-icon notification-icon" name="close"></tet-icon>
-                </div>
-              </div>
-              <div class="content">
-                <span></span>
-                <div>
-                  <slot name="button"></slot>
-                </div>
-              </div>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-notification>
-    `);
-    });
-});

package/dist/collection/components/simple/text-blocks/tet-tooltip/test/tet-tooltip.spec.js

@@ -1,79 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetTooltip } from "../tet-tooltip";
-describe('tet-tooltip', () => {
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetTooltip],
-            html: `<tet-tooltip></tet-tooltip>`
-        });
-        // Mock the "matches" function to remove errors in console when running tests.
-        page.rootInstance.targetElement.matches = () => false;
-        expect(page.root).toEqualHtml(`
-      <tet-tooltip style="display: none;">
-        <mock:shadow-root>
-          <div class="tooltip classic" role="tooltip" aria-hidden="true">
-            <div class="tooltip-pointer"></div>
-            <slot></slot>
-          </div>
-        </mock:shadow-root>
-      </tet-tooltip>
-    `);
-    });
-    it('displays the tooltip with correct attributes and hides it when "Escape" is pressed', async () => {
-        const page = await newSpecPage({
-            components: [TetTooltip],
-            html: `<tet-tooltip>You shall not pass!</tet-tooltip>`
-        });
-        // Mock the "matches" function to remove errors in console when running tests.
-        page.rootInstance.targetElement.matches = () => false;
-        const tooltipInstance = page.rootInstance;
-        tooltipInstance.showTooltip = true;
-        await page.waitForChanges();
-        expect(page.root).toEqualHtml(`
-      <tet-tooltip class="visible" style="display: none;">
-        <mock:shadow-root>
-          <div
-            class="tooltip classic"
-            role="tooltip"
-            aria-hidden="false"
-            aria-live="polite"
-          >
-            <div class="tooltip-pointer"></div>
-            <slot></slot>
-          </div>
-        </mock:shadow-root>
-        You shall not pass!
-      </tet-tooltip>
-    `);
-        const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape' });
-        document.body.dispatchEvent(escapeEvent);
-        await page.waitForChanges();
-        expect(page.root).toEqualHtml(`
-      <tet-tooltip class="hidden-quick" style="display: none;">
-        <mock:shadow-root>
-          <div class="tooltip classic" role="tooltip" aria-hidden="true">
-            <div class="tooltip-pointer"></div>
-            <slot></slot>
-          </div>
-        </mock:shadow-root>
-        You shall not pass!
-      </tet-tooltip>
-    `);
-    });
-    it('renders tooltip with dark theme', async () => {
-        const page = await newSpecPage({
-            components: [TetTooltip],
-            html: `<tet-tooltip theme="dark"></tet-tooltip>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-tooltip style="display: none;" theme="dark">
-        <mock:shadow-root>
-          <div class="tooltip dark" role="tooltip" aria-hidden="true">
-            <div class="tooltip-pointer"></div>
-            <slot></slot>
-          </div>
-        </mock:shadow-root>
-      </tet-tooltip>
-    `);
-    });
-});

package/dist/collection/components/views/tet-b2b-configurator/partials/tet-b2b-configurator-cart/test/tet-b2b-configurator-cart.spec.js

@@ -1,50 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetB2bConfiguratorCart } from "../tet-b2b-configurator-cart";
-describe('tet-b2b-configurator-cart', () => {
-    beforeEach(() => {
-        const mockIntersectionObserver = jest.fn();
-        mockIntersectionObserver.mockReturnValue({
-            observe: () => null,
-            unobserve: () => null,
-            disconnect: () => null
-        });
-        global.IntersectionObserver = mockIntersectionObserver;
-    });
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetB2bConfiguratorCart],
-            html: `<tet-b2b-configurator-cart></tet-b2b-configurator-cart>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-b2b-configurator-cart>
-        <mock:shadow-root>
-          <div class="cart edit light">
-            <tet-accordion 
-              class="cart__accordion cart__accordion--edit cart__accordion--rounded" 
-              header="components-b2b-cart-title" 
-              isopen="" 
-              theme="light" 
-              transparentbackground="" 
-              indicatordirection="down" 
-            >
-              <div class="cart__title--edit">
-                components-b2b-cart-title
-              </div>
-              <div class="cart__content cart__content--edit">
-                <div class="empty-cart">
-                  <tet-icon class="empty-cart__icon" name="tc-empty" theme="light"></tet-icon>
-                  <div class="empty-cart__title">
-                    components-b2b-cart-empty-title
-                  </div>
-                  <div class="empty-cart__description">
-                    components-b2b-cart-empty-description
-                  </div>
-                </div>
-              </div>
-            </tet-accordion>
-          </div>
-        </mock:shadow-root>
-      </tet-b2b-configurator-cart>
-    `);
-    });
-});

package/dist/collection/components/views/tet-b2b-configurator/test/tet-b2b-configurator.spec.js

@@ -1,136 +0,0 @@
-const mockB2bConfigurator = jest.fn();
-jest.mock('@services/api/services/b2b-configurator/b2b-configurator', () => ({
-    b2bConfigurator: mockB2bConfigurator
-}));
-import { newSpecPage } from "@stencil/core/testing";
-import { TetB2bConfigurator } from "../tet-b2b-configurator";
-import { b2bConfiguratorMockResponse } from "./mocks/b2bConfigurator";
-import pageLoadingHtml from "./mocks/page-loading";
-import pageLoadedHtml from "./mocks/page-loaded";
-import * as store from "../b2b-configurator.store";
-const getSpecPage = () => newSpecPage({
-    components: [TetB2bConfigurator],
-    html: `<tet-b2b-configurator></tet-b2b-configurator>`
-});
-describe('tet-b2b-configurator', () => {
-    let page;
-    let instance;
-    let cartBlockStateChangeMockFn;
-    let addToCartspy;
-    let dialogOpenMockFn;
-    let checkoutFormOpenMockFn;
-    let checkoutFormCloseMockFn;
-    let submitSpy;
-    let resetCartspy;
-    let accordionOpenMockFn;
-    let accordionCloseMockFn;
-    beforeEach(async () => {
-        jest.useFakeTimers({ advanceTimers: true });
-        mockB2bConfigurator.mockClear();
-        mockB2bConfigurator.mockResolvedValue(b2bConfiguratorMockResponse);
-        page = await getSpecPage();
-        jest.runAllTimers();
-        await page.waitForChanges();
-        await page.waitForChanges();
-        instance = page.rootInstance;
-        cartBlockStateChangeMockFn = jest.fn();
-        page.root.shadowRoot.querySelector('tet-b2b-configurator-cart').changeBlockState = cartBlockStateChangeMockFn;
-        addToCartspy = jest.spyOn(store, 'addToCart');
-        dialogOpenMockFn = jest.fn();
-        page.root.shadowRoot.querySelectorAll('tet-dialog').forEach((element) => (element.open = dialogOpenMockFn));
-        checkoutFormOpenMockFn = jest.fn();
-        checkoutFormCloseMockFn = jest.fn();
-        page.root.shadowRoot.querySelector('tet-b2b-check-out-form').open = checkoutFormOpenMockFn;
-        page.root.shadowRoot.querySelector('tet-b2b-check-out-form').close = checkoutFormCloseMockFn;
-        submitSpy = jest.spyOn(instance.b2bConfiguratorSubmit, 'emit');
-        resetCartspy = jest.spyOn(store, 'resetCart');
-        accordionOpenMockFn = jest.fn();
-        accordionCloseMockFn = jest.fn();
-        page.root.shadowRoot
-            .querySelectorAll('tet-accordion')
-            .forEach((element) => ((element.open = accordionOpenMockFn), (element.close = accordionCloseMockFn)));
-    });
-    afterEach(() => {
-        jest.useRealTimers();
-        store.dispose();
-        jest.restoreAllMocks();
-    });
-    it('Renders plceholder while loading', async () => {
-        const loadingPage = await getSpecPage();
-        const loadingPageInstance = loadingPage.rootInstance;
-        expect(loadingPage.root).toEqualHtml(pageLoadingHtml);
-        expect(loadingPageInstance.isLoading).toBe(true);
-    });
-    it('Calls API; initiates html structure, local state and store', async () => {
-        expect(page.root).toEqualHtml(pageLoadedHtml);
-        expect(mockB2bConfigurator).toHaveBeenCalledTimes(1);
-        expect(instance.isLoading).toBe(false);
-        expect(instance.activePrimaryCategoryId).toBe(1);
-        expect(instance.activeSecondaryCategoryId).toBe(11);
-        expect(store.b2bState.data).toEqual(b2bConfiguratorMockResponse);
-        expect(store.b2bState.cart.size).toBe(0);
-    });
-    it('Sets correct active categories', async () => {
-        instance['categoryClickHandler']({ detail: { id: 2 } });
-        instance['categoryClickHandler']({ detail: { id: 12 } });
-        expect(instance.activePrimaryCategoryId).toBe(2);
-        expect(instance.activeSecondaryCategoryId).toBe(12);
-    });
-    it('Sets correct active cards; resets after categry change', async () => {
-        instance['handleCardSelected']('BUSINESS_INTERNET_PACKAGE_SILVER', 1);
-        instance['handleCardSelected']('BUSINESS_M365_PACKAGE_BASIC', 12);
-        instance['handleCardSelected']('BUSINESS_M365_PACKAGE_APPS', 12);
-        expect(instance.activePrimaryCategoryId).toBe(1);
-        expect(instance.selectedPrimaryCards).toEqual(['BUSINESS_INTERNET_PACKAGE_SILVER']);
-        expect(instance.selectedSecondaryCards).toEqual(['BUSINESS_M365_PACKAGE_BASIC', 'BUSINESS_M365_PACKAGE_APPS']);
-        instance['categoryClickHandler']({ detail: { id: 2 } });
-        expect(instance.activePrimaryCategoryId).toBe(2);
-        expect(instance.selectedPrimaryCards).toEqual([]);
-    });
-    it('Sets correct products in store and changes block states', async () => {
-        const cardId = 'BUSINESS_INTERNET_PACKAGE_SILVER';
-        const detail = { cardId, count: 2 };
-        instance['handleProductCountChanged']({ detail }, 1);
-        expect(addToCartspy).toHaveBeenCalledTimes(1);
-        expect(addToCartspy).toHaveBeenCalledWith(cardId, 2);
-        expect(cartBlockStateChangeMockFn).toHaveBeenCalledTimes(2);
-        expect(store.b2bState.cart.size).toBe(1);
-        expect(store.b2bState.cart.get(cardId)).toBe(2);
-    });
-    it('Calling item removal sets item to be removed, opens modal and correctly remove item', async () => {
-        const cardId = 'BUSINESS_INTERNET_PACKAGE_SILVER';
-        instance['handleProductCountChanged']({ detail: { cardId, count: 2 } }, 1);
-        instance['handleProductCountChanged']({ detail: { cardId, count: 0 } }, 1);
-        expect(instance.itemToRemove).toBe(cardId);
-        store.removeFromCart(cardId);
-        expect(dialogOpenMockFn).toHaveBeenCalledTimes(1);
-        expect(store.b2bState.cart.size).toBe(0);
-    });
-    it('Cart checkout element is opened only if both primary and secondary category products are added', async () => {
-        const storeData = new Map().set('BUSINESS_INTERNET_PACKAGE_SILVER', 1);
-        store.b2bState['cart'] = storeData;
-        instance['checkout']();
-        expect(checkoutFormOpenMockFn).toHaveBeenCalledTimes(0);
-        storeData.set('BUSINESS_M365_PACKAGE_BASIC', 1);
-        instance['checkout']();
-        expect(checkoutFormOpenMockFn).toHaveBeenCalledTimes(1);
-    });
-    it('Correct submit data is emitted; cart is closed; success modal is opened', async () => {
-        const storeData = new Map().set('BUSINESS_INTERNET_PACKAGE_SILVER', 1);
-        store.b2bState['cart'] = storeData;
-        instance['submit']({ detail: {} });
-        const mockSubmitData = { cart: { BUSINESS_INTERNET_PACKAGE_SILVER: 1 }, contactInfo: {} };
-        expect(instance.formState).toBe('loading');
-        expect(submitSpy).toHaveBeenCalledWith(mockSubmitData);
-        expect(checkoutFormCloseMockFn).toHaveBeenCalled();
-        expect(dialogOpenMockFn).toHaveBeenCalledTimes(1);
-    });
-    it('Resets state correctly', async () => {
-        instance['checkoutAttempted'] = true;
-        instance['resetState']();
-        expect(resetCartspy).toHaveBeenCalled();
-        expect(instance['checkoutAttempted']).toBe(false);
-        expect(accordionOpenMockFn).toHaveBeenCalledTimes(1);
-        expect(accordionCloseMockFn).toHaveBeenCalledTimes(1);
-    });
-});

package/dist/collection/components/views/tet-business-lines/test/tet-business-lines.spec.js

@@ -1,23 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetBusinessLines } from "../tet-business-lines";
-describe('tet-business-lines', () => {
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetBusinessLines],
-            html: `<tet-business-lines></tet-business-lines>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-business-lines>
-        <mock:shadow-root>
-         <div class="container">
-            <div class="headings">
-              <h2 class="title">components-business-lines-title</h2>
-              <p class="full-address"></p>
-            </div>
-            <div class="business-line-wrapper"></div>
-         </div>
-       </mock:shadow-root>
-      </tet-business-lines>
-    `);
-    });
-});

package/dist/collection/components/views/tet-contact-info/test/tet-contact-info.spec.js

@@ -1,44 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetContactInfo } from "../tet-contact-info";
-describe('tet-contact-info', () => {
-    it('renders an empty Contact info block when no data provided', async () => {
-        const page = await newSpecPage({
-            components: [TetContactInfo],
-            html: `<tet-contact-info></tet-contact-info>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-contact-info>
-        <mock:shadow-root>
-          <div class="contact-info">
-            <div class="contact-info-card"></div>
-          </div>
-        </mock:shadow-root>
-      </tet-contact-info>
-    `);
-    });
-    it('renders Contact info block with "contactBlocks" props provided', async () => {
-        const page = await newSpecPage({
-            components: [TetContactInfo],
-            template: () => (h("tet-contact-info", { contactBlocks: [{ value: 'testValue', label: 'testLabel' }] })),
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-contact-info>
-        <mock:shadow-root>
-          <div class="contact-info">
-            <div class="contact-info-card">
-              <div class="contact-info-card-block">
-                <span class="contact-info-card-block-label">
-                  testLabel
-                </span>
-                <span class="contact-info-card-block-value">
-                  testValue
-                </span>
-              </div>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-contact-info>
-    `);
-    });
-});