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

exports[`checks for invalid username 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <p
      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
    >
      Your username is an identifier that will appear on all of your comments.
    </p>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="username"
      >
        Username
      </label>
      <p
        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        You may use “_” and “.” Spaces not permitted.
      </p>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorError"
          disabled={false}
          id="username"
          name="username"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Username"
          type="text"
          value="x"
        />
      </div>
      <div
        className="Message-root Message-colorError Message-fullWidth"
      >
        <i
          aria-hidden="true"
          className="Icon-root Icon-sm MessageIcon-root"
        >
          warning
        </i>
        <span>
          Username must contain at least 3 characters.
        </span>
      </div>
    </div>
    <button
      className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
      data-color="primary"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Create Username
    </button>
  </div>
</form>
`;

exports[`renders createUsername view 1`] = `
<div>
  <div
    data-testid="completeAccountBox"
  >
    <div
      className="Box-root Flex-root Flex-flex Flex-justifyCenter"
    >
      <div
        className="CompleteAccountBox-container"
      >
        <div
          className="CompleteAccountBox-header"
        >
          <h1
            className="Box-root Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
          >
            Finish Setting Up Your Account
          </h1>
          <h1
            className="Box-root Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
          >
            <span>
              Create Username
            </span>
          </h1>
        </div>
        <div
          className="CompleteAccountBox-main"
        >
          <form
            autoComplete="off"
            onSubmit={[Function]}
          >
            <div
              className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
            >
              <p
                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
              >
                Your username is an identifier that will appear on all of your comments.
              </p>
              <div
                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
              >
                <label
                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                  htmlFor="username"
                >
                  Username
                </label>
                <p
                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
                >
                  You may use “_” and “.” Spaces not permitted.
                </p>
                <div
                  className="TextField-root TextField-fullWidth"
                >
                  <input
                    className="TextField-input TextField-colorRegular"
                    disabled={false}
                    id="username"
                    name="username"
                    onBlur={[Function]}
                    onChange={[Function]}
                    onFocus={[Function]}
                    placeholder="Username"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <button
                className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
                data-color="primary"
                data-variant="filled"
                disabled={false}
                onBlur={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="submit"
              >
                Create Username
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`shows error when submitting empty form 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <p
      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
    >
      Your username is an identifier that will appear on all of your comments.
    </p>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="username"
      >
        Username
      </label>
      <p
        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        You may use “_” and “.” Spaces not permitted.
      </p>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorError"
          disabled={false}
          id="username"
          name="username"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Username"
          type="text"
          value=""
        />
      </div>
      <div
        className="Message-root Message-colorError Message-fullWidth"
      >
        <i
          aria-hidden="true"
          className="Icon-root Icon-sm MessageIcon-root"
        >
          warning
        </i>
        <span>
          This field is required.
        </span>
      </div>
    </div>
    <button
      className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
      data-color="primary"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Create Username
    </button>
  </div>
</form>
`;

exports[`shows server error 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <p
      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
    >
      Your username is an identifier that will appear on all of your comments.
    </p>
    <div
      className="CallOut-root CallOut-colorError CallOut-fullWidth"
    >
      <div
        className="CallOut-inner"
      >
        server error

GraphQL request (4:3)
3: ) {
4:   setUsername(input: $input) {
     ^
5:     user {

      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="username"
      >
        Username
      </label>
      <p
        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        You may use “_” and “.” Spaces not permitted.
      </p>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorRegular"
          disabled={false}
          id="username"
          name="username"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Username"
          type="text"
          value="hans"
        />
      </div>
    </div>
    <button
      className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
      data-color="primary"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Create Username
    </button>
  </div>
</form>
`;

exports[`successfully sets username 1`] = `
<form
  autoComplete="off"
  onSubmit={[Function]}
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
  >
    <p
      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
    >
      Your username is an identifier that will appear on all of your comments.
    </p>
    <div
      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
    >
      <label
        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
        htmlFor="username"
      >
        Username
      </label>
      <p
        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
      >
        You may use “_” and “.” Spaces not permitted.
      </p>
      <div
        className="TextField-root TextField-fullWidth"
      >
        <input
          className="TextField-input TextField-colorRegular"
          disabled={false}
          id="username"
          name="username"
          onBlur={[Function]}
          onChange={[Function]}
          onFocus={[Function]}
          placeholder="Username"
          type="text"
          value="hans"
        />
      </div>
    </div>
    <button
      className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
      data-color="primary"
      data-variant="filled"
      disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      onTouchEnd={[Function]}
      type="submit"
    >
      Create Username
    </button>
  </div>
</form>
`;
