Merge pull request #299 from SeleniumHQ/test-dnd

Rearrange test cases inside suites

Author: corevo

packages/selenium-ide/src/neo/__test__/models/Suite.spec.js

@@ -120,6 +120,26 @@ describe("Suite model", () => {
     suite.removeTestCase(new TestCase());
     expect(suite.tests.length).toBe(1);
   });
+  it("shoul tell if a test exist in the suite", () => {
+    const suite = new Suite();
+    const exists = new TestCase();
+    const nonExistent = new TestCase();
+    suite.addTestCase(exists);
+    expect(suite.containsTest(exists)).toBeTruthy();
+    expect(suite.containsTest(nonExistent)).toBeFalsy();
+  });
+  it("should swap the test cases", () => {
+    const suite = new Suite();
+    const test1 = new TestCase();
+    const test2 = new TestCase();
+    suite.addTestCase(test1);
+    suite.addTestCase(test2);
+    expect(suite.tests[0]).toBe(test1);
+    expect(suite.tests[1]).toBe(test2);
+    suite.swapTestCases(0, 1);
+    expect(suite.tests[1]).toBe(test1);
+    expect(suite.tests[0]).toBe(test2);
+  });
   it("should replace the tests in the suite", () => {
     const store = new ProjectStore();
     const suite = new Suite();

packages/selenium-ide/src/neo/components/Suite/index.jsx

@@ -30,28 +30,28 @@ import ListMenu, { ListMenuItem } from "../ListMenu";
 import MoreButton from "../ActionButtons/More";
 import "./style.css";
 
-function containsTest(tests, test) {
-  return tests.find((currTest) => (currTest.id === test.id));
-}
-
 const testTarget = {
   canDrop(props, monitor) {
-    const test = monitor.getItem();
-    return !containsTest(props.suite.tests, test);
+    const test = monitor.getItem().test;
+    return !props.suite.containsTest(test);
   },
-  drop(props, monitor) {
-    if (monitor.didDrop()) {
+  hover(props, monitor) {
+    // check if they are different suites
+    const dragged = monitor.getItem();
+    if (monitor.canDrop() && props.suite !== dragged.suite) {
+      dragged.suite.removeTestCase(dragged.test);
+      props.suite.insertTestCaseAt(dragged.test, 0);
+      dragged.suite = props.suite;
+      dragged.index = 0;
       return;
     }
-
-    props.moveTest(monitor.getItem(), props.suite);
   }
 };
 
 function collect(connect, monitor) {
   return {
     connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver(),
+    isOver: monitor.isOver({ shallow: true }),
     canDrop: monitor.canDrop()
   };
 }
@@ -70,7 +70,6 @@ class Suite extends React.Component {
     rename: PropTypes.func.isRequired,
     editSettings: PropTypes.func.isRequired,
     remove: PropTypes.func.isRequired,
-    moveTest: PropTypes.func.isRequired,
     isOver: PropTypes.bool,
     canDrop: PropTypes.bool,
     onContextMenu: PropTypes.func,
@@ -101,13 +100,15 @@ class Suite extends React.Component {
     //setting component of context menu.
     this.props.setContextMenu(listMenu);
 
-    return this.props.connectDropTarget(
+    return (
       <div onKeyDown={this.handleKeyDown.bind(this)} >
         <div className="project" onContextMenu={this.props.onContextMenu} >
-          <a href="#" tabIndex="-1" className={classNames(PlaybackState.suiteState.get(this.props.suite.id), { "hover": (this.props.isOver && this.props.canDrop) }, { "active": this.store.isOpen })} onClick={this.handleClick} >
-            <span className="si-caret"></span>
-            <span className="title">{this.props.suite.name}</span>
-          </a>
+          {this.props.connectDropTarget(
+            <a href="#" tabIndex="-1" className={classNames(PlaybackState.suiteState.get(this.props.suite.id), { "active": this.store.isOpen })} onClick={this.handleClick} >
+              <span className="si-caret"></span>
+              <span className="title">{this.props.suite.name}</span>
+            </a>
+          )}
           {listMenu}
         </div>
         <TestList collapsed={!this.store.isOpen} suite={this.props.suite} tests={this.store.filteredTests.get()} removeTest={(test) => {

packages/selenium-ide/src/neo/components/Suite/style.css

@@ -13,10 +13,6 @@
   min-width: 0;
 }
 
-.project > a.hover {
-  border-bottom: 1px #40A6FF solid;
-}
-
 .project > a .title {
   padding: 0 6px;
   font-size: 14px;

packages/selenium-ide/src/neo/components/SuiteList/index.jsx

@@ -28,8 +28,7 @@ import "./style.css";
     selectTests: PropTypes.func.isRequired,
     rename: PropTypes.func.isRequired,
     editSettings: PropTypes.func.isRequired,
-    removeSuite: PropTypes.func.isRequired,
-    moveTest: PropTypes.func.isRequired
+    removeSuite: PropTypes.func.isRequired
   };
   render() {
     return (
@@ -42,7 +41,6 @@ import "./style.css";
               rename={this.props.rename}
               editSettings={() => {this.props.editSettings(suite);}}
               remove={() => {this.props.removeSuite(suite);}}
-              moveTest={this.props.moveTest}
             />
           </li>
         ))}

packages/selenium-ide/src/neo/components/Test/index.jsx

@@ -17,7 +17,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { DragSource } from "react-dnd";
+import { DragSource, DropTarget } from "react-dnd";
 import classNames from "classnames";
 import { modifier } from "modifier-keys";
 import Callstack from "../Callstack";
@@ -28,20 +28,92 @@ import MoreButton from "../ActionButtons/More";
 import "./style.css";
 
 export const Type = "test";
+
 const testSource = {
   beginDrag(props) {
     return {
       id: props.test.id,
-      suite: props.suite.id
+      index: props.index,
+      test: props.test,
+      suite: props.suite
     };
+  },
+  isDragging(props, monitor) {
+    return (props.test.id === monitor.getItem().id && props.suite.id === monitor.getItem().suite.id);
   }
 };
-function collect(connect, monitor) {
+
+function collectSource(connect, monitor) {
   return {
     connectDragSource: connect.dragSource(),
     isDragging: monitor.isDragging()
   };
 }
+
+const testTarget = {
+  canDrop(props, monitor) {
+    const test = monitor.getItem().test;
+    const suite = props.suite;
+    return !suite.containsTest(test);
+  },
+  hover(props, monitor, component) {
+    // check if they are different suites
+    const dragged = monitor.getItem();
+    if (monitor.canDrop() && props.suite !== dragged.suite) {
+      dragged.suite.removeTestCase(dragged.test);
+      props.suite.addTestCase(dragged.test);
+      dragged.suite = props.suite;
+      dragged.index = props.suite.tests.length - 1;
+      return;
+    } else if (!monitor.canDrop() && props.suite !== dragged.suite) {
+      // trying to move a duplicate
+      return;
+    }
+    const dragIndex = dragged.index;
+    const hoverIndex = props.index;
+
+    // Don't replace items with themselves
+    if (dragIndex === hoverIndex) {
+      return;
+    }
+
+    // Determine rectangle on screen
+    const hoverBoundingRect = component.decoratedComponentInstance.node.getBoundingClientRect();
+
+    // Get vertical middle
+    const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+    // Determine mouse position
+    const clientOffset = monitor.getClientOffset();
+
+    // Get pixels to the top
+    const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+    // Only perform the move when the mouse has crossed half of the items height
+    // When dragging downwards, only move when the cursor is below 50%
+    // When dragging upwards, only move when the cursor is above 50%
+
+    // Dragging downwards
+    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+      return;
+    }
+
+    // Dragging upwards
+    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+      return;
+    }
+
+    props.swapTests(dragIndex, hoverIndex);
+
+    // save time on index lookups
+    monitor.getItem().index = hoverIndex;
+  }
+};
+
+const collectTarget = (connect) => ({
+  connectDropTarget: connect.dropTarget()
+});
+
 export default class Test extends React.Component {
   static propTypes = {
     className: PropTypes.string,
@@ -58,6 +130,7 @@ export default class Test extends React.Component {
     selectTest: PropTypes.func.isRequired,
     renameTest: PropTypes.func,
     removeTest: PropTypes.func,
+    connectDropTarget: PropTypes.func,
     connectDragSource: PropTypes.func,
     moveSelectionUp: PropTypes.func,
     moveSelectionDown: PropTypes.func,
@@ -127,7 +200,7 @@ export default class Test extends React.Component {
       tabIndex={this.props.selected ? "0" : "-1"}
       onContextMenu={this.props.onContextMenu}
       style={{
-        display: this.props.isDragging ? "none" : "block"
+        opacity: this.props.isDragging ? "0" : "1"
       }}>
       <a
         ref={(button) => { this.button = button; }}
@@ -144,7 +217,7 @@ export default class Test extends React.Component {
         onClick={this.handleCallstackClick.bind(this, this.props.test, this.props.suite)}
       /> : undefined}
     </div>;
-    return (this.props.connectDragSource ? this.props.connectDragSource(rendered) : rendered);
+    return (this.props.connectDragSource ? this.props.connectDropTarget(this.props.connectDragSource(rendered)) : rendered);
   }
 }
 
@@ -164,4 +237,5 @@ export class MenuTest extends React.Component {
   }
 }
 
-export const DraggableTest = DragSource(Type, testSource, collect)(Test);
+
+export const DraggableTest = DropTarget(Type, testTarget, collectTarget)(DragSource(Type, testSource, collectSource)(Test));

packages/selenium-ide/src/neo/components/TestList/index.jsx

@@ -61,6 +61,7 @@ export default class TestList extends Component {
               this.props.suite ?
                 <DraggableTest
                   className={PlaybackState.testState.get(test.id)}
+                  index={index}
                   test={test}
                   suite={this.props.suite}
                   selected={UiState.selectedTest.test && test.id === UiState.selectedTest.test.id && this.props.suite.id === (UiState.selectedTest.suite ? UiState.selectedTest.suite.id : undefined)}
@@ -69,6 +70,7 @@ export default class TestList extends Component {
                   changed={UiState.getTestState(test).modified}
                   selectTest={UiState.selectTest}
                   removeTest={this.props.removeTest ? () => { this.props.removeTest(test); } : undefined}
+                  swapTests={this.props.suite.swapTestCases}
                   moveSelectionUp={() => { UiState.selectTestByIndex(index - 1, this.props.suite); }}
                   moveSelectionDown={() => { UiState.selectTestByIndex(index + 1, this.props.suite); }}
                   setSectionFocus={UiState.setSectionFocus}

packages/selenium-ide/src/neo/containers/Navigation/index.jsx

@@ -39,8 +39,7 @@ import "./style.css";
   }
   static propTypes = {
     suites: MobxPropTypes.arrayOrObservableArray.isRequired,
-    tests: MobxPropTypes.arrayOrObservableArray.isRequired,
-    moveTest: PropTypes.func.isRequired
+    tests: MobxPropTypes.arrayOrObservableArray.isRequired
   };
   handleChangedTab(tab) {
     if (PlaybackState.isPlaying && !PlaybackState.paused) {
@@ -97,7 +96,6 @@ import "./style.css";
                 editSettings={ModalState.editSuiteSettings}
                 selectTests={ModalState.editSuite}
                 removeSuite={ModalState.deleteSuite}
-                moveTest={this.props.moveTest}
               />
             </React.Fragment>
             }

packages/selenium-ide/src/neo/containers/Panel/index.jsx

@@ -100,7 +100,6 @@ if (browser.windows) {
   constructor(props) {
     super(props);
     this.state = { project };
-    this.moveTest = this.moveTest.bind(this);
     this.keyDownHandler = window.document.body.onkeydown = this.handleKeyDown.bind(this);
     this.resizeHandler = window.addEventListener("resize", this.handleResize.bind(this, window));
     this.quitHandler = window.addEventListener("beforeunload", (e) => {
@@ -112,13 +111,6 @@ if (browser.windows) {
       }
     });
   }
-  moveTest(testItem, destination) {
-    const origin = this.state.project.suites.find((suite) => (suite.id === testItem.suite));
-    const test = origin.tests.find(test => (test.id === testItem.id));
-
-    destination.addTestCase(test);
-    origin.removeTestCase(test);
-  }
   handleResize(currWindow) {
     UiState.setWindowHeight(currWindow.innerHeight);
     storage.set({
@@ -192,7 +184,6 @@ if (browser.windows) {
                     createSuite={this.createSuite}
                     removeSuite={this.state.project.deleteSuite}
                     createTest={this.createTest}
-                    moveTest={this.moveTest}
                     deleteTest={this.deleteTest}
                   />
                   <Editor

packages/selenium-ide/src/neo/models/Suite.js

@@ -36,9 +36,9 @@ export default class Suite {
   }
 
   @computed get tests() {
-    return this._tests.sort((t1, t2) => (
+    return this.isParallel ? this._tests.sort((t1, t2) => (
       naturalCompare(t1.name, t2.name)
-    ));
+    )) : this._tests;
   }
 
   isTest(test) {
@@ -71,6 +71,10 @@ export default class Suite {
     }
   }
 
+  @action.bound containsTest(test) {
+    return this._tests.includes(test);
+  }
+
   @action.bound addTestCase(test) {
     if (!this.isTest(test)) {
       throw new Error(`Expected to receive TestCase instead received ${test ? test.constructor.name : test}`);
@@ -79,6 +83,14 @@ export default class Suite {
     }
   }
 
+  @action.bound insertTestCaseAt(test, index) {
+    if (!this.isTest(test)) {
+      throw new Error(`Expected to receive TestCase instead received ${test ? test.constructor.name : test}`);
+    } else {
+      this._tests.splice(index, 0, test);
+    }
+  }
+
   @action.bound removeTestCase(test) {
     if (!this.isTest(test)) {
       throw new Error(`Expected to receive TestCase instead received ${test ? test.constructor.name : test}`);
@@ -87,6 +99,11 @@ export default class Suite {
     }
   }
 
+  @action.bound swapTestCases(from, to) {
+    const test = this._tests.splice(from, 1)[0];
+    this.insertTestCaseAt(test, to);
+  }
+
   @action.bound replaceTestCases(tests) {
     if (tests.filter(test => !this.isTest(test)).length) {
       throw new Error("Expected to receive array of TestCase");