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

A UI component library from AppNexus.

import _last from "lodash/last";
import _first from "lodash/first";
import _assign from "lodash/assign";
import _has from "lodash/has";
import _forEach from "lodash/forEach";
import _noop from "lodash/noop";
import assert from 'assert';
import React from 'react';
import sinon from 'sinon';
import { mount, shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import DragCaptureZone from './DragCaptureZone';
describe('DragCaptureZone', function () {
  common(DragCaptureZone);
  describe('props', function () {
    describe('onDrag', function () {
      it('defaults to the Lodash `noop` method.', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(DragCaptureZone, null));
        assert.equal(wrapper.prop('onDrag'), _noop);
      });
    });
    describe('onDragEnd', function () {
      it('defaults to the Lodash `noop` method.', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(DragCaptureZone, null));
        assert.equal(wrapper.prop('onDragEnd'), _noop);
      });
    });
    describe('onDragStart', function () {
      it('defaults to the Lodash `noop` method.', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(DragCaptureZone, null));
        assert.equal(wrapper.prop('onDragStart'), _noop);
      });
    });
    describe('onDragCancel', function () {
      it('defaults to the Lodash `noop` method.', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(DragCaptureZone, null));
        assert.equal(wrapper.prop('onDragCancel'), _noop);
      });
    });
    describe('pass throughs', function () {
      it('passes through all props to the root element.', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(DragCaptureZone, {
          foo: 1,
          bar: 2,
          baz: 3
        }));
        var rootProps = wrapper.find('div').props();

        _forEach(['foo', 'bar', 'baz'], function (prop) {
          assert(_has(rootProps, prop));
        });
      });
    });
  });
});
describe('DragCaptureZone', function () {
  var dragCoordinates = {
    pageX: 75,
    pageY: 25
  };
  var dragEndCoordinates = {
    pageX: 25,
    pageY: 50
  };
  var dragStartCoordinates = {
    pageX: 50,
    pageY: 75
  };
  describe('user presses the mouse button down over the rendered component', function () {
    var onDragStart;
    beforeEach(function () {
      onDragStart = sinon.spy();
      mount( /*#__PURE__*/React.createElement(DragCaptureZone, {
        onDragStart: onDragStart
      })).find('div').simulate('mousedown', dragStartCoordinates);
    });
    it('calls the function passed in as the `onDragStart` prop...', function () {
      assert(onDragStart.calledOnce);
    });
    it('...passes along a map of coordinate data as the first argument...', function () {
      var expectedData = _assign({
        dX: 0,
        dY: 0
      }, dragStartCoordinates);

      assert.deepEqual(_first(onDragStart.args[0]), expectedData);
    });
    it('...and passes along a React synthetic event as part of the second argument.', function () {
      assert(_last(onDragStart.args[0]).event);
    });
  });
  describe('user moves the mouse button after having started a drag interaction', function () {
    var event;
    var onDrag;
    beforeEach(function () {
      event = document.createEvent('Event');

      _assign(event, dragCoordinates);

      event.initEvent('mousemove', true, true);
      onDrag = sinon.spy();
      mount( /*#__PURE__*/React.createElement(DragCaptureZone, {
        onDrag: onDrag
      })).find('div').simulate('mousedown', dragStartCoordinates);
      window.document.dispatchEvent(event);
    });
    it('calls the function passed in as the `onDrag` prop...', function () {
      assert(onDrag.calledOnce);
    });
    it('...passes along a map of coordinate data as the first argument...', function () {
      var expectedData = _assign({
        dX: dragCoordinates.pageX - dragStartCoordinates.pageX,
        dY: dragCoordinates.pageY - dragStartCoordinates.pageY
      }, dragCoordinates);

      assert.deepEqual(_first(onDrag.args[0]), expectedData);
    });
    it('...and passes along a native event as part of the second argument.', function () {
      assert(_last(onDrag.args[0]).event instanceof window.Event);
    });
  });
  describe('user releases the mouse button after having started a drag interaction', function () {
    var event;
    var onDragEnd;
    beforeEach(function () {
      event = document.createEvent('Event');

      _assign(event, dragEndCoordinates);

      event.initEvent('mouseup', true, true);
      onDragEnd = sinon.spy();
      mount( /*#__PURE__*/React.createElement(DragCaptureZone, {
        onDragEnd: onDragEnd
      })).find('div').simulate('mousedown', dragStartCoordinates);
      window.document.dispatchEvent(event);
    });
    it('calls the function passed in as the `onDragEnd` prop...', function () {
      assert(onDragEnd.calledOnce);
    });
    it('...passes along a map of coordinate data as the first argument...', function () {
      var expectedData = _assign({
        dX: dragEndCoordinates.pageX - dragStartCoordinates.pageX,
        dY: dragEndCoordinates.pageY - dragStartCoordinates.pageY
      }, dragEndCoordinates);

      assert.deepEqual(_first(onDragEnd.args[0]), expectedData);
    });
    it('...and passes along a native event as part of the second argument.', function () {
      assert(_last(onDragEnd.args[0]).event instanceof window.Event);
    });
  });
  describe('the drag action is canceled', function () {
    var mockEvent = {};
    var onDragCancel;
    beforeEach(function () {
      onDragCancel = sinon.spy();
      var wrapper = shallow( /*#__PURE__*/React.createElement(DragCaptureZone, {
        onDragCancel: onDragCancel
      }), {
        disableLifecycleMethods: true
      });
      wrapper.instance().handleDragCancel(mockEvent);
    });
    it('calls the function passed in as the `onDragCancel` prop...', function () {
      assert(onDragCancel.calledOnce);
    });
    it('...and passes along a React synthetic event as part of the last argument.', function () {
      assert(_last(onDragCancel.args[0]).event);
    });
  });
});