createPassword.spec.tsx.snap

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

exports[`checks for invalid password 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="CreatePassword-description"
  >
    To protect against unauthorized changes to your account,
we require users to create a password.
  </div>
  <div
    className="coral coral-login-field CreatePassword-field"
  >
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
    >
      <label
        className="InputLabel-root"
        htmlFor="password"
      >
        Password
      </label>
      <div
        className="SetPasswordField-description"
      >
        Must be at least 8 characters
      </div>
      <div
        className="PasswordField-fullWidth PasswordField-root"
      >
        <div
          className="PasswordField-wrapper"
        >
          <input
            autoCapitalize="off"
            autoComplete="off"
            autoCorrect="off"
            className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
            data-testid="password-field"
            disabled={false}
            id="password"
            name="password"
            onBlur={[Function]}
            onChange={[Function]}
            onFocus={[Function]}
            placeholder="Password"
            spellCheck={false}
            type="password"
            value="x"
          />
          <div
            className="PasswordField-icon"
            onClick={[Function]}
            onKeyUp={[Function]}
            role="button"
            tabIndex={0}
            title="Hide password"
          >
            <i
              aria-hidden="true"
              className="Icon-root Icon-sm"
            >
              visibility
            </i>
          </div>
        </div>
      </div>
      <div
        className="ValidationMessage-root"
      >
        <div
          className="Box-root Flex-root Flex-flex Flex-alignCenter"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm ValidationMessage-icon"
          >
            error
          </i>
          <span>
            Password must contain at least 8 characters.
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    className="CreatePassword-actions"
  >
    <button
      className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Create password
    </button>
  </div>
</form>
`;

exports[`renders createPassword view 1`] = `
<div>
  <div>
    <div
      data-testid="createPassword-container"
    >
      <div
        className="coral coral-login-bar CreatePassword-bar"
        role="banner"
      >
        <div
          className="coral coral-login-title CreatePassword-title"
        >
          Create a password
        </div>
      </div>
      <main
        className="Main-root"
        data-testid="createPassword-main"
        id="create-password-main"
      >
        <form
          autoComplete="off"
          onSubmit={[Function]}
        >
          <div
            className="CreatePassword-description"
          >
            To protect against unauthorized changes to your account,
we require users to create a password.
          </div>
          <div
            className="coral coral-login-field CreatePassword-field"
          >
            <div
              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
            >
              <label
                className="InputLabel-root"
                htmlFor="password"
              >
                Password
              </label>
              <div
                className="SetPasswordField-description"
              >
                Must be at least 8 characters
              </div>
              <div
                className="PasswordField-fullWidth PasswordField-root"
              >
                <div
                  className="PasswordField-wrapper"
                >
                  <input
                    autoCapitalize="off"
                    autoComplete="off"
                    autoCorrect="off"
                    className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
                    data-testid="password-field"
                    disabled={false}
                    id="password"
                    name="password"
                    onBlur={[Function]}
                    onChange={[Function]}
                    onFocus={[Function]}
                    placeholder="Password"
                    spellCheck={false}
                    type="password"
                    value=""
                  />
                  <div
                    className="PasswordField-icon"
                    onClick={[Function]}
                    onKeyUp={[Function]}
                    role="button"
                    tabIndex={0}
                    title="Hide password"
                  >
                    <i
                      aria-hidden="true"
                      className="Icon-root Icon-sm"
                    >
                      visibility
                    </i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="CreatePassword-actions"
          >
            <button
              className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
              data-variant="filled"
              disabled={false}
              onBlur={[Function]}
              onFocus={[Function]}
              onMouseOut={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              type="submit"
            >
              Create password
            </button>
          </div>
        </form>
      </main>
    </div>
  </div>
</div>
`;

exports[`shows error when submitting empty form 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="CreatePassword-description"
  >
    To protect against unauthorized changes to your account,
we require users to create a password.
  </div>
  <div
    className="coral coral-login-field CreatePassword-field"
  >
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
    >
      <label
        className="InputLabel-root"
        htmlFor="password"
      >
        Password
      </label>
      <div
        className="SetPasswordField-description"
      >
        Must be at least 8 characters
      </div>
      <div
        className="PasswordField-fullWidth PasswordField-root"
      >
        <div
          className="PasswordField-wrapper"
        >
          <input
            autoCapitalize="off"
            autoComplete="off"
            autoCorrect="off"
            className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
            data-testid="password-field"
            disabled={false}
            id="password"
            name="password"
            onBlur={[Function]}
            onChange={[Function]}
            onFocus={[Function]}
            placeholder="Password"
            spellCheck={false}
            type="password"
            value=""
          />
          <div
            className="PasswordField-icon"
            onClick={[Function]}
            onKeyUp={[Function]}
            role="button"
            tabIndex={0}
            title="Hide password"
          >
            <i
              aria-hidden="true"
              className="Icon-root Icon-sm"
            >
              visibility
            </i>
          </div>
        </div>
      </div>
      <div
        className="ValidationMessage-root"
      >
        <div
          className="Box-root Flex-root Flex-flex Flex-alignCenter"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm ValidationMessage-icon"
          >
            error
          </i>
          <span>
            This field is required.
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    className="CreatePassword-actions"
  >
    <button
      className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Create password
    </button>
  </div>
</form>
`;

exports[`shows server error 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="CreatePassword-description"
  >
    To protect against unauthorized changes to your account,
we require users to create a password.
  </div>
  <div
    className="coral coral-login-errorContainer CreatePassword-error"
  >
    <div
      className="CallOut-root CallOut-error CallOut-leftBorder coral coral-login-error"
    >
      <div
        className="CallOut-container"
      >
        <div
          className="CallOut-icon CallOut-error CallOut-leftIcon"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-sm"
          >
            error
          </i>
        </div>
        <div
          className="CallOut-content"
        >
          <div
            className="CallOut-title CallOut-titleBold"
          >
            server error

GraphQL request:4:3
3 | ) {
4 |   setPassword(input: $input) {
  |   ^
5 |     user {
          </div>
          <div
            className="CallOut-body"
          />
        </div>
      </div>
    </div>
  </div>
  <div
    className="coral coral-login-field CreatePassword-field"
  >
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
    >
      <label
        className="InputLabel-root"
        htmlFor="password"
      >
        Password
      </label>
      <div
        className="SetPasswordField-description"
      >
        Must be at least 8 characters
      </div>
      <div
        className="PasswordField-fullWidth PasswordField-root"
      >
        <div
          className="PasswordField-wrapper"
        >
          <input
            autoCapitalize="off"
            autoComplete="off"
            autoCorrect="off"
            className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
            data-testid="password-field"
            disabled={false}
            id="password"
            name="password"
            onBlur={[Function]}
            onChange={[Function]}
            onFocus={[Function]}
            placeholder="Password"
            spellCheck={false}
            type="password"
            value="secretpassword"
          />
          <div
            className="PasswordField-icon"
            onClick={[Function]}
            onKeyUp={[Function]}
            role="button"
            tabIndex={0}
            title="Hide password"
          >
            <i
              aria-hidden="true"
              className="Icon-root Icon-sm"
            >
              visibility
            </i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    className="CreatePassword-actions"
  >
    <button
      className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Create password
    </button>
  </div>
</form>
`;

exports[`successfully sets password 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="CreatePassword-description"
  >
    To protect against unauthorized changes to your account,
we require users to create a password.
  </div>
  <div
    className="coral coral-login-field CreatePassword-field"
  >
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
    >
      <label
        className="InputLabel-root"
        htmlFor="password"
      >
        Password
      </label>
      <div
        className="SetPasswordField-description"
      >
        Must be at least 8 characters
      </div>
      <div
        className="PasswordField-fullWidth PasswordField-root"
      >
        <div
          className="PasswordField-wrapper"
        >
          <input
            autoCapitalize="off"
            autoComplete="off"
            autoCorrect="off"
            className="PasswordField-colorStreamBlue PasswordField-fullWidth PasswordField-input"
            data-testid="password-field"
            disabled={false}
            id="password"
            name="password"
            onBlur={[Function]}
            onChange={[Function]}
            onFocus={[Function]}
            placeholder="Password"
            spellCheck={false}
            type="password"
            value="secretpassword"
          />
          <div
            className="PasswordField-icon"
            onClick={[Function]}
            onKeyUp={[Function]}
            role="button"
            tabIndex={0}
            title="Hide password"
          >
            <i
              aria-hidden="true"
              className="Icon-root Icon-sm"
            >
              visibility
            </i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    className="CreatePassword-actions"
  >
    <button
      className="BaseButton-root Button-base Button-filled Button-fontSizeMedium Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimaryBold Button-paddingSizeMedium Button-colorPrimary Button-upperCase Button-fullWidth"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Create password
    </button>
  </div>
</form>
`;