// 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>
    <div
      data-testid="createUsername-container"
    >
      <div
        className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
      >
        <header>
          <h1
            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
          >
            Create Username
          </h1>
        </header>
      </div>
      <main
        className="Main-root"
        data-testid="createUsername-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>
      </main>
    </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>
`;
