@shopgate/pwa-common 7.31.5 → 7.31.6

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');
-    });
-  });
-});

package/components/InfiniteContainer/spec.js

@@ -1,204 +0,0 @@
-import range from 'lodash/range';
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { ITEMS_PER_LOAD } from "../../constants/DisplayOptions";
-import InfiniteContainer from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-global.console.error = jest.fn();
-const context = {
-  state: {}
-};
-describe('<InfiniteContainer />', () => {
-  let renderedElement;
-  let renderedInstance;
-  let mockLoader;
-  let MockIterator;
-  let mockItems;
-  const mockData = range(100).map(id => ({
-    id,
-    title: `Item ${id}`
-  }));
-
-  /**
-   * The view component
-   * @param {Object} props The component props.
-   */
-  const renderComponent = props => {
-    renderedElement = shallow(/*#__PURE__*/_jsx(InfiniteContainer, {
-      ...props
-    }), {
-      context
-    });
-    renderedInstance = renderedElement.instance();
-  };
-
-  /**
-   * Mocks the mapStateToProps connector.
-   * @param {number} amount The new product amount.
-   */
-  const receiveItemsByProp = amount => {
-    mockItems = mockData.slice(0, amount);
-    const nextProps = {
-      ...renderedInstance.props,
-      items: mockItems,
-      totalItems: mockData.length
-    };
-    renderedElement.setProps(nextProps);
-  };
-  beforeEach(() => {
-    mockLoader = jest.fn();
-    MockIterator = data => /*#__PURE__*/_jsx("li", {
-      children: data.title
-    }, data.id);
-  });
-  describe('Given the component was mounted to the DOM', () => {
-    beforeEach(() => {
-      renderComponent({
-        items: [],
-        loader: mockLoader,
-        iterator: MockIterator,
-        totalItems: null
-      });
-      renderedInstance.componentDidMount();
-    });
-    it('should match snapshot', () => {
-      expect(renderedElement).toMatchSnapshot();
-    });
-    it('should call the loader function', () => {
-      const [offset] = renderedInstance.state.offset;
-      expect(mockLoader).toBeCalledWith(offset);
-    });
-    describe('Given the loader requested new items', () => {
-      const mockItemsLength = 10;
-      beforeEach(() => {
-        receiveItemsByProp(mockItemsLength);
-      });
-      it('should render the loaded items', () => {
-        expect(renderedElement.find(MockIterator)).toHaveLength(mockItemsLength);
-      });
-    });
-    describe('Given the component was mounted within a scroll container', () => {
-      const mockItemsLength = 11;
-      beforeEach(() => {
-        // Receive items from initial mounting before proceeding...
-        receiveItemsByProp(mockItemsLength);
-
-        // Reset any previous calls (e.g. from componentDidMount())
-        mockLoader.mock.calls = [];
-        renderedInstance.componentDidUpdate();
-      });
-      it('should call the loader function if scrolled to the bottom', () => {
-        renderedInstance.domScrollContainer = {
-          scrollTop: 900,
-          scrollHeight: 1000,
-          clientHeight: 100
-        };
-        renderedInstance.handleLoading();
-        expect(mockLoader).toBeCalled();
-      });
-      it('should not call the loader function if the scroll position did not change', () => {
-        renderedInstance.domScrollContainer = {
-          scrollTop: 0,
-          scrollHeight: 1000,
-          clientHeight: 100
-        };
-        renderedInstance.handleLoading();
-        expect(mockLoader.mock.calls.length).toBe(0);
-      });
-    });
-    describe('Given all items have been received', () => {
-      const mockItemsLength = mockData.length;
-      beforeEach(() => {
-        receiveItemsByProp(mockItemsLength);
-      });
-      it('should expect no more items to be received', () => {
-        expect(renderedInstance.needsToReceiveItems()).toBe(false);
-      });
-      it('should keep state.awaitingItems as true if not all items are rendered', () => {
-        expect(renderedInstance.allItemsAreRendered()).toBe(false);
-        expect(renderedInstance.state.awaitingItems).toBe(true);
-        expect(renderedElement.find(MockIterator).length).toBeLessThan(mockItemsLength);
-      });
-      it('should set state.awaitingItems to false if all items are rendered', () => {
-        renderedElement.setState({
-          offset: [0, mockItemsLength]
-        });
-        renderedInstance.handleLoading();
-        expect(renderedInstance.allItemsAreRendered()).toBe(true);
-        expect(renderedInstance.state.awaitingItems).toBe(false);
-        expect(renderedElement.find(MockIterator).length).toBe(mockItemsLength);
-      });
-    });
-  });
-  describe('Given that the initialLimit is used in the correct ways', () => {
-    describe('Given that the initialLimit is used', () => {
-      it('should render with the initialLimit', () => {
-        renderComponent({
-          items: mockData,
-          loader: mockLoader,
-          iterator: MockIterator,
-          totalItems: mockData.length
-        });
-
-        // Check if the iniLimit was used
-        expect(renderedElement.find(MockIterator).length).toBe(renderedInstance.props.initialLimit);
-
-        // Reset the limit from props.initialLimit back to props.limit
-        renderedInstance.componentDidMount();
-        renderedInstance.handleLoading();
-
-        // Re-render with the new limit
-        renderedElement.update();
-
-        // Check if the correct limit was used for the second render
-        const newLimit = renderedInstance.props.initialLimit + renderedInstance.props.limit;
-        expect(renderedElement.find(MockIterator).length).toBe(newLimit);
-      });
-    });
-    describe('Given that the initialLimit is NOT used', () => {
-      it('should render without the initialLimit', () => {
-        renderComponent({
-          items: [],
-          loader: mockLoader,
-          iterator: MockIterator,
-          totalItems: null
-        });
-        renderedInstance.componentDidMount();
-        receiveItemsByProp(ITEMS_PER_LOAD);
-
-        // Check if the iniLimit wasn't used
-        expect(renderedElement).toMatchSnapshot();
-        expect(renderedElement.find(MockIterator).length).toBe(renderedInstance.props.limit);
-      });
-    });
-  });
-  describe('Given that the requestHash changes', () => {
-    it('should reset the component', () => {
-      const props = {
-        items: mockData,
-        loader: mockLoader,
-        iterator: MockIterator,
-        totalItems: mockData.length,
-        requestHash: 'default'
-      };
-      const wrapper = mount(/*#__PURE__*/_jsx(InfiniteContainer, {
-        ...props
-      }));
-      const instance = wrapper.instance();
-      instance.componentDidMount();
-      instance.domScrollContainer = document.createElement('div');
-      wrapper.setState({
-        awaitingItems: false,
-        offset: [10, 10]
-      });
-      wrapper.setProps({
-        requestHash: 'price_desc'
-      });
-      expect(wrapper.state()).toEqual({
-        offset: [0, 32],
-        awaitingItems: true,
-        itemCount: 0
-      });
-    });
-  });
-});

package/components/Input/spec.js

@@ -1,123 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import Input from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<Input />', () => {
-  it('should render a simple input field', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Input, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('input').length).toBe(1);
-  });
-  it('should render the input as password', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
-      password: true
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('input[type="password"]').length).toBe(1);
-  });
-  it('should render the input with a default value', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
-      value: "FooBar"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('input[value="FooBar"]').length).toBe(1);
-  });
-  it('should trigger the onChange callback', () => {
-    const onChangeMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
-      onChange: onChangeMock
-    }));
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: 'a'
-      }
-    });
-    expect(onChangeMock).toHaveBeenCalledTimes(2);
-    expect(wrapper.find('input').props().value).toEqual('a');
-  });
-  it('should receive the correct value while typing', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Input, {}));
-    const input = wrapper.find('input');
-    input.simulate('change', {
-      target: {
-        value: 'foobar'
-      }
-    });
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('SimpleInput').instance().value).toBe('foobar');
-  });
-  it('should sanitize the input', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
-      onSanitize: value => value.toUpperCase()
-    }));
-    const input = wrapper.find('input');
-    input.simulate('change', {
-      target: {
-        value: 'foobar'
-      }
-    });
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('SimpleInput').instance().value).toBe('FOOBAR');
-  });
-  it('should validate the input', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
-      onValidate: () => false
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('SimpleInput').instance().isValid).toBe(false);
-  });
-  it('should focus the input', () => {
-    const onFocusMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
-      onFocusChange: onFocusMock
-    }));
-    const input = wrapper.find('input');
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('SimpleInput').instance().isFocused).toBe(false);
-    input.simulate('focus');
-    expect(wrapper.find('SimpleInput').instance().isFocused).toBe(true);
-    input.simulate('blur');
-    expect(wrapper.find('SimpleInput').instance().isFocused).toBe(false);
-  });
-  it('should change the value on user input', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
-      value: "My initial value"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('SimpleInput').instance().value).toBe('My initial value');
-    const input = wrapper.find('input');
-    input.simulate('change', {
-      target: {
-        value: 'foobar'
-      }
-    });
-    expect(wrapper.find('SimpleInput').instance().value).toBe('foobar');
-  });
-  it('should render a multiline input with empty content and react on change', () => {
-    const multiLineValue = `dfsdsdf
-    sdfdsff
-    dsf`;
-    const wrapper = mount(/*#__PURE__*/_jsx(Input, {
-      value: "",
-      multiLine: true
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('MultiLineInput').instance().value).toEqual('');
-    wrapper.setProps({
-      value: multiLineValue
-    });
-    expect(wrapper.find('textarea').getDOMNode().innerHTML).toEqual(multiLineValue);
-  });
-  it('should render additional html attributes', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Input, {
-      type: "date",
-      attributes: {
-        min: '1970-01-01',
-        max: '2010-01-01'
-      }
-    })).dive();
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.prop('min')).toEqual('1970-01-01');
-    expect(wrapper.prop('max')).toEqual('2010-01-01');
-  });
-});