@shopgate/pwa-common 7.32.0-beta.2 → 7.32.0-beta.20

package/components/Grid/spec.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Grid from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<Grid />', () => {
-  it('should render without any further props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Grid, {}));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should be able to render a custom tag', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Grid, {
-      component: "article"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.type()).toEqual('article');
-  });
-  it('should add custom classes on demand', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Grid, {
-      className: "custom-class-name"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.hasClass('custom-class-name')).toEqual(true);
-  });
-});

package/components/HtmlSanitizer/spec.js

@@ -1,229 +0,0 @@
-/** @jest-environment jsdom */
-
-import React from 'react';
-import { mount } from 'enzyme';
-import { embeddedMedia } from '@shopgate/pwa-common/collections';
-import HtmlSanitizer from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock("../EmbeddedMedia", () => ({
-  children
-}) => children);
-jest.mock("./connector", () => Cmp => Cmp);
-
-/**
- * @param {string} html HTML markup.
- * @param {Object} props Component props.
- * @returns {JSX.Element}
- */
-const createWrapper = (html, props = {}) => mount(/*#__PURE__*/_jsx(HtmlSanitizer, {
-  navigate: () => {},
-  ...props,
-  children: html
-}));
-describe('<HtmlSanitizer />', () => {
-  let embeddedMediaAddSpy;
-  let embeddedMediaRemoveSpy;
-  let embeddedMediaHandleCookieConsentSpy;
-  beforeEach(() => {
-    jest.clearAllMocks();
-    embeddedMediaAddSpy = jest.spyOn(embeddedMedia, 'add');
-    embeddedMediaRemoveSpy = jest.spyOn(embeddedMedia, 'remove');
-    embeddedMediaHandleCookieConsentSpy = jest.spyOn(embeddedMedia, 'handleCookieConsent');
-  });
-  it('should render the HtmlSanitizer', () => {
-    /**
-     * The value for html is the HTML-escaped equivalent of the following:
-     * <h1>Hello World!</h1>
-     * @type {string}
-     */
-    const html = '&lt;h1&gt;Hello World!&lt;/h1&gt;';
-    const wrapper = createWrapper(html, {
-      decode: true
-    });
-
-    // Test result of dangerouslySetInnerHTML.
-    expect(wrapper.html()).toEqual('<div class="common__html-sanitizer"><h1>Hello World!</h1></div>');
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-  it('should add and remove handlers for embedded media', () => {
-    const wrapper = createWrapper('<div></div>', {
-      decode: true
-    });
-    const ref = wrapper.instance().htmlContainer.current;
-    expect(embeddedMediaAddSpy).toHaveBeenCalledTimes(1);
-    expect(embeddedMediaAddSpy).toHaveBeenCalledWith(ref);
-    expect(embeddedMediaRemoveSpy).toHaveBeenCalledTimes(0);
-    wrapper.setProps({
-      children: '<span></span>'
-    });
-    expect(embeddedMediaAddSpy).toHaveBeenCalledTimes(2);
-    expect(embeddedMediaAddSpy).toHaveBeenCalledWith(ref);
-    expect(embeddedMediaRemoveSpy).toHaveBeenCalledTimes(0);
-    wrapper.unmount();
-    expect(embeddedMediaAddSpy).toHaveBeenCalledTimes(2);
-    expect(embeddedMediaRemoveSpy).toHaveBeenCalledTimes(1);
-    expect(embeddedMediaRemoveSpy).toHaveBeenCalledWith(ref);
-  });
-  it('strips out images with relative paths', () => {
-    const html = `
-      <div>
-      <style>a { color: red }</style>
-        <a href="foo">
-          <img src="bar.jpg" />
-        </a>
-      </div>
-    `;
-    const wrapper = createWrapper(html);
-    expect(wrapper.html()).not.toContain('<img');
-    expect(wrapper.html()).toContain('<style>');
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-  it('should move style blocks out of the content', () => {
-    const html = `
-      <div>
-        <style>a { color: red }</style>
-        <a href="foo">
-          <img src="bar.jpg" />
-        </a>
-      </div>
-    `;
-    const wrapper = createWrapper(html, {
-      processStyles: true
-    });
-    expect(wrapper.html()).not.toContain('<style>');
-  });
-  it('does not strip out images with absolute paths', () => {
-    const html = `
-      <div>
-        <a href="foo">
-          <img src="http://google.de/bar.jpg" />
-        </a>
-      </div>
-    `;
-    const wrapper = createWrapper(html);
-    expect(wrapper.html()).toContain('<img');
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-  it('strips out the script tags', () => {
-    /**
-     * The value for html is the HTML-escaped equivalent of the following:
-     * <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
-     * <script type="text/javascript">var x = 42;</script>
-     * <p>Foo Bar</p>
-     * <script>var y = 23;</script>
-     * @type {string}
-     */
-    const html = '&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt;var x = 42;&lt;/script&gt; &lt;p&gt;Foo Bar&lt;/p&gt; &lt;script&gt;var y = 23;&lt;/script&gt;';
-    const wrapper = createWrapper(html, {
-      decode: true
-    });
-
-    // Test result of dangerouslySetInnerHTML.
-    expect(wrapper.html()).toEqual('<div class="common__html-sanitizer">  <p>Foo Bar</p> </div>');
-    expect(wrapper).toMatchSnapshot();
-  });
-  describe('Link handling', () => {
-    const mockedHandleClick = jest.fn();
-    beforeEach(() => {
-      mockedHandleClick.mockClear();
-    });
-    it('follows a link from a plain <a>', () => {
-      // Create a real container element in the current document
-      const attachNode = document.createElement('div');
-      document.body.appendChild(attachNode);
-      const html = '&lt;a id=&quot;link&quot; href=&quot;#follow-me-and-everything-is-alright&quot;&gt;Plain Link&lt;/a&gt;';
-      const wrapper = mount(/*#__PURE__*/_jsx(HtmlSanitizer, {
-        decode: true,
-        settings: {
-          handleClick: mockedHandleClick
-        },
-        navigate: () => {},
-        children: html
-      }), {
-        attachTo: attachNode
-      });
-      const aTag = attachNode.getElementsByTagName('a')[0];
-      aTag.closest = () => aTag;
-      const event = {
-        target: aTag,
-        preventDefault: () => {}
-      };
-      wrapper.instance().handleClick(event);
-      expect(mockedHandleClick).toHaveBeenCalledTimes(1);
-      expect(mockedHandleClick).toHaveBeenCalledWith('#follow-me-and-everything-is-alright', '');
-      wrapper.unmount();
-      attachNode.remove();
-    });
-    it('follows a link from a <a> with other HTML inside', () => {
-      const attachNode = document.createElement('div');
-      document.body.appendChild(attachNode);
-      const html = '&lt;a id=&quot;link&quot; target=&quot;_blank&quot; href=&quot;#I-ll-be-the-one-to-tuck-you-in-at-night&quot;&gt;&lt;span&gt;Span Link&lt;/span&gt;&lt;/a&gt;';
-      const wrapper = mount(/*#__PURE__*/_jsx(HtmlSanitizer, {
-        decode: true,
-        settings: {
-          handleClick: mockedHandleClick
-        },
-        navigate: () => {},
-        children: html
-      }), {
-        attachTo: attachNode
-      });
-      const aTag = attachNode.getElementsByTagName('a')[0];
-      const spanTag = attachNode.getElementsByTagName('span')[0];
-      spanTag.closest = () => aTag;
-      const event = {
-        target: spanTag,
-        preventDefault: () => {}
-      };
-      wrapper.instance().handleClick(event);
-      expect(mockedHandleClick).toHaveBeenCalledTimes(1);
-      expect(mockedHandleClick).toHaveBeenCalledWith('#I-ll-be-the-one-to-tuck-you-in-at-night', '_blank');
-    });
-  });
-  describe('Cookie consent handling', () => {
-    it('should invoke handleCookieConsent method of embedded media with default cookie consent settings', () => {
-      createWrapper('<div></div>', {
-        decode: true
-      });
-      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);
-      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document), {
-        comfortCookiesAccepted: false,
-        statisticsCookiesAccepted: false
-      });
-    });
-    it('should invoke handleCookieConsent method of embedded media with accepted comfort cookies', () => {
-      createWrapper('<div></div>', {
-        decode: true,
-        comfortCookiesAccepted: true
-      });
-      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);
-      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document), {
-        comfortCookiesAccepted: true,
-        statisticsCookiesAccepted: false
-      });
-    });
-    it('should invoke handleCookieConsent method of embedded media with accepted statistics cookies', () => {
-      createWrapper('<div></div>', {
-        decode: true,
-        statisticsCookiesAccepted: true
-      });
-      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);
-      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document), {
-        comfortCookiesAccepted: false,
-        statisticsCookiesAccepted: true
-      });
-    });
-    it('should invoke handleCookieConsent method of embedded media with all cookies accepted', () => {
-      createWrapper('<div></div>', {
-        decode: true,
-        comfortCookiesAccepted: true,
-        statisticsCookiesAccepted: true
-      });
-      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledTimes(1);
-      expect(embeddedMediaHandleCookieConsentSpy).toHaveBeenCalledWith(expect.any(Document), {
-        comfortCookiesAccepted: true,
-        statisticsCookiesAccepted: true
-      });
-    });
-  });
-});

