@shopgate/pwa-ui-shared 7.32.0-beta.1 → 7.32.0-beta.11

package/ContextMenu/spec.js

@@ -1,113 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import Backdrop from '@shopgate/pwa-common/components/Backdrop';
-import ContextMenu from "./index";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-jest.mock('@shopgate/engage/components');
-jest.mock('@shopgate/engage/a11y/components');
-global.requestAnimationFrame = fn => fn();
-jest.useFakeTimers();
-describe('<ContextMenu />', () => {
-  const mockItemAClick = jest.fn();
-  const mockItemBClick = jest.fn();
-  const numMenuItems = 2;
-  describe('Snapshot test', () => {
-    it('should match snapshot', () => {
-      const wrapper = shallow(/*#__PURE__*/_jsxs(ContextMenu, {
-        isOpened: true,
-        children: [/*#__PURE__*/_jsx(ContextMenu.Item, {
-          onClick: mockItemAClick,
-          className: "menu-active-item",
-          children: "Item A"
-        }), /*#__PURE__*/_jsx(ContextMenu.Item, {
-          onClick: mockItemBClick,
-          className: "menu-active-item",
-          children: "Item B"
-        })]
-      }));
-      expect(wrapper).toMatchSnapshot();
-    });
-    it('should match snapshot without toggle', () => {
-      const wrapper = shallow(/*#__PURE__*/_jsx(ContextMenu, {
-        isOpened: true,
-        showToggle: false,
-        children: /*#__PURE__*/_jsx(ContextMenu.Item, {
-          onClick: mockItemAClick,
-          className: "menu-active-item",
-          children: "Item A"
-        })
-      }));
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-  describe('Given the component was mounted to the DOM', () => {
-    let renderedElement;
-
-    /**
-     * The view component
-     */
-    const renderComponent = () => {
-      renderedElement = mount(/*#__PURE__*/_jsxs(ContextMenu, {
-        children: [/*#__PURE__*/_jsx(ContextMenu.Item, {
-          onClick: mockItemAClick,
-          children: "Item A"
-        }), /*#__PURE__*/_jsx(ContextMenu.Item, {
-          onClick: mockItemBClick,
-          children: "Item B"
-        })]
-      }));
-    };
-    beforeEach(renderComponent);
-    it('should match snapshot', () => {
-      expect(renderedElement).toMatchSnapshot();
-    });
-    it('should have active state set to false', () => {
-      expect(renderedElement.find('ConnectedReactPortal').prop('isOpened')).toBe(null);
-    });
-    it('should render the toggle button', () => {
-      expect(renderedElement.find('button').length).toBe(1);
-    });
-    it('should not render any context menu items', () => {
-      expect(renderedElement.find(ContextMenu.Item).length).toBe(0);
-    });
-    describe('Given toggle button gets clicked', () => {
-      beforeEach(() => {
-        renderedElement.find('button').simulate('click');
-        renderedElement.update();
-      });
-      it('should have active state set to true', () => {
-        expect(renderedElement.find('ConnectedReactPortal').prop('isOpened')).toBe(true);
-      });
-      it('should render the actual context menu w/ items', () => {
-        expect(renderedElement.find(ContextMenu.Item).length).toBe(numMenuItems);
-      });
-      describe('Given the first item gets clicked', () => {
-        beforeEach(() => {
-          act(() => {
-            renderedElement.find(ContextMenu.Item).first().children().find('[data-test-id="contextMenuButton"]').first().simulate('click');
-            jest.runAllTimers();
-          });
-        });
-        it('should call the related click handler', () => {
-          expect(mockItemAClick).toBeCalled();
-        });
-        it('should close the context menu', () => {
-          renderedElement.update();
-          expect(renderedElement.find(ContextMenu.Item).length).toBe(0);
-        });
-      });
-      describe('Given the backdrop gets clicked', () => {
-        beforeEach(() => {
-          renderedElement.find(Backdrop).children().find('[onClick]').simulate('click');
-        });
-        it('should have active state reset to false', () => {
-          expect(renderedElement.find('ConnectedReactPortal').prop('isOpened')).toBe(false);
-        });
-        it('should close the context menu', () => {
-          expect(renderedElement.find(ContextMenu.Item).length).toBe(0);
-        });
-      });
-    });
-  });
-});

package/Dialog/components/HtmlContentDialog/spec.js

@@ -1,107 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import HtmlContentDialog from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const message = '<p><i>This is a html message.</i></p>';
-const title = 'This is the title.';
-jest.mock('@shopgate/engage/a11y/components');
-jest.mock('@shopgate/engage/components', () => {
-  const mockReact = jest.requireActual('react');
-  function Text({
-    string
-  }) {
-    return mockReact.createElement('span', null, string);
-  }
-  Text.propTypes = {
-    params: () => null
-  };
-  Text.defaultProps = {
-    params: {}
-  };
-  const I18n = {
-    Text
-  };
-  function Ellipsis({
-    children
-  }) {
-    return mockReact.createElement('span', null, children);
-  }
-  function Button({
-    children,
-    onClick,
-    disabled,
-    className
-  }) {
-    return mockReact.createElement('button', {
-      onClick,
-      disabled,
-      className
-    }, children);
-  }
-  function Typography({
-    children
-  }) {
-    return mockReact.createElement('span', null, children);
-  }
-  return {
-    I18n,
-    Ellipsis,
-    Button,
-    Typography
-  };
-});
-describe('<HtmlContentDialog />', () => {
-  it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {
-      message: message,
-      actions: []
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toMatch(message);
-  });
-  it('should render with title and html message', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {
-      title: title,
-      message: message,
-      actions: []
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toMatch(title);
-  });
-  it('should render with title, html message and messageParams', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {
-      title: title,
-      message: "Message with {name}",
-      params: {
-        name: 'Placeholder'
-      },
-      actions: []
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should render the actions', () => {
-    const actions = [{
-      label: 'fooAction',
-      action: () => {}
-    }];
-    const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {
-      title: title,
-      message: message,
-      actions: actions
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toMatch(actions[0].label);
-  });
-  it('should pass title through', () => {
-    const customTitle = /*#__PURE__*/_jsx("div", {
-      children: "Title"
-    });
-    const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {
-      title: customTitle,
-      message: message,
-      params: {},
-      actions: []
-    }));
-    expect(wrapper.find('BasicDialog').prop('title')).toEqual(customTitle);
-  });
-});

package/Dialog/components/PipelineErrorDialog/spec.js

@@ -1,89 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import PipelineErrorDialog from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('@shopgate/engage/a11y/components');
-describe('<PipelineErrorDialog />', () => {
-  const defaultParams = {
-    code: '123',
-    message: 'Error message',
-    pipeline: 'fakePipeline',
-    request: {}
-  };
-  it('should render with minimal props', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
-      actions: [],
-      params: defaultParams
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should show a custom message if a message is is provided', () => {
-    const message = 'Custom message';
-    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
-      actions: [],
-      message: message,
-      params: defaultParams
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toMatch(message);
-  });
-  it('should switch modes on tap', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
-      actions: [],
-      params: defaultParams
-    }));
-    const numTaps = 10;
-    const clickElement = wrapper.find('div[onClick]');
-    const devMarker = 'Pipeline:';
-
-    // Dev mode should be disabled.
-    for (let i = 0; i < numTaps; i += 1) {
-      expect(wrapper.text()).not.toContain(devMarker);
-      clickElement.simulate('click');
-    }
-    expect(wrapper.text()).toContain(devMarker);
-
-    // Dev mode should be enabled until 10 more taps.
-    for (let i = 0; i < numTaps - 1; i += 1) {
-      expect(wrapper.text()).toContain(devMarker);
-      clickElement.simulate('click');
-    }
-    clickElement.simulate('click');
-    expect(wrapper.text()).not.toContain(devMarker);
-  });
-  it('should not switch modes if tapped too slow', () => {
-    jest.useFakeTimers();
-    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
-      actions: [],
-      params: defaultParams
-    }));
-    const numTaps = 10;
-    const numTapsUntilTimeout = Math.round(numTaps / 2);
-    const clickElement = wrapper.find('div[onClick]');
-    const devMarker = 'Pipeline:';
-    expect(wrapper.text()).not.toContain(devMarker);
-
-    /**
-     * Simulates multiple tap events.
-     * @param {number} amount The number of tap events to simulate in a row.
-     */
-    const tapOnElement = amount => {
-      if (amount > 0) {
-        clickElement.simulate('click');
-        tapOnElement(amount - 1);
-      }
-    };
-
-    // Tap a few times.
-    tapOnElement(numTapsUntilTimeout);
-
-    // Trigger a timeout (user was too slow).
-    jest.runAllTimers();
-
-    // Tap the remaining times.
-    tapOnElement(numTaps - numTapsUntilTimeout);
-    expect(wrapper.text()).not.toContain(devMarker);
-    tapOnElement(numTapsUntilTimeout);
-    expect(wrapper.text()).toContain(devMarker);
-  });
-});

