verdaccio-ui/src/components/Header/__snapshots__/Header.test.tsx.snap

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

exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `
.emotion-24 {
  background-color: #4b5e40;
  min-height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media (min-width:768px) {
  .emotion-24 .emotion-13 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .emotion-24 .emotion-17 {
    display: none;
  }

  .emotion-24 .e1jf5lit4 {
    display: none;
  }
}

@media (min-width:1024px) {
  .emotion-24 .emotion-23 {
    padding: 0 20px;
  }

@media (min-width:1275px) {
    .emotion-24 .emotion-23 {
      max-width: 1240px;
      width: 100%;
      margin: 0 auto;
    }
}
}

.emotion-22 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 15px;
}

.emotion-14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.emotion-2 {
  margin-right: 1em;
}

.emotion-0 {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  background-position: center;
  background-size: contain;
  background-image: url([object Object]);
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
}

.emotion-12 {
  display: none;
  max-width: 393px;
  width: 100%;
}

.emotion-10 {
  width: 100%;
  height: 32px;
  position: relative;
  z-index: 1;
}

.emotion-6 .MuiInputBase-root:before {
  content: '';
  border: none;
}

.emotion-6 .MuiInputBase-root:after {
  border-color: #fff;
}

.emotion-6 .MuiInputBase-root:hover:before {
  content: none;
}

.emotion-6 .MuiInputBase-input {
  color: #fff;
}

.emotion-4 {
  color: #fff;
}

.emotion-8 {
  max-height: 500px;
  overflow-y: auto;
}

.emotion-20 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.emotion-16 {
  display: block;
}

.emotion-18 {
  color: #fff;
}

<header
  class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
  data-testid="header"
>
  <div
    class="MuiToolbar-root MuiToolbar-regular emotion-22 emotion-23 MuiToolbar-gutters"
  >
    <div
      class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
    >
      <a
        class="emotion-2 emotion-3"
        href="/"
      >
        <div
          class="emotion-0 emotion-1"
        />
      </a>
      <div
        class="emotion-12 emotion-13"
      >
        <div
          class="emotion-10 emotion-11"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-owns="react-autowhatever-1"
            class="react-autosuggest__container"
            role="combobox"
          >
            <div
              aria-autocomplete="list"
              aria-controls="react-autowhatever-1"
              class="MuiFormControl-root MuiTextField-root react-autosuggest__input emotion-6 emotion-7 MuiFormControl-fullWidth"
            >
              <div
                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
              >
                <div
                  class="MuiInputAdornment-root emotion-4 emotion-5 MuiInputAdornment-positionStart"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                    />
                  </svg>
                </div>
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart"
                  placeholder="Search Packages"
                  type="text"
                  value=""
                />
              </div>
            </div>
            <div
              class="MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container emotion-8 emotion-9"
              id="react-autowhatever-1"
              role="listbox"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiToolbar-root MuiToolbar-regular emotion-20 emotion-21 MuiToolbar-gutters"
      data-testid="header-right"
    >
      <button
        class="MuiButtonBase-root MuiIconButton-root emotion-16 emotion-17 MuiIconButton-colorInherit"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiIconButton-label"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root"
            focusable="false"
            role="presentation"
            viewBox="0 0 24 24"
          >
            <path
              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
            />
          </svg>
        </span>
        <span
          class="MuiTouchRipple-root"
        />
      </button>
      <a
        class="emotion-18 emotion-19"
        data-testid="header--tooltip-documentation"
        href="https://verdaccio.org/docs/en/installation"
        rel="noopener noreferrer"
        target="_blank"
      >
        <h6
          class="MuiTypography-root MuiTypography-subtitle1"
        >
          <button
            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiIconButton-label"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
                />
              </svg>
            </span>
            <span
              class="MuiTouchRipple-root"
            />
          </button>
        </h6>
      </a>
      <button
        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
        data-testid="header--tooltip-info"
        id="header--button-registryInfo"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiIconButton-label"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root"
            focusable="false"
            role="presentation"
            viewBox="0 0 24 24"
          >
            <path
              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
            />
          </svg>
        </span>
        <span
          class="MuiTouchRipple-root"
        />
      </button>
      <button
        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiIconButton-label"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root"
            focusable="false"
            role="presentation"
            viewBox="0 0 24 24"
          >
            <path
              d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
            />
          </svg>
        </span>
        <span
          class="MuiTouchRipple-root"
        />
      </button>
      <button
        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
        data-testid="header--menu-accountcircle"
        id="header--button-account"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiIconButton-label"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root"
            focusable="false"
            role="presentation"
            viewBox="0 0 24 24"
          >
            <path
              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
            />
          </svg>
        </span>
        <span
          class="MuiTouchRipple-root"
        />
      </button>
    </div>
  </div>
</header>
`;

exports[`<Header /> component with logged in state should load the component in logged out state 1`] = `
.emotion-24 {
  background-color: #4b5e40;
  min-height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media (min-width:768px) {
  .emotion-24 .emotion-13 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .emotion-24 .emotion-17 {
    display: none;
  }

  .emotion-24 .e1jf5lit4 {
    display: none;
  }
}

@media (min-width:1024px) {
  .emotion-24 .emotion-23 {
    padding: 0 20px;
  }

@media (min-width:1275px) {
    .emotion-24 .emotion-23 {
      max-width: 1240px;
      width: 100%;
      margin: 0 auto;
    }
}
}

.emotion-22 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 15px;
}

.emotion-14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.emotion-2 {
  margin-right: 1em;
}

.emotion-0 {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  background-position: center;
  background-size: contain;
  background-image: url([object Object]);
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
}

.emotion-12 {
  display: none;
  max-width: 393px;
  width: 100%;
}

.emotion-10 {
  width: 100%;
  height: 32px;
  position: relative;
  z-index: 1;
}

.emotion-6 .MuiInputBase-root:before {
  content: '';
  border: none;
}

.emotion-6 .MuiInputBase-root:after {
  border-color: #fff;
}

.emotion-6 .MuiInputBase-root:hover:before {
  content: none;
}

.emotion-6 .MuiInputBase-input {
  color: #fff;
}

.emotion-4 {
  color: #fff;
}

.emotion-8 {
  max-height: 500px;
  overflow-y: auto;
}

.emotion-20 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.emotion-16 {
  display: block;
}

.emotion-18 {
  color: #fff;
}

<header
  class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
  data-testid="header"
>
  <div
    class="MuiToolbar-root MuiToolbar-regular emotion-22 emotion-23 MuiToolbar-gutters"
  >
    <div
      class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
    >
      <a
        class="emotion-2 emotion-3"
        href="/"
      >
        <div
          class="emotion-0 emotion-1"
        />
      </a>
      <div
        class="emotion-12 emotion-13"
      >
        <div
          class="emotion-10 emotion-11"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-owns="react-autowhatever-1"
            class="react-autosuggest__container"
            role="combobox"
          >
            <div
              aria-autocomplete="list"
              aria-controls="react-autowhatever-1"
              class="MuiFormControl-root MuiTextField-root react-autosuggest__input emotion-6 emotion-7 MuiFormControl-fullWidth"
            >
              <div
                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
              >
                <div
                  class="MuiInputAdornment-root emotion-4 emotion-5 MuiInputAdornment-positionStart"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                    />
                  </svg>
                </div>
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart"
                  placeholder="Search Packages"
                  type="text"
                  value=""
                />
              </div>
            </div>
            <div
              class="MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container emotion-8 emotion-9"
              id="react-autowhatever-1"
              role="listbox"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiToolbar-root MuiToolbar-regular emotion-20 emotion-21 MuiToolbar-gutters"
      data-testid="header-right"
    >
      <button
        class="MuiButtonBase-root MuiIconButton-root emotion-16 emotion-17 MuiIconButton-colorInherit"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiIconButton-label"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root"
            focusable="false"
            role="presentation"
            viewBox="0 0 24 24"
          >
            <path
              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
            />
          </svg>
        </span>
        <span
          class="MuiTouchRipple-root"
        />
      </button>
      <a
        class="emotion-18 emotion-19"
        data-testid="header--tooltip-documentation"
        href="https://verdaccio.org/docs/en/installation"
        rel="noopener noreferrer"
        target="_blank"
      >
        <h6
          class="MuiTypography-root MuiTypography-subtitle1"
        >
          <button
            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiIconButton-label"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
                />
              </svg>
            </span>
            <span
              class="MuiTouchRipple-root"
            />
          </button>
        </h6>
      </a>
      <button
        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
        data-testid="header--tooltip-info"
        id="header--button-registryInfo"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiIconButton-label"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root"
            focusable="false"
            role="presentation"
            viewBox="0 0 24 24"
          >
            <path
              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
            />
          </svg>
        </span>
        <span
          class="MuiTouchRipple-root"
        />
      </button>
      <button
        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiIconButton-label"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root"
            focusable="false"
            role="presentation"
            viewBox="0 0 24 24"
          >
            <path
              d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
            />
          </svg>
        </span>
        <span
          class="MuiTouchRipple-root"
        />
      </button>
      <button
        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
        data-testid="header--button-login"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label"
        >
          Login
        </span>
        <span
          class="MuiTouchRipple-root"
        />
      </button>
    </div>
  </div>
</header>
`;