[WIP] Use MobX to manage react mutations

.babelrc

@@ -3,9 +3,11 @@
     "react"
   ],
   "plugins": [
-    ["transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-decorators",
+    ["transform-class-properties", { "loose": true }],
     "react-hot-loader/babel",
-    "babel-plugin-transform-runtime", {
+    ["babel-plugin-transform-runtime", {
       "helpers": false,
       "polyfill": false,
       "regenerator": true

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "node"
+script:
+  - yarn test

package.json

@@ -6,14 +6,24 @@
   "private": true,
   "scripts": {
     "start": "webpack-dev-server --hot",
-    "build": "cp -r src/manifest.json src/icons build/ && webpack"
+    "build": "cp -r src/manifest.json src/icons build/ && webpack",
+    "test": "jest",
+    "test-dev": "jest --watch"
+  },
+  "jest": {
+    "testMatch": [
+      "**/__test?(s)__/**/*.js?(x)"
+    ]
   },
   "devDependencies": {
     "autoprefixer": "^7.1.4",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
-    "babel-jest": "^21.0.2",
+    "babel-jest": "^21.2.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
@@ -23,23 +33,28 @@
     "css-loader": "^0.28.7",
     "eslint": "^4.6.1",
     "eslint-plugin-class-property": "^1.0.6",
+    "eslint-plugin-jest": "^21.2.0",
     "eslint-plugin-react": "^7.3.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
     "html-webpack-plugin": "^2.30.1",
-    "jest": "^21.0.2",
+    "jest": "^21.2.1",
     "jquery": "3.2.1",
     "jquery-ui": "1.12.1",
+    "mobx": "^3.3.1",
+    "mobx-react": "^4.3.3",
     "postcss-flexbugs-fixes": "^3.2.0",
     "postcss-loader": "^2.0.6",
     "project-name-generator": "^2.1.4",
     "prop-types": "^15.5.10",
     "react": "^16.0.0",
+    "react-contenteditable": "^2.0.5",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.0.0",
     "react-hot-loader": "^3.0.0-beta.7",
+    "sort-array": "^2.0.0",
     "style-loader": "^0.18.2",
     "styled-components": "^2.1.2",
     "tablesorter": "^2.28.15",

src/neo/__test__/models/Suite.spec.js

@@ -0,0 +1,68 @@
+/* eslint-disable */
+import { useStrict, observe } from "mobx";
+import ProjectStore from "../../stores/domain/ProjectStore";
+import Suite from "../../models/Suite";
+import TestCase from "../../models/TestCase";
+
+useStrict(true);
+
+describe("Suite model", () => {
+  it("new suite should be named 'Utitled Suite'", () => {
+    expect((new Suite()).name).toBe("Untitled Suite");
+  });
+  it("should observe name changes", () => {
+    const suite = new Suite();
+    const disposer = observe(suite, "name", (change) => {
+      expect(change.newValue).toBe("changed");
+    });
+    suite.name = "changed";
+    disposer();
+  });
+  it("Suites should have randomly generated identifiers", () => {
+    expect((new Suite()).id).not.toBe((new Suite()).id);
+  });
+  it("should observe when a new Test Case is added", () => {
+    const suite = new Suite();
+    const disposer = observe(suite, "tests", (change) => {
+      expect(change.newValue.length).toBe(1);
+    });
+    suite.tests.push(new TestCase());
+  });
+  it("should add a new Test Case", () => {
+    const store = new ProjectStore();
+    const suite = new Suite();
+    const test = new TestCase();
+    store.addTestCase(test);
+    expect(suite.tests.length).toBe(0);
+    suite.addTestCase(test);
+    expect(suite.tests.length).toBe(1);
+  });
+  it("should throw if no Test Case was given", () => {
+    const suite = new Suite();
+    expect(() => suite.addTestCase()).toThrowError("Expected to receive TestCase instead received undefined");
+  });
+  it("should throw if a different type was given", () => {
+    const suite = new Suite();
+    expect(() => suite.addTestCase(1)).toThrowError("Expected to receive TestCase instead received Number");
+  });
+  it("should remove a Test Case from the suite", () => {
+    const store = new ProjectStore();
+    const suite = new Suite();
+    const test = new TestCase();
+    store.addTestCase(test);
+    suite.addTestCase(test);
+    expect(suite.tests.length).toBe(1);
+    suite.removeTestCase(test);
+    expect(suite.tests.length).toBe(0);
+  });
+  it("should do nothing if removed a non-existent test", () => {
+    const store = new ProjectStore();
+    const suite = new Suite();
+    const test = new TestCase();
+    store.addTestCase(test);
+    suite.addTestCase(test);
+    expect(suite.tests.length).toBe(1);
+    suite.removeTestCase(new TestCase());
+    expect(suite.tests.length).toBe(1);
+  });
+});

src/neo/__test__/models/Test.spec.js

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import { useStrict, observe } from "mobx";
+import TestCase from "../../models/TestCase";
+
+useStrict(true);
+
+describe("TestCase model", () => {
+  it("new test should be named 'Untitled Test'", () => {
+    expect((new TestCase()).name).toBe("Untitled Test");
+  });
+  it("should observe name changes", () => {
+    const test = new TestCase();
+    const disposer = observe(test, "name", (change) => {
+      expect(change.newValue).toBe("changed");
+    });
+    test.name = "changed";
+    disposer();
+  });
+  it("Test Cases should have randomly generated identifiers", () => {
+    expect((new TestCase()).id).not.toBe((new TestCase()).id);
+  });
+});

src/neo/__test__/stores/domain/ProjectStore.spec.js

@@ -0,0 +1,102 @@
+/* eslint-disable */
+import { useStrict, observe } from "mobx";
+import ProjectStore from "../../../stores/domain/ProjectStore";
+import Suite from "../../../models/Suite";
+import TestCase from "../../../models/TestCase";
+
+useStrict(true);
+
+describe("Project Store", () => {
+  it("should have a name", () => {
+    const store = new ProjectStore("myStore");
+    expect(store.name).toBe("myStore");
+  });
+  it("should set a default name", () => {
+    const store = new ProjectStore();
+    expect(store.name).toBe("Untitled Project");
+  });
+  it("should set the name", () => {
+    const store = new ProjectStore("test");
+    store.changeName("changed");
+    expect(store.name).toBe("changed");
+  });
+  it("should observe the name change", () => {
+    const store = new ProjectStore("myStore");
+    const disposer = observe(store, "name", (change) => {
+      expect(change.newValue).toBe("changed");
+    });
+    store.name = "changed";
+    disposer();
+  });
+  it("should observe adding addition test case to the store", () => {
+    const store = new ProjectStore();
+    const disposer = observe(store, "tests", (change) => {
+      expect(change.newValue.length).toBe(1);
+    });
+    store.tests.push(new TestCase());
+    disposer();
+  });
+  it("should add a new TestCase", () => {
+    const store = new ProjectStore();
+    expect(store.tests.length).toBe(0);
+    store.addTestCase(new TestCase());
+    expect(store.tests.length).toBe(1);
+  });
+  it("should throw if no TestCase was given", () => {
+    const store = new ProjectStore();
+    expect(() => store.addTestCase()).toThrowError("Expected to receive TestCase instead received undefined");
+  });
+  it("should throw if a different type was given", () => {
+    const store = new ProjectStore();
+    expect(() => store.addTestCase(1)).toThrowError("Expected to receive TestCase instead received Number");
+  });
+  it("should delete a test case", () => {
+    const store = new ProjectStore();
+    const test = new TestCase();
+    store.addTestCase(test);
+    expect(store.tests.length).toBe(1);
+    store.deleteTestCase(test);
+    expect(store.tests.length).toBe(0);
+  });
+  it("should create a test case", () => {
+    const store = new ProjectStore();
+    expect(store.tests.length).toBe(0);
+    store.createTestCase();
+    expect(store.tests.length).toBe(1);
+  });
+  it("should pass ctor args to test when created", () => {
+    const store = new ProjectStore();
+    const test = store.createTestCase("my test");
+    expect(test.name).toBe("my test");
+  });
+  it("should create a suite", () => {
+    const store = new ProjectStore();
+    expect(store.suites.length).toBe(0);
+    store.createSuite();
+    expect(store.suites.length).toBe(1);
+  });
+  it("should pass ctor args to suite when created", () => {
+    const store = new ProjectStore();
+    const suite = store.createSuite("my suite");
+    expect(suite.name).toBe("my suite");
+  });
+  it("should remove the deleted test from it's suites", () => {
+    const store = new ProjectStore();
+    const firstSuite = store.createSuite();
+    const secondSuite = store.createSuite();
+    const controlSuite = store.createSuite();
+    const toBeDeleted = store.createTestCase();
+    const control = store.createTestCase();
+    firstSuite.addTestCase(toBeDeleted);
+    secondSuite.addTestCase(toBeDeleted);
+    secondSuite.addTestCase(control);
+    controlSuite.addTestCase(control);
+    expect(firstSuite.tests.length).toBe(1);
+    expect(secondSuite.tests.length).toBe(2);
+    expect(controlSuite.tests.length).toBe(1);
+    store.deleteTestCase(toBeDeleted);
+    expect(firstSuite.tests.length).toBe(0);
+    expect(secondSuite.tests.length).toBe(1);
+    expect(controlSuite.tests.length).toBe(1);
+  });
+});

src/neo/components/ProjectHeader/index.jsx

@@ -2,26 +2,27 @@ import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import Title from "react-document-title";
+import ContentEditable from "react-contenteditable";
 import "./style.css";
 
 export default class ProjectHeader extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      title: "Untitled Project"
-    };
+    this.handleChange = this.handleChange.bind(this);
   }
   static propTypes = {
-    changed: PropTypes.bool
+    title: PropTypes.string.isRequired,
+    changed: PropTypes.bool,
+    changeName: PropTypes.func.isRequired
   };
-  componentDidMount() {
-    this.projectTitle.setAttribute("contentEditable", true);
+  handleChange(e) {
+    this.props.changeName(e.target.value);
   }
   render() {
     return (
       <div className="header">
-        <Title title={`Selenium IDE - ${this.state.title}`} />
-        <span className={classNames("title", {"changed": this.props.changed})} ref={(r) => { this.projectTitle = r; }}>{this.state.title}</span>
+        <Title title={`Selenium IDE - ${this.props.title}`} />
+        <ContentEditable className={classNames("title", {"changed": this.props.changed})} onChange={this.handleChange} html={this.props.title} />
       </div>
     );
   }

src/neo/components/Runs/style.css

@@ -1,5 +1,9 @@
 .runs {
   padding: 0 10px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
 }
 
 .runs > div {

src/neo/components/SearchBar/index.jsx

@@ -1,11 +1,22 @@
 import React from "react";
+import PropTypes from "prop-types";
 import "./style.css";
 
 export default class SearchBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  static propTypes = {
+    filter: PropTypes.func
+  };
+  handleChange(e) {
+    if (this.props.filter) this.props.filter(e.target.value);
+  }
   render() {
     return (
       <div>
-        <input className="search" type="search" placeholder="Search tests..." />
+        <input className="search" type="search" placeholder="Search tests..." onChange={this.handleChange} />
       </div>
     );
   }

src/neo/components/Project/index.jsx → src/neo/components/Suite/index.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { PropTypes as MobxPropTypes } from "mobx-react";
 import { DropTarget } from "react-dnd";
 import classNames from "classnames";
 import styled from "styled-components";
@@ -22,7 +23,7 @@ const testTarget = {
       return;
     }
 
-    props.moveTest(monitor.getItem(), props.name);
+    props.moveTest(monitor.getItem(), props.id);
   }
 };
 
@@ -48,7 +49,7 @@ const ArrowProject = styled.span`
   }
 `;
 
-class Project extends React.Component {
+class Suite extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -57,10 +58,9 @@ class Project extends React.Component {
     this.handleClick = this.handleClick.bind(this);
   }
   static propTypes = {
+    id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    tests: PropTypes.array.isRequired,
-    selectedTest: PropTypes.string,
-    selectTest: PropTypes.func.isRequired,
+    tests: MobxPropTypes.arrayOrObservableArray.isRequired,
     connectDropTarget: PropTypes.func.isRequired,
     moveTest: PropTypes.func.isRequired,
     isOver: PropTypes.bool,
@@ -79,10 +79,10 @@ class Project extends React.Component {
             <span className="title">{this.props.name}</span>
           </ArrowProject>
         </a>
-        <TestList collapsed={!this.state.isActive} project={this.props.name} tests={this.props.tests} selectedTest={this.props.selectedTest} selectTest={this.props.selectTest} />
+        <TestList collapsed={!this.state.isActive} suite={this.props.id} tests={this.props.tests} />
       </div>
     );
   }
 }
 
-export default DropTarget(Type, testTarget, collect)(Project);
+export default DropTarget(Type, testTarget, collect)(Suite);