@shopgate/pwa-common/components/InfiniteContainer/spec.js

Common library for the Shopgate Connect PWA.

function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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";global.console.error=jest.fn();var context={state:{}};describe('<InfiniteContainer />',function(){var renderedElement;var renderedInstance;var mockLoader;var mockIterator;var mockItems;var mockData=range(100).map(function(id){return{id:id,title:"Item ".concat(id)};});/**
   * The view component
   * @param {Object} props The component props.
   */var renderComponent=function renderComponent(props){renderedElement=shallow(React.createElement(InfiniteContainer,props),{context:context});renderedInstance=renderedElement.instance();};/**
   * Mocks the mapStateToProps connector.
   * @param {number} amount The new product amount.
   */var receiveItemsByProp=function receiveItemsByProp(amount){mockItems=mockData.slice(0,amount);var nextProps=_extends({},renderedInstance.props,{items:mockItems,totalItems:mockData.length});renderedElement.setProps(nextProps);};beforeEach(function(){mockLoader=jest.fn();mockIterator=jest.fn(function(data){return React.createElement("li",{key:data.id},data.title);});});describe('Given the component was mounted to the DOM',function(){beforeEach(function(){renderComponent({items:[],loader:mockLoader,iterator:mockIterator,totalItems:null});renderedInstance.componentDidMount();});it('should match snapshot',function(){expect(renderedElement).toMatchSnapshot();});it('should call the loader function',function(){var _renderedInstance$sta=_slicedToArray(renderedInstance.state.offset,1),offset=_renderedInstance$sta[0];expect(mockLoader).toBeCalledWith(offset);});describe('Given the loader requested new items',function(){var mockItemsLength=10;beforeEach(function(){receiveItemsByProp(mockItemsLength);});it('should call the iterator function according to the number of loaded items',function(){expect(mockIterator).toBeCalled();expect(mockIterator.mock.calls.length).toBe(mockItemsLength);});it('should render the loaded items',function(){expect(renderedElement.find('li').length).toBe(mockItemsLength);});});describe('Given the component was mounted within a scroll container',function(){var mockItemsLength=11;beforeEach(function(){// 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',function(){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',function(){renderedInstance.domScrollContainer={scrollTop:0,scrollHeight:1000,clientHeight:100};renderedInstance.handleLoading();expect(mockLoader.mock.calls.length).toBe(0);});});describe('Given all items have been received',function(){var mockItemsLength=mockData.length;beforeEach(function(){receiveItemsByProp(mockItemsLength);});it('should expect no more items to be received',function(){expect(renderedInstance.needsToReceiveItems()).toBe(false);});it('should keep state.awaitingItems as true if not all items are rendered',function(){expect(renderedInstance.allItemsAreRendered()).toBe(false);expect(renderedInstance.state.awaitingItems).toBe(true);expect(renderedElement.find('li').length).toBeLessThan(mockItemsLength);});it('should set state.awaitingItems to false if all items are rendered',function(){renderedElement.setState({offset:[0,mockItemsLength]});renderedInstance.handleLoading();expect(renderedInstance.allItemsAreRendered()).toBe(true);expect(renderedInstance.state.awaitingItems).toBe(false);expect(renderedElement.find('li').length).toBe(mockItemsLength);});});});describe('Given that the initialLimit is used in the correct ways',function(){describe('Given that the initialLimit is used',function(){it('should render with the initialLimit',function(){renderComponent({items:mockData,loader:mockLoader,iterator:mockIterator,totalItems:mockData.length});// Check if the iniLimit was used
expect(renderedElement.find('li').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
var newLimit=renderedInstance.props.initialLimit+renderedInstance.props.limit;expect(renderedElement.find('li').length).toBe(newLimit);});});describe('Given that the initialLimit is NOT used',function(){it('should render without the initialLimit',function(){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('li').length).toBe(renderedInstance.props.limit);});});});describe('Given that the requestHash changes',function(){it('should reset the component',function(){var props={items:mockData,loader:mockLoader,iterator:mockIterator,totalItems:mockData.length,requestHash:'default'};var wrapper=mount(React.createElement(InfiniteContainer,props));var 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});});});});