package/Dialog/components/TextMessageDialog/spec.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import TextMessageDialog from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const message = 'This is the message.';
-const title = 'This is the title.';
-jest.mock('@shopgate/engage/a11y/components');
-describe('<TextMessageDialog />', () => {
-  it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
-      message: message,
-      actions: []
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toMatch(message);
-  });
-  it('should render with title and message', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
-      title: title,
-      message: message,
-      actions: []
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toMatch(title);
-  });
-  it('should render with title, message and messageParams', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
-      title: title,
-      message: "Message with {name}",
-      params: {
-        name: 'Placeholder'
-      },
-      actions: []
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should render the actions', () => {
-    const actions = [{
-      label: 'fooAction',
-      action: () => {}
-    }];
-    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
-      title: title,
-      message: message,
-      actions: actions
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toMatch(actions[0].label);
-  });
-  it('should pass title through', () => {
-    const customTitle = /*#__PURE__*/_jsx("div", {
-      children: "Title"
-    });
-    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
-      title: customTitle,
-      message: message,
-      params: {},
-      actions: []
-    }));
-    expect(wrapper.find('BasicDialog').prop('title')).toEqual(customTitle);
-  });
-});

package/Dialog/components/VariantSelectModal/spec.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { UnwrappedVariantSelectModal as VariantSelectModal } from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const message = 'This is the message.';
-const title = 'This is the title.';
-jest.mock('@shopgate/engage/a11y/components');
-describe('<VariantSelectModal />', () => {
-  it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(VariantSelectModal, {
-      message: message,
-      actions: [],
-      navigate: () => {}
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.html()).toMatch(message);
-  });
-  it('should render the actions', () => {
-    const mockConfirm = jest.fn();
-    const mockNavigate = jest.fn();
-    /**
-     * Mocks named function
-     */
-    const onConfirm = () => {
-      mockConfirm();
-    };
-    const actions = [{
-      label: 'confirm',
-      action: onConfirm
-    }, {
-      label: 'dismiss',
-      action: () => {}
-    }];
-    const params = {
-      productId: 'product_1'
-    };
-    const mockedProps = {
-      message,
-      title,
-      params,
-      actions: [].concat(actions),
-      navigate: mockNavigate
-    };
-    const wrapper = shallow(/*#__PURE__*/_jsx(VariantSelectModal, {
-      ...mockedProps
-    }));
-    expect(wrapper).toMatchSnapshot();
-    const reordered = wrapper.find('BasicDialog').props().actions;
-    const last = reordered.slice(-1)[0];
-    expect(last.label).toEqual(actions[0].label);
-    last.action();
-    expect(mockConfirm).toHaveBeenCalledTimes(1);
-    expect(mockNavigate).toHaveBeenCalledTimes(1);
-  });
-});

