<commit_before>/*eslint no-unused-vars:0, no-console:0*/
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import Draggable, {DraggableCore} from '../index';
import FrameComponent from 'react-frame-component';
import assert from 'power-assert';
import _ from 'lodash';

describe('react-draggable', function () {
  var drag;

  // Remove body margin so offsetParent calculations work properly
  beforeAll(function() {
    const styleNode = document.createElement('style');
    // browser detection (based on prototype.js)
    const styleText = document.createTextNode('body {margin: 0;}');
    styleNode.appendChild(styleText);
    document.getElementsByTagName('head')[0].appendChild(styleNode);
  });

  beforeEach(function() {
    spyOn(console, 'error');
  });

  afterEach(function() {
    try {
      TestUtils.Simulate.mouseUp(ReactDOM.findDOMNode(drag)); // reset user-select
      React.unmountComponentAtNode(ReactDOM.findDOMNode(drag).parentNode);
    } catch(e) { return; }
  });

  describe('props', function () {
    it('should have default properties', function () {
      drag = TestUtils.renderIntoDocument(<Draggable><div/></Draggable>);

      assert(drag.props.axis === 'both');
      assert(drag.props.handle === null);
      assert(drag.props.cancel === null);
      assert(drag.props.bounds == false);
      assert(typeof drag.props.onStart === 'function');
      assert(typeof drag.props.onDrag === 'function');
      assert(typeof drag.props.onStop === 'function');
    });

    it('should set the appropriate custom className when dragging or dragged', function () {
      drag = TestUtils.renderIntoDocument(
        <Draggable
          defaultClassName='foo'
          defaultClassNameDragging='bar'
          defaultClassNameDragged='baz'
        >
          <div/>
        </Draggable>
      );
      var node = ReactDOM.findDOMNode(drag);
      assert(node.getAttribute('class').indexOf('foo') >= 0);
      TestUtils.Simulate.mouseDown(node);
      assert(node.getAttribute('class').indexOf('bar') >= 0);
      TestUtils.Simulate.mouseUp(node);
      assert(node.getAttribute('class').indexOf('baz') >= 0);
    });

    // NOTE: this runs a shallow renderer, which DOES NOT actually render <DraggableCore>
    it('should pass handle on to <DraggableCore>', function () {
      drag = <Draggable handle=".foo"><div /></Draggable>;
      const renderer = TestUtils.createRenderer();
      renderer.render(drag);
      const output = renderer.getRenderOutput();

      const expected = (
        <DraggableCore {...Draggable.defaultProps} handle=".foo">
          <div
            className="react-draggable"
            style={{
              'transform': 'translate(0px, 0px)'
            }}
            transform={null} />
        </DraggableCore>
      );

      // Not easy to actually test equality here. The functions are bound as static props so we can't test those easily.
      const toOmit = ['onStart', 'onStop', 'onDrag', 'onMouseDown', 'children'];
      assert(_.isEqual(
        _.omit(output.props, toOmit),
        _.omit(expected.props, toOmit))
      );
    });

    it('should honor props', function () {
      function handleStart() {}
      function handleDrag() {}
      function handleStop() {}

      drag = TestUtils.renderIntoDocument(
        <Draggable
          axis="y"
          handle=".handle"
          cancel=".cancel"
          grid={[10, 10]}
          onStart={handleStart}
          onDrag={handleDrag}
          onStop={handleStop}>
          <div className="foo bar">
            <div className="handle"/>
            <div className="cancel"/>
          </div>
        </Draggable>
      );

      assert(drag.props.axis === 'y');
      assert(drag.props.handle === '.handle');
      assert(drag.props.cancel === '.cancel');
      assert(_.isEqual(drag.props.grid, [10, 10]));
      assert(drag.props.onStart === handleStart);
      assert(drag.props.onDrag === handleDrag);
      assert(drag.props.onStop === handleStop);
    });

    it('should throw when setting className', function () {
      drag = (<Draggable className="foo"><span /></Draggable>);

      TestUtils.renderIntoDocument(drag);

      expect(
        console.error.calls.argsFor(0)[0].replace('propType:', 'prop type:').split('\n')[0]
      ).toBe(
        'Warning: Failed prop type: Invalid prop className passed to Draggable - do not set this, set it on the child.'
      );
    });

    it('should throw when setting style', function () {
      drag = (<Draggable style={{color: 'red'}}><span /></Draggable>);

      TestUtils.renderIntoDocument(drag);

      expect(
        console.error.calls.argsFor(0)[0].replace('propType:', 'prop type:').split('\n')[0]
      ).toBe(
        'Warning: Failed prop type: Invalid prop style passed to Draggable - do not set this, set it on the child.'
      );
    });

    it('should throw when setting transform', function () {
      drag = (<Draggable transform="translate(100, 100)"><span /></Draggable>);

      TestUtils.renderIntoDocument(drag);

      expect(
        console.error.calls.argsFor(0)[0].replace('propType:', 'prop type:').split('\n')[0]
      ).toBe(
        'Warning: Failed prop type: Invalid prop transform passed to Draggable - do not set this, set it on the child.'
      );
    });

    it('should call onStart when dragging begins', function () {
      let called = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onStart={function () { called = true; }}>
          <div/>
        </Draggable>
      );

      TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(drag));
      assert(called === true);
    });

    it('should call onStop when dragging ends', function () {
      let called = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onStop={function () { called = true; }}>
          <div/>
        </Draggable>
      );

      TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(drag));
      TestUtils.Simulate.mouseUp(ReactDOM.findDOMNode(drag));
      assert(called === true);
    });

    it('should not call onStart when dragging begins and disabled', function () {
      let called = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onStart={function () { called = true; }} disabled={true}>
          <div/>
        </Draggable>
      );

      TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(drag));
      assert(called === false);
    });

    it('should immediately call onStop if onDrag returns false', function () {
      let called = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onDrag={function () { return false; }} onStop={function () { called = true; }}>
          <div/>
        </Draggable>
      );

      TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(drag));
      assert(called === false);
      mouseMove(10, 10);
      assert(called === true);
      assert(drag.state.x === 0);
      assert(drag.state.y === 0);
    });

    it('should render with style translate() for DOM nodes', function () {
      let dragged = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onDrag={function() { dragged = true; }}>
          <div />
        </Draggable>
      );

      const node = ReactDOM.findDOMNode(drag);
      simulateMovementFromTo(drag, 0, 0, 100, 100);

      const style = node.getAttribute('style');
      assert(dragged === true);
      assert(style.indexOf('transform: translate(100px, 100px);') >= 0);
    });

    it('should honor "x" axis', function () {
      let dragged = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onDrag={function() { dragged = true; }} axis="x">
          <div />
        </Draggable>
      );

      const node = ReactDOM.findDOMNode(drag);
      simulateMovementFromTo(drag, 0, 0, 100, 100);

      const style = node.getAttribute('style');
      assert(dragged === true);
      assert(style.indexOf('transform: translate(100px, 0px);') >= 0);
    });

    it('should honor "y" axis', function () {
      let dragged = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onDrag={function() { dragged = true; }} axis="y">
          <div />
        </Draggable>
      );

      const node = ReactDOM.findDOMNode(drag);
      simulateMovementFromTo(drag, 0, 0, 100, 100);

      const style = node.getAttribute('style');
      assert(dragged === true);
      assert(style.indexOf('transform: translate(0px, 100px);') >= 0);
    });

    it('should honor "none" axis', function () {
      let dragged = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onDrag={function() { dragged = true; }} axis="none">
          <div />
        </Draggable>
      );

      const node = ReactDOM.findDOMNode(drag);
      simulateMovementFromTo(drag, 0, 0, 100, 100);

      const style = node.getAttribute('style');
      assert(dragged === true);
      assert(style.indexOf('transform: translate(0px, 0px);') >= 0);
    });

    it('should detect if an element is instanceof SVGElement and set state.isElementSVG to true', function() {
      drag = TestUtils.renderIntoDocument(
          <Draggable>
            <svg />
          </Draggable>
      );

      assert(drag.state.isElementSVG === true);
    });

    it('should detect if an element is NOT an instanceof SVGElement and set state.isElementSVG to false', function() {
      drag = TestUtils.renderIntoDocument(
          <Draggable>
            <div />
          </Draggable>
      );

      assert(drag.state.isElementSVG === false);
    });

    it('should render with transform translate() for SVG nodes', function () {
      drag = TestUtils.renderIntoDocument(
          <Draggable>
            <svg />
          </Draggable>
      );

      const node = ReactDOM.findDOMNode(drag);
      simulateMovementFromTo(drag, 0, 0, 100, 100);

      const transform = node.getAttribute('transform');
      assert(transform.indexOf('translate(100,100)') >= 0);
    });

      it('should add and remove transparent selection class', function () {
         drag = TestUtils.renderIntoDocument(
           <Draggable>
             <div />
           </Draggable>
         );

         const node = ReactDOM.findDOMNode(drag);

         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
         assert(document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseUp(node);
         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
       });

       it('should not add and remove transparent selection class when disabled', function () {

         drag = TestUtils.renderIntoDocument(
           <Draggable enableUserSelectHack={false}>
             <div />
           </Draggable>
         );

         const node = ReactDOM.findDOMNode(drag);

         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseUp(node);
         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
       });

       it('should not add and remove transparent selection class when onStart returns false', function () {
         function onStart() { return false; }

         drag = TestUtils.renderIntoDocument(
           <Draggable onStart={onStart}>
             <div />
           </Draggable>
         );

         const node = ReactDOM.findDOMNode(drag);

         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseUp(node);
         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
       });

    it('should be draggable when in an iframe', function (done) {
      let dragged = false;
      const dragElement = (
        <Draggable onDrag={function() { dragged = true; }}>
          <div />
        </Draggable>
      );
      const renderRoot = document.body.appendChild(document.createElement('div'));
      const frame = ReactDOM.render(<FrameComponent>{ dragElement }</FrameComponent>, renderRoot);

      setTimeout(() => {
        const body = ReactDOM.findDOMNode(frame).contentDocument.body;
        const node = body.querySelector('.react-draggable');
        simulateMovementFromTo(node, 0, 0, 100, 100);

        const style = node.getAttribute('style');
        assert(dragged === true);
        assert(style.indexOf('transform: translate(100px, 100px);') >= 0);

        renderRoot.parentNode.removeChild(renderRoot);
        done();
      }, 50);
    });

      it('should add and remove transparent selection class to iframe’s body when in an iframe', function (done) {
        const dragElement = (
          <Draggable>
            <div />
          </Draggable>
        );
        const renderRoot = document.body.appendChild(document.createElement('div'));
        const frame = ReactDOM.render(<FrameComponent>{ dragElement }</FrameComponent>, renderRoot);

        setTimeout(() => {
          const iframeDoc = ReactDOM.findDOMNode(frame).contentDocument;
          const node = iframeDoc.querySelector('.react-draggable');

	  assert(!document.body.classList.contains('react-draggable-transparent-selection'));
          assert(!iframeDoc.body.classList.contains('react-draggable-transparent-selection'));
          TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
	  assert(!document.body.classList.contains('react-draggable-transparent-selection'));
          assert(iframeDoc.body.classList.contains('react-draggable-transparent-selection'));
          TestUtils.Simulate.mouseUp(node);
	  assert(!document.body.classList.contains('react-draggable-transparent-selection'));
          assert(!iframeDoc.body.classList.contains('react-draggable-transparent-selection'));

          renderRoot.parentNode.removeChild(renderRoot);
          done();
        }, 50);
      });
  });

  describe('interaction', function () {

    function mouseDownOn(drag, selector, shouldDrag) {
      resetDragging(drag);
      const node = ReactDOM.findDOMNode(drag).querySelector(selector);
      if (!node) throw new Error(`Selector not found: ${selector}`);
      TestUtils.Simulate.mouseDown(node);
      assert(drag.state.dragging === shouldDrag);
    }

    function resetDragging(drag) {
      TestUtils.Simulate.mouseUp(ReactDOM.findDOMNode(drag));
      assert(drag.state.dragging === false);
    }
<commit_msg>Lint errors<commit_after>/*eslint no-unused-vars:0, no-console:0*/
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import Draggable, {DraggableCore} from '../index';
import FrameComponent from 'react-frame-component';
import assert from 'power-assert';
import _ from 'lodash';

describe('react-draggable', function () {
  var drag;

  // Remove body margin so offsetParent calculations work properly
  beforeAll(function() {
    const styleNode = document.createElement('style');
    // browser detection (based on prototype.js)
    const styleText = document.createTextNode('body {margin: 0;}');
    styleNode.appendChild(styleText);
    document.getElementsByTagName('head')[0].appendChild(styleNode);
  });

  beforeEach(function() {
    spyOn(console, 'error');
  });

  afterEach(function() {
    try {
      TestUtils.Simulate.mouseUp(ReactDOM.findDOMNode(drag)); // reset user-select
      React.unmountComponentAtNode(ReactDOM.findDOMNode(drag).parentNode);
    } catch(e) { return; }
  });

  describe('props', function () {
    it('should have default properties', function () {
      drag = TestUtils.renderIntoDocument(<Draggable><div/></Draggable>);

      assert(drag.props.axis === 'both');
      assert(drag.props.handle === null);
      assert(drag.props.cancel === null);
      assert(drag.props.bounds == false);
      assert(typeof drag.props.onStart === 'function');
      assert(typeof drag.props.onDrag === 'function');
      assert(typeof drag.props.onStop === 'function');
    });

    it('should set the appropriate custom className when dragging or dragged', function () {
      drag = TestUtils.renderIntoDocument(
        <Draggable
          defaultClassName='foo'
          defaultClassNameDragging='bar'
          defaultClassNameDragged='baz'
        >
          <div/>
        </Draggable>
      );
      var node = ReactDOM.findDOMNode(drag);
      assert(node.getAttribute('class').indexOf('foo') >= 0);
      TestUtils.Simulate.mouseDown(node);
      assert(node.getAttribute('class').indexOf('bar') >= 0);
      TestUtils.Simulate.mouseUp(node);
      assert(node.getAttribute('class').indexOf('baz') >= 0);
    });

    // NOTE: this runs a shallow renderer, which DOES NOT actually render <DraggableCore>
    it('should pass handle on to <DraggableCore>', function () {
      drag = <Draggable handle=".foo"><div /></Draggable>;
      const renderer = TestUtils.createRenderer();
      renderer.render(drag);
      const output = renderer.getRenderOutput();

      const expected = (
        <DraggableCore {...Draggable.defaultProps} handle=".foo">
          <div
            className="react-draggable"
            style={{
              'transform': 'translate(0px, 0px)'
            }}
            transform={null} />
        </DraggableCore>
      );

      // Not easy to actually test equality here. The functions are bound as static props so we can't test those easily.
      const toOmit = ['onStart', 'onStop', 'onDrag', 'onMouseDown', 'children'];
      assert(_.isEqual(
        _.omit(output.props, toOmit),
        _.omit(expected.props, toOmit))
      );
    });

    it('should honor props', function () {
      function handleStart() {}
      function handleDrag() {}
      function handleStop() {}

      drag = TestUtils.renderIntoDocument(
        <Draggable
          axis="y"
          handle=".handle"
          cancel=".cancel"
          grid={[10, 10]}
          onStart={handleStart}
          onDrag={handleDrag}
          onStop={handleStop}>
          <div className="foo bar">
            <div className="handle"/>
            <div className="cancel"/>
          </div>
        </Draggable>
      );

      assert(drag.props.axis === 'y');
      assert(drag.props.handle === '.handle');
      assert(drag.props.cancel === '.cancel');
      assert(_.isEqual(drag.props.grid, [10, 10]));
      assert(drag.props.onStart === handleStart);
      assert(drag.props.onDrag === handleDrag);
      assert(drag.props.onStop === handleStop);
    });

    it('should throw when setting className', function () {
      drag = (<Draggable className="foo"><span /></Draggable>);

      TestUtils.renderIntoDocument(drag);

      expect(
        console.error.calls.argsFor(0)[0].replace('propType:', 'prop type:').split('\n')[0]
      ).toBe(
        'Warning: Failed prop type: Invalid prop className passed to Draggable - do not set this, set it on the child.'
      );
    });

    it('should throw when setting style', function () {
      drag = (<Draggable style={{color: 'red'}}><span /></Draggable>);

      TestUtils.renderIntoDocument(drag);

      expect(
        console.error.calls.argsFor(0)[0].replace('propType:', 'prop type:').split('\n')[0]
      ).toBe(
        'Warning: Failed prop type: Invalid prop style passed to Draggable - do not set this, set it on the child.'
      );
    });

    it('should throw when setting transform', function () {
      drag = (<Draggable transform="translate(100, 100)"><span /></Draggable>);

      TestUtils.renderIntoDocument(drag);

      expect(
        console.error.calls.argsFor(0)[0].replace('propType:', 'prop type:').split('\n')[0]
      ).toBe(
        'Warning: Failed prop type: Invalid prop transform passed to Draggable - do not set this, set it on the child.'
      );
    });

    it('should call onStart when dragging begins', function () {
      let called = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onStart={function () { called = true; }}>
          <div/>
        </Draggable>
      );

      TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(drag));
      assert(called === true);
    });

    it('should call onStop when dragging ends', function () {
      let called = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onStop={function () { called = true; }}>
          <div/>
        </Draggable>
      );

      TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(drag));
      TestUtils.Simulate.mouseUp(ReactDOM.findDOMNode(drag));
      assert(called === true);
    });

    it('should not call onStart when dragging begins and disabled', function () {
      let called = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onStart={function () { called = true; }} disabled={true}>
          <div/>
        </Draggable>
      );

      TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(drag));
      assert(called === false);
    });

    it('should immediately call onStop if onDrag returns false', function () {
      let called = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onDrag={function () { return false; }} onStop={function () { called = true; }}>
          <div/>
        </Draggable>
      );

      TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(drag));
      assert(called === false);
      mouseMove(10, 10);
      assert(called === true);
      assert(drag.state.x === 0);
      assert(drag.state.y === 0);
    });

    it('should render with style translate() for DOM nodes', function () {
      let dragged = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onDrag={function() { dragged = true; }}>
          <div />
        </Draggable>
      );

      const node = ReactDOM.findDOMNode(drag);
      simulateMovementFromTo(drag, 0, 0, 100, 100);

      const style = node.getAttribute('style');
      assert(dragged === true);
      assert(style.indexOf('transform: translate(100px, 100px);') >= 0);
    });

    it('should honor "x" axis', function () {
      let dragged = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onDrag={function() { dragged = true; }} axis="x">
          <div />
        </Draggable>
      );

      const node = ReactDOM.findDOMNode(drag);
      simulateMovementFromTo(drag, 0, 0, 100, 100);

      const style = node.getAttribute('style');
      assert(dragged === true);
      assert(style.indexOf('transform: translate(100px, 0px);') >= 0);
    });

    it('should honor "y" axis', function () {
      let dragged = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onDrag={function() { dragged = true; }} axis="y">
          <div />
        </Draggable>
      );

      const node = ReactDOM.findDOMNode(drag);
      simulateMovementFromTo(drag, 0, 0, 100, 100);

      const style = node.getAttribute('style');
      assert(dragged === true);
      assert(style.indexOf('transform: translate(0px, 100px);') >= 0);
    });

    it('should honor "none" axis', function () {
      let dragged = false;
      drag = TestUtils.renderIntoDocument(
        <Draggable onDrag={function() { dragged = true; }} axis="none">
          <div />
        </Draggable>
      );

      const node = ReactDOM.findDOMNode(drag);
      simulateMovementFromTo(drag, 0, 0, 100, 100);

      const style = node.getAttribute('style');
      assert(dragged === true);
      assert(style.indexOf('transform: translate(0px, 0px);') >= 0);
    });

    it('should detect if an element is instanceof SVGElement and set state.isElementSVG to true', function() {
      drag = TestUtils.renderIntoDocument(
          <Draggable>
            <svg />
          </Draggable>
      );

      assert(drag.state.isElementSVG === true);
    });

    it('should detect if an element is NOT an instanceof SVGElement and set state.isElementSVG to false', function() {
      drag = TestUtils.renderIntoDocument(
          <Draggable>
            <div />
          </Draggable>
      );

      assert(drag.state.isElementSVG === false);
    });

    it('should render with transform translate() for SVG nodes', function () {
      drag = TestUtils.renderIntoDocument(
          <Draggable>
            <svg />
          </Draggable>
      );

      const node = ReactDOM.findDOMNode(drag);
      simulateMovementFromTo(drag, 0, 0, 100, 100);

      const transform = node.getAttribute('transform');
      assert(transform.indexOf('translate(100,100)') >= 0);
    });

      it('should add and remove transparent selection class', function () {
         drag = TestUtils.renderIntoDocument(
           <Draggable>
             <div />
           </Draggable>
         );

         const node = ReactDOM.findDOMNode(drag);

         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
         assert(document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseUp(node);
         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
       });

       it('should not add and remove transparent selection class when disabled', function () {

         drag = TestUtils.renderIntoDocument(
           <Draggable enableUserSelectHack={false}>
             <div />
           </Draggable>
         );

         const node = ReactDOM.findDOMNode(drag);

         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseUp(node);
         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
       });

       it('should not add and remove transparent selection class when onStart returns false', function () {
         function onStart() { return false; }

         drag = TestUtils.renderIntoDocument(
           <Draggable onStart={onStart}>
             <div />
           </Draggable>
         );

         const node = ReactDOM.findDOMNode(drag);

         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
         TestUtils.Simulate.mouseUp(node);
         assert(!document.body.classList.contains('react-draggable-transparent-selection'));
       });

    it('should be draggable when in an iframe', function (done) {
      let dragged = false;
      const dragElement = (
        <Draggable onDrag={function() { dragged = true; }}>
          <div />
        </Draggable>
      );
      const renderRoot = document.body.appendChild(document.createElement('div'));
      const frame = ReactDOM.render(<FrameComponent>{ dragElement }</FrameComponent>, renderRoot);

      setTimeout(() => {
        const body = ReactDOM.findDOMNode(frame).contentDocument.body;
        const node = body.querySelector('.react-draggable');
        simulateMovementFromTo(node, 0, 0, 100, 100);

        const style = node.getAttribute('style');
        assert(dragged === true);
        assert(style.indexOf('transform: translate(100px, 100px);') >= 0);

        renderRoot.parentNode.removeChild(renderRoot);
        done();
      }, 50);
    });

      it('should add and remove transparent selection class to iframe’s body when in an iframe', function (done) {
        const dragElement = (
          <Draggable>
            <div />
          </Draggable>
        );
        const renderRoot = document.body.appendChild(document.createElement('div'));
        const frame = ReactDOM.render(<FrameComponent>{ dragElement }</FrameComponent>, renderRoot);

        setTimeout(() => {
          const iframeDoc = ReactDOM.findDOMNode(frame).contentDocument;
          const node = iframeDoc.querySelector('.react-draggable');

          assert(!document.body.classList.contains('react-draggable-transparent-selection'));
          assert(!iframeDoc.body.classList.contains('react-draggable-transparent-selection'));
          TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
          assert(!document.body.classList.contains('react-draggable-transparent-selection'));
          assert(iframeDoc.body.classList.contains('react-draggable-transparent-selection'));
          TestUtils.Simulate.mouseUp(node);
          assert(!document.body.classList.contains('react-draggable-transparent-selection'));
          assert(!iframeDoc.body.classList.contains('react-draggable-transparent-selection'));

          renderRoot.parentNode.removeChild(renderRoot);
          done();
        }, 50);
      });
  });

  describe('interaction', function () {

    function mouseDownOn(drag, selector, shouldDrag) {
      resetDragging(drag);
      const node = ReactDOM.findDOMNode(drag).querySelector(selector);
      if (!node) throw new Error(`Selector not found: ${selector}`);
      TestUtils.Simulate.mouseDown(node);
      assert(drag.state.dragging === shouldDrag);
    }

    function resetDragging(drag) {
      TestUtils.Simulate.mouseUp(ReactDOM.findDOMNode(drag));
      assert(drag.state.dragging === false);
    }

{'fraction_non_alphanumeric': 0.14321683956088227, 'fraction_numerical': 0.008862926780138987, 'mean_word_length': 2.734235928293845, 'pattern_counts': {'":': 0, '<': 165, '<?xml version=': 0, '>': 187, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7187363', 'n_tokens_mistral': 8630, 'n_tokens_neox': 8306, 'n_words': 1771}