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

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

package/components/Link/spec.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { Disconnected as Link } from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<Link />', () => {
-  const historyPush = jest.fn();
-  const historyReplace = jest.fn();
-  const pathname = '/';
-  const state = {
-    x: 5
-  };
-  beforeEach(() => {
-    jest.useFakeTimers();
-    jest.clearAllMocks();
-  });
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-  it('renders with children', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Link, {
-      href: pathname,
-      historyPush: historyPush,
-      historyReplace: historyReplace,
-      children: /*#__PURE__*/_jsx("span", {})
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('span').length).toBe(1);
-  });
-  it('handles a push', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Link, {
-      href: pathname,
-      state: state,
-      historyPush: historyPush,
-      historyReplace: historyReplace,
-      children: /*#__PURE__*/_jsx("span", {})
-    }));
-    wrapper.find('div').simulate('click');
-    jest.runAllTimers();
-    expect(historyPush).toHaveBeenLastCalledWith({
-      pathname,
-      state
-    });
-  });
-  it('handles a replace', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Link, {
-      href: pathname,
-      historyPush: historyPush,
-      historyReplace: historyReplace,
-      state: state,
-      replace: true,
-      children: /*#__PURE__*/_jsx("span", {})
-    }));
-    wrapper.find('div').simulate('click');
-    jest.runAllTimers();
-    expect(historyReplace).toHaveBeenLastCalledWith({
-      pathname,
-      state
-    });
-  });
-});

package/components/List/spec.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import List from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-console.error = jest.fn();
-describe('<List />', () => {
-  const children = [/*#__PURE__*/_jsx(List.Item, {}, "0"), /*#__PURE__*/_jsx(List.Item, {}, "1"), /*#__PURE__*/_jsx(List.Item, {}, "2")];
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('renders with children', () => {
-    const numChildren = children.length;
-    const wrapper = shallow(/*#__PURE__*/_jsx(List, {
-      children: children
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(List.Item).length).toBe(numChildren);
-    expect(console.error).not.toHaveBeenCalled();
-  });
-  it('renders without children', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(List, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(List.Item).length).toBe(0);
-    expect(console.error).toHaveBeenCalledTimes(1);
-  });
-});

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