nukeop/nuclear

View on GitHub
packages/app/app/containers/UserPanelContainer/__snapshots__/UserPanelContainer.test.tsx.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`User panel container should render the sign in form 1`] = `
<DocumentFragment>
  <section
    class="nuclear user_panel signed_out"
  >
    <button
      class="ui button nuclear button"
    >
      Sign up / Sign in
    </button>
  </section>
  <div
    class="fade fullscreen_layer animating in visible transition"
    style="animation-duration: 200ms;"
  />
  <div
    class="fade fullscreen_layer animating in visible transition"
    style="animation-duration: 200ms;"
  >
    <div
      class="fullscreen_form_container nuclear"
    >
      <div
        class="nuclear box fullscreen_form_box shadow"
      >
        <form
          class="ui form fullscreen_form"
        >
          <h1
            class="ui inverted header form_header"
          >
             Sign in
          </h1>
          <div
            class="field nuclear input"
          >
            <label>
              Username
            </label>
            <div
              class="ui input"
              datatestid="username"
            >
              <input
                name="username"
                placeholder="Username"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="field nuclear input"
          >
            <label>
              Password
            </label>
            <div
              class="ui input"
              datatestid="password"
            >
              <input
                name="password"
                placeholder="Password"
                type="password"
                value=""
              />
            </div>
          </div>
          <div
            class="buttons_row"
          >
            <span>
              Don't have an account?
              <button
                class="ui pink button nuclear button text"
                type="button"
              >
                Sign up
              </button>
            </span>
            <button
              class="ui pink button nuclear button"
              type="submit"
            >
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`User panel container should render the sign up form 1`] = `
<DocumentFragment>
  <section
    class="nuclear user_panel signed_out"
  >
    <button
      class="ui button nuclear button"
    >
      Sign up / Sign in
    </button>
  </section>
  <div
    class="fade fullscreen_layer visible transition"
    style=""
  />
  <div
    class="fade fullscreen_layer hidden transition"
    style=""
  >
    <div
      class="fullscreen_form_container nuclear"
    >
      <div
        class="nuclear box fullscreen_form_box shadow"
      >
        <form
          class="ui form fullscreen_form"
        >
          <h1
            class="ui inverted header form_header"
          >
             Sign in
          </h1>
          <div
            class="field nuclear input"
          >
            <label>
              Username
            </label>
            <div
              class="ui input"
              datatestid="username"
            >
              <input
                name="username"
                placeholder="Username"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="field nuclear input"
          >
            <label>
              Password
            </label>
            <div
              class="ui input"
              datatestid="password"
            >
              <input
                name="password"
                placeholder="Password"
                type="password"
                value=""
              />
            </div>
          </div>
          <div
            class="buttons_row"
          >
            <span>
              Don't have an account?
              <button
                class="ui pink button nuclear button text"
                type="button"
              >
                Sign up
              </button>
            </span>
            <button
              class="ui pink button nuclear button"
              type="submit"
            >
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div
    class="fade fullscreen_layer visible transition"
    style=""
  >
    <div
      class="fullscreen_form_container nuclear"
    >
      <div
        class="nuclear box fullscreen_form_box shadow"
      >
        <div
          class="nuclear form_side_content"
        >
          <img
            src="test-file-stub"
          />
          <div
            class="ui inverted header nuclear"
          >
            Sign up to Nuclear Web Services
          </div>
          <p>
            NWS enables you to backup your playlists online and share them.
          </p>
          <p>
            Providing your email is optional; it will allow you to recover your account if you forget your password.
          </p>
        </div>
        <form
          class="ui form fullscreen_form"
        >
          <h1
            class="ui inverted header form_header"
          >
            Sign up
          </h1>
          <div
            class="field nuclear input"
          >
            <label>
              Username
            </label>
            <div
              class="ui input"
              datatestid="username"
            >
              <input
                name="username"
                placeholder="Username"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="field nuclear input"
          >
            <label>
              Email
            </label>
            <div
              class="ui input"
              datatestid="email"
            >
              <input
                name="email"
                placeholder="Email"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="field nuclear input"
          >
            <label>
              Password
            </label>
            <div
              class="ui input"
              datatestid="password"
            >
              <input
                name="password"
                placeholder="Password"
                type="password"
                value=""
              />
            </div>
          </div>
          <div
            class="buttons_row"
          >
            <span />
            <button
              class="ui pink button nuclear button"
              type="submit"
            >
              Sign up
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`User panel container should render the user panel 1`] = `
<DocumentFragment>
  <section
    class="nuclear user_panel signed_out"
  >
    <button
      class="ui button nuclear button"
    >
      Sign up / Sign in
    </button>
  </section>
</DocumentFragment>
`;

exports[`User panel container should validate the sign up form 1`] = `
<DocumentFragment>
  <section
    class="nuclear user_panel signed_out"
  >
    <button
      class="ui button nuclear button"
    >
      Sign up / Sign in
    </button>
  </section>
  <div
    class="fade fullscreen_layer animating in visible transition"
    style="animation-duration: 200ms;"
  />
  <div
    class="fade fullscreen_layer animating out visible transition"
    style="animation-duration: 200ms;"
  >
    <div
      class="fullscreen_form_container nuclear"
    >
      <div
        class="nuclear box fullscreen_form_box shadow"
      >
        <form
          class="ui form fullscreen_form"
        >
          <h1
            class="ui inverted header form_header"
          >
             Sign in
          </h1>
          <div
            class="field nuclear input"
          >
            <label>
              Username
            </label>
            <div
              class="ui input"
              datatestid="username"
            >
              <input
                name="username"
                placeholder="Username"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="field nuclear input"
          >
            <label>
              Password
            </label>
            <div
              class="ui input"
              datatestid="password"
            >
              <input
                name="password"
                placeholder="Password"
                type="password"
                value=""
              />
            </div>
          </div>
          <div
            class="buttons_row"
          >
            <span>
              Don't have an account?
              <button
                class="ui pink button nuclear button text"
                type="button"
              >
                Sign up
              </button>
            </span>
            <button
              class="ui pink button nuclear button"
              type="submit"
            >
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div
    class="fade fullscreen_layer animating in visible transition"
    style="animation-duration: 200ms;"
  >
    <div
      class="fullscreen_form_container nuclear"
    >
      <div
        class="nuclear box fullscreen_form_box shadow"
      >
        <div
          class="nuclear form_side_content"
        >
          <img
            src="test-file-stub"
          />
          <div
            class="ui inverted header nuclear"
          >
            Sign up to Nuclear Web Services
          </div>
          <p>
            NWS enables you to backup your playlists online and share them.
          </p>
          <p>
            Providing your email is optional; it will allow you to recover your account if you forget your password.
          </p>
        </div>
        <form
          class="ui form fullscreen_form"
        >
          <h1
            class="ui inverted header form_header"
          >
            Sign up
          </h1>
          <div
            class="error field nuclear input"
          >
            <label>
              Username
            </label>
            <div
              aria-atomic="true"
              class="ui pointing below prompt label"
              role="alert"
            >
              Username must be 4 characters or more
            </div>
            <div
              class="ui input"
              datatestid="username"
            >
              <input
                aria-invalid="true"
                name="username"
                placeholder="Username"
                type="text"
                value="abc"
              />
            </div>
          </div>
          <div
            class="error field nuclear input"
          >
            <label>
              Email
            </label>
            <div
              aria-atomic="true"
              class="ui pointing below prompt label"
              role="alert"
            >
              Email must be a valid email
            </div>
            <div
              class="ui input"
              datatestid="email"
            >
              <input
                aria-invalid="true"
                name="email"
                placeholder="Email"
                type="text"
                value="not.an.email"
              />
            </div>
          </div>
          <div
            class="error field nuclear input"
          >
            <label>
              Password
            </label>
            <div
              aria-atomic="true"
              class="ui pointing below prompt label"
              role="alert"
            >
              Password must be 6 characters or more
            </div>
            <div
              class="ui input"
              datatestid="password"
            >
              <input
                aria-invalid="true"
                name="password"
                placeholder="Password"
                type="password"
                value="short"
              />
            </div>
          </div>
          <div
            class="buttons_row"
          >
            <span />
            <button
              class="ui pink button nuclear button"
              type="submit"
            >
              Sign up
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</DocumentFragment>
`;