[web] Update Option Modal UI and its tests.

2 files changed, 108 insertions, 1 deletions

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 4fe163d1..af587ae4 100644
--- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
+++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap
@@ -46,7 +46,84 @@ exports[`Modal Component should render correctly 2`] = `
           <div
             className="modal-body"
           >
-            ...
+            <div
+              className="menu-entry"
+            >
+              <label>
+                booleanOption
+                <input
+                  checked={false}
+                  onChange={[Function]}
+                  title="foo"
+                  type="checkbox"
+                />
+              </label>
+            </div>
+            <div
+              className="menu-entry"
+            >
+              <label
+                htmlFor=""
+              >
+                choiceOption
+                <select
+                  name="choiceOption"
+                  onChange={[Function]}
+                  selected="b"
+                  title="foo"
+                >
+                  <option
+                    value="a"
+                  >
+                     
+                    a
+                     
+                  </option>
+                  <option
+                    value="b"
+                  >
+                     
+                    b
+                     
+                  </option>
+                  <option
+                    value="c"
+                  >
+                     
+                    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>
+            </div>
           </div>
           <div
             className="modal-footer"
diff --git a/web/src/js/__tests__/ducks/tutils.js b/web/src/js/__tests__/ducks/tutils.js
index 9b92e676..a3e9c168 100644
--- a/web/src/js/__tests__/ducks/tutils.js
+++ b/web/src/js/__tests__/ducks/tutils.js
@@ -42,6 +42,36 @@ export function TStore(){
             anticache: true,
             anticomp: false
         },
+        options: {
+            booleanOption: {
+                choices: null,
+                default: false,
+                help: "foo",
+                type: "bool",
+                value: false
+            },
+            strOption: {
+                choices: null,
+                default: null,
+                help: "foo",
+                type: "str",
+                value: "str content"
+            },
+            intOption: {
+                choices: null,
+                default: 0,
+                help: "foo",
+                type: "int",
+                value: 1
+            },
+            choiceOption: {
+                choices: ['a', 'b', 'c'],
+                default: 'a',
+                help: "foo",
+                type: "str",
+                value: "b"
+            },
+        },
         flows: {
             selected: ["d91165be-ca1f-4612-88a9-c0f8696f3e29"],
             byId: {"d91165be-ca1f-4612-88a9-c0f8696f3e29": tflow},