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

package/components/ModalContainer/spec.js

@@ -1,115 +0,0 @@
-/* eslint-disable no-unused-vars, jsx-a11y/control-has-associated-label */
-import React from 'react';
-import { mount } from 'enzyme';
-import { Provider } from 'react-redux';
-import { configureStore } from "../../store";
-import modalReducer from "../../reducers/modal";
-import showModal from "../../actions/modal/showModal";
-import ModalContainer from "./index";
-
-// const store = configureStore({ modal: modalReducer });
-// Replacement for commented out configureStore()
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const store = {};
-jest.mock('redux-logger', () => ({
-  createLogger: () => () => next => action => next(action)
-}));
-global.requestAnimationFrame = fn => fn();
-
-/**
- * Some mock modal component.
- * @param {func} onConfirm Confirm callback
- * @param {func} onDismiss Dismiss callback
- * @constructor
- */
-const MockModal = ({
-  onConfirm,
-  // eslint-disable-line react/prop-types
-  onDismiss // eslint-disable-line react/prop-types
-}) => /*#__PURE__*/_jsxs("div", {
-  className: "modal",
-  children: [/*#__PURE__*/_jsx("button", {
-    className: "confirmBtn",
-    onClick: onConfirm,
-    type: "button"
-  }), /*#__PURE__*/_jsx("button", {
-    className: "dismissBtn",
-    onClick: onDismiss,
-    type: "button"
-  })]
-});
-describe.skip('<ModalContainer />', () => {
-  let renderedElement;
-  const {
-    dispatch,
-    getState
-  } = store;
-
-  /**
-   * The rendered component.
-   */
-  const renderComponent = () => {
-    renderedElement = mount(/*#__PURE__*/_jsx(Provider, {
-      store: store,
-      children: /*#__PURE__*/_jsx("div", {
-        id: "container",
-        children: /*#__PURE__*/_jsx(ModalContainer, {
-          component: MockModal
-        })
-      })
-    }));
-  };
-  beforeEach(() => {
-    // Reset the modals state before each test.
-    getState().modal = [];
-    renderComponent();
-  });
-  describe('Given the component was mounted to the DOM', () => {
-    it('should match snapshot', () => {
-      expect(renderedElement).toMatchSnapshot();
-    });
-    it('should show no modal', () => {
-      expect(renderedElement.find('.modal').length).toBe(0);
-    });
-    describe('Given a modal gets dispatched', () => {
-      let modalPromise;
-      beforeEach(() => {
-        modalPromise = dispatch(showModal({
-          title: 'Title',
-          message: 'Message'
-        }));
-        renderedElement.update();
-      });
-      it('should contain a modal item in the state', () => {
-        expect(getState().modal.length).toBe(1);
-      });
-      it('should show the modal', () => {
-        expect(renderedElement.find('.modal').length).toBe(1);
-      });
-      describe('Given the modal gets confirmed', () => {
-        beforeEach(() => {
-          renderedElement.find('.confirmBtn').simulate('click');
-        });
-        it('should resolve the promise as confirmed', () => {
-          modalPromise.then(confirmed => expect(confirmed).toBe(true));
-        });
-        it('should contain no modal item in the state', () => {
-          expect(getState().modal.length).toBe(0);
-        });
-        it('should not show the modal anymore', () => {
-          expect(renderedElement.find('.modal').length).toBe(0);
-        });
-      });
-      describe('Given the modal gets dismissed', () => {
-        beforeEach(() => {
-          renderedElement.find('.dismissBtn').simulate('click');
-        });
-        it('should resolve the promise as dismissed', () => {
-          modalPromise.then(confirmed => expect(confirmed).toBe(false));
-        });
-      });
-    });
-  });
-});
-
-/* eslint-enable no-unused-vars, jsx-a11y/control-has-associated-label */

package/components/Select/spec.js