package/Dialog/spec.js

@@ -1,84 +0,0 @@
-import React from 'react';
-import { shallow, ReactWrapper } from 'enzyme';
-import { MODAL_PIPELINE_ERROR } from '@shopgate/pwa-common/constants/ModalTypes';
-import { MODAL_VARIANT_SELECT } from "./constants";
-import Dialog from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock("./components/VariantSelectModal", () => {
-  /**
-   * VariantSelectModal mock.
-   * @return {JSX}
-   */
-  const VariantSelectModal = () => /*#__PURE__*/_jsx("div", {});
-  return VariantSelectModal;
-});
-jest.mock('@shopgate/engage/components');
-describe('<Dialog />', () => {
-  it('should render without props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Dialog, {
-      modal: {
-        message: 'msg'
-      }
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('TextMessageDialog').length).toBe(1);
-  });
-  it('should render BasicDialog when no message given', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Dialog, {
-      modal: {
-        message: null
-      }
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('BasicDialog').length).toBe(1);
-  });
-  it('should render a special dialog', () => {
-    const params = {
-      errorCode: '',
-      message: '',
-      pipeline: '',
-      request: {}
-    };
-    const wrapper = shallow(/*#__PURE__*/_jsx(Dialog, {
-      modal: {
-        type: MODAL_PIPELINE_ERROR,
-        params
-      }
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('DefaultDialog').length).toBe(0);
-    expect(wrapper.find('PipelineErrorDialog').length).toBe(1);
-  });
-  it('should render variant select dialog', () => {
-    const params = {
-      productId: 'product_1'
-    };
-    const wrapper = shallow(/*#__PURE__*/_jsx(Dialog, {
-      modal: {
-        message: 'Test',
-        type: MODAL_VARIANT_SELECT,
-        params
-      }
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('DefaultDialog').length).toBe(0);
-    expect(wrapper.find('VariantSelectModal').length).toBe(1);
-  });
-  it('should convert title into translatable element', () => {
-    const title = 'translate.me';
-    const titleParams = {
-      foo: 'bar'
-    };
-
-    // eslint-disable-next-line extra-rules/no-single-line-objects
-    const wrapper = shallow(/*#__PURE__*/_jsx(Dialog, {
-      modal: {
-        title,
-        titleParams
-      }
-    }));
-    const i18n = new ReactWrapper(wrapper.find('BasicDialog').prop('title'));
-    expect(i18n.prop('string')).toEqual(title);
-    expect(i18n.prop('params')).toEqual(titleParams);
-  });
-});

package/DiscountBadge/spec.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import DiscountBadge from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('@shopgate/engage/components');
-describe('<DiscountBadge />', () => {
-  it('should render the text', () => {
-    const wrapper = render(/*#__PURE__*/_jsx(DiscountBadge, {
-      text: "foo"
-    }));
-    expect(wrapper.asFragment()).toMatchSnapshot();
-  });
-  it('should render the text and discount', () => {
-    const wrapper = render(/*#__PURE__*/_jsx(DiscountBadge, {
-      text: "SAVE {0}%",
-      discount: 20
-    }));
-    expect(wrapper.asFragment()).toMatchSnapshot();
-  });
-});

package/FavoritesButton/spec.js

@@ -1,131 +0,0 @@
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import { mount } from 'enzyme';
-import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
-import appConfig from '@shopgate/pwa-common/helpers/config';
-import FavoritesButton from "./index";
-import { mockedStateEmpty, mockedStateOnList, mockedStateNotOnList } from "./mock";
-import { jsx as _jsx } from "react/jsx-runtime";
-const mockedStore = configureStore();
-const dispatcher = jest.fn();
-jest.mock('@shopgate/pwa-common/helpers/config');
-jest.mock('@shopgate/pwa-common-commerce/favorites/selectors/index', () => ({
-  isFetching: () => false
-}));
-beforeEach(() => {
-  jest.resetModules();
-});
-describe('<FavoritesButton />', () => {
-  let component = null;
-
-  /**
-   * Creates component with provided store state.
-   * @param {Object} mockedState Mocked stage.
-   * @param {Object} props Additional props.
-   * @return {ReactWrapper}
-   */
-  const createComponent = (mockedState, props = {
-    active: false
-  }) => {
-    const store = mockedStore(mockedState);
-    store.dispatch = dispatcher;
-    return mount(/*#__PURE__*/_jsx(Provider, {
-      store: store,
-      children: /*#__PURE__*/_jsx(FavoritesButton, {
-        ...props
-      })
-    }), mockRenderOptions);
-  };
-  beforeEach(() => {
-    dispatcher.mockReset();
-  });
-  it('should only render when no favorites set', () => {
-    component = createComponent(mockedStateEmpty);
-    expect(component).toMatchSnapshot();
-    expect(component.find('Heart').exists()).toBe(false);
-    expect(component.find('HeartOutline').exists()).toBe(true);
-    component.find('button').simulate('click');
-  });
-  it('should render when favorites set', () => {
-    component = createComponent(mockedStateOnList, {
-      active: true
-    });
-    expect(component).toMatchSnapshot();
-    expect(component.find('Heart').exists()).toBe(true);
-    expect(component.find('HeartOutline').exists()).toBe(false);
-  });
-  it('should add to favorites on click', () => {
-    component = createComponent(mockedStateNotOnList, {
-      productId: '1',
-      active: false
-    });
-    expect(component.find('Heart').exists()).toBe(false);
-    expect(component.find('HeartOutline').exists()).toBe(true);
-    component.find('button').simulate('click');
-    component.update();
-    expect(dispatcher).toHaveBeenCalled();
-  });
-  it('should remove from favorites on click', done => {
-    component = createComponent(mockedStateOnList, {
-      productId: '1',
-      active: true
-    });
-    expect(component.find('Heart').exists()).toBe(true);
-    expect(component.find('HeartOutline').exists()).toBe(false);
-    component.find('button').simulate('click');
-    component.update();
-    setTimeout(() => {
-      expect(dispatcher).toHaveBeenCalled();
-      done();
-    }, 0);
-  });
-  it('should process ripple complete callback', async () => {
-    const onRippleComplete = jest.fn();
-    component = createComponent(mockedStateOnList, {
-      productId: '1',
-      active: true,
-      onRippleComplete
-    });
-    await act(async () => {
-      component.find('Ripple').invoke('onComplete')();
-    });
-    component.update();
-    expect(onRippleComplete).toHaveBeenCalled();
-  });
-  it('should only react on first click', done => {
-    component = createComponent(mockedStateOnList, {
-      once: true,
-      productId: '1',
-      active: false
-    });
-    component.find('button').simulate('click');
-    component.update();
-    component.find('button').simulate('click');
-    component.update();
-    setTimeout(() => {
-      expect(dispatcher.mock.calls.length).toBe(1);
-      done();
-    }, 1);
-  });
-  it('should only react on both clicks', done => {
-    component = createComponent(mockedStateOnList, {
-      productId: '1',
-      active: false
-    });
-    component.find('button').simulate('click');
-    component.update();
-    component.find('button').simulate('click');
-    component.update();
-    setTimeout(() => {
-      expect(dispatcher.mock.calls.length).toBe(2);
-      done();
-    }, 1);
-  });
-  it('should render null when feature flag is off', () => {
-    jest.spyOn(appConfig, 'hasFavorites', 'get').mockReturnValue(false);
-    component = createComponent(mockedStateOnList);
-    expect(component.isEmptyRender()).toBe(true);
-  });
-});