[web] Minor fix and update tests.

1 files changed, 122 insertions, 74 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 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>