From 1cc143d502ac515b418427636fca895b5381053c Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Fri, 7 Jul 2017 10:20:12 +0800
Subject: [web] Update test.

---
 .../Modal/__snapshots__/ModalSpec.js.snap          | 179 ++++++++++++---------
 1 file changed, 99 insertions(+), 80 deletions(-)

(limited to 'web/src/js/__tests__/components/Modal')

diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
index af587ae4..aaa54608 100644
--- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
@@ -47,94 +47,113 @@ exports[`Modal Component should render correctly 2`] = `
             className="modal-body"
           >
             <div
-              className="menu-entry"
+              className="container-fluid"
             >
-              <label>
-                booleanOption
-                <input
-                  checked={false}
-                  onChange={[Function]}
-                  title="foo"
-                  type="checkbox"
-                />
-              </label>
-            </div>
-            <div
-              className="menu-entry"
-            >
-              <label
-                htmlFor=""
+              <div
+                className="row"
               >
-                choiceOption
-                <select
-                  name="choiceOption"
-                  onChange={[Function]}
-                  selected="b"
-                  title="foo"
+                <div
+                  className="col-sm-8"
                 >
-                  <option
-                    value="a"
-                  >
-                     
-                    a
-                     
-                  </option>
-                  <option
-                    value="b"
-                  >
-                     
-                    b
-                     
-                  </option>
-                  <option
-                    value="c"
+                  booleanOption
+                </div>
+                <div
+                  className="col-sm-4"
+                >
+                  <input
+                    checked={false}
+                    onChange={[Function]}
+                    title="foo"
+                    type="checkbox"
+                  />
+                </div>
+              </div>
+              <div
+                className="row"
+              >
+                <div
+                  className="col-sm-8"
+                >
+                  choiceOption
+                </div>
+                <div
+                  className="col-sm-4"
+                >
+                  <select
+                    name="choiceOption"
+                    onChange={[Function]}
+                    selected="b"
+                    title="foo"
                   >
-                     
-                    c
-                     
-                  </option>
-                </select>
-              </label>
-            </div>
-            <div
-              className="menu-entry"
-            >
-              <label>
-                intOption
-                <input
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  title="foo"
-                  type="number"
-                  value={1}
-                />
-              </label>
-            </div>
-            <div
-              className="menu-entry"
-            >
-              <label>
-                strOption
-                <input
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  title="foo"
-                  type="text"
-                  value="str content"
-                />
-              </label>
+                    <option
+                      value="a"
+                    >
+                       
+                      a
+                       
+                    </option>
+                    <option
+                      value="b"
+                    >
+                       
+                      b
+                       
+                    </option>
+                    <option
+                      value="c"
+                    >
+                       
+                      c
+                       
+                    </option>
+                  </select>
+                </div>
+              </div>
+              <div
+                className="row"
+              >
+                <div
+                  className="col-sm-8"
+                >
+                  intOption
+                </div>
+                <div
+                  className="col-sm-4"
+                >
+                  <input
+                    onChange={[Function]}
+                    onKeyDown={[Function]}
+                    title="foo"
+                    type="number"
+                    value={1}
+                  />
+                </div>
+              </div>
+              <div
+                className="row"
+              >
+                <div
+                  className="col-sm-8"
+                >
+                  strOption
+                </div>
+                <div
+                  className="col-sm-4"
+                >
+                  <input
+                    onChange={[Function]}
+                    onKeyDown={[Function]}
+                    title="foo"
+                    type="text"
+                    value="str content"
+                  />
+                </div>
+              </div>
             </div>
           </div>
           <div
             className="modal-footer"
-          >
-            <button
-              className="btn btn-primary"
-              type="button"
-            >
-              Save Changes
-            </button>
-          </div>
+          />
         </div>
       </div>
     </div>
-- 
cgit v1.2.3


From 73855908da9460a9ba646a03415d2dcde4f378d0 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Mon, 10 Jul 2017 20:43:59 +0800
Subject: [web] Update tests.

---
 .../components/Modal/__snapshots__/ModalSpec.js.snap | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'web/src/js/__tests__/components/Modal')

diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
index aaa54608..0550c1fa 100644
--- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
@@ -62,8 +62,11 @@ exports[`Modal Component should render correctly 2`] = `
                 >
                   <input
                     checked={false}
+                    onBlur={[Function]}
                     onChange={[Function]}
