element-web/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap

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

exports[`<LoginWithQR /> approves login and waits for new device 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class=""
    >
      <div
        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
        data-testid="back-button"
        role="button"
        tabindex="0"
        title="Back"
      >
        <div />
      </div>
      <h1 />
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="mx_LoginWithQR_spinner"
      >
        <div>
          <div
            class="mx_Spinner"
          >
            <div
              aria-label="Loading..."
              class="mx_Spinner_icon"
              data-testid="spinner"
              role="progressbar"
              style="width: 32px; height: 32px;"
            />
          </div>
          <p>
            Waiting for device to sign in
          </p>
        </div>
      </div>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <div
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
        role="button"
        tabindex="0"
      >
        Cancel
      </div>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQR /> displays confirmation digits after connected to rendezvous 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class=""
    >
      <h1>
        <div
          class="normal"
        />
        Devices connected
      </h1>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <p>
        Check that the code below matches with your other device:
      </p>
      <div
        class="mx_LoginWithQR_confirmationDigits"
      >
        mock-confirmation-digits
      </div>
      <div
        class="mx_LoginWithQR_confirmationAlert"
      >
        <div>
          <div />
        </div>
        <div>
          By approving access for this device, it will have full access to your account.
        </div>
      </div>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <div
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
        data-testid="decline-login-button"
        role="button"
        tabindex="0"
      >
        Cancel
      </div>
      <div
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
        data-testid="approve-login-button"
        role="button"
        tabindex="0"
      >
        Approve
      </div>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQR /> displays error when approving login fails 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_centreTitle"
    >
      <h1>
        <div
          class="error"
        />
        Connection failed
      </h1>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <div
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
        role="button"
        tabindex="0"
      >
        Try again
      </div>
      <div
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
        role="button"
        tabindex="0"
      >
        Cancel
      </div>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQR /> displays qr code after it is created 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class=""
    >
      <div
        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
        data-testid="back-button"
        role="button"
        tabindex="0"
        title="Back"
      >
        <div />
      </div>
      <h1>
        Sign in with QR code
      </h1>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <p>
        Scan the QR code below with your device that's signed out.
      </p>
      <ol>
        <li>
          Start at the sign in screen
        </li>
        <li>
          Select 'Scan QR code'
        </li>
        <li>
          Review and approve the sign in
        </li>
      </ol>
      <div
        class="mx_LoginWithQR_qrWrapper"
      >
        <div
          class="mx_QRCode mx_QRCode"
        >
          <div
            class="mx_Spinner"
          >
            <div
              aria-label="Loading..."
              class="mx_Spinner_icon"
              data-testid="spinner"
              role="progressbar"
              style="width: 32px; height: 32px;"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    />
  </div>
</div>
`;

exports[`<LoginWithQR /> displays unknown error if connection to rendezvous fails 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_centreTitle"
    >
      <h1>
        <div
          class="error"
        />
        Connection failed
      </h1>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <p
        data-testid="cancellation-message"
      >
        An unexpected error occurred.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <div
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
        role="button"
        tabindex="0"
      >
        Try again
      </div>
      <div
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
        role="button"
        tabindex="0"
      >
        Cancel
      </div>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQR /> no content in case of no support 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class="mx_LoginWithQR_centreTitle"
    >
      <h1>
        <div
          class="error"
        />
        Connection failed
      </h1>
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <p
        data-testid="cancellation-message"
      >
        The homeserver doesn't support signing in another device.
      </p>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    >
      <div
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
        role="button"
        tabindex="0"
      >
        Try again
      </div>
      <div
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
        role="button"
        tabindex="0"
      >
        Cancel
      </div>
    </div>
  </div>
</div>
`;

exports[`<LoginWithQR /> renders spinner while generating code 1`] = `
<div>
  <div
    class="mx_LoginWithQR"
    data-testid="login-with-qr"
  >
    <div
      class=""
    >
      <div
        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
        data-testid="back-button"
        role="button"
        tabindex="0"
        title="Back"
      >
        <div />
      </div>
      <h1 />
    </div>
    <div
      class="mx_LoginWithQR_main"
    >
      <div
        class="mx_LoginWithQR_spinner"
      >
        <div>
          <div
            class="mx_Spinner"
          >
            <div
              aria-label="Loading..."
              class="mx_Spinner_icon"
              data-testid="spinner"
              role="progressbar"
              style="width: 32px; height: 32px;"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      class="mx_LoginWithQR_buttons"
    />
  </div>
</div>
`;