@shopgate/engage/components/RangeSlider/spec.js

Shopgate's ENGAGE library.

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;}import React from'react';import{shallow,mount}from'enzyme';import RangeSlider from"./index";import RangeSliderHandle from"./components/Handle";import{generateLinearEasingCallback,generateExponentialEasingCallback,getAbsoluteValue,getRelativeValue}from"./helper";/**
 * Creates a (fake) touch event.
 * @param {number} pageX the x page offset of the simulated touch event
 * @returns {Object} the new fake event containing only the properties required for testing.
 */var createTouchEvent=function createTouchEvent(pageX){// Simulate a handle of 16px width.
var simulatedHandleWidth=16;var simulatedHandleHalfWidth=simulatedHandleWidth/2;var touchEvent={target:{offsetWidth:simulatedHandleWidth,getBoundingClientRect:function getBoundingClientRect(){return{// Simulate a touch on the center of the handle.
left:pageX-simulatedHandleHalfWidth};}},touches:[{pageX:pageX}]};return touchEvent;};/**
 * Simulates a series of touch events.
 * This function will automatically validate the from/to values of the range slider.
 * An extra testCallback may be provided to perform additional checks.
 *
 * @param {number} pxWidth The simulated width of the DOM element (in px).
 * @param {number} pxOffset The simulated left offset of the DOM element (in px).
 * @param {number} min The absolute minimum value of the slider.
 * @param {number} max The absolute maximum value of the slider.
 * @param {Array} value The initial value(s) of the slider.
 * @param {string} easing The name of the easing function.
 * @param {number} resolutionOrFactor The resolution or factor for the easing function.
 * @param {Array} simulateSteps A set of relative horizontal pixel movements to simulate.
 * @param {Function} testCallback An optional callback for the onChange event of the slider.
 */var simulateInputTest=function simulateInputTest(pxWidth,pxOffset,min,max,value,easing,resolutionOrFactor,simulateSteps,testCallback){var config={totalPixelWidth:pxWidth,leftPixelOffset:pxOffset,min:min,max:max,easing:easing,resolution:resolutionOrFactor,factor:resolutionOrFactor,initialValue:value,valuePixelSize:pxWidth/(max-min),currentTouchDeltaX:0};config.currentTouchDeltaX=config.valuePixelSize*value[1];var ease={linear:generateLinearEasingCallback(config.resolution),exponential:generateExponentialEasingCallback(config.factor)}[config.easing];// eslint-disable-next-line require-jsdoc
var callback=function callback(_ref){var _ref2=_slicedToArray(_ref,2),from=_ref2[0],to=_ref2[1];var currentTouchDeltaX=config.currentTouchDeltaX,valuePixelSize=config.valuePixelSize;var relativeValue=getRelativeValue(currentTouchDeltaX/valuePixelSize,min,max);var expected=getAbsoluteValue(ease(relativeValue),config.min,config.max,true);expect(expected===from||expected===to).toBe(true);if(testCallback){testCallback(config,from,to);}};var wrapper=mount(React.createElement(RangeSlider,{min:config.min,max:config.max,value:config.initialValue,easing:easing,resolution:config.resolution,factor:config.factor,onChange:callback}));expect(wrapper).toMatchSnapshot();// Create a simulated touch event.
var pageX=config.leftPixelOffset+config.currentTouchDeltaX;var touchEvent=createTouchEvent(pageX);var inst=wrapper.instance();inst.handleTouchStart(touchEvent,1);simulateSteps.forEach(function(deltaX){config.currentTouchDeltaX+=deltaX;touchEvent.touches[0].pageX=config.leftPixelOffset+config.currentTouchDeltaX;Object.defineProperty(inst.domElement,'offsetLeft',{get:function get(){return config.leftPixelOffset;},configurable:true});Object.defineProperty(inst.domElement,'offsetWidth',{get:function get(){return config.totalPixelWidth;},configurable:true});inst.handleTouchMove(touchEvent);});inst.handleTouchEnd();};describe.skip('<RangeSlider />',function(){/**
   * Simple attribute tests
   */it('renders with boundaries',function(){var wrapper=shallow(React.createElement(RangeSlider,{min:0,max:100}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});it('renders without boundaries',function(){var wrapper=shallow(React.createElement(RangeSlider,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});it('renders without a value pair',function(){var wrapper=shallow(React.createElement(RangeSlider,{value:[10,50]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RangeSliderHandle).length).toBe(2);});/**
   * Callback tests
   */it('emits onChange if handle was touched (linear)',function(){simulateInputTest(100,73,// Range slider pixel width and offset.
0,100,// Range slider minimum and maximum value.
[50,75],// Initial value.
'linear',// Which wasing should be used.
0.01,// Resolution.
[// A series of pixel offsets to move the slider handle.
+0,+3,-15,+17,-80,+75]);});it('emits onChange if handle was touched (exponential)',function(){simulateInputTest(78,12,// Range slider pixel width and offset.
0,1000,// Range slider minimum maximum value.
[10,450],// Initial value.
'exponential',// Which wasing should be used.
0.01,// Resolution.
[// A series of pixel offsets to move the slider handle.
+10,+10,+10,+10,+10,+10,+10,+10,-10,-10,-10,-10,-10,-10,-10,-10,+3,-15,+17,-80,+104,-23,-12,+67]);});it('emits onChange if the outer range was touched',function(){// eslint-disable-next-line require-jsdoc
var callback=function callback(value){return expect(value).toEqual([-80,0]);};var wrapper=mount(React.createElement(RangeSlider,{min:-100,max:100,value:[0,0],onChange:callback}));// Create a simulated touch event at a page x offset of 20px.
var touchEvent=createTouchEvent(20);var inst=wrapper.instance();Object.defineProperty(inst.domElement,'offsetLeft',{get:function get(){return 0;},configurable:true});Object.defineProperty(inst.domElement,'offsetWidth',{get:function get(){return 200;},configurable:true});inst.handleRangeTouch(touchEvent);});});