-                    title="foo"
+                    onFocus={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseOver={[Function]}
                     type="checkbox"
                   />
                 </div>
@@ -81,9 +84,12 @@ exports[`Modal Component should render correctly 2`] = `
                 >
                   <select
                     name="choiceOption"
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
+                    onMouseLeave={[Function]}
+                    onMouseOver={[Function]}
                     selected="b"
-                    title="foo"
                   >
                     <option
                       value="a"
@@ -121,9 +127,12 @@ exports[`Modal Component should render correctly 2`] = `
                   className="col-sm-4"
                 >
                   <input
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     onKeyDown={[Function]}
-                    title="foo"
+                    onMouseLeave={[Function]}
+                    onMouseOver={[Function]}
                     type="number"
                     value={1}
                   />
@@ -141,9 +150,12 @@ exports[`Modal Component should render correctly 2`] = `
                   className="col-sm-4"
                 >
                   <input
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     onKeyDown={[Function]}
-                    title="foo"
+                    onMouseLeave={[Function]}
+                    onMouseOver={[Function]}
                     type="text"
                     value="str content"
                   />
-- 
cgit v1.2.3


From f465f08c9ac302007b3aec6709a8e82d63c7ad65 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Thu, 20 Jul 2017 15:39:43 +0800
Subject: [web] Minor fix and update tests.

---
 .../js/__tests__/components/Modal/OptionSpec.js    |  99 +++++++++++
 .../Modal/__snapshots__/ModalSpec.js.snap          | 196 +++++++++++++--------
 .../Modal/__snapshots__/OptionSpec.js.snap         |  64 +++++++
 3 files changed, 285 insertions(+), 74 deletions(-)
 create mode 100644 web/src/js/__tests__/components/Modal/OptionSpec.js
 create mode 100644 web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap

(limited to 'web/src/js/__tests__/components/Modal')

diff --git a/web/src/js/__tests__/components/Modal/OptionSpec.js b/web/src/js/__tests__/components/Modal/OptionSpec.js
new file mode 100644
index 00000000..a275aee6
--- /dev/null
+++ b/web/src/js/__tests__/components/Modal/OptionSpec.js
@@ -0,0 +1,99 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { Options, ChoicesOption } from '../../../components/Modal/Option'
+
+describe('BooleanOption Component', () => {
+    let BooleanOption = Options['bool'],
+        onChangeFn = jest.fn(),
+        booleanOption = renderer.create(
+            <BooleanOption value={true} onChange={onChangeFn}/>
+        ),
+        tree = booleanOption.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle onChange', () => {
+        let input = tree.children[0].children[0],
+            mockEvent = { target: { checked: true }}
+        input.props.onChange(mockEvent)
+        expect(onChangeFn).toBeCalledWith(mockEvent.target.checked)
+    })
+})
+
+describe('StringOption Component', () => {
+    let StringOption = Options['str'],
+        onChangeFn = jest.fn(),
+        stringOption = renderer.create(
+            <StringOption value="foo" onChange={onChangeFn}/>
+        ),
+        tree = stringOption.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle onChange', () => {
+        let mockEvent = { target: { value: 'bar' }}
+        tree.props.onChange(mockEvent)
+        expect(onChangeFn).toBeCalledWith(mockEvent.target.value)
+    })
+
+})
+
+describe('NumberOption Component', () => {
+    let NumberOption = Options['int'],
+        onChangeFn = jest.fn(),
+        numberOption = renderer.create(
+            <NumberOption value={1} onChange={onChangeFn}/>
+        ),
+        tree = numberOption.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle onChange', () => {
+        let mockEvent = {target: { value: '2'}}
+        tree.props.onChange(mockEvent)
+        expect(onChangeFn).toBeCalledWith(2)
+    })
+})
+
+describe('ChoiceOption Component', () => {
+    let onChangeFn = jest.fn(),
+        choiceOption = renderer.create(
+            <ChoicesOption value='a' choices={['a', 'b', 'c']} onChange={onChangeFn}/>
+        ),
+        tree = choiceOption.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle onChange', () => {
+        let mockEvent = { target: {value: 'b'} }
+        tree.props.onChange(mockEvent)
+        expect(onChangeFn).toBeCalledWith(mockEvent.target.value)
+    })
+})
+
+describe('StringOption Component', () => {
+    let onChangeFn = jest.fn(),
+        StringSequenceOption = Options['sequence of str'],
+        stringSequenceOption = renderer.create(
+            <StringSequenceOption value={['a', 'b']} onChange={onChangeFn}/>
+        ),
+        tree = stringSequenceOption.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle onChange', () => {
+        let mockEvent = { target: {value: 'a\nb\nc\n'}}
+        tree.props.onChange(mockEvent)
+        expect(onChangeFn).toBeCalledWith(['a', 'b', 'c', ''])
+    })
+})
diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
index 0550c1fa..bfd855bd 100644
--- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
@@ -47,117 +47,165 @@ exports[`Modal Component should render correctly 2`] = `
             className="modal-body"
           >
             <div
-              className="container-fluid"
+              className="form-horizontal"
             >
               <div
-                className="row"
+                className="form-group"
               >
                 <div
-                  className="col-sm-8"
+                  className="col-xs-6"
                 >
-                  booleanOption
+                  <label
+                    htmlFor="booleanOption"
+                  >
+                    booleanOption
+                  </label>
+                  <div
+                    className="help-block small"
+                  >
+                    foo
+                  </div>
                 </div>
                 <div
-                  className="col-sm-4"
+                  className="col-xs-6"
                 >
-                  <input
-                    checked={false}
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseOver={[Function]}
-                    type="checkbox"
-                  />
+                  <div
+                    className=""
+                  >
+                    <div
+                      className="checkbox"
+                    >
+                      <label>
+                        <input
+                          checked={false}
+                          name="booleanOption"
+                          onChange={[Function]}
+                          onKeyDown={[Function]}
+                          type="checkbox"
+                        />
+                        Enable
+                      </label>
+                    </div>
+                  </div>
                 </div>
               </div>
               <div
-                className="row"
+                className="form-group"
               >
                 <div
-                  className="col-sm-8"
+                  className="col-xs-6"
                 >
-                  choiceOption
+                  <label
+                    htmlFor="choiceOption"
+                  >
+                    choiceOption
+                  </label>
+                  <div
+                    className="help-block small"
+                  >
+                    foo
+                  </div>
                 </div>
                 <div
-                  className="col-sm-4"
+                  className="col-xs-6"
                 >
-                  <select
-                    name="choiceOption"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseOver={[Function]}
-                    selected="b"
+                  <div
+                    className=""
                   >
-                    <option
-                      value="a"
-                    >
-                       
-                      a
-                       
-                    </option>
-                    <option
-                      value="b"
+                    <select
+                      className="form-control"
+                      name="choiceOption"
+                      onChange={[Function]}
+                      onKeyDown={[Function]}
+                      selected="b"
                     >
-                       
-                      b
-                       
-                    </option>
-                    <option
-                      value="c"
-                    >
-                       
-                      c
-                       
-                    </option>
-                  </select>
+                      <option
+                        value="a"
+                      >
+                        a
+                      </option>
+                      <option
+                        value="b"
+                      >
+                        b
+                      </option>
+                      <option
+                        value="c"
+                      >
+                        c
+                      </option>
+                    </select>
+                  </div>
                 </div>
               </div>
               <div
-                className="row"
+                className="form-group"
               >
                 <div
-                  className="col-sm-8"
+                  className="col-xs-6"
                 >
-                  intOption
+                  <label
+                    htmlFor="intOption"
+                  >
+                    intOption
+                  </label>
+                  <div
+                    className="help-block small"
+                  >
+                    foo
+                  </div>
                 </div>
                 <div
-                  className="col-sm-4"
+                  className="col-xs-6"
                 >
-                  <input
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseOver={[Function]}
-                    type="number"
-                    value={1}
-                  />
+                  <div
+                    className=""
+                  >
+                    <input
+                      className="form-control"
+                      name="intOption"
+                      onChange={[Function]}
+                      onKeyDown={[Function]}
+                      type="number"
+                      value={1}
+                    />
+                  </div>
                 </div>
               </div>
               <div
-                className="row"
+                className="form-group"
               >
                 <div
-                  className="col-sm-8"
+                  className="col-xs-6"
                 >
-                  strOption
+                  <label
+                    htmlFor="strOption"
+                  >
+                    strOption
+                  </label>
+                  <div
+                    className="help-block small"
+                  >
+                    foo
+                  </div>
                 </div>
                 <div
-                  className="col-sm-4"
+                  className="col-xs-6"
                 >
-                  <input
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseOver={[Function]}
-                    type="text"
-                    value="str content"
+                  <div
+                    className="has-error"
+                  >
+                    <input
+                      className="form-control"
+                      name="strOption"
+                      onChange={[Function]}
+                      onKeyDown={[Function]}
+                      type="text"
+                      value="str content"
+                    />
+                  </div>
+                  <div
+                    className="small text-danger"
                   />
                 </div>
               </div>
diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap
new file mode 100644
index 00000000..514e0eb5
--- /dev/null
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BooleanOption Component should render correctly 1`] = `
+<div
+  className="checkbox"
+>
+  <label>
+    <input
+      checked={true}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    Enable
+  </label>
+</div>
+`;
+
+exports[`ChoiceOption Component should render correctly 1`] = `
+<select
+  onChange={[Function]}
+  selected="a"
+>
+  <option
+    value="a"
+  >
+    a
+  </option>
+  <option
+    value="b"
+  >
+    b
+  </option>
+  <option
+    value="c"
+  >
+    c
+  </option>
+</select>
+`;
+
+exports[`NumberOption Component should render correctly 1`] = `
+<input
+  onChange={[Function]}
+  type="number"
+  value={1}
+/>
+`;
+
+exports[`StringOption Component should render correctly 1`] = `
+<input
+  onChange={[Function]}
+  type="text"
+  value="foo"
+/>
+`;
+
+exports[`StringOption Component should render correctly 2`] = `
+<textarea
+  onChange={[Function]}
+  rows={2}
+  value="a
+b"
+/>
+`;
-- 
cgit v1.2.3