@@ -1,122 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import Select from "./index";
-import SelectItem from "./components/Item";
-
-/**
- * Returns whether the given Enzyme wrapper contains at least one node
- * with a class name that ends with the provided suffix.
- *
- * This checks individual class tokens, so it works with elements that
- * have multiple classes.
- *
- * @param {Object} wrapper Enzyme wrapper (mount or shallow result).
- * @param {string} suffix Class name suffix to match, e.g. "-innerShadow".
- * @returns {boolean} True if a matching node exists.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export function containsClassWithEnding(wrapper, suffix) {
-  if (!wrapper || typeof wrapper.findWhere !== 'function' || !suffix) {
-    return false;
-  }
-  return wrapper.findWhere(node => {
-    const className = node.prop('className');
-    if (typeof className !== 'string') {
-      return false;
-    }
-    return className.split(/\s+/).some(cls => cls.endsWith(suffix));
-  }).length > 0;
-}
-
-/**
- * Helper to simulate toggling the open state by touching the handle area.
- * @param {Object} wrapper Enzyme wrapper.
- */
-const toggleOpen = wrapper => {
-  wrapper.find('[role="presentation"]').simulate('touchstart');
-  wrapper.update();
-};
-describe('<Select />', () => {
-  jest.useFakeTimers();
-  it('opens and closes the item list', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Select, {}));
-    expect(wrapper.find(SelectItem).length).toBe(0);
-    toggleOpen(wrapper);
-    // opened – still 0 items because no items prop
-    expect(containsClassWithEnding(wrapper, '-items')).toBe(true);
-    toggleOpen(wrapper);
-    expect(containsClassWithEnding(wrapper, '-items')).toBe(false);
-  });
-  it('renders without items', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Select, {}));
-    toggleOpen(wrapper);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(SelectItem).length).toBe(0);
-  });
-  it('renders with implicit items (closed)', () => {
-    const items = ['a', 'b', 'c', 'd', 'e', 'f'];
-    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
-      items: items
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(SelectItem).length).toBe(0);
-  });
-  it('renders with implicit items (opened)', () => {
-    const items = ['a', 'b', 'c', 'd', 'e', 'f'];
-    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
-      items: items
-    }));
-    toggleOpen(wrapper);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(SelectItem).length).toBe(items.length);
-  });
-  it('accepts implicit and explicit items', () => {
-    const items = ['a', 'b', {
-      value: 'c'
-    }, 'd', {
-      value: 'e',
-      label: 'E'
-    }, 'f'];
-    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
-      items: items
-    }));
-    toggleOpen(wrapper);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(SelectItem).length).toBe(items.length);
-    let i = 0;
-    wrapper.find(SelectItem).forEach(item => {
-      let expectedLabel = items[i];
-      if (expectedLabel.label) {
-        expectedLabel = expectedLabel.label;
-      }
-      if (expectedLabel.value) {
-        expectedLabel = expectedLabel.value;
-      }
-      expect(item.prop('label')).toBe(expectedLabel);
-      i += 1;
-    });
-  });
-  it('triggers callback on change', () => {
-    const items = ['a', 'b', 'c', 'd', 'e', 'f'];
-    const selectionIndex = Math.floor(items.length / 2);
-
-    /**
-     * Mocked callback for the onSelect event
-     * @param {string} value Mocked value
-     */
-    const callback = value => {
-      expect(value).toBe(items[selectionIndex]);
-    };
-    const wrapper = mount(/*#__PURE__*/_jsx(Select, {
-      items: items,
-      onChange: callback
-    }));
-    toggleOpen(wrapper);
-    expect(wrapper).toMatchSnapshot();
-    const node = wrapper.find(SelectItem).at(selectionIndex);
-    act(() => {
-      node.prop('onSelect')(node.prop('value'), node.prop('label'));
-    });
-  });
-});

