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

exports[`<CurrentDeviceSection /> displays device details on toggle click 1`] = `
HTMLCollection [
  <div
    class="mx_DeviceDetails mx_CurrentDeviceSection_deviceDetails"
    data-testid="device-detail-alices_device"
  >
    <section
      class="mx_DeviceDetails_section"
    >
      <div
        class="mx_DeviceDetailHeading"
        data-testid="device-detail-heading"
      >
        <h4
          class="mx_Heading_h4"
        >
          alices_device
        </h4>
        <div
          class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
          data-testid="device-heading-rename-cta"
          role="button"
          tabindex="0"
        >
          Rename
        </div>
      </div>
      <div
        class="mx_DeviceSecurityCard"
      >
        <div
          class="mx_DeviceSecurityCard_icon Unverified"
        >
          <div
            height="16"
            width="16"
          />
        </div>
        <div
          class="mx_DeviceSecurityCard_content"
        >
          <p
            class="mx_DeviceSecurityCard_heading"
          >
            Unverified session
          </p>
          <p
            class="mx_DeviceSecurityCard_description"
          >
            Verify your current session for enhanced secure messaging.
            <div
              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
              role="button"
              tabindex="0"
            >
              Learn more
            </div>
          </p>
          <div
            class="mx_DeviceSecurityCard_actions"
          >
            <div
              class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
              data-testid="verification-status-button-alices_device"
              role="button"
              tabindex="0"
            >
              Verify session
            </div>
          </div>
        </div>
      </div>
    </section>
    <section
      class="mx_DeviceDetails_section"
    >
      <p
        class="mx_DeviceDetails_sectionHeading"
      >
        Session details
      </p>
      <table
        class="mx_DeviceDetails_metadataTable"
        data-testid="device-detail-metadata-session"
      >
        <tbody>
          <tr>
            <td
              class="mxDeviceDetails_metadataLabel"
            >
              Session ID
            </td>
            <td
              class="mxDeviceDetails_metadataValue"
            >
              alices_device
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <section
      class="mx_DeviceDetails_section"
    >
      <div
        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_inline"
        data-testid="device-detail-sign-out-cta"
        role="button"
        tabindex="0"
      >
        <span
          class="mx_DeviceDetails_signOutButtonContent"
        >
          Sign out of this session
        </span>
      </div>
    </section>
  </div>,
]
`;

exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
<div>
  <div
    class="mx_SettingsSubsection"
    data-testid="current-session-section"
  >
    <div
      class="mx_SettingsSubsectionHeading"
    >
      <h3
        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
      >
        Current session
      </h3>
      <div
        aria-disabled="true"
        aria-expanded="false"
        aria-haspopup="true"
        aria-label="Options"
        class="mx_AccessibleButton mx_AccessibleButton_disabled"
        data-testid="current-session-menu"
        disabled=""
        role="button"
        tabindex="0"
      >
        <svg
          class="mx_KebabContextMenu_icon"
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
          />
        </svg>
      </div>
    </div>
    <div
      class="mx_SettingsSubsection_content"
    />
  </div>
</div>
`;

exports[`<CurrentDeviceSection /> renders device and correct security card when device is unverified 1`] = `
<div>
  <div
    class="mx_SettingsSubsection"
    data-testid="current-session-section"
  >
    <div
      class="mx_SettingsSubsectionHeading"
    >
      <h3
        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
      >
        Current session
      </h3>
      <div
        aria-expanded="false"
        aria-haspopup="true"
        aria-label="Options"
        class="mx_AccessibleButton"
        data-testid="current-session-menu"
        role="button"
        tabindex="0"
      >
        <svg
          class="mx_KebabContextMenu_icon"
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
          />
        </svg>
      </div>
    </div>
    <div
      class="mx_SettingsSubsection_content"
    >
      <div
        class="mx_DeviceTile mx_DeviceTile_interactive"
        data-testid="device-tile-alices_device"
      >
        <div
          class="mx_DeviceTypeIcon"
        >
          <div
            class="mx_DeviceTypeIcon_deviceIconWrapper"
          >
            <div
              aria-label="Unknown session type"
              class="mx_DeviceTypeIcon_deviceIcon"
              role="img"
            />
          </div>
          <div
            aria-label="Unverified"
            class="mx_DeviceTypeIcon_verificationIcon unverified"
            role="img"
          />
        </div>
        <div
          class="mx_DeviceTile_info"
        >
          <h4
            class="mx_Heading_h4"
          >
            alices_device
          </h4>
          <div
            class="mx_DeviceTile_metadata"
          >
            <span
              data-testid="device-metadata-isVerified"
            >
              Unverified
            </span>
             · 
            <span
              data-testid="device-metadata-deviceId"
            >
              alices_device
            </span>
          </div>
        </div>
        <div
          class="mx_DeviceTile_actions"
        >
          <div
            aria-label="Show details"
            class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
            data-testid="current-session-toggle-details"
            role="button"
            tabindex="0"
          >
            <svg
              class="mx_DeviceExpandDetailsButton_icon"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
              />
            </svg>
          </div>
        </div>
      </div>
      <br />
      <div
        class="mx_DeviceSecurityCard"
      >
        <div
          class="mx_DeviceSecurityCard_icon Unverified"
        >
          <div
            height="16"
            width="16"
          />
        </div>
        <div
          class="mx_DeviceSecurityCard_content"
        >
          <p
            class="mx_DeviceSecurityCard_heading"
          >
            Unverified session
          </p>
          <p
            class="mx_DeviceSecurityCard_description"
          >
            Verify your current session for enhanced secure messaging.
            <div
              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
              role="button"
              tabindex="0"
            >
              Learn more
            </div>
          </p>
          <div
            class="mx_DeviceSecurityCard_actions"
          >
            <div
              class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
              data-testid="verification-status-button-alices_device"
              role="button"
              tabindex="0"
            >
              Verify session
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<CurrentDeviceSection /> renders device and correct security card when device is verified 1`] = `
<div>
  <div
    class="mx_SettingsSubsection"
    data-testid="current-session-section"
  >
    <div
      class="mx_SettingsSubsectionHeading"
    >
      <h3
        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
      >
        Current session
      </h3>
      <div
        aria-expanded="false"
        aria-haspopup="true"
        aria-label="Options"
        class="mx_AccessibleButton"
        data-testid="current-session-menu"
        role="button"
        tabindex="0"
      >
        <svg
          class="mx_KebabContextMenu_icon"
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
          />
        </svg>
      </div>
    </div>
    <div
      class="mx_SettingsSubsection_content"
    >
      <div
        class="mx_DeviceTile mx_DeviceTile_interactive"
        data-testid="device-tile-alices_device"
      >
        <div
          class="mx_DeviceTypeIcon"
        >
          <div
            class="mx_DeviceTypeIcon_deviceIconWrapper"
          >
            <div
              aria-label="Unknown session type"
              class="mx_DeviceTypeIcon_deviceIcon"
              role="img"
            />
          </div>
          <div
            aria-label="Unverified"
            class="mx_DeviceTypeIcon_verificationIcon unverified"
            role="img"
          />
        </div>
        <div
          class="mx_DeviceTile_info"
        >
          <h4
            class="mx_Heading_h4"
          >
            alices_device
          </h4>
          <div
            class="mx_DeviceTile_metadata"
          >
            <span
              data-testid="device-metadata-isVerified"
            >
              Unverified
            </span>
             · 
            <span
              data-testid="device-metadata-deviceId"
            >
              alices_device
            </span>
          </div>
        </div>
        <div
          class="mx_DeviceTile_actions"
        >
          <div
            aria-label="Show details"
            class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
            data-testid="current-session-toggle-details"
            role="button"
            tabindex="0"
          >
            <svg
              class="mx_DeviceExpandDetailsButton_icon"
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
              />
            </svg>
          </div>
        </div>
      </div>
      <br />
      <div
        class="mx_DeviceSecurityCard"
      >
        <div
          class="mx_DeviceSecurityCard_icon Unverified"
        >
          <div
            height="16"
            width="16"
          />
        </div>
        <div
          class="mx_DeviceSecurityCard_content"
        >
          <p
            class="mx_DeviceSecurityCard_heading"
          >
            Unverified session
          </p>
          <p
            class="mx_DeviceSecurityCard_description"
          >
            Verify your current session for enhanced secure messaging.
            <div
              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
              role="button"
              tabindex="0"
            >
              Learn more
            </div>
          </p>
          <div
            class="mx_DeviceSecurityCard_actions"
          >
            <div
              class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
              data-testid="verification-status-button-alices_device"
              role="button"
              tabindex="0"
            >
              Verify session
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
