// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`preferences - navigation to application preferences given in preferences, when rendered renders 1`] = `
<div>
  <div
    class="ClusterManager"
  >
    <div
      class="topBar"
    >
      <div
        class="items"
      >
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive focusable"
            data-testid="home-button"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="home"
            >
              home
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-back"
          >
            <span
              class="icon"
              data-icon-name="arrow_back"
            >
              arrow_back
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-forward"
          >
            <span
              class="icon"
              data-icon-name="arrow_forward"
            >
              arrow_forward
            </span>
          </i>
        </div>
        <div
          class="separator"
        />
      </div>
    </div>
    <main>
      <div
        id="lens-views"
      />
      <div
        class="SettingLayout showNavigation Preferences"
      >
        <nav
          class="sidebarRegion"
        >
          <div
            class="sidebar"
          >
            <div
              class="Tabs flex column"
            >
              <div
                data-preference-tab-group-test="general-tab-group"
              >
                <div
                  class="header flex items-center"
                >
                  Preferences
                </div>
                <div
                  class="Tab flex gaps align-center active"
                  data-preference-tab-link-test="app"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    App
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="proxy"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Proxy
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="kubernetes"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Kubernetes
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="editor"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Editor
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="terminal"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Terminal
                  </div>
                </div>
              </div>
            </div>
          </div>
        </nav>
        <div
          class="contentRegion"
          id="ScrollSpyRoot"
        >
          <div
            class="content"
          >
            <section
              data-preference-page-test="application-page"
              id="application-page"
            >
              <h2
                data-preference-page-title-test="true"
              >
                Application
              </h2>
              <div
                data-preference-item-test="theme"
              >
                <section
                  id="appearance"
                >
                  <div
                    class="SubTitle"
                  >
                    Theme
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-theme-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__placeholder css-14el2xx-placeholder"
                          id="react-select-theme-input-placeholder"
                        >
                          Select...
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-describedby="react-select-theme-input-placeholder"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="theme-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="extension-install-registry"
              >
                <section
                  id="extensionRegistryUrl"
                >
                  <div
                    class="SubTitle"
                  >
                    Extension Install Registry
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-extension-install-registry-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__placeholder css-14el2xx-placeholder"
                          id="react-select-extension-install-registry-input-placeholder"
                        >
                          Select...
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-describedby="react-select-extension-install-registry-input-placeholder"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="extension-install-registry-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p
                    class="mt-4 mb-5 leading-relaxed"
                  >
                    This setting is to change the registry URL for installing extensions by name. 
                    If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your 
                    <b>
                      .npmrc
                    </b>
                     file or in the input below.
                  </p>
                  <div
                    class="Input theme round black disabled invalid"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        disabled=""
                        placeholder="Custom Extension Registry URL..."
                        spellcheck="false"
                        value="some-custom-url"
                      />
                    </label>
                    <div
                      class="input-info flex gaps"
                    />
                  </div>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="start-up"
              >
                <section
                  id="other"
                >
                  <div
                    class="SubTitle"
                  >
                    Start-up
                     
                  </div>
                  <label
                    class="Switch"
                    data-testid="switch"
                  >
                    Automatically start Lens on login
                    <input
                      role="switch"
                      type="checkbox"
                    />
                  </label>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="update-channel"
              >
                <section
                  id="update-channel"
                >
                  <div
                    class="SubTitle"
                  >
                    Update Channel
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-update-channel-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__single-value css-qc6sy-singleValue"
                        >
                          Stable
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="update-channel-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="timezone"
              >
                <section
                  id="locale"
                >
                  <div
                    class="SubTitle"
                  >
                    Locale Timezone
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-timezone-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__placeholder css-14el2xx-placeholder"
                          id="react-select-timezone-input-placeholder"
                        >
                          Select...
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-describedby="react-select-timezone-input-placeholder"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="timezone-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </section>
          </div>
          <div
            class="toolsRegion"
          >
            <div
              class="fixed top-[60px]"
            >
              <div
                data-testid="close-preferences"
              >
                <div
                  aria-label="Close"
                  class="closeButton"
                  role="button"
                >
                  <i
                    class="Icon icon material focusable"
                  >
                    <span
                      class="icon"
                      data-icon-name="close"
                    >
                      close
                    </span>
                  </i>
                </div>
                <div
                  aria-hidden="true"
                  class="esc"
                >
                  ESC
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div
      class="HotbarMenu flex column"
    >
      <div
        class="HotbarItems flex column gaps"
      />
      <div
        class="HotbarSelector"
      >
        <i
          class="Icon Icon previous material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_left"
          >
            arrow_left
          </span>
        </i>
        <div
          class="HotbarIndex"
        >
          <div
            class="badge Badge small clickable"
            id="hotbarIndex"
          >
            0
          </div>
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_right"
          >
            arrow_right
          </span>
        </i>
      </div>
    </div>
    <div
      class="StatusBar"
      data-testid="status-bar"
    >
      <div
        class="leftSide"
        data-testid="status-bar-left"
      />
      <div
        class="rightSide"
        data-testid="status-bar-right"
      />
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - navigation to application preferences given in preferences, when rendered when extension with application preference items gets enabled renders 1`] = `
<div>
  <div
    class="ClusterManager"
  >
    <div
      class="topBar"
    >
      <div
        class="items"
      >
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive focusable"
            data-testid="home-button"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="home"
            >
              home
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-back"
          >
            <span
              class="icon"
              data-icon-name="arrow_back"
            >
              arrow_back
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-forward"
          >
            <span
              class="icon"
              data-icon-name="arrow_forward"
            >
              arrow_forward
            </span>
          </i>
        </div>
        <div
          class="separator"
        />
      </div>
    </div>
    <main>
      <div
        id="lens-views"
      />
      <div
        class="SettingLayout showNavigation Preferences"
      >
        <nav
          class="sidebarRegion"
        >
          <div
            class="sidebar"
          >
            <div
              class="Tabs flex column"
            >
              <div
                data-preference-tab-group-test="general-tab-group"
              >
                <div
                  class="header flex items-center"
                >
                  Preferences
                </div>
                <div
                  class="Tab flex gaps align-center active"
                  data-preference-tab-link-test="app"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    App
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="proxy"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Proxy
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="kubernetes"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Kubernetes
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="editor"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Editor
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="terminal"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Terminal
                  </div>
                </div>
              </div>
            </div>
          </div>
        </nav>
        <div
          class="contentRegion"
          id="ScrollSpyRoot"
        >
          <div
            class="content"
          >
            <section
              data-preference-page-test="application-page"
              id="application-page"
            >
              <h2
                data-preference-page-title-test="true"
              >
                Application
              </h2>
              <div
                data-preference-item-test="preference-item-for-extension-some-test-extension-name-item-some-application-preference-item-id"
              >
                <section
                  class="small"
                  id="some-application-preference-item-id"
                >
                  <div
                    class="SubTitle"
                  >
                    Some application-preference item
                     
                  </div>
                  <div
                    data-testid="some-preference-item-input"
                  />
                  <div
                    class="hint"
                  >
                    <div
                      data-testid="some-preference-item-hint"
                    />
                  </div>
                </section>
                <hr
                  class="small"
                />
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="theme"
              >
                <section
                  id="appearance"
                >
                  <div
                    class="SubTitle"
                  >
                    Theme
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-theme-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__placeholder css-14el2xx-placeholder"
                          id="react-select-theme-input-placeholder"
                        >
                          Select...
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-describedby="react-select-theme-input-placeholder"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="theme-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="extension-install-registry"
              >
                <section
                  id="extensionRegistryUrl"
                >
                  <div
                    class="SubTitle"
                  >
                    Extension Install Registry
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-extension-install-registry-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__placeholder css-14el2xx-placeholder"
                          id="react-select-extension-install-registry-input-placeholder"
                        >
                          Select...
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-describedby="react-select-extension-install-registry-input-placeholder"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="extension-install-registry-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p
                    class="mt-4 mb-5 leading-relaxed"
                  >
                    This setting is to change the registry URL for installing extensions by name. 
                    If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your 
                    <b>
                      .npmrc
                    </b>
                     file or in the input below.
                  </p>
                  <div
                    class="Input theme round black disabled invalid"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        disabled=""
                        placeholder="Custom Extension Registry URL..."
                        spellcheck="false"
                        value="some-custom-url"
                      />
                    </label>
                    <div
                      class="input-info flex gaps"
                    />
                  </div>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="start-up"
              >
                <section
                  id="other"
                >
                  <div
                    class="SubTitle"
                  >
                    Start-up
                     
                  </div>
                  <label
                    class="Switch"
                    data-testid="switch"
                  >
                    Automatically start Lens on login
                    <input
                      role="switch"
                      type="checkbox"
                    />
                  </label>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="update-channel"
              >
                <section
                  id="update-channel"
                >
                  <div
                    class="SubTitle"
                  >
                    Update Channel
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-update-channel-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__single-value css-qc6sy-singleValue"
                        >
                          Stable
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="update-channel-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="timezone"
              >
                <section
                  id="locale"
                >
                  <div
                    class="SubTitle"
                  >
                    Locale Timezone
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-timezone-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__placeholder css-14el2xx-placeholder"
                          id="react-select-timezone-input-placeholder"
                        >
                          Select...
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-describedby="react-select-timezone-input-placeholder"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="timezone-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </section>
          </div>
          <div
            class="toolsRegion"
          >
            <div
              class="fixed top-[60px]"
            >
              <div
                data-testid="close-preferences"
              >
                <div
                  aria-label="Close"
                  class="closeButton"
                  role="button"
                >
                  <i
                    class="Icon icon material focusable"
                  >
                    <span
                      class="icon"
                      data-icon-name="close"
                    >
                      close
                    </span>
                  </i>
                </div>
                <div
                  aria-hidden="true"
                  class="esc"
                >
                  ESC
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div
      class="HotbarMenu flex column"
    >
      <div
        class="HotbarItems flex column gaps"
      />
      <div
        class="HotbarSelector"
      >
        <i
          class="Icon Icon previous material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_left"
          >
            arrow_left
          </span>
        </i>
        <div
          class="HotbarIndex"
        >
          <div
            class="badge Badge small clickable"
            id="hotbarIndex"
          >
            0
          </div>
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_right"
          >
            arrow_right
          </span>
        </i>
      </div>
    </div>
    <div
      class="StatusBar"
      data-testid="status-bar"
    >
      <div
        class="leftSide"
        data-testid="status-bar-left"
      />
      <div
        class="rightSide"
        data-testid="status-bar-right"
      />
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - navigation to application preferences given in some child page of preferences, when rendered renders 1`] = `
<div>
  <div
    class="ClusterManager"
  >
    <div
      class="topBar"
    >
      <div
        class="items"
      >
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive focusable"
            data-testid="home-button"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="home"
            >
              home
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-back"
          >
            <span
              class="icon"
              data-icon-name="arrow_back"
            >
              arrow_back
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-forward"
          >
            <span
              class="icon"
              data-icon-name="arrow_forward"
            >
              arrow_forward
            </span>
          </i>
        </div>
        <div
          class="separator"
        />
      </div>
    </div>
    <main>
      <div
        id="lens-views"
      />
      <div
        class="SettingLayout showNavigation Preferences"
      >
        <nav
          class="sidebarRegion"
        >
          <div
            class="sidebar"
          >
            <div
              class="Tabs flex column"
            >
              <div
                data-preference-tab-group-test="general-tab-group"
              >
                <div
                  class="header flex items-center"
                >
                  Preferences
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="app"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    App
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center active"
                  data-preference-tab-link-test="proxy"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Proxy
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="kubernetes"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Kubernetes
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="editor"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Editor
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="terminal"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Terminal
                  </div>
                </div>
              </div>
            </div>
          </div>
        </nav>
        <div
          class="contentRegion"
          id="ScrollSpyRoot"
        >
          <div
            class="content"
          >
            <section
              data-preference-page-test="proxy-page"
              id="proxy-page"
            >
              <h2
                data-preference-page-title-test="true"
              >
                Proxy
              </h2>
              <div
                data-preference-item-test="http-proxy-url"
              >
                <section>
                  <div
                    class="SubTitle"
                  >
                    HTTP Proxy
                     
                  </div>
                  <div
                    class="Input theme round black"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
                        spellcheck="false"
                        value=""
                      />
                    </label>
                    <div
                      class="input-info flex gaps"
                    />
                  </div>
                  <small
                    class="hint"
                  >
                    Proxy is used only for non-cluster communication.
                  </small>
                </section>
              </div>
              <div
                class="HorizontalLine size-sm"
              />
              <div
                data-preference-item-test="allow-untrusted-certificates"
              >
                <section
                  class="small"
                >
                  <div
                    class="SubTitle"
                  >
                    Certificate Trust
                     
                  </div>
                  <label
                    class="Switch"
                    data-testid="switch"
                  >
                    Allow untrusted Certificate Authorities
                    <input
                      role="switch"
                      type="checkbox"
                    />
                  </label>
                  <small
                    class="hint"
                  >
                    This will make Lens to trust ANY certificate authority without any validations. Needed with some corporate proxies that do certificate re-writing. Does not affect cluster communications!
                  </small>
                </section>
              </div>
            </section>
          </div>
          <div
            class="toolsRegion"
          >
            <div
              class="fixed top-[60px]"
            >
              <div
                data-testid="close-preferences"
              >
                <div
                  aria-label="Close"
                  class="closeButton"
                  role="button"
                >
                  <i
                    class="Icon icon material focusable"
                  >
                    <span
                      class="icon"
                      data-icon-name="close"
                    >
                      close
                    </span>
                  </i>
                </div>
                <div
                  aria-hidden="true"
                  class="esc"
                >
                  ESC
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div
      class="HotbarMenu flex column"
    >
      <div
        class="HotbarItems flex column gaps"
      />
      <div
        class="HotbarSelector"
      >
        <i
          class="Icon Icon previous material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_left"
          >
            arrow_left
          </span>
        </i>
        <div
          class="HotbarIndex"
        >
          <div
            class="badge Badge small clickable"
            id="hotbarIndex"
          >
            0
          </div>
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_right"
          >
            arrow_right
          </span>
        </i>
      </div>
    </div>
    <div
      class="StatusBar"
      data-testid="status-bar"
    >
      <div
        class="leftSide"
        data-testid="status-bar-left"
      />
      <div
        class="rightSide"
        data-testid="status-bar-right"
      />
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - navigation to application preferences given in some child page of preferences, when rendered when navigating to application preferences using navigation renders 1`] = `
<div>
  <div
    class="ClusterManager"
  >
    <div
      class="topBar"
    >
      <div
        class="items"
      >
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive focusable"
            data-testid="home-button"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="home"
            >
              home
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-back"
          >
            <span
              class="icon"
              data-icon-name="arrow_back"
            >
              arrow_back
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-forward"
          >
            <span
              class="icon"
              data-icon-name="arrow_forward"
            >
              arrow_forward
            </span>
          </i>
        </div>
        <div
          class="separator"
        />
      </div>
    </div>
    <main>
      <div
        id="lens-views"
      />
      <div
        class="SettingLayout showNavigation Preferences"
      >
        <nav
          class="sidebarRegion"
        >
          <div
            class="sidebar"
          >
            <div
              class="Tabs flex column"
            >
              <div
                data-preference-tab-group-test="general-tab-group"
              >
                <div
                  class="header flex items-center"
                >
                  Preferences
                </div>
                <div
                  class="Tab flex gaps align-center active"
                  data-preference-tab-link-test="app"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    App
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="proxy"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Proxy
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="kubernetes"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Kubernetes
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="editor"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Editor
                  </div>
                </div>
                <div
                  class="Tab flex gaps align-center"
                  data-preference-tab-link-test="terminal"
                  role="tab"
                  tabindex="0"
                >
                  <div
                    class="label"
                  >
                    Terminal
                  </div>
                </div>
              </div>
            </div>
          </div>
        </nav>
        <div
          class="contentRegion"
          id="ScrollSpyRoot"
        >
          <div
            class="content"
          >
            <section
              data-preference-page-test="application-page"
              id="application-page"
            >
              <h2
                data-preference-page-title-test="true"
              >
                Application
              </h2>
              <div
                data-preference-item-test="theme"
              >
                <section
                  id="appearance"
                >
                  <div
                    class="SubTitle"
                  >
                    Theme
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-theme-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__placeholder css-14el2xx-placeholder"
                          id="react-select-theme-input-placeholder"
                        >
                          Select...
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-describedby="react-select-theme-input-placeholder"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="theme-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="extension-install-registry"
              >
                <section
                  id="extensionRegistryUrl"
                >
                  <div
                    class="SubTitle"
                  >
                    Extension Install Registry
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-extension-install-registry-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__placeholder css-14el2xx-placeholder"
                          id="react-select-extension-install-registry-input-placeholder"
                        >
                          Select...
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-describedby="react-select-extension-install-registry-input-placeholder"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="extension-install-registry-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p
                    class="mt-4 mb-5 leading-relaxed"
                  >
                    This setting is to change the registry URL for installing extensions by name. 
                    If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your 
                    <b>
                      .npmrc
                    </b>
                     file or in the input below.
                  </p>
                  <div
                    class="Input theme round black disabled invalid"
                  >
                    <label
                      class="input-area flex gaps align-center"
                      id=""
                    >
                      <input
                        class="input box grow"
                        disabled=""
                        placeholder="Custom Extension Registry URL..."
                        spellcheck="false"
                        value="some-custom-url"
                      />
                    </label>
                    <div
                      class="input-info flex gaps"
                    />
                  </div>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="start-up"
              >
                <section
                  id="other"
                >
                  <div
                    class="SubTitle"
                  >
                    Start-up
                     
                  </div>
                  <label
                    class="Switch"
                    data-testid="switch"
                  >
                    Automatically start Lens on login
                    <input
                      role="switch"
                      type="checkbox"
                    />
                  </label>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="update-channel"
              >
                <section
                  id="update-channel"
                >
                  <div
                    class="SubTitle"
                  >
                    Update Channel
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-update-channel-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__single-value css-qc6sy-singleValue"
                        >
                          Stable
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="update-channel-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
              <div
                class="HorizontalLine size-xl"
              />
              <div
                data-preference-item-test="timezone"
              >
                <section
                  id="locale"
                >
                  <div
                    class="SubTitle"
                  >
                    Locale Timezone
                     
                  </div>
                  <div
                    class="Select theme-lens css-b62m3t-container"
                  >
                    <span
                      class="css-1f43avz-a11yText-A11yText"
                      id="react-select-timezone-input-live-region"
                    />
                    <span
                      aria-atomic="false"
                      aria-live="polite"
                      aria-relevant="additions text"
                      class="css-1f43avz-a11yText-A11yText"
                    />
                    <div
                      class="Select__control css-1s2u09g-control"
                    >
                      <div
                        class="Select__value-container css-319lph-ValueContainer"
                      >
                        <div
                          class="Select__placeholder css-14el2xx-placeholder"
                          id="react-select-timezone-input-placeholder"
                        >
                          Select...
                        </div>
                        <div
                          class="Select__input-container css-6j8wv5-Input"
                          data-value=""
                        >
                          <input
                            aria-autocomplete="list"
                            aria-describedby="react-select-timezone-input-placeholder"
                            aria-expanded="false"
                            aria-haspopup="true"
                            autocapitalize="none"
                            autocomplete="off"
                            autocorrect="off"
                            class="Select__input"
                            id="timezone-input"
                            role="combobox"
                            spellcheck="false"
                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                            tabindex="0"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                      <div
                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                      >
                        <span
                          class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                        />
                        <div
                          aria-hidden="true"
                          class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                        >
                          <svg
                            aria-hidden="true"
                            class="css-tj5bde-Svg"
                            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>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </section>
          </div>
          <div
            class="toolsRegion"
          >
            <div
              class="fixed top-[60px]"
            >
              <div
                data-testid="close-preferences"
              >
                <div
                  aria-label="Close"
                  class="closeButton"
                  role="button"
                >
                  <i
                    class="Icon icon material focusable"
                  >
                    <span
                      class="icon"
                      data-icon-name="close"
                    >
                      close
                    </span>
                  </i>
                </div>
                <div
                  aria-hidden="true"
                  class="esc"
                >
                  ESC
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div
      class="HotbarMenu flex column"
    >
      <div
        class="HotbarItems flex column gaps"
      />
      <div
        class="HotbarSelector"
      >
        <i
          class="Icon Icon previous material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_left"
          >
            arrow_left
          </span>
        </i>
        <div
          class="HotbarIndex"
        >
          <div
            class="badge Badge small clickable"
            id="hotbarIndex"
          >
            0
          </div>
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_right"
          >
            arrow_right
          </span>
        </i>
      </div>
    </div>
    <div
      class="StatusBar"
      data-testid="status-bar"
    >
      <div
        class="leftSide"
        data-testid="status-bar-left"
      />
      <div
        class="rightSide"
        data-testid="status-bar-right"
      />
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - navigation to application preferences given in some child page of preferences, when rendered when navigating to preferences without specifying the tab renders 1`] = `
<body>
  <div>
    <div
      class="ClusterManager"
    >
      <div
        class="topBar"
      >
        <div
          class="items"
        >
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive focusable"
              data-testid="home-button"
              tabindex="0"
            >
              <span
                class="icon"
                data-icon-name="home"
              >
                home
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-back"
            >
              <span
                class="icon"
                data-icon-name="arrow_back"
              >
                arrow_back
              </span>
            </i>
          </div>
          <div
            class="size-sm"
          />
          <div
            class="preventedDragging"
          >
            <i
              class="Icon material interactive disabled focusable"
              data-testid="history-forward"
            >
              <span
                class="icon"
                data-icon-name="arrow_forward"
              >
                arrow_forward
              </span>
            </i>
          </div>
          <div
            class="separator"
          />
        </div>
      </div>
      <main>
        <div
          id="lens-views"
        />
        <div
          class="SettingLayout showNavigation Preferences"
        >
          <nav
            class="sidebarRegion"
          >
            <div
              class="sidebar"
            >
              <div
                class="Tabs flex column"
              >
                <div
                  data-preference-tab-group-test="general-tab-group"
                >
                  <div
                    class="header flex items-center"
                  >
                    Preferences
                  </div>
                  <div
                    class="Tab flex gaps align-center active"
                    data-preference-tab-link-test="app"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      App
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="proxy"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Proxy
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="kubernetes"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Kubernetes
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="editor"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Editor
                    </div>
                  </div>
                  <div
                    class="Tab flex gaps align-center"
                    data-preference-tab-link-test="terminal"
                    role="tab"
                    tabindex="0"
                  >
                    <div
                      class="label"
                    >
                      Terminal
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <div
            class="contentRegion"
            id="ScrollSpyRoot"
          >
            <div
              class="content"
            >
              <section
                data-preference-page-test="application-page"
                id="application-page"
              >
                <h2
                  data-preference-page-title-test="true"
                >
                  Application
                </h2>
                <div
                  data-preference-item-test="theme"
                >
                  <section
                    id="appearance"
                  >
                    <div
                      class="SubTitle"
                    >
                      Theme
                       
                    </div>
                    <div
                      class="Select theme-lens css-b62m3t-container"
                    >
                      <span
                        class="css-1f43avz-a11yText-A11yText"
                        id="react-select-theme-input-live-region"
                      />
                      <span
                        aria-atomic="false"
                        aria-live="polite"
                        aria-relevant="additions text"
                        class="css-1f43avz-a11yText-A11yText"
                      />
                      <div
                        class="Select__control css-1s2u09g-control"
                      >
                        <div
                          class="Select__value-container css-319lph-ValueContainer"
                        >
                          <div
                            class="Select__placeholder css-14el2xx-placeholder"
                            id="react-select-theme-input-placeholder"
                          >
                            Select...
                          </div>
                          <div
                            class="Select__input-container css-6j8wv5-Input"
                            data-value=""
                          >
                            <input
                              aria-autocomplete="list"
                              aria-describedby="react-select-theme-input-placeholder"
                              aria-expanded="false"
                              aria-haspopup="true"
                              autocapitalize="none"
                              autocomplete="off"
                              autocorrect="off"
                              class="Select__input"
                              id="theme-input"
                              role="combobox"
                              spellcheck="false"
                              style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                              tabindex="0"
                              type="text"
                              value=""
                            />
                          </div>
                        </div>
                        <div
                          class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                        >
                          <span
                            class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                          />
                          <div
                            aria-hidden="true"
                            class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                          >
                            <svg
                              aria-hidden="true"
                              class="css-tj5bde-Svg"
                              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>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="extension-install-registry"
                >
                  <section
                    id="extensionRegistryUrl"
                  >
                    <div
                      class="SubTitle"
                    >
                      Extension Install Registry
                       
                    </div>
                    <div
                      class="Select theme-lens css-b62m3t-container"
                    >
                      <span
                        class="css-1f43avz-a11yText-A11yText"
                        id="react-select-extension-install-registry-input-live-region"
                      />
                      <span
                        aria-atomic="false"
                        aria-live="polite"
                        aria-relevant="additions text"
                        class="css-1f43avz-a11yText-A11yText"
                      />
                      <div
                        class="Select__control css-1s2u09g-control"
                      >
                        <div
                          class="Select__value-container css-319lph-ValueContainer"
                        >
                          <div
                            class="Select__placeholder css-14el2xx-placeholder"
                            id="react-select-extension-install-registry-input-placeholder"
                          >
                            Select...
                          </div>
                          <div
                            class="Select__input-container css-6j8wv5-Input"
                            data-value=""
                          >
                            <input
                              aria-autocomplete="list"
                              aria-describedby="react-select-extension-install-registry-input-placeholder"
                              aria-expanded="false"
                              aria-haspopup="true"
                              autocapitalize="none"
                              autocomplete="off"
                              autocorrect="off"
                              class="Select__input"
                              id="extension-install-registry-input"
                              role="combobox"
                              spellcheck="false"
                              style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                              tabindex="0"
                              type="text"
                              value=""
                            />
                          </div>
                        </div>
                        <div
                          class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                        >
                          <span
                            class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                          />
                          <div
                            aria-hidden="true"
                            class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                          >
                            <svg
                              aria-hidden="true"
                              class="css-tj5bde-Svg"
                              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>
                          </div>
                        </div>
                      </div>
                    </div>
                    <p
                      class="mt-4 mb-5 leading-relaxed"
                    >
                      This setting is to change the registry URL for installing extensions by name. 
                      If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your 
                      <b>
                        .npmrc
                      </b>
                       file or in the input below.
                    </p>
                    <div
                      class="Input theme round black disabled invalid"
                    >
                      <label
                        class="input-area flex gaps align-center"
                        id=""
                      >
                        <input
                          class="input box grow"
                          disabled=""
                          placeholder="Custom Extension Registry URL..."
                          spellcheck="false"
                          value="some-custom-url"
                        />
                      </label>
                      <div
                        class="input-info flex gaps"
                      />
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="start-up"
                >
                  <section
                    id="other"
                  >
                    <div
                      class="SubTitle"
                    >
                      Start-up
                       
                    </div>
                    <label
                      class="Switch"
                      data-testid="switch"
                    >
                      Automatically start Lens on login
                      <input
                        role="switch"
                        type="checkbox"
                      />
                    </label>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="update-channel"
                >
                  <section
                    id="update-channel"
                  >
                    <div
                      class="SubTitle"
                    >
                      Update Channel
                       
                    </div>
                    <div
                      class="Select theme-lens css-b62m3t-container"
                    >
                      <span
                        class="css-1f43avz-a11yText-A11yText"
                        id="react-select-update-channel-input-live-region"
                      />
                      <span
                        aria-atomic="false"
                        aria-live="polite"
                        aria-relevant="additions text"
                        class="css-1f43avz-a11yText-A11yText"
                      />
                      <div
                        class="Select__control css-1s2u09g-control"
                      >
                        <div
                          class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
                        >
                          <div
                            class="Select__single-value css-qc6sy-singleValue"
                          >
                            Stable
                          </div>
                          <div
                            class="Select__input-container css-6j8wv5-Input"
                            data-value=""
                          >
                            <input
                              aria-autocomplete="list"
                              aria-expanded="false"
                              aria-haspopup="true"
                              autocapitalize="none"
                              autocomplete="off"
                              autocorrect="off"
                              class="Select__input"
                              id="update-channel-input"
                              role="combobox"
                              spellcheck="false"
                              style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                              tabindex="0"
                              type="text"
                              value=""
                            />
                          </div>
                        </div>
                        <div
                          class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                        >
                          <span
                            class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                          />
                          <div
                            aria-hidden="true"
                            class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                          >
                            <svg
                              aria-hidden="true"
                              class="css-tj5bde-Svg"
                              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>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="HorizontalLine size-xl"
                />
                <div
                  data-preference-item-test="timezone"
                >
                  <section
                    id="locale"
                  >
                    <div
                      class="SubTitle"
                    >
                      Locale Timezone
                       
                    </div>
                    <div
                      class="Select theme-lens css-b62m3t-container"
                    >
                      <span
                        class="css-1f43avz-a11yText-A11yText"
                        id="react-select-timezone-input-live-region"
                      />
                      <span
                        aria-atomic="false"
                        aria-live="polite"
                        aria-relevant="additions text"
                        class="css-1f43avz-a11yText-A11yText"
                      />
                      <div
                        class="Select__control css-1s2u09g-control"
                      >
                        <div
                          class="Select__value-container css-319lph-ValueContainer"
                        >
                          <div
                            class="Select__placeholder css-14el2xx-placeholder"
                            id="react-select-timezone-input-placeholder"
                          >
                            Select...
                          </div>
                          <div
                            class="Select__input-container css-6j8wv5-Input"
                            data-value=""
                          >
                            <input
                              aria-autocomplete="list"
                              aria-describedby="react-select-timezone-input-placeholder"
                              aria-expanded="false"
                              aria-haspopup="true"
                              autocapitalize="none"
                              autocomplete="off"
                              autocorrect="off"
                              class="Select__input"
                              id="timezone-input"
                              role="combobox"
                              spellcheck="false"
                              style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                              tabindex="0"
                              type="text"
                              value=""
                            />
                          </div>
                        </div>
                        <div
                          class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                        >
                          <span
                            class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                          />
                          <div
                            aria-hidden="true"
                            class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
                          >
                            <svg
                              aria-hidden="true"
                              class="css-tj5bde-Svg"
                              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>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </section>
            </div>
            <div
              class="toolsRegion"
            >
              <div
                class="fixed top-[60px]"
              >
                <div
                  data-testid="close-preferences"
                >
                  <div
                    aria-label="Close"
                    class="closeButton"
                    role="button"
                  >
                    <i
                      class="Icon icon material focusable"
                    >
                      <span
                        class="icon"
                        data-icon-name="close"
                      >
                        close
                      </span>
                    </i>
                  </div>
                  <div
                    aria-hidden="true"
                    class="esc"
                  >
                    ESC
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div
        class="HotbarMenu flex column"
      >
        <div
          class="HotbarItems flex column gaps"
        />
        <div
          class="HotbarSelector"
        >
          <i
            class="Icon Icon previous material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_left"
            >
              arrow_left
            </span>
          </i>
          <div
            class="HotbarIndex"
          >
            <div
              class="badge Badge small clickable"
              id="hotbarIndex"
            >
              0
            </div>
          </div>
          <i
            class="Icon material interactive focusable"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="arrow_right"
            >
              arrow_right
            </span>
          </i>
        </div>
      </div>
      <div
        class="StatusBar"
        data-testid="status-bar"
      >
        <div
          class="leftSide"
          data-testid="status-bar-left"
        />
        <div
          class="rightSide"
          data-testid="status-bar-right"
        />
      </div>
    </div>
    <div
      class="Notifications flex column align-flex-end"
    />
  </div>
</body>
`;