package/components/SelectBox/spec.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { mount } from 'enzyme';
-import SelectBox from "./index";
-
-/**
- * Mock Icon component.
- * @returns {JSX}
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const MockIconComponent = () => /*#__PURE__*/_jsx("span", {
-  id: "icon"
-});
-
-/**
- * Mock Item component.
- * @param {Object} props The components props.
- * @param {JSX} props.children The components children.
- * @returns {JSX}
- */
-const MockItemComponent = ({
-  children
-}) => /*#__PURE__*/_jsx("div", {
-  children: children
-});
-describe('<SelectBox>', () => {
-  const dummyItems = [{
-    label: 'My item #1',
-    value: 'item_1'
-  }, {
-    label: 'My item #2',
-    value: 'item_2'
-  }, {
-    label: 'My item #3',
-    value: 'item_3'
-  }];
-  it('should render the selectbox with given mock components', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(SelectBox, {
-      icon: MockIconComponent,
-      item: MockItemComponent,
-      items: dummyItems
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(MockIconComponent).length).toEqual(1);
-    expect(wrapper.find(MockItemComponent).length).toEqual(3);
-  });
-  it('should render with a default text', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(SelectBox, {
-      icon: MockIconComponent,
-      item: MockItemComponent,
-      items: dummyItems,
-      defaultText: "Foo"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('span').at(0).text()).toEqual('Foo');
-  });
-  it('should render with a preselected selection', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(SelectBox, {
-      icon: MockIconComponent,
-      item: MockItemComponent,
-      items: dummyItems,
-      defaultText: "Foo",
-      initialValue: "item_2"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('span').at(0).text()).toEqual('My item #2');
-  });
-});

