From eac502df498ee8bc6b97d12c33121c9b6b03077b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 30 Aug 2018 22:53:57 +0100
Subject: [PATCH] fix(tests): add missing MultiSelect coverage

---
 .../__snapshots__/index.test.js.snap          | 863 ++++++++++++++++++
 ui/src/Components/MultiSelect/index.test.js   |  16 +-
 2 files changed, 878 insertions(+), 1 deletion(-)

diff --git a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
index 90a223121..318800f69 100644
--- a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
@@ -1,5 +1,868 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
+<CustomMultiSelect
+  autoFocus={true}
+  defaultInputValue=""
+  defaultMenuIsOpen={false}
+  defaultValue={null}
+>
+  <StateManager
+    autoFocus={true}
+    defaultInputValue=""
+    defaultMenuIsOpen={false}
+    defaultValue={null}
+    styles={
+      Object {
+        "control": [Function],
+        "indicatorsContainer": [Function],
+        "multiValue": [Function],
+        "multiValueLabel": [Function],
+        "multiValueRemove": [Function],
+        "option": [Function],
+        "valueContainer": [Function],
+      }
+    }
+  >
+    <Creatable
+      allowCreateWhileLoading={false}
+      autoFocus={true}
+      createOptionPosition="last"
+      defaultInputValue=""
+      defaultMenuIsOpen={false}
+      defaultValue={null}
+      formatCreateLabel={[Function]}
+      getNewOptionData={[Function]}
+      inputValue=""
+      isValidNewOption={[Function]}
+      menuIsOpen={false}
+      onChange={[Function]}
+      onInputChange={[Function]}
+      onMenuClose={[Function]}
+      onMenuOpen={[Function]}
+      styles={
+        Object {
+          "control": [Function],
+          "indicatorsContainer": [Function],
+          "multiValue": [Function],
+          "multiValueLabel": [Function],
+          "multiValueRemove": [Function],
+          "option": [Function],
+          "valueContainer": [Function],
+        }
+      }
+      value={null}
+    >
+      <Select
+        allowCreateWhileLoading={false}
+        autoFocus={true}
+        backspaceRemovesValue={true}
+        blurInputOnSelect={true}
+        captureMenuScroll={false}
+        closeMenuOnScroll={false}
+        closeMenuOnSelect={true}
+        components={Object {}}
+        controlShouldRenderValue={true}
+        createOptionPosition="last"
+        defaultInputValue=""
+        defaultMenuIsOpen={false}
+        defaultValue={null}
+        escapeClearsValue={false}
+        filterOption={[Function]}
+        formatCreateLabel={[Function]}
+        formatGroupLabel={[Function]}
+        getNewOptionData={[Function]}
+        getOptionLabel={[Function]}
+        getOptionValue={[Function]}
+        inputValue=""
+        isDisabled={false}
+        isLoading={false}
+        isMulti={false}
+        isOptionDisabled={[Function]}
+        isRtl={false}
+        isSearchable={true}
+        isValidNewOption={[Function]}
+        loadingMessage={[Function]}
+        maxMenuHeight={300}
+        menuIsOpen={false}
+        menuPlacement="bottom"
+        menuPosition="absolute"
+        menuShouldBlockScroll={false}
+        menuShouldScrollIntoView={true}
+        minMenuHeight={140}
+        noOptionsMessage={[Function]}
+        onChange={[Function]}
+        onInputChange={[Function]}
+        onMenuClose={[Function]}
+        onMenuOpen={[Function]}
+        openMenuOnClick={true}
+        openMenuOnFocus={false}
+        options={Array []}
+        pageSize={5}
+        placeholder="Select..."
+        screenReaderStatus={[Function]}
+        styles={
+          Object {
+            "control": [Function],
+            "indicatorsContainer": [Function],
+            "multiValue": [Function],
+            "multiValueLabel": [Function],
+            "multiValueRemove": [Function],
+            "option": [Function],
+            "valueContainer": [Function],
+          }
+        }
+        tabIndex="0"
+        tabSelectsValue={true}
+        value={null}
+      >
+        <SelectContainer
+          clearValue={[Function]}
+          cx={[Function]}
+          getStyles={[Function]}
+          getValue={[Function]}
+          hasValue={false}
+          innerProps={
+            Object {
+              "id": undefined,
+              "onKeyDown": [Function],
+            }
+          }
+          isDisabled={false}
+          isFocused={true}
+          isMulti={false}
+          isRtl={false}
+          options={Array []}
+          selectOption={[Function]}
+          selectProps={
+            Object {
+              "allowCreateWhileLoading": false,
+              "autoFocus": true,
+              "backspaceRemovesValue": true,
+              "blurInputOnSelect": true,
+              "captureMenuScroll": false,
+              "closeMenuOnScroll": false,
+              "closeMenuOnSelect": true,
+              "components": Object {},
+              "controlShouldRenderValue": true,
+              "createOptionPosition": "last",
+              "defaultInputValue": "",
+              "defaultMenuIsOpen": false,
+              "defaultValue": null,
+              "escapeClearsValue": false,
+              "filterOption": [Function],
+              "formatCreateLabel": [Function],
+              "formatGroupLabel": [Function],
+              "getNewOptionData": [Function],
+              "getOptionLabel": [Function],
+              "getOptionValue": [Function],
+              "inputValue": "",
+              "isDisabled": false,
+              "isLoading": false,
+              "isMulti": false,
+              "isOptionDisabled": [Function],
+              "isRtl": false,
+              "isSearchable": true,
+              "isValidNewOption": [Function],
+              "loadingMessage": [Function],
+              "maxMenuHeight": 300,
+              "menuIsOpen": false,
+              "menuPlacement": "bottom",
+              "menuPosition": "absolute",
+              "menuShouldBlockScroll": false,
+              "menuShouldScrollIntoView": true,
+              "minMenuHeight": 140,
+              "noOptionsMessage": [Function],
+              "onChange": [Function],
+              "onInputChange": [Function],
+              "onMenuClose": [Function],
+              "onMenuOpen": [Function],
+              "openMenuOnClick": true,
+              "openMenuOnFocus": false,
+              "options": Array [],
+              "pageSize": 5,
+              "placeholder": "Select...",
+              "screenReaderStatus": [Function],
+              "styles": Object {
+                "control": [Function],
+                "indicatorsContainer": [Function],
+                "multiValue": [Function],
+                "multiValueLabel": [Function],
+                "multiValueRemove": [Function],
+                "option": [Function],
+                "valueContainer": [Function],
+              },
+              "tabIndex": "0",
+              "tabSelectsValue": true,
+              "value": null,
+            }
+          }
+          setValue={[Function]}
+        >
+          <div
+            className="css-10nd86i"
+            onKeyDown={[Function]}
+          >
+            <A11yText
+              aria-live="assertive"
+            >
+              <span
+                aria-live="assertive"
+                className="css-bl6clz"
+              >
+                <p
+                  id="aria-selection-event"
+                >
+                   
+                </p>
+                <p
+                  id="aria-context"
+                >
+                   
+                    0 results available. Select is focused ,type to refine list, press Down to open the menu, 
+                </p>
+              </span>
+            </A11yText>
+            <Control
+              clearValue={[Function]}
+              cx={[Function]}
+              getStyles={[Function]}
+              getValue={[Function]}
+              hasValue={false}
+              innerProps={
+                Object {
+                  "onMouseDown": [Function],
+                  "onTouchEnd": [Function],
+                }
+              }
+              innerRef={[Function]}
+              isDisabled={false}
+              isFocused={true}
+              isMulti={false}
+              isRtl={false}
+              options={Array []}
+              selectOption={[Function]}
+              selectProps={
+                Object {
+                  "allowCreateWhileLoading": false,
+                  "autoFocus": true,
+                  "backspaceRemovesValue": true,
+                  "blurInputOnSelect": true,
+                  "captureMenuScroll": false,
+                  "closeMenuOnScroll": false,
+                  "closeMenuOnSelect": true,
+                  "components": Object {},
+                  "controlShouldRenderValue": true,
+                  "createOptionPosition": "last",
+                  "defaultInputValue": "",
+                  "defaultMenuIsOpen": false,
+                  "defaultValue": null,
+                  "escapeClearsValue": false,
+                  "filterOption": [Function],
+                  "formatCreateLabel": [Function],
+                  "formatGroupLabel": [Function],
+                  "getNewOptionData": [Function],
+                  "getOptionLabel": [Function],
+                  "getOptionValue": [Function],
+                  "inputValue": "",
+                  "isDisabled": false,
+                  "isLoading": false,
+                  "isMulti": false,
+                  "isOptionDisabled": [Function],
+                  "isRtl": false,
+                  "isSearchable": true,
+                  "isValidNewOption": [Function],
+                  "loadingMessage": [Function],
+                  "maxMenuHeight": 300,
+                  "menuIsOpen": false,
+                  "menuPlacement": "bottom",
+                  "menuPosition": "absolute",
+                  "menuShouldBlockScroll": false,
+                  "menuShouldScrollIntoView": true,
+                  "minMenuHeight": 140,
+                  "noOptionsMessage": [Function],
+                  "onChange": [Function],
+                  "onInputChange": [Function],
+                  "onMenuClose": [Function],
+                  "onMenuOpen": [Function],
+                  "openMenuOnClick": true,
+                  "openMenuOnFocus": false,
+                  "options": Array [],
+                  "pageSize": 5,
+                  "placeholder": "Select...",
+                  "screenReaderStatus": [Function],
+                  "styles": Object {
+                    "control": [Function],
+                    "indicatorsContainer": [Function],
+                    "multiValue": [Function],
+                    "multiValueLabel": [Function],
+                    "multiValueRemove": [Function],
+                    "option": [Function],
+                    "valueContainer": [Function],
+                  },
+                  "tabIndex": "0",
+                  "tabSelectsValue": true,
+                  "value": null,
+                }
+              }
+              setValue={[Function]}
+            >
+              <div
+                className="css-7i0fzi"
+                onMouseDown={[Function]}
+                onTouchEnd={[Function]}
+              >
+                <ValueContainer
+                  clearValue={[Function]}
+                  cx={[Function]}
+                  getStyles={[Function]}
+                  getValue={[Function]}
+                  hasValue={false}
+                  isDisabled={false}
+                  isMulti={false}
+                  isRtl={false}
+                  options={Array []}
+                  selectOption={[Function]}
+                  selectProps={
+                    Object {
+                      "allowCreateWhileLoading": false,
+                      "autoFocus": true,
+                      "backspaceRemovesValue": true,
+                      "blurInputOnSelect": true,
+                      "captureMenuScroll": false,
+                      "closeMenuOnScroll": false,
+                      "closeMenuOnSelect": true,
+                      "components": Object {},
+                      "controlShouldRenderValue": true,
+                      "createOptionPosition": "last",
+                      "defaultInputValue": "",
+                      "defaultMenuIsOpen": false,
+                      "defaultValue": null,
+                      "escapeClearsValue": false,
+                      "filterOption": [Function],
+                      "formatCreateLabel": [Function],
+                      "formatGroupLabel": [Function],
+                      "getNewOptionData": [Function],
+                      "getOptionLabel": [Function],
+                      "getOptionValue": [Function],
+                      "inputValue": "",
+                      "isDisabled": false,
+                      "isLoading": false,
+                      "isMulti": false,
+                      "isOptionDisabled": [Function],
+                      "isRtl": false,
+                      "isSearchable": true,
+                      "isValidNewOption": [Function],
+                      "loadingMessage": [Function],
+                      "maxMenuHeight": 300,
+                      "menuIsOpen": false,
+                      "menuPlacement": "bottom",
+                      "menuPosition": "absolute",
+                      "menuShouldBlockScroll": false,
+                      "menuShouldScrollIntoView": true,
+                      "minMenuHeight": 140,
+                      "noOptionsMessage": [Function],
+                      "onChange": [Function],
+                      "onInputChange": [Function],
+                      "onMenuClose": [Function],
+                      "onMenuOpen": [Function],
+                      "openMenuOnClick": true,
+                      "openMenuOnFocus": false,
+                      "options": Array [],
+                      "pageSize": 5,
+                      "placeholder": "Select...",
+                      "screenReaderStatus": [Function],
+                      "styles": Object {
+                        "control": [Function],
+                        "indicatorsContainer": [Function],
+                        "multiValue": [Function],
+                        "multiValueLabel": [Function],
+                        "multiValueRemove": [Function],
+                        "option": [Function],
+                        "valueContainer": [Function],
+                      },
+                      "tabIndex": "0",
+                      "tabSelectsValue": true,
+                      "value": null,
+                    }
+                  }
+                  setValue={[Function]}
+                >
+                  <div
+                    className="css-s4h933"
+                  >
+                    <Placeholder
+                      clearValue={[Function]}
+                      cx={[Function]}
+                      getStyles={[Function]}
+                      getValue={[Function]}
+                      hasValue={false}
+                      isDisabled={false}
+                      isMulti={false}
+                      isRtl={false}
+                      key="placeholder"
+                      options={Array []}
+                      selectOption={[Function]}
+                      selectProps={
+                        Object {
+                          "allowCreateWhileLoading": false,
+                          "autoFocus": true,
+                          "backspaceRemovesValue": true,
+                          "blurInputOnSelect": true,
+                          "captureMenuScroll": false,
+                          "closeMenuOnScroll": false,
+                          "closeMenuOnSelect": true,
+                          "components": Object {},
+                          "controlShouldRenderValue": true,
+                          "createOptionPosition": "last",
+                          "defaultInputValue": "",
+                          "defaultMenuIsOpen": false,
+                          "defaultValue": null,
+                          "escapeClearsValue": false,
+                          "filterOption": [Function],
+                          "formatCreateLabel": [Function],
+                          "formatGroupLabel": [Function],
+                          "getNewOptionData": [Function],
+                          "getOptionLabel": [Function],
+                          "getOptionValue": [Function],
+                          "inputValue": "",
+                          "isDisabled": false,
+                          "isLoading": false,
+                          "isMulti": false,
+                          "isOptionDisabled": [Function],
+                          "isRtl": false,
+                          "isSearchable": true,
+                          "isValidNewOption": [Function],
+                          "loadingMessage": [Function],
+                          "maxMenuHeight": 300,
+                          "menuIsOpen": false,
+                          "menuPlacement": "bottom",
+                          "menuPosition": "absolute",
+                          "menuShouldBlockScroll": false,
+                          "menuShouldScrollIntoView": true,
+                          "minMenuHeight": 140,
+                          "noOptionsMessage": [Function],
+                          "onChange": [Function],
+                          "onInputChange": [Function],
+                          "onMenuClose": [Function],
+                          "onMenuOpen": [Function],
+                          "openMenuOnClick": true,
+                          "openMenuOnFocus": false,
+                          "options": Array [],
+                          "pageSize": 5,
+                          "placeholder": "Select...",
+                          "screenReaderStatus": [Function],
+                          "styles": Object {
+                            "control": [Function],
+                            "indicatorsContainer": [Function],
+                            "multiValue": [Function],
+                            "multiValueLabel": [Function],
+                            "multiValueRemove": [Function],
+                            "option": [Function],
+                            "valueContainer": [Function],
+                          },
+                          "tabIndex": "0",
+                          "tabSelectsValue": true,
+                          "value": null,
+                        }
+                      }
+                      setValue={[Function]}
+                    >
+                      <div
+                        className="css-1492t68"
+                      >
+                        Select...
+                      </div>
+                    </Placeholder>
+                    <Input
+                      aria-autocomplete="list"
+                      autoCapitalize="none"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      cx={[Function]}
+                      getStyles={[Function]}
+                      id="react-select-2-input"
+                      innerRef={[Function]}
+                      isDisabled={false}
+                      isHidden={false}
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      spellCheck="false"
+                      tabIndex="0"
+                      type="text"
+                      value=""
+                    >
+                      <div
+                        className="css-rsyb7x"
+                      >
+                        <AutosizeInput
+                          aria-autocomplete="list"
+                          autoCapitalize="none"
+                          autoComplete="off"
+                          autoCorrect="off"
+                          className=""
+                          disabled={false}
+                          id="react-select-2-input"
+                          injectStyles={true}
+                          inputRef={[Function]}
+                          inputStyle={
+                            Object {
+                              "background": 0,
+                              "border": 0,
+                              "color": "inherit",
+                              "fontSize": "inherit",
+                              "opacity": 1,
+                              "outline": 0,
+                              "padding": 0,
+                            }
+                          }
+                          minWidth={1}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          spellCheck="false"
+                          tabIndex="0"
+                          type="text"
+                          value=""
+                        >
+                          <div
+                            className=""
+                            style={
+                              Object {
+                                "display": "inline-block",
+                              }
+                            }
+                          >
+                            <input
+                              aria-autocomplete="list"
+                              autoCapitalize="none"
+                              autoComplete="off"
+                              autoCorrect="off"
+                              disabled={false}
+                              id="react-select-2-input"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              spellCheck="false"
+                              style={
+                                Object {
+                                  "background": 0,
+                                  "border": 0,
+                                  "boxSizing": "content-box",
+                                  "color": "inherit",
+                                  "fontSize": "inherit",
+                                  "opacity": 1,
+                                  "outline": 0,
+                                  "padding": 0,
+                                  "width": "2px",
+                                }
+                              }
+                              tabIndex="0"
+                              type="text"
+                              value=""
+                            />
+                            <div
+                              style={
+                                Object {
+                                  "height": 0,
+                                  "left": 0,
+                                  "overflow": "scroll",
+                                  "position": "absolute",
+                                  "top": 0,
+                                  "visibility": "hidden",
+                                  "whiteSpace": "pre",
+                                }
+                              }
+                            />
+                          </div>
+                        </AutosizeInput>
+                      </div>
+                    </Input>
+                  </div>
+                </ValueContainer>
+                <IndicatorsContainer
+                  clearValue={[Function]}
+                  cx={[Function]}
+                  getStyles={[Function]}
+                  getValue={[Function]}
+                  hasValue={false}
+                  isDisabled={false}
+                  isMulti={false}
+                  isRtl={false}
+                  options={Array []}
+                  selectOption={[Function]}
+                  selectProps={
+                    Object {
+                      "allowCreateWhileLoading": false,
+                      "autoFocus": true,
+                      "backspaceRemovesValue": true,
+                      "blurInputOnSelect": true,
+                      "captureMenuScroll": false,
+                      "closeMenuOnScroll": false,
+                      "closeMenuOnSelect": true,
+                      "components": Object {},
+                      "controlShouldRenderValue": true,
+                      "createOptionPosition": "last",
+                      "defaultInputValue": "",
+                      "defaultMenuIsOpen": false,
+                      "defaultValue": null,
+                      "escapeClearsValue": false,
+                      "filterOption": [Function],
+                      "formatCreateLabel": [Function],
+                      "formatGroupLabel": [Function],
+                      "getNewOptionData": [Function],
+                      "getOptionLabel": [Function],
+                      "getOptionValue": [Function],
+                      "inputValue": "",
+                      "isDisabled": false,
+                      "isLoading": false,
+                      "isMulti": false,
+                      "isOptionDisabled": [Function],
+                      "isRtl": false,
+                      "isSearchable": true,
+                      "isValidNewOption": [Function],
+                      "loadingMessage": [Function],
+                      "maxMenuHeight": 300,
+                      "menuIsOpen": false,
+                      "menuPlacement": "bottom",
+                      "menuPosition": "absolute",
+                      "menuShouldBlockScroll": false,
+                      "menuShouldScrollIntoView": true,
+                      "minMenuHeight": 140,
+                      "noOptionsMessage": [Function],
+                      "onChange": [Function],
+                      "onInputChange": [Function],
+                      "onMenuClose": [Function],
+                      "onMenuOpen": [Function],
+                      "openMenuOnClick": true,
+                      "openMenuOnFocus": false,
+                      "options": Array [],
+                      "pageSize": 5,
+                      "placeholder": "Select...",
+                      "screenReaderStatus": [Function],
+                      "styles": Object {
+                        "control": [Function],
+                        "indicatorsContainer": [Function],
+                        "multiValue": [Function],
+                        "multiValueLabel": [Function],
+                        "multiValueRemove": [Function],
+                        "option": [Function],
+                        "valueContainer": [Function],
+                      },
+                      "tabIndex": "0",
+                      "tabSelectsValue": true,
+                      "value": null,
+                    }
+                  }
+                  setValue={[Function]}
+                >
+                  <div
+                    className="css-mik995"
+                  >
+                    <IndicatorSeparator
+                      clearValue={[Function]}
+                      cx={[Function]}
+                      getStyles={[Function]}
+                      getValue={[Function]}
+                      hasValue={false}
+                      isDisabled={false}
+                      isFocused={true}
+                      isMulti={false}
+                      isRtl={false}
+                      options={Array []}
+                      selectOption={[Function]}
+                      selectProps={
+                        Object {
+                          "allowCreateWhileLoading": false,
+                          "autoFocus": true,
+                          "backspaceRemovesValue": true,
+                          "blurInputOnSelect": true,
+                          "captureMenuScroll": false,
+                          "closeMenuOnScroll": false,
+                          "closeMenuOnSelect": true,
+                          "components": Object {},
+                          "controlShouldRenderValue": true,
+                          "createOptionPosition": "last",
+                          "defaultInputValue": "",
+                          "defaultMenuIsOpen": false,
+                          "defaultValue": null,
+                          "escapeClearsValue": false,
+                          "filterOption": [Function],
+                          "formatCreateLabel": [Function],
+                          "formatGroupLabel": [Function],
+                          "getNewOptionData": [Function],
+                          "getOptionLabel": [Function],
+                          "getOptionValue": [Function],
+                          "inputValue": "",
+                          "isDisabled": false,
+                          "isLoading": false,
+                          "isMulti": false,
+                          "isOptionDisabled": [Function],
+                          "isRtl": false,
+                          "isSearchable": true,
+                          "isValidNewOption": [Function],
+                          "loadingMessage": [Function],
+                          "maxMenuHeight": 300,
+                          "menuIsOpen": false,
+                          "menuPlacement": "bottom",
+                          "menuPosition": "absolute",
+                          "menuShouldBlockScroll": false,
+                          "menuShouldScrollIntoView": true,
+                          "minMenuHeight": 140,
+                          "noOptionsMessage": [Function],
+                          "onChange": [Function],
+                          "onInputChange": [Function],
+                          "onMenuClose": [Function],
+                          "onMenuOpen": [Function],
+                          "openMenuOnClick": true,
+                          "openMenuOnFocus": false,
+                          "options": Array [],
+                          "pageSize": 5,
+                          "placeholder": "Select...",
+                          "screenReaderStatus": [Function],
+                          "styles": Object {
+                            "control": [Function],
+                            "indicatorsContainer": [Function],
+                            "multiValue": [Function],
+                            "multiValueLabel": [Function],
+                            "multiValueRemove": [Function],
+                            "option": [Function],
+                            "valueContainer": [Function],
+                          },
+                          "tabIndex": "0",
+                          "tabSelectsValue": true,
+                          "value": null,
+                        }
+                      }
+                      setValue={[Function]}
+                    >
+                      <span
+                        className="css-d8oujb"
+                      />
+                    </IndicatorSeparator>
+                    <DropdownIndicator
+                      clearValue={[Function]}
+                      cx={[Function]}
+                      getStyles={[Function]}
+                      getValue={[Function]}
+                      hasValue={false}
+                      innerProps={
+                        Object {
+                          "aria-hidden": "true",
+                          "onMouseDown": [Function],
+                          "onTouchEnd": [Function],
+                        }
+                      }
+                      isDisabled={false}
+                      isFocused={true}
+                      isMulti={false}
+                      isRtl={false}
+                      options={Array []}
+                      selectOption={[Function]}
+                      selectProps={
+                        Object {
+                          "allowCreateWhileLoading": false,
+                          "autoFocus": true,
+                          "backspaceRemovesValue": true,
+                          "blurInputOnSelect": true,
+                          "captureMenuScroll": false,
+                          "closeMenuOnScroll": false,
+                          "closeMenuOnSelect": true,
+                          "components": Object {},
+                          "controlShouldRenderValue": true,
+                          "createOptionPosition": "last",
+                          "defaultInputValue": "",
+                          "defaultMenuIsOpen": false,
+                          "defaultValue": null,
+                          "escapeClearsValue": false,
+                          "filterOption": [Function],
+                          "formatCreateLabel": [Function],
+                          "formatGroupLabel": [Function],
+                          "getNewOptionData": [Function],
+                          "getOptionLabel": [Function],
+                          "getOptionValue": [Function],
+                          "inputValue": "",
+                          "isDisabled": false,
+                          "isLoading": false,
+                          "isMulti": false,
+                          "isOptionDisabled": [Function],
+                          "isRtl": false,
+                          "isSearchable": true,
+                          "isValidNewOption": [Function],
+                          "loadingMessage": [Function],
+                          "maxMenuHeight": 300,
+                          "menuIsOpen": false,
+                          "menuPlacement": "bottom",
+                          "menuPosition": "absolute",
+                          "menuShouldBlockScroll": false,
+                          "menuShouldScrollIntoView": true,
+                          "minMenuHeight": 140,
+                          "noOptionsMessage": [Function],
+                          "onChange": [Function],
+                          "onInputChange": [Function],
+                          "onMenuClose": [Function],
+                          "onMenuOpen": [Function],
+                          "openMenuOnClick": true,
+                          "openMenuOnFocus": false,
+                          "options": Array [],
+                          "pageSize": 5,
+                          "placeholder": "Select...",
+                          "screenReaderStatus": [Function],
+                          "styles": Object {
+                            "control": [Function],
+                            "indicatorsContainer": [Function],
+                            "multiValue": [Function],
+                            "multiValueLabel": [Function],
+                            "multiValueRemove": [Function],
+                            "option": [Function],
+                            "valueContainer": [Function],
+                          },
+                          "tabIndex": "0",
+                          "tabSelectsValue": true,
+                          "value": null,
+                        }
+                      }
+                      setValue={[Function]}
+                    >
+                      <div
+                        aria-hidden="true"
+                        className="css-1sjym57"
+                        onMouseDown={[Function]}
+                        onTouchEnd={[Function]}
+                      >
+                        <DownChevron>
+                          <Svg
+                            size={20}
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className="css-19bqh2r"
+                              focusable="false"
+                              height={20}
+                              viewBox="0 0 20 20"
+                              width={20}
+                            >
+                              <path
+                                d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                              />
+                            </svg>
+                          </Svg>
+                        </DownChevron>
+                      </div>
+                    </DropdownIndicator>
+                  </div>
+                </IndicatorsContainer>
+              </div>
+            </Control>
+          </div>
+        </SelectContainer>
+      </Select>
+    </Creatable>
+  </StateManager>
+</CustomMultiSelect>
+`;
+
 exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
 <StateManager
   defaultInputValue=""
diff --git a/ui/src/Components/MultiSelect/index.test.js b/ui/src/Components/MultiSelect/index.test.js
index 9858134f6..b575edef4 100644
--- a/ui/src/Components/MultiSelect/index.test.js
+++ b/ui/src/Components/MultiSelect/index.test.js
@@ -1,11 +1,18 @@
 import React from "react";
 
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
 
 import { MultiSelect } from ".";
 
 const Option = value => ({ label: value, value: value });
 
+describe("<MultiSelect />", () => {
+  it("renders without any extra props", () => {
+    const tree = shallow(<MultiSelect />);
+    expect(tree.text()).toBe("<StateManager />");
+  });
+});
+
 class CustomMultiSelect extends MultiSelect {
   constructor(props) {
     super(props);
@@ -26,6 +33,13 @@ describe("<CustomMultiSelect />", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it("matches snapshot when focused", () => {
+    // this test is to cover styles state.isFocused conditions
+    const tree = mount(<CustomMultiSelect autoFocus />);
+    tree.find("input").simulate("focus");
+    expect(tree).toMatchSnapshot();
+  });
+
   it("matches snapshot with a value", () => {
     const tree = shallow(
       <CustomMultiSelect