lucid-ui
Version:
A UI component library from AppNexus.
104 lines • 6.54 kB
JavaScript
import _noop from "lodash/noop";
import assert from 'assert';
import React from 'react';
import { mount, shallow } from 'enzyme';
import sinon from 'sinon';
import { common } from '../../util/generic-tests';
import { DraggableListDumb as DraggableList } from './DraggableList';
describe('DraggableList', function () {
common(DraggableList);
describe('props', function () {
describe('Item', function () {
it('Item as children', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DraggableList, null, /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item One"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Two")));
assert.equal(wrapper.find('.lucid-DraggableList-Item').length, 2);
});
});
describe('hasDragHandle', function () {
it('should have a drag handle on items', function () {
var wrapper = mount( /*#__PURE__*/React.createElement(DraggableList, {
hasDragHandle: true
}, /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item One"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Two"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Three"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Four")));
assert.equal(wrapper.find('.lucid-DraggableList-Item-handle').length, 4);
});
it('should not have a drag handle on items', function () {
var wrapper = mount( /*#__PURE__*/React.createElement(DraggableList, {
hasDragHandle: false
}, /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item One"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Two"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Three"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Four")));
assert.equal(wrapper.find('.lucid-DraggableList-Item-handle').length, 0);
});
});
describe('dragOverIndex', function () {
it('should have a highlighted divider', function () {
var wrapper = mount( /*#__PURE__*/React.createElement(DraggableList, {
dragIndex: 0,
dragOverIndex: 2
}, /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item One"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Two"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Three"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Four")));
assert.equal(wrapper.find('.lucid-DraggableList-Divider-is-visible').length, 1);
});
it('should not have a highlighted divider when dragOverIndex is invalid', function () {
var wrapper = mount( /*#__PURE__*/React.createElement(DraggableList, {
dragIndex: 0,
dragOverIndex: 0
}, /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item One"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Two"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Three"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Four")));
assert.equal(wrapper.find('.lucid-DraggableList-Divider-is-visible').length, 0);
});
});
describe('onDrop', function () {
it('should be called when onDragEnd event handler is called on a DraggableList.Item', function () {
var onDrop = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DraggableList, {
dragIndex: 0,
dragOverIndex: 3,
onDrop: onDrop
}, /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item One"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Two"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Three"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Four")));
wrapper.find('.lucid-DraggableList-Item').at(3).simulate('dragend');
assert(onDrop.called, 'must be called');
assert.deepEqual({
oldIndex: 0,
newIndex: 2
}, onDrop.lastCall.args[0], 'must pass the old and new item indexes');
});
});
});
describe('onDragOver', function () {
it('should be called when over an item', function () {
var onDragOver = sinon.spy();
var wrapper = mount( /*#__PURE__*/React.createElement(DraggableList, {
dragIndex: 0,
dragOverIndex: 0,
onDragOver: onDragOver
}, /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item One"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Two"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Three"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Four")));
wrapper.find('.lucid-DraggableList-Item').at(3).simulate('dragover', {
preventDefault: _noop
});
assert(onDragOver.called, 'must be called');
assert.equal(3, onDragOver.lastCall.args[0], 'must pass drag over index');
});
it('should be called when onDragLeave is called moving past the last item', function () {
var onDragOver = sinon.spy();
var wrapper = mount( /*#__PURE__*/React.createElement(DraggableList, {
dragIndex: 0,
dragOverIndex: 3,
onDragOver: onDragOver
}, /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item One"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Two"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Three"), /*#__PURE__*/React.createElement(DraggableList.Item, null, "Item Four")));
wrapper.simulate('dragleave', {
clientY: 100
});
assert(onDragOver.called, 'must be called');
assert.deepEqual(4, onDragOver.lastCall.args[0], 'must pass last index');
});
});
describe('pass throughs', function () {
it('passes through Item className to the rendered item element', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DraggableList, null, /*#__PURE__*/React.createElement(DraggableList.Item, {
className: "TestOne"
}, "One"), /*#__PURE__*/React.createElement(DraggableList.Item, {
className: "TestTwo"
}, "Two")));
var itemsWrapper = wrapper.find('.lucid-DraggableList-Item');
assert.equal(itemsWrapper.find('.TestOne').length, 1, 'must find one item with className `TestOne`');
assert.equal(itemsWrapper.find('.TestTwo').length, 1, 'must find one item with className `TestTwo`');
});
});
});