-
- );
-
- mouseDownOn(drag, '.cancel', false);
- mouseDownOn(drag, '.content', true);
- });
-
- it('should not initialize dragging onmousedown of handle, even if children fire event', function () {
- drag = TestUtils.renderIntoDocument(
-
-
-
-
Cancel
-
-
Lorem ipsum...
-
-
- );
-
- mouseDownOn(drag, '.content', true);
- mouseDownOn(drag, '.deep', false);
- mouseDownOn(drag, '.cancel > div', false);
- mouseDownOn(drag, '.cancel span', false);
- mouseDownOn(drag, '.cancel', false);
- });
-
- it('should discontinue dragging onmouseup', function () {
- drag = TestUtils.renderIntoDocument();
-
- TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(drag));
- assert.equal(drag.state.dragging, true);
-
- resetDragging(drag);
- });
-
- it('should initialize dragging ontouchstart', function () {
- drag = TestUtils.renderIntoDocument();
-
- // Need to dispatch this ourselves as there is no onTouchStart handler (due to passive)
- // so TestUtils.Simulate will not work
- const e = new Event('touchstart');
- ReactDOM.findDOMNode(drag).dispatchEvent(e);
- assert.equal(drag.state.dragging, true);
- });
-
- it('should call preventDefault on touchStart event', function () {
- drag = TestUtils.renderIntoDocument();
-
- const e = new Event('touchstart');
- // Oddly `e.defaultPrevented` is not changing here. Maybe because we're not mounted to a real doc?
- let pdCalled = false;
- e.preventDefault = function() { pdCalled = true; };
- ReactDOM.findDOMNode(drag).dispatchEvent(e);
- assert(pdCalled);
- assert.equal(drag.state.dragging, true);
- });
-
- it('should *not* call preventDefault on touchStart event if "allowMobileScroll"', function () {
- drag = TestUtils.renderIntoDocument();
-
- const e = new Event('touchstart');
- // Oddly `e.defaultPrevented` is not changing here. Maybe because we're not mounted to a real doc?
- let pdCalled = false;
- e.preventDefault = function() { pdCalled = true; };
- ReactDOM.findDOMNode(drag).dispatchEvent(e);
- assert(!pdCalled);
- assert.equal(drag.state.dragging, true);
- });
-
- it('should not call preventDefault on touchStart event if not on handle', function () {
- drag = TestUtils.renderIntoDocument(
-
-
-
-
Handle
-
-
Lorem ipsum...
-
-
- );
-
- const e = new Event('touchstart');
- let pdCalled = false;
- e.preventDefault = function() { pdCalled = true; };
- ReactDOM.findDOMNode(drag).querySelector('.content').dispatchEvent(e);
- assert(!pdCalled);
- assert(drag.state.dragging !== true);
- });
-
- it('should modulate position on scroll', function (done) {
- let dragCalled = false;
-
- function onDrag(e, coreEvent) {
- assert.equal(Math.round(coreEvent.deltaY), 500);
- dragCalled = true;
- }
- drag = TestUtils.renderIntoDocument();
- const node = ReactDOM.findDOMNode(drag);
-
- // Create a container we can scroll. I'm doing it this way so we can still access .
- // Enzyme (airbnb project) would make this a lot easier.
- const fragment = fragmentFromString(`
-
-
-
-
- `);
- transplantNodeInto(node, fragment, (f) => f.children[0]);
-
- TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
- assert.equal(drag.state.dragging, true);
-
- // Scroll the inner container & trigger a scroll
- fragment.scrollTop = 500;
- mouseMove(0, 0);
- TestUtils.Simulate.mouseUp(node);
- setTimeout(function() {
- assert.equal(drag.state.dragging, false);
- assert.equal(dragCalled, true);
- assert.equal(drag.state.y, 500);
- // Cleanup
- document.body.removeChild(fragment);
- done();
- }, 50);
-
- });
-
- it('should respect offsetParent on nested div scroll', function (done) {
- let dragCalled = false;
- function onDrag(e, coreEvent) {
- dragCalled = true;
- // Because the offsetParent is the body, we technically haven't moved at all relative to it
- assert.equal(coreEvent.deltaY, 0);
- }
- drag = TestUtils.renderIntoDocument();
- const node = ReactDOM.findDOMNode(drag);
-
- // Create a container we can scroll. I'm doing it this way so we can still access .
- // Enzyme (airbnb project) would make this a lot easier.
- const fragment = fragmentFromString(`
-
-
-
-
- `);
- transplantNodeInto(node, fragment, (f) => f.children[0]);
-
- TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
- fragment.scrollTop = 500;
-
- mouseMove(0, 0);
- TestUtils.Simulate.mouseUp(node);
- setTimeout(function() {
- assert(dragCalled);
- // Cleanup
- document.body.removeChild(fragment);
- done();
- }, 50);
- });
- });
-
- describe('draggable callbacks', function () {
- it('should call back on drag', function (done) {
- function onDrag(event, data) {
- assert.equal(data.x, 100);
- assert.equal(data.y, 100);
- assert.equal(data.deltaX, 100);
- assert.equal(data.deltaY, 100);
- assert.equal(data.node, ReactDOM.findDOMNode(drag));
- done();
- }
- drag = TestUtils.renderIntoDocument(
-
-
-
- );
-
- // (element, fromX, fromY, toX, toY)
- simulateMovementFromTo(drag, 0, 0, 100, 100);
- });
-
- it('should call back with correct dom node with nodeRef', function (done) {
- function onDrag(event, data) {
- // Being tricky here and installing the ref on the inner child, to ensure it's working
- // and not just falling back on ReactDOM.findDOMNode()
- assert.equal(data.node, ReactDOM.findDOMNode(drag).firstChild);
- done();
- }
- const nodeRef = React.createRef();
- drag = TestUtils.renderIntoDocument(
-
-
-
-
-
- );
-
- // (element, fromX, fromY, toX, toY)
- simulateMovementFromTo(drag, 0, 0, 100, 100);
- });
-
- it('should call back with correct dom node with nodeRef (forwardRef)', function (done) {
-
- const Component1 = React.forwardRef(function (props, ref) {
- return