lucid-ui/lib/components/SlidePanel/SlidePanel.spec.js

A UI component library from AppNexus.

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import { shallow } from 'enzyme';
import React from 'react';
import { common } from '../../util/generic-tests';
import * as domHelpers from '../../util/dom-helpers';
import SlidePanel from './SlidePanel';
var Slide = SlidePanel.Slide;
describe('SlidePanel', function () {
  common(SlidePanel);
  describe('event handlers', function () {
    it('should trigger `onSwipe` when touch events are fired', function () {
      var onSwipe = jest.fn();
      var wrapper = shallow( /*#__PURE__*/React.createElement(SlidePanel, {
        onSwipe: onSwipe,
        slidesToShow: 2
      }, /*#__PURE__*/React.createElement(Slide, null, "foo"), /*#__PURE__*/React.createElement(Slide, null, "bar"), /*#__PURE__*/React.createElement(Slide, null, "baz")), {
        disableLifecycleMethods: true
      });
      var slidePanelInstance = wrapper.instance();
      slidePanelInstance.rootHTMLDivElement.current = {
        getBoundingClientRect: jest.fn(function () {
          return {
            width: 100
          };
        })
      };
      var touchStartEvent = {
        touches: [{
          screenX: 100
        }]
      };
      var touchEndEvent = {
        changedTouches: [{
          screenX: 0
        }]
      };
      slidePanelInstance.handleTouchStart(touchStartEvent);
      slidePanelInstance.handleTouchEnd(touchEndEvent);
      expect(onSwipe).toHaveBeenCalledWith(2, {
        event: touchEndEvent,
        props: slidePanelInstance.props
      });
    });
    it('should update component when while being swiped', function () {
      var onSwipe = jest.fn();
      var wrapper = shallow( /*#__PURE__*/React.createElement(SlidePanel, {
        onSwipe: onSwipe,
        slidesToShow: 2
      }, /*#__PURE__*/React.createElement(Slide, null, "foo"), /*#__PURE__*/React.createElement(Slide, null, "bar"), /*#__PURE__*/React.createElement(Slide, null, "baz")), {
        disableLifecycleMethods: true
      });
      var slidePanelInstance = wrapper.instance();
      slidePanelInstance.rootHTMLDivElement.current = {
        getBoundingClientRect: jest.fn(function () {
          return {
            width: 100
          };
        })
      };
      slidePanelInstance.handleTouchStart({
        touches: [{
          screenX: 100
        }]
      });
      slidePanelInstance.handleTouchMove({
        touches: [{
          screenX: 50
        }]
      });
      expect(slidePanelInstance.state.translateXPixel).toBe(-50);
    });
  });
  describe('props', function () {
    describe('isLooped', function () {
      var shiftChildren = domHelpers.shiftChildren;
      var slidestripElement = {};
      var wrapper;
      var slidePanelInstance;
      beforeEach(function () {
        domHelpers.shiftChildren = jest.fn(); // eslint-disable-line no-import-assign

        wrapper = shallow( /*#__PURE__*/React.createElement(SlidePanel, {
          isLooped: true,
          offset: 0
        }, /*#__PURE__*/React.createElement(Slide, null, "foo"), /*#__PURE__*/React.createElement(Slide, null, "bar"), /*#__PURE__*/React.createElement(Slide, null, "baz"), /*#__PURE__*/React.createElement(Slide, null, "spam"), /*#__PURE__*/React.createElement(Slide, null, "eggs"), /*#__PURE__*/React.createElement(Slide, null, "quux")), {
          disableLifecycleMethods: true
        });
        slidePanelInstance = wrapper.instance();
        slidePanelInstance.rootHTMLDivElement.current = {
          getBoundingClientRect: jest.fn(function () {
            return {
              width: 100
            };
          })
        };
        slidePanelInstance.slideStrip.current = {};
        jest.useFakeTimers();
      });
      afterEach(function () {
        domHelpers.shiftChildren = shiftChildren; // eslint-disable-line no-import-assign

        jest.useRealTimers();
      });
      it('should shift child elements in slidestrip by half the total number of slides with `offset` 0', function () {
        slidePanelInstance.componentDidMount();
        expect(domHelpers.shiftChildren).toHaveBeenCalledWith(slidestripElement, 3);
      });
      it('should shift child elements in slidestrip relative to number of slides and `offset` value', function () {
        var prevProps = slidePanelInstance.props;
        wrapper.setProps(_objectSpread(_objectSpread({}, slidePanelInstance.props), {}, {
          offset: -2
        }));
        slidePanelInstance.componentDidUpdate(prevProps);
        jest.runAllTimers();
        expect(slidePanelInstance.offsetTranslate).toBe(5);
      });
    });
  });
});