package/components/Swiper/components/SwiperItem/spec.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { CLASS_PREFIX } from '@shopgate/engage/styles/tss';
-import SwiperItem from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useLayoutEffect: jest.requireActual('react').useEffect
-}));
-describe('<SwiperItem />', () => {
-  it('should not render without children', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(SwiperItem, {
-      children: /*#__PURE__*/_jsx("div", {})
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toMatch(new RegExp(`^<div class="swiper-slide ${CLASS_PREFIX}-[^"]+" data-test-id="Slider"><div></div></div>$`));
-  });
-  it('should add custom className', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(SwiperItem, {
-      className: "test",
-      children: /*#__PURE__*/_jsx("div", {})
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toMatch(new RegExp(`^<div class="swiper-slide ${CLASS_PREFIX}-[^"]+ test" data-test-id="Slider"><div></div></div>$`));
-  });
-});

package/components/Widgets/components/Widget/spec.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Grid from "../../../Grid";
-import Widget from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('react', () => {
-  const actual = jest.requireActual('react');
-  return {
-    ...actual,
-    memo: c => c,
-    Suspense: function Suspense({
-      children
-    }) {
-      return children;
-    }
-  };
-});
-
-/**
- * A dummy component.
- * @returns {JSX}
- */
-const MyComponent = () => /*#__PURE__*/_jsx("div", {});
-const widgets = {
-  '@shopgate/commerce-widgets/image': MyComponent
-};
-describe('<Widget />', () => {
-  it('should render an image widget', () => {
-    const config = {
-      type: '@shopgate/commerce-widgets/image',
-      col: 1,
-      row: 1,
-      width: 12,
-      height: 6
-    };
-    const wrapper = mount(/*#__PURE__*/_jsx(Widget, {
-      config: config,
-      component: widgets[config.type]
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Grid.Item).exists()).toBe(true);
-  });
-  it('should render an image widget with offset', () => {
-    const config = {
-      type: '@shopgate/commerce-widgets/image',
-      col: 1,
-      row: 1,
-      width: 6,
-      height: 6
-    };
-    const wrapper = mount(/*#__PURE__*/_jsx(Widget, {
-      config: config,
-      component: widgets[config.type],
-      cellSize: 100
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Grid.Item).exists()).toBe(true);
-  });
-  it('should not render when the `type` prop is invalid', () => {
-    const config = {
-      type: 'some_widget',
-      // Invalid
-      col: 1,
-      row: 1,
-      width: 12,
-      height: 6
-    };
-    const wrapper = mount(/*#__PURE__*/_jsx(Widget, {
-      config: config,
-      component: widgets[config.type]
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Grid.Item).exists()).toBe(false);
-  });
-});

package/components/Widgets/components/WidgetGrid/spec.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import WidgetGrid from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('react', () => {
-  const actual = jest.requireActual('react');
-  return {
-    ...actual,
-    memo: c => c,
-    Suspense: function Suspense({
-      children
-    }) {
-      return children;
-    }
-  };
-});
-
-/**
- * A mock Image component.
- * @returns {JSX}
- */
-const Image = () => /*#__PURE__*/_jsx("div", {});
-const components = {
-  '@shopgate/commerce-widgets/image': Image
-};
-describe('<WidgetGrid />', () => {
-  it('should render with a config', () => {
-    const config = [{
-      col: 0,
-      row: 0,
-      width: 12,
-      height: 3,
-      settings: {
-        id: 83535,
-        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
-      },
-      type: '@shopgate/commerce-widgets/image'
-    }];
-    const wrapper = mount(/*#__PURE__*/_jsx(WidgetGrid, {
-      config: config,
-      components: components
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Image).length).toEqual(1);
-  });
-  it('should not render without a `config` prop', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(WidgetGrid, {
-      components: components
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Image).length).toEqual(0);
-  });
-});

package/components/Widgets/spec.js

@@ -1,234 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { ThemeResourcesProvider } from '@shopgate/engage/core/providers';
-import Widgets from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.useFakeTimers();
-jest.mock('@shopgate/pwa-common/context', () => ({
-  ThemeContext: {
-    Provider: ({
-      children
-    }) => children
-  }
-}));
-
-/**
- * A mock Image component.
- * @returns {JSX}
- */
-const Image = () => /*#__PURE__*/_jsx("img", {
-  alt: ""
-});
-/* eslint-disable react/prop-types */
-/**
- * A mock WidgetGrid component.
- * @param {Array} children Array of children.
- * @returns {JSX}
- */
-const WidgetGrid = ({
-  children
-}) => /*#__PURE__*/_jsx("div", {
-  className: "widget-grid",
-  children: children
-});
-/* eslint-enable react/prop-types */
-
-const components = {
-  v1: {
-    '@shopgate/commerce-widgets/image': Image,
-    '@shopgate/commerce-widgets/widget-grid': WidgetGrid
-  }
-};
-
-/**
- * @param {Object[]} widgets Widgets to be rendered.
- * @returns {JSX.Element}
- */
-const createWrapper = widgets => mount(/*#__PURE__*/_jsx(ThemeResourcesProvider, {
-  widgets: components,
-  components: {},
-  children: /*#__PURE__*/_jsx(Widgets, {
-    widgets: widgets
-  })
-}));
-describe('<Widgets />', () => {
-  it('should render a grid if height is defined', () => {
-    const widgets = [{
-      col: 0,
-      row: 0,
-      width: 12,
-      height: 3,
-      settings: {
-        id: 83535,
-        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
-      },
-      type: '@shopgate/commerce-widgets/image'
-    }];
-    const wrapper = createWrapper(widgets);
-    expect(wrapper.find('WidgetGrid').exists()).toBe(true);
-  });
-  it('should not wrap a widget which is not a grid and has no height', () => {
-    const widgets = [{
-      col: 0,
-      row: 0,
-      width: 12,
-      settings: {
-        id: 83535,
-        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
-      },
-      type: '@shopgate/commerce-widgets/image'
-    }];
-    const wrapper = createWrapper(widgets);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('WidgetGrid').exists()).toBe(false);
-  });
-  it('should render a grid if the widget is of type grid', () => {
-    const widgets = [{
-      type: '@shopgate/commerce-widgets/widget-grid',
-      settings: {
-        widgets: [{
-          col: 0,
-          row: 0,
-          width: 12,
-          height: 5,
-          settings: {
-            id: '84961',
-            alt: '',
-            image: 'https://data.shopgate.com/shop_widget_images/23836/aedc545959f55e3f73851eca0ed40a75.min.jpeg',
-            link: '/category/'
-          },
-          type: '@shopgate/commerce-widgets/image'
-        }]
-      }
-    }];
-    const wrapper = createWrapper(widgets);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('WidgetGrid').exists()).toBe(true);
-  });
-  it('should render only one widget when the second one is not published and third one is invalid', () => {
-    const widgets = [{
-      col: 0,
-      row: 0,
-      width: 12,
-      settings: {
-        id: 835351,
-        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
-      },
-      type: '@shopgate/commerce-widgets/image'
-    }, {
-      col: 0,
-      row: 0,
-      width: 12,
-      settings: {
-        id: 835352,
-        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
-      },
-      type: '@shopgate/commerce-widgets/imagefoo'
-    }, {
-      col: 0,
-      row: 0,
-      width: 12,
-      settings: {
-        published: false,
-        id: 835353,
-        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
-      },
-      type: '@shopgate/commerce-widgets/image'
-    }];
-    const wrapper = createWrapper(widgets);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('img').length).toBe(1);
-  });
-  it('should schedule a re-render when widget is scheduled', () => {
-    // Use a fixed point in time so "next full hour" is deterministic.
-    // Pick a time that's not exactly on the hour.
-    const base = new Date('2023-01-01T10:37:00.000Z');
-    jest.setSystemTime(base);
-    const minutesToNextFullHour = 60 - base.getMinutes(); // 23
-    const msToNextFullHour = minutesToNextFullHour * 60000; // 23 * 60_000
-
-    const scheduledFromMs = Date.now() + msToNextFullHour - 1;
-    const scheduledToMs = Date.now() + minutesToNextFullHour + 1000;
-    const widgets = [{
-      col: 0,
-      row: 0,
-      width: 12,
-      settings: {
-        id: 835351,
-        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg',
-        published: true,
-        plan: true,
-        planDate: {
-          valid_from: new Date(scheduledFromMs).toISOString(),
-          valid_to: new Date(scheduledToMs).toISOString()
-        }
-      },
-      type: '@shopgate/commerce-widgets/image'
-    }];
-    const wrapper = createWrapper(widgets);
-    const instance = wrapper.find('Widgets').instance();
-    const clearSpy = jest.spyOn(global, 'clearTimeout');
-    instance.forceUpdate = jest.fn();
-
-    // Before the schedule hits, the image should not render yet.
-    expect(wrapper.find(Image).exists()).toBe(false);
-
-    // 1) Advance to the next full hour -> first forced update.
-    jest.advanceTimersByTime(msToNextFullHour);
-    expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
-
-    // 2) The component should schedule the next tick for +60 min.
-    jest.advanceTimersByTime(60 * 60000);
-    expect(instance.forceUpdate).toHaveBeenCalledTimes(2);
-
-    // Unmount triggers cleanup of any pending timeouts.
-    wrapper.unmount();
-    expect(clearSpy).toHaveBeenCalled();
-    clearSpy.mockRestore();
-  });
-  it('should render only wrapper when widgets array is empty', () => {
-    const widgets = [];
-    const wrapper = createWrapper(widgets);
-    expect(wrapper.find('Image').exists()).toBe(false);
-  });
-  it('should render null when no widgets are passed', () => {
-    const wrapper = createWrapper(undefined);
-    expect(wrapper.find('Widgets').html()).toBe(null);
-  });
-  it('should check settings of child widgets inside widget-grid', () => {
-    const widgets = [{
-      height: 2,
-      id: 'index-5-@shopgate/commerce-widgets/widget-grid',
-      type: '@shopgate/commerce-widgets/widget-grid',
-      settings: {
-        widgets: [{
-          col: 0,
-          row: 0,
-          height: 2,
-          width: 2,
-          settings: {
-            id: 835351,
-            image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg',
-            published: true,
-            plan: false
-          },
-          type: '@shopgate/commerce-widgets/image'
-        }, {
-          col: 2,
-          row: 0,
-          height: 2,
-          width: 2,
-          settings: {
-            id: 835352,
-            image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg',
-            published: false,
-            plan: false
-          },
-          type: '@shopgate/commerce-widgets/image'
-        }]
-      }
-    }];
-    const wrapper = createWrapper(widgets);
-    expect(wrapper.find('img').length).toBe(1);
-  });
-});