DevicesPanel-test.tsx.snap

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

exports[`<DevicesPanel /> device deletion deletes selected devices when interactive auth is required 1`] = `
HTMLCollection [
  <div
    class="mx_Dialog"
  >
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="0"
    />
    <div
      aria-describedby="mx_Dialog_content"
      aria-labelledby="mx_BaseDialog_title"
      class="mx_InteractiveAuthDialog mx_Dialog_fixedWidth"
      data-focus-lock-disabled="false"
      role="dialog"
    >
      <div
        class="mx_Dialog_header mx_Dialog_headerWithCancel"
      >
        <h2
          class="mx_Heading_h2 mx_Dialog_title"
          id="mx_BaseDialog_title"
        >
          Authentication
        </h2>
        <div
          aria-label="Close dialog"
          class="mx_AccessibleButton mx_Dialog_cancelButton"
          role="button"
          tabindex="0"
        />
      </div>
      <div
        id="mx_Dialog_content"
      >
        <div>
          <p>
            Confirm your identity by entering your account password below.
          </p>
          <form
            class="mx_InteractiveAuthEntryComponents_passwordSection"
          >
            <div
              class="mx_Field mx_Field_input"
            >
              <input
                id="mx_Field_1"
                label="Password"
                name="passwordField"
                placeholder="Password"
                type="password"
                value=""
              />
              <label
                for="mx_Field_1"
              >
                Password
              </label>
            </div>
            <div
              class="mx_button_row"
            >
              <input
                class="mx_Dialog_primary"
                disabled=""
                type="submit"
                value="Continue"
              />
            </div>
          </form>
        </div>
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="0"
    />
  </div>,
]
`;

exports[`<DevicesPanel /> renders device panel with devices 1`] = `
<div>
  <div
    class="mx_DevicesPanel"
  >
    <div
      class="mx_DevicesPanel_header"
    >
      <div
        class="mx_DevicesPanel_header_title"
      >
        This device
      </div>
    </div>
    <div
      class="mx_DevicesPanel_device mx_DevicesPanel_myDevice"
    >
      <div
        class="mx_DevicesPanel_deviceTrust"
      >
        <span
          class="mx_DevicesPanel_icon mx_E2EIcon mx_E2EIcon_warning"
        />
      </div>
      <div
        class="mx_DeviceTile"
        data-testid="device-tile-device_1"
      >
        <div
          class="mx_DeviceType"
        >
          <div
            aria-label="Unknown device type"
            class="mx_DeviceType_deviceIcon"
            role="img"
          />
          <div
            aria-label="Unverified"
            class="mx_DeviceType_verificationIcon unverified"
            role="img"
          />
        </div>
        <div
          class="mx_DeviceTile_info"
        >
          <h4
            class="mx_Heading_h4"
          >
            device_1
          </h4>
          <div
            class="mx_DeviceTile_metadata"
          >
            <span
              data-testid="device-metadata-isVerified"
            >
              Unverified
            </span>
             · 
             · 
          </div>
        </div>
        <div
          class="mx_DeviceTile_actions"
        >
          <div
            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
            role="button"
            tabindex="0"
          >
            Sign Out
          </div>
          <div
            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
            role="button"
            tabindex="0"
          >
            Verify
          </div>
          <div
            class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
            role="button"
            tabindex="0"
          >
            Rename
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div
      class="mx_DevicesPanel_header"
    >
      <div
        class="mx_DevicesPanel_header_trust"
      >
        <span
          class="mx_DevicesPanel_header_icon mx_E2EIcon mx_E2EIcon_warning"
        />
      </div>
      <div
        class="mx_DevicesPanel_header_title"
      >
        Unverified devices
      </div>
      <div
        class="mx_DevicesPanel_header_button"
      >
        <div
          class="mx_AccessibleButton mx_DevicesPanel_selectButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
          role="button"
          tabindex="0"
        >
          Select all
        </div>
      </div>
    </div>
    <div
      class="mx_DevicesPanel_device"
    >
      <div
        class="mx_SelectableDeviceTile"
      >
        <span
          class="mx_Checkbox mx_SelectableDeviceTile_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
        >
          <input
            id="device-tile-checkbox-device_2"
            type="checkbox"
          />
          <label
            for="device-tile-checkbox-device_2"
          >
            <div
              class="mx_Checkbox_background"
            >
              <div
                class="mx_Checkbox_checkmark"
              />
            </div>
          </label>
        </span>
        <div
          class="mx_DeviceTile"
          data-testid="device-tile-device_2"
        >
          <div
            class="mx_DeviceType"
          >
            <div
              aria-label="Unknown device type"
              class="mx_DeviceType_deviceIcon"
              role="img"
            />
            <div
              aria-label="Unverified"
              class="mx_DeviceType_verificationIcon unverified"
              role="img"
            />
          </div>
          <div
            class="mx_DeviceTile_info"
          >
            <h4
              class="mx_Heading_h4"
            >
              device_2
            </h4>
            <div
              class="mx_DeviceTile_metadata"
            >
              <span
                data-testid="device-metadata-isVerified"
              >
                Unverified
              </span>
               · 
               · 
            </div>
          </div>
          <div
            class="mx_DeviceTile_actions"
          >
            <div
              class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
              role="button"
              tabindex="0"
            >
              Rename
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="mx_DevicesPanel_device"
    >
      <div
        class="mx_SelectableDeviceTile"
      >
        <span
          class="mx_Checkbox mx_SelectableDeviceTile_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
        >
          <input
            id="device-tile-checkbox-device_3"
            type="checkbox"
          />
          <label
            for="device-tile-checkbox-device_3"
          >
            <div
              class="mx_Checkbox_background"
            >
              <div
                class="mx_Checkbox_checkmark"
              />
            </div>
          </label>
        </span>
        <div
          class="mx_DeviceTile"
          data-testid="device-tile-device_3"
        >
          <div
            class="mx_DeviceType"
          >
            <div
              aria-label="Unknown device type"
              class="mx_DeviceType_deviceIcon"
              role="img"
            />
            <div
              aria-label="Unverified"
              class="mx_DeviceType_verificationIcon unverified"
              role="img"
            />
          </div>
          <div
            class="mx_DeviceTile_info"
          >
            <h4
              class="mx_Heading_h4"
            >
              device_3
            </h4>
            <div
              class="mx_DeviceTile_metadata"
            >
              <span
                data-testid="device-metadata-isVerified"
              >
                Unverified
              </span>
               · 
               · 
            </div>
          </div>
          <div
            class="mx_DeviceTile_actions"
          >
            <div
              class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
              role="button"
              tabindex="0"
            >
              Rename
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      aria-disabled="true"
      class="mx_AccessibleButton mx_DevicesPanel_deleteButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
      data-testid="sign-out-devices-btn"
      disabled=""
      role="button"
      tabindex="0"
    >
      Sign out 0 selected devices
    </div>
  </div>
</div>
`;