package/components/I18n/components/FormatDate/spec.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { i18n } from '@shopgate/engage/core';
-import I18n from "../../index";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-jest.unmock('@shopgate/engage/core/helpers/i18n');
-describe('<FormatDate />', () => {
-  const locales = {
-    greeting: 'Hello {date}'
-  };
-  const lang = 'en-US';
-  const timestamp = 123456789000;
-  const formattedDate = 'Nov 29, 1973';
-  const format = 'medium';
-  i18n.init({
-    locales,
-    lang
-  });
-  describe('Given the component was mounted to the DOM', () => {
-    let renderedElement;
-    it('should match snapshot', () => {
-      renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
-        children: /*#__PURE__*/_jsxs("div", {
-          children: [/*#__PURE__*/_jsx("span", {
-            className: "only-date",
-            children: /*#__PURE__*/_jsx(I18n.Date, {
-              timestamp: timestamp,
-              format: format
-            })
-          }), /*#__PURE__*/_jsx("span", {
-            className: "text-with-date",
-            children: /*#__PURE__*/_jsx(I18n.Text, {
-              string: "greeting",
-              children: /*#__PURE__*/_jsx(I18n.Date, {
-                forKey: "date",
-                timestamp: timestamp,
-                format: format
-              })
-            })
-          })]
-        })
-      }));
-      expect(renderedElement).toMatchSnapshot();
-    });
-    it('should render formatted date', () => {
-      const text = renderedElement.find('.only-date').text();
-      expect(text).toBe(formattedDate);
-    });
-    it('should render within translated text', () => {
-      const text = renderedElement.find('.text-with-date').text();
-      expect(text).toBe(`Hello ${formattedDate}`);
-    });
-  });
-});

package/components/I18n/components/FormatNumber/spec.js

@@ -1,51 +0,0 @@
-import "core-js/modules/es.array.includes.js";
-import React from 'react';
-import { mount } from 'enzyme';
-import { i18n } from '@shopgate/engage/core';
-import I18n from "../../index";
-import FormatNumber from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.unmock('@shopgate/engage/core/helpers/i18n');
-describe('<FormatNumber>', () => {
-  describe('i18n not ready', () => {
-    it('should return same number and className when i18n is not ready', () => {
-      const component = mount(/*#__PURE__*/_jsx(FormatNumber, {
-        number: 1,
-        fractions: 2,
-        className: "some-class"
-      }));
-      expect(component.html().includes('some-class')).toBe(true);
-      expect(component.text().includes('1')).toBe(true);
-      expect(component).toMatchSnapshot();
-    });
-  });
-  describe('i18n ready', () => {
-    i18n.init({
-      locales: {},
-      lang: 'en-US'
-    });
-    const pairs = [[1, '1.00', 2], [0.1, '0.10', 2], [1, '1.000', 3], [1, '1', 0]];
-
-    /**
-     * Makes a component.
-     * @param {number} number Number
-     * @param {number} fractions Decimal points.
-     * @returns {Object}
-     */
-    const makeComponent = (number, fractions) => mount(/*#__PURE__*/_jsx(I18n.Provider, {
-      children: /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(FormatNumber, {
-          number: number,
-          fractions: fractions
-        })
-      })
-    }));
-    pairs.forEach(([input, expexted, fractions]) => {
-      it(`should format ${input} into ${expexted}`, () => {
-        const component = makeComponent(input, fractions);
-        expect(component.text().includes(`${expexted}`)).toBe(true);
-        expect(component).toMatchSnapshot();
-      });
-    });
-  });
-});

package/components/I18n/components/FormatPrice/spec.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { i18n } from '@shopgate/engage/core';
-import I18n from "../../index";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-jest.unmock('@shopgate/engage/core/helpers/i18n');
-describe('<FormatPrice />', () => {
-  const locales = {
-    greeting: 'Hello {price}'
-  };
-  const price = 1234.56;
-  const formattedPrice = '€1,234.56';
-  const currency = 'EUR';
-  const lang = 'en-US';
-  i18n.init({
-    locales,
-    lang
-  });
-  describe('Given the component was mounted to the DOM', () => {
-    let renderedElement;
-    it('should match snapshot', () => {
-      renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
-        children: /*#__PURE__*/_jsxs("div", {
-          children: [/*#__PURE__*/_jsx("span", {
-            className: "only-price",
-            children: /*#__PURE__*/_jsx(I18n.Price, {
-              price: price,
-              currency: currency
-            })
-          }), /*#__PURE__*/_jsx("span", {
-            className: "text-with-price",
-            children: /*#__PURE__*/_jsx(I18n.Text, {
-              string: "greeting",
-              children: /*#__PURE__*/_jsx(I18n.Price, {
-                forKey: "price",
-                price: price,
-                currency: currency
-              })
-            })
-          })]
-        })
-      }));
-      expect(renderedElement).toMatchSnapshot();
-    });
-    it('should render formatted price', () => {
-      const text = renderedElement.find('.only-price').text();
-      expect(text).toBe(formattedPrice);
-    });
-    it('should render within translated text', () => {
-      const text = renderedElement.find('.text-with-price').text();
-      expect(text).toBe(`Hello ${formattedPrice}`);
-    });
-  });
-});

package/components/I18n/components/FormatTime/spec.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { i18n } from '@shopgate/engage/core';
-import I18n from "../../index";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-jest.unmock('@shopgate/engage/core/helpers/i18n');
-describe('<FormatTime />', () => {
-  const locales = {
-    greeting: 'Hello {time}'
-  };
-  const timestamp = new Date('Dec 25, 1999 04:25:45').getTime();
-  const formattedTime = '4:25:45 AM';
-  const format = 'medium';
-  const lang = 'en-US';
-  i18n.init({
-    locales,
-    lang
-  });
-  describe('Given the component was mounted to the DOM', () => {
-    // TODO: Handle snapshot test.
-    const renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
-      children: /*#__PURE__*/_jsxs("div", {
-        children: [/*#__PURE__*/_jsx("span", {
-          className: "only-time",
-          children: /*#__PURE__*/_jsx(I18n.Time, {
-            timestamp: timestamp,
-            format: format
-          })
-        }), /*#__PURE__*/_jsx("span", {
-          className: "text-with-time",
-          children: /*#__PURE__*/_jsx(I18n.Text, {
-            string: "greeting",
-            children: /*#__PURE__*/_jsx(I18n.Time, {
-              forKey: "time",
-              timestamp: timestamp,
-              format: format
-            })
-          })
-        })]
-      })
-    }));
-    it('should render formatted time', () => {
-      const text = renderedElement.find('.only-time').text();
-      expect(text).toBe(formattedTime);
-    });
-    it('should render within translated text', () => {
-      const text = renderedElement.find('.text-with-time').text();
-      expect(text).toBe(`Hello ${formattedTime}`);
-    });
-  });
-});

package/components/I18n/components/I18nProvider/spec.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { i18n as i18nHelper } from '@shopgate/engage/core';
-import I18nProvider from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.unmock('@shopgate/engage/core/helpers/i18n');
-describe('<I18nProvider />', () => {
-  const locales = {
-    greeting: 'Guten Tag {name}'
-  };
-  const lang = 'de-DE';
-  i18nHelper.init({
-    locales,
-    lang
-  });
-  describe('Given the component was mounted to the DOM', () => {
-    let renderedElement;
-    let renderedInstance;
-    it('should match snapshot', () => {
-      renderedElement = shallow(/*#__PURE__*/_jsx(I18nProvider, {}));
-      renderedInstance = renderedElement.instance();
-      expect(renderedElement).toMatchSnapshot();
-    });
-    it('should provide access to i18n via context', () => {
-      const {
-        i18n
-      } = renderedInstance.getChildContext();
-      expect(i18n).toEqual(renderedInstance.getI18nInstance);
-    });
-    it('should translate when calling an instance method', () => {
-      const {
-        __
-      } = renderedInstance.getI18nInstance();
-      const translated = __('greeting', {
-        name: 'Test'
-      });
-      expect(translated).toBe('Guten Tag Test');
-    });
-  });
-});

package/components/I18n/components/Placeholder/spec.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { i18n } from '@shopgate/engage/core';
-import I18n from "../../index";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-jest.unmock('@shopgate/engage/core/helpers/i18n');
-describe('<Placeholder />', () => {
-  const locales = {
-    greeting: 'Hello {world}'
-  };
-  const lang = 'en-US';
-  i18n.init({
-    locales,
-    lang
-  });
-  describe('Given the component was mounted to the DOM', () => {
-    let renderedElement;
-    it('should render', () => {
-      renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
-        children: /*#__PURE__*/_jsxs(I18n.Text, {
-          string: "greeting",
-          children: [/*#__PURE__*/_jsx(I18n.Placeholder, {
-            forKey: "world",
-            children: /*#__PURE__*/_jsx("strong", {
-              children: "WORLD"
-            })
-          }), "/"]
-        })
-      }));
-      expect(renderedElement).toMatchSnapshot();
-    });
-    it('should render with a placeholder text', () => {
-      const text = renderedElement.find('strong').text();
-      expect(text).toBe('WORLD');
-    });
-  });
-});

package/components/I18n/components/Translate/spec.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { i18n } from '@shopgate/engage/core';
-import I18n from "../../index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.unmock('@shopgate/engage/core/helpers/i18n');
-describe('<Translate />', () => {
-  const locales = {
-    greeting: 'Hello {name}'
-  };
-  i18n.init({
-    locales,
-    lang: 'en-US'
-  });
-  describe('Given the component was mounted to the DOM', () => {
-    let renderedElement;
-    it('should match snapshot', () => {
-      renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
-        children: /*#__PURE__*/_jsx(I18n.Text, {
-          string: "greeting",
-          params: {
-            name: 'Test'
-          }
-        })
-      }));
-      expect(renderedElement).toMatchSnapshot();
-    });
-    it('should render translated text', () => {
-      const text = renderedElement.find(I18n.Text).text();
-      expect(text).toBe('Hello Test');
-    });
-  });
-});