From 77c0d304f1fbd13f62c91e086b79eed2f430ef66 Mon Sep 17 00:00:00 2001 From: Jess Date: Sun, 14 Aug 2016 17:20:47 -0400 Subject: [PATCH 1/7] updating packages --- package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 265fde5..eeff1b4 100644 --- a/package.json +++ b/package.json @@ -24,13 +24,13 @@ "dependencies": { "classnames": "^2.2.0", "lodash": "^3.10.1", - "react": "^0.14.8", + "react": "^15.3.0", "react-anything-sortable": "^1.1.0", "react-color": "^2.0.0", "react-dom": "^0.14.8", "react-draggable": "^1.0.1", - "react-hotkeys": "^0.6.0", - "react-medium-editor": "^1.6.1", + "react-hotkeys": "^0.9.0", + "react-medium-editor": "^1.8.0", "react-redux": "^4.0.0", "redux": "^3.0.4", "redux-thunk": "^1.0.3", @@ -40,16 +40,16 @@ "titleize": "^1.0.0" }, "devDependencies": { - "babel-core": "^6.7.7", - "babel-jest": "^12.0.1", + "babel-core": "^6.13.2", + "babel-jest": "^14.1.0", "babel-loader": "^6.2.4", "babel-polyfill": "^6.7.4", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "css-loader": "^0.23.1", - "enzyme": "^2.2.0", + "enzyme": "^2.4.1", "jest-cli": "^12.0.1", - "react-addons-test-utils": "^0.14.8", + "react-addons-test-utils": "^15.3.0", "react-hot-loader": "^1.2.7", "redux-logger": "^2.3.1", "style-loader": "^0.13.0", From 62bc37f6405aeaca9b227c1d16caf77c11340914 Mon Sep 17 00:00:00 2001 From: Jess Date: Thu, 18 Aug 2016 11:11:07 -0400 Subject: [PATCH 2/7] reverted package.json to working version... changed by accident at some point --- package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index eeff1b4..ffba721 100644 --- a/package.json +++ b/package.json @@ -24,13 +24,13 @@ "dependencies": { "classnames": "^2.2.0", "lodash": "^3.10.1", - "react": "^15.3.0", + "react": "^0.14.8", "react-anything-sortable": "^1.1.0", "react-color": "^2.0.0", "react-dom": "^0.14.8", "react-draggable": "^1.0.1", - "react-hotkeys": "^0.9.0", - "react-medium-editor": "^1.8.0", + "react-hotkeys": "^0.6.0", + "react-medium-editor": "^1.6.1", "react-redux": "^4.0.0", "redux": "^3.0.4", "redux-thunk": "^1.0.3", @@ -40,16 +40,16 @@ "titleize": "^1.0.0" }, "devDependencies": { - "babel-core": "^6.13.2", - "babel-jest": "^14.1.0", + "babel-core": "^6.7.7", + "babel-jest": "^12.0.1", "babel-loader": "^6.2.4", "babel-polyfill": "^6.7.4", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "css-loader": "^0.23.1", - "enzyme": "^2.4.1", + "enzyme": "^2.2.0", "jest-cli": "^12.0.1", - "react-addons-test-utils": "^15.3.0", + "react-addons-test-utils": "^0.14.8", "react-hot-loader": "^1.2.7", "redux-logger": "^2.3.1", "style-loader": "^0.13.0", @@ -72,4 +72,4 @@ "/node_modules/" ] } -} +} \ No newline at end of file From 42a1e2691976bf5c4a97ea88f33467154f728d40 Mon Sep 17 00:00:00 2001 From: Jess Date: Thu, 18 Aug 2016 12:22:25 -0400 Subject: [PATCH 3/7] downgraded to 0.0.9 of react-select due to issues w/ new release --- app/components/AddEdgeForm.jsx | 20 +++++++++++++++++--- app/main.jsx | 1 + package.json | 3 ++- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/app/components/AddEdgeForm.jsx b/app/components/AddEdgeForm.jsx index 4e5931e..3b61b9b 100644 --- a/app/components/AddEdgeForm.jsx +++ b/app/components/AddEdgeForm.jsx @@ -1,5 +1,6 @@ import React, { Component, PropTypes } from 'react'; import BaseComponent from './BaseComponent'; +import Select from 'react-select'; import values from 'lodash/object/values'; import sortBy from 'lodash/collection/sortBy'; import { HotKeys } from 'react-hotkeys'; @@ -33,22 +34,35 @@ export default class AddEdgeForm extends BaseComponent { let nodes = sortBy(values(this.props.nodes), (node) => node.display.name); + let nodesMapped = nodes.map(function(node, i) { + return ( + { key: node.id, value: node.id, label: node.display.name } + ); + }); + return (
- + {/* - */} + {/* + */}
diff --git a/app/main.jsx b/app/main.jsx index 4f7f303..3657d23 100644 --- a/app/main.jsx +++ b/app/main.jsx @@ -21,6 +21,7 @@ import merge from 'lodash/object/merge'; import assign from 'lodash/object/assign'; import difference from 'lodash/array/difference'; require ('./styles/oligrapher.css'); +import 'react-select/dist/react-select.css'; class Oligrapher { constructor(config = {}) { diff --git a/package.json b/package.json index ffba721..69fa9ec 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,8 @@ "redux-undo": "^0.6.0", "shortid": "^2.2.4", "springy": "^2.7.1", - "titleize": "^1.0.0" + "titleize": "^1.0.0", + "react-select": "^0.9.1" }, "devDependencies": { "babel-core": "^6.7.7", From 889b34ad7f4811bb3bb5e37d9b2d2a6f35eba12c Mon Sep 17 00:00:00 2001 From: Jess Date: Thu, 18 Aug 2016 14:10:09 -0400 Subject: [PATCH 4/7] added custom event listener on label to mimic old behaviour --- app/components/AddEdgeForm.jsx | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/app/components/AddEdgeForm.jsx b/app/components/AddEdgeForm.jsx index 3b61b9b..7f7035a 100644 --- a/app/components/AddEdgeForm.jsx +++ b/app/components/AddEdgeForm.jsx @@ -40,6 +40,8 @@ export default class AddEdgeForm extends BaseComponent { ); }); + //note the keypress listener on input so it submits the form on enter + //due to Select library elements containing input forms return (
@@ -49,21 +51,17 @@ export default class AddEdgeForm extends BaseComponent { value={node1Id} name="node 1" options={nodesMapped} + placeholder="First node" /> - {/**/} - {/* - */} - + e.key == "Enter" ? this._handleSubmit(e) : null } />
@@ -71,8 +69,8 @@ export default class AddEdgeForm extends BaseComponent { } _handleSubmit(e) { - let node1Id = this.refs.node1Id.value; - let node2Id = this.refs.node2Id.value; + let node1Id = this.refs.node1Id.state.value; + let node2Id = this.refs.node2Id.state.value; let label = this.refs.label.value.trim(); if (node1Id && node2Id && label) { From 8076acf509be49b7040bedecd8761ece608bd3fc Mon Sep 17 00:00:00 2001 From: Jess Date: Thu, 18 Aug 2016 14:45:08 -0400 Subject: [PATCH 5/7] overwrote some react-select stylings to be a bit smaller --- app/styles/oligrapher.editor.css | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/app/styles/oligrapher.editor.css b/app/styles/oligrapher.editor.css index 93a42ee..1248f6a 100755 --- a/app/styles/oligrapher.editor.css +++ b/app/styles/oligrapher.editor.css @@ -212,4 +212,30 @@ button#toggleEditTools { #edgeUrlInput { width: 337px; -} \ No newline at end of file +} + +/*overwriting react-select styles*/ + +.Select-control { + font-size: 12px; +} + +.Select-menu-outer { + font-size: 0.8em; +} + +.Select-input { + height: 30px; +} + +.Select .Select-placeholder{ + line-height: 30px; +} + +.Select .Select-input > input { + height: 30px; +} + +.Select { + margin-bottom: 10px; +} From dbac5482c66e672bed9af5f41b65baace9ab263c Mon Sep 17 00:00:00 2001 From: Jess Date: Sun, 21 Aug 2016 16:14:09 -0400 Subject: [PATCH 6/7] edited react-selectable styles --- app/styles/oligrapher.editor.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/oligrapher.editor.css b/app/styles/oligrapher.editor.css index 1248f6a..eae4572 100755 --- a/app/styles/oligrapher.editor.css +++ b/app/styles/oligrapher.editor.css @@ -224,7 +224,7 @@ button#toggleEditTools { font-size: 0.8em; } -.Select-input { +.Select .Select-input { height: 30px; } From fe084d5d0b467b741d3a63de0a35a0219fa11cb6 Mon Sep 17 00:00:00 2001 From: Jess Date: Tue, 23 Aug 2016 16:07:22 -0400 Subject: [PATCH 7/7] worked on component tests and adjusted height of select element --- app/components/__tests__/AddEdgeForm-test.js | 119 +++++++++++++++++++ app/styles/oligrapher.editor.css | 3 +- 2 files changed, 121 insertions(+), 1 deletion(-) create mode 100644 app/components/__tests__/AddEdgeForm-test.js diff --git a/app/components/__tests__/AddEdgeForm-test.js b/app/components/__tests__/AddEdgeForm-test.js new file mode 100644 index 0000000..0740514 --- /dev/null +++ b/app/components/__tests__/AddEdgeForm-test.js @@ -0,0 +1,119 @@ +jest.unmock('../BaseComponent'); +jest.unmock('../AddEdgeForm'); +jest.unmock('react-select'); + +import React from 'react'; +import { mount } from "enzyme"; + +import AddEdgeForm from "../AddEdgeForm"; + +describe("AddEdgeForm", () => { + + let nodes = { 1: { id: 1, display: { name: "Node 1" } }, 2: { id: 2, display: { name: "Node 2"} }, 3: { id: 3, display: { name: "Node 3" } } }; + + describe("rendering", () => { + + it("renders two react-select elements", () => { + let wrapper = mount( + + ); + expect(wrapper.find("Select").length).toBe(2); + + let firstReactSelect = wrapper.ref("node1Id"); + expect(firstReactSelect.is("Select")).toBe(true); + + let secondReactSelect = wrapper.ref("node2Id"); + expect(secondReactSelect.is("Select")).toBe(true); + }); + + it("renders one an additional input element (not part of React-Selects)", () => { + let wrapper = mount( + + ); + expect(wrapper.find(".form-control.input-sm").length).toBe(1); + }); + + it("returns empty string values for the two Select elements if data is null", () => { + let wrapper = mount( + + ); + let firstReactSelect = wrapper.ref("node1Id"); + expect(firstReactSelect.get(0).state.value).toBe(''); + + let secondReactSelect = wrapper.ref("node2Id"); + expect(secondReactSelect.get(0).state.value).toBe(''); + }); + + it("returns the first two node values from the data array for the two Select elements if data array > 1", () => { + let wrapper = mount( + + ); + let firstReactSelect = wrapper.ref("node1Id"); + expect(firstReactSelect.get(0).state.value).toBe(1); + + let secondReactSelect = wrapper.ref("node2Id"); + expect(secondReactSelect.get(0).state.value).toBe(2); + }); + + it("sets the state of only the first Select component to equal the id of a single passed in node data", () => { + let wrapper = mount( + + ); + let firstReactSelect = wrapper.ref("node1Id"); + expect(firstReactSelect.get(0).state.value).toBe(1); + + let secondReactSelect = wrapper.ref("node2Id"); + expect(secondReactSelect.get(0).state.value).toBe(''); + }); + + it("sets the Select components options to correspond to the nodes prop", () => { + let wrapper = mount( + + ); + let firstReactSelect = wrapper.ref("node1Id"); + expect(firstReactSelect.get(0).props.options.length).toBe(Object.keys(nodes).length); + + let secondReactSelect = wrapper.ref("node2Id"); + expect(secondReactSelect.get(0).props.options.length).toBe(Object.keys(nodes).length); + + }); + }) + + describe("behaviour", () => { + let addEdgeFunction = jest.genMockFunction(); + let closeAddFormFunction = jest.genMockFunction();; + + it("calls to both addEdge and to closeAddForm when enter is pressed on a non-empty label input field", () => { + let wrapper = mount( + + ); + + let selectForm = wrapper.find(".form-control.input-sm"); + selectForm.get(0).value = 'label'; + selectForm.simulate('keyPress', { key: "Enter" }); + expect(addEdgeFunction.mock.calls.length).toBe(1); + expect(closeAddFormFunction.mock.calls.length).toBe(1); + + }); + + + }) + + + +}) \ No newline at end of file diff --git a/app/styles/oligrapher.editor.css b/app/styles/oligrapher.editor.css index eae4572..5de107b 100755 --- a/app/styles/oligrapher.editor.css +++ b/app/styles/oligrapher.editor.css @@ -216,8 +216,9 @@ button#toggleEditTools { /*overwriting react-select styles*/ -.Select-control { +.Select .Select-control { font-size: 12px; + height: 32px; } .Select-menu-outer {