wix-style-react
Version:
wix-style-react
769 lines (670 loc) • 25.8 kB
JavaScript
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _testUtils = require('react-dom/test-utils');
var _testUtils2 = _interopRequireDefault(_testUtils);
var _enzyme = require('enzyme');
var _TestBackend = require('../DragDropContextProvider/TestBackend');
var _TestBackend2 = _interopRequireDefault(_TestBackend);
var _DragDropContextProvider = require('../DragDropContextProvider');
var _DragDropContextProvider2 = _interopRequireDefault(_DragDropContextProvider);
var _Modal = require('../Modal');
var _Modal2 = _interopRequireDefault(_Modal);
var _Tooltip = require('../Tooltip');
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _Button = require('../Button');
var _Button2 = _interopRequireDefault(_Button);
var _testkit = require('../../testkit');
var _enzyme2 = require('../../testkit/enzyme');
var _SortableListDriver = require('./SortableList.driver.private');
var _SortableListDriver2 = _interopRequireDefault(_SortableListDriver);
var _SortableList = require('./SortableList');
var _SortableList2 = _interopRequireDefault(_SortableList);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
describe('SortableList', function () {
it('should exists', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref) {
var item = _ref.item;
return _react2.default.createElement(
'div',
null,
item.text
);
}; // eslint-disable-line react/prop-types
var wrapper = _testUtils2.default.renderIntoDocument(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list',
items: items,
renderItem: renderItem,
onDrop: onDrop
})
));
var driver = (0, _testkit.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
expect(driver.exists()).toBeTruthy();
});
it('should call onDragStart and onDragEnd', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var onDrop = jest.fn();
var onDragStart = jest.fn();
var onDragEnd = jest.fn();
var renderItem = function renderItem(_ref2) {
var item = _ref2.item;
return _react2.default.createElement(
'div',
null,
item.text
);
}; // eslint-disable-line react/prop-types
var wrapper = _testUtils2.default.renderIntoDocument(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list',
groupName: 'group',
items: items,
renderItem: renderItem,
onDrop: onDrop,
onDragStart: onDragStart,
onDragEnd: onDragEnd
})
));
var privateDriver = (0, _SortableListDriver2.default)({
wrapper: wrapper,
element: _reactDom2.default.findDOMNode(wrapper)
});
privateDriver.beginDrag('1');
privateDriver.endDrag();
expect(onDragStart).toBeCalledWith({
containerId: 'sortable-list',
groupName: 'group',
id: '1',
index: 0,
item: { id: '1', text: 'item 1' }
});
expect(onDragEnd).toBeCalledWith({
containerId: 'sortable-list',
groupName: 'group',
id: '1',
index: 0,
item: { id: '1', text: 'item 1' }
});
expect(onDrop).not.toBeCalled();
});
it('should call onDrop', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref3) {
var item = _ref3.item;
return _react2.default.createElement(
'div',
null,
item.text
);
}; // eslint-disable-line react/prop-types
var wrapper = _testUtils2.default.renderIntoDocument(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list',
items: items,
renderItem: renderItem,
onDrop: onDrop
})
));
var driver = (0, _testkit.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
driver.reorder({ removedId: '1', addedId: '2' });
expect(onDrop).toBeCalledWith({
addedIndex: 1,
addedToContainerId: 'sortable-list',
payload: { id: '1', text: 'item 1' },
removedFromContainerId: 'sortable-list',
removedIndex: 0
});
});
it('should call onDrop(with portal)', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref4) {
var item = _ref4.item;
return _react2.default.createElement(
'div',
null,
item.text
);
}; // eslint-disable-line react/prop-types
var wrapper = _testUtils2.default.renderIntoDocument(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(_SortableList2.default, {
usePortal: true,
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list',
items: items,
renderItem: renderItem,
onDrop: onDrop
})
));
var driver = (0, _testkit.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
driver.reorder({ removedId: '1', addedId: '2' });
expect(onDrop).toBeCalledWith({
addedIndex: 1,
addedToContainerId: 'sortable-list',
payload: { id: '1', text: 'item 1' },
removedFromContainerId: 'sortable-list',
removedIndex: 0
});
});
it('should call onDrop(inside of the modal)', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref5) {
var item = _ref5.item;
return _react2.default.createElement(
'div',
null,
item.text
);
}; // eslint-disable-line react/prop-types
var wrapper = _testUtils2.default.renderIntoDocument(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(
_Modal2.default,
{ isOpen: true },
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list',
items: items,
renderItem: renderItem,
onDrop: onDrop
})
)
));
var driver = (0, _testkit.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
driver.reorder({ removedId: '1', addedId: '2' });
expect(onDrop).toBeCalledWith({
addedIndex: 1,
addedToContainerId: 'sortable-list',
payload: { id: '1', text: 'item 1' },
removedFromContainerId: 'sortable-list',
removedIndex: 0
});
});
it('should call onDrop(inside of the tooltip)', function (done) {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref6) {
var item = _ref6.item;
return _react2.default.createElement(
'div',
null,
item.text
);
}; // eslint-disable-line react/prop-types
var wrapper = _testUtils2.default.renderIntoDocument(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(
_Tooltip2.default,
{
active: true,
showImmediately: true,
content: _react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list',
items: items,
renderItem: renderItem,
onDrop: onDrop
})
},
_react2.default.createElement(
_Button2.default,
null,
'Click me'
)
)
));
var driver = (0, _testkit.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
setTimeout(function () {
driver.reorder({ removedId: '1', addedId: '2' });
expect(onDrop).toBeCalledWith({
addedIndex: 1,
addedToContainerId: 'sortable-list',
payload: { id: '1', text: 'item 1' },
removedFromContainerId: 'sortable-list',
removedIndex: 0
});
done();
}, 100);
});
it('should call onDrop(inside of the tooltip with portal)', function (done) {
var dataHook = 'sortable-list-inside-of-a-tooltip';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref7) {
var item = _ref7.item;
return _react2.default.createElement(
'div',
null,
item.text
);
}; // eslint-disable-line react/prop-types
var wrapper = _testUtils2.default.renderIntoDocument(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(
_Tooltip2.default,
{
appendTo: document.body,
active: true,
showImmediately: true,
content: _react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list',
items: items,
renderItem: renderItem,
onDrop: onDrop
})
},
_react2.default.createElement(
_Button2.default,
null,
'Click me'
)
)
));
var driver = (0, _testkit.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
setTimeout(function () {
driver.reorder({ removedId: '1', addedId: '2' });
expect(onDrop).toBeCalledWith({
addedIndex: 1,
addedToContainerId: 'sortable-list',
payload: { id: '1', text: 'item 1' },
removedFromContainerId: 'sortable-list',
removedIndex: 0
});
done();
}, 100);
});
it('should call onDrop(inside of the modal with nested DragDropContextProvider)', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref8) {
var item = _ref8.item;
return _react2.default.createElement(
'div',
null,
item.text
);
}; // eslint-disable-line react/prop-types
var wrapper = _testUtils2.default.renderIntoDocument(_react2.default.createElement(
_Modal2.default,
{ isOpen: true },
_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list',
items: items,
renderItem: renderItem,
onDrop: onDrop
})
)
));
var driver = (0, _testkit.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
driver.reorder({ removedId: '1', addedId: '2' });
expect(onDrop).toBeCalledWith({
addedIndex: 1,
addedToContainerId: 'sortable-list',
payload: { id: '1', text: 'item 1' },
removedFromContainerId: 'sortable-list',
removedIndex: 0
});
});
});
describe('Enzyme: SortableList', function () {
it('should call onDrop', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref9) {
var item = _ref9.item;
return _react2.default.createElement(
'div',
null,
item.text
);
}; // eslint-disable-line react/prop-types
var wrapper = (0, _enzyme.mount)(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list',
items: items,
renderItem: renderItem,
onDrop: onDrop
})
));
var driver = (0, _enzyme2.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
driver.reorder({ removedId: '1', addedId: '2' });
expect(onDrop).toBeCalledWith({
addedIndex: 1,
addedToContainerId: 'sortable-list',
payload: { id: '1', text: 'item 1' },
removedFromContainerId: 'sortable-list',
removedIndex: 0
});
});
it('should call onDrop when drag between columns', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var items2 = [{ id: '11', text: 'item 11' }, { id: '21', text: 'item 21' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref10) {
var item = _ref10.item;
return _react2.default.createElement(
'div',
{ key: item.id },
item.text
);
}; // eslint-disable-line react/prop-types
var MyComponent = function (_React$Component) {
_inherits(MyComponent, _React$Component);
function MyComponent() {
_classCallCheck(this, MyComponent);
return _possibleConstructorReturn(this, (MyComponent.__proto__ || Object.getPrototypeOf(MyComponent)).apply(this, arguments));
}
_createClass(MyComponent, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list-1',
groupName: 'group1',
items: items,
renderItem: renderItem,
onDrop: onDrop
}),
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list-2',
groupName: 'group1',
items: items2,
renderItem: renderItem,
onDrop: onDrop
})
);
}
}]);
return MyComponent;
}(_react2.default.Component);
var wrapper = (0, _enzyme.mount)(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(MyComponent, null)
));
var driver = (0, _enzyme2.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
driver.reorder({ removedId: '1', addedId: '21' });
expect(onDrop).toBeCalledWith({
addedIndex: 1,
addedToContainerId: 'sortable-list-2',
payload: { id: '1', text: 'item 1' },
removedFromContainerId: 'sortable-list-1',
removedIndex: 0
});
});
it('should not call onDrop when drag between columns with different groupName', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var items2 = [{ id: '11', text: 'item 11' }, { id: '21', text: 'item 21' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref11) {
var item = _ref11.item;
return _react2.default.createElement(
'div',
{ key: item.id },
item.text
);
}; // eslint-disable-line react/prop-types
var MyComponent = function (_React$Component2) {
_inherits(MyComponent, _React$Component2);
function MyComponent() {
_classCallCheck(this, MyComponent);
return _possibleConstructorReturn(this, (MyComponent.__proto__ || Object.getPrototypeOf(MyComponent)).apply(this, arguments));
}
_createClass(MyComponent, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list-1',
groupName: 'group1',
items: items,
renderItem: renderItem,
onDrop: onDrop
}),
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list-2',
groupName: 'group2',
items: items2,
renderItem: renderItem,
onDrop: onDrop
})
);
}
}]);
return MyComponent;
}(_react2.default.Component);
var wrapper = (0, _enzyme.mount)(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(MyComponent, null)
));
var driver = (0, _enzyme2.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
driver.reorder({ removedId: '1', addedId: '21' });
expect(onDrop).not.toBeCalled();
});
it('should not call onDrop when drag between columns without group name', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var items2 = [{ id: '11', text: 'item 11' }, { id: '21', text: 'item 21' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref12) {
var item = _ref12.item;
return _react2.default.createElement(
'div',
{ key: item.id },
item.text
);
}; // eslint-disable-line react/prop-types
var MyComponent = function (_React$Component3) {
_inherits(MyComponent, _React$Component3);
function MyComponent() {
_classCallCheck(this, MyComponent);
return _possibleConstructorReturn(this, (MyComponent.__proto__ || Object.getPrototypeOf(MyComponent)).apply(this, arguments));
}
_createClass(MyComponent, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list-1',
items: items,
renderItem: renderItem,
onDrop: onDrop
}),
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list-2',
items: items2,
renderItem: renderItem,
onDrop: onDrop
})
);
}
}]);
return MyComponent;
}(_react2.default.Component);
var wrapper = (0, _enzyme.mount)(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(MyComponent, null)
));
var driver = (0, _enzyme2.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
driver.reorder({ removedId: '1', addedId: '21' });
expect(onDrop).not.toBeCalled();
});
it('should call onDrop when drag&drop columns', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var items2 = [{ id: '11', text: 'item 11' }, { id: '21', text: 'item 21' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref13) {
var item = _ref13.item;
return _react2.default.createElement(
'div',
{ key: item.id },
item.text
);
}; // eslint-disable-line react/prop-types
var renderColumn = function renderColumn(_ref14) {
var item = _ref14.item;
return (// eslint-disable-line react/prop-types
_react2.default.createElement(
'div',
{ key: item.id },
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list-2',
items: items2,
renderItem: renderItem,
onDrop: onDrop
})
)
);
};
var MyComponent = function (_React$Component4) {
_inherits(MyComponent, _React$Component4);
function MyComponent() {
_classCallCheck(this, MyComponent);
return _possibleConstructorReturn(this, (MyComponent.__proto__ || Object.getPrototypeOf(MyComponent)).apply(this, arguments));
}
_createClass(MyComponent, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(_SortableList2.default, {
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list-1',
groupName: 'group1',
items: items,
renderItem: renderColumn,
onDrop: onDrop
})
);
}
}]);
return MyComponent;
}(_react2.default.Component);
var wrapper = (0, _enzyme.mount)(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(MyComponent, null)
));
var driver = (0, _enzyme2.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
driver.reorder({ removedId: '1', addedId: '2' });
expect(onDrop).toBeCalledWith({
addedIndex: 1,
addedToContainerId: 'sortable-list-1',
payload: { id: '1', text: 'item 1' },
removedFromContainerId: 'sortable-list-1',
removedIndex: 0
});
});
it('should call onDrop(with portal)', function () {
var dataHook = 'sortable-list';
var items = [{ id: '1', text: 'item 1' }, { id: '2', text: 'item 2' }];
var onDrop = jest.fn();
var renderItem = function renderItem(_ref15) {
var item = _ref15.item;
return _react2.default.createElement(
'div',
null,
item.text
);
}; // eslint-disable-line react/prop-types
var wrapper = (0, _enzyme.mount)(_react2.default.createElement(
_DragDropContextProvider2.default,
{ backend: _TestBackend2.default },
_react2.default.createElement(_SortableList2.default, {
usePortal: true,
contentClassName: 'cl',
dataHook: dataHook,
containerId: 'sortable-list',
items: items,
renderItem: renderItem,
onDrop: onDrop
})
));
var driver = (0, _enzyme2.sortableListTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
driver.reorder({ removedId: '1', addedId: '2' });
expect(onDrop).toBeCalledWith({
addedIndex: 1,
addedToContainerId: 'sortable-list',
payload: { id: '1', text: 'item 1' },
removedFromContainerId: 'sortable-list',
removedIndex: 0
});
});
});