imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Device manager - current session expandable details (PSG-644) (#9185)

Browse source 
* split current device section into component

* add dropdown button for currentsession device details

* test currentdevicesection

* remove unnecc beforeEach

* update type imports

* i18n and lint
This commit is contained in:
Kerry 2022-08-15 17:30:18 +02:00 • committed by GitHub
parent 0c5ad457f0
commit 0dffc582e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 642 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

267
test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap Normal file
View file

@ -0,0 +1,267 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<CurrentDeviceSection /> displays device details on toggle click 1`] = `
HTMLCollection [
<div
class="mx_DeviceDetails"
>
<section
class="mx_DeviceDetails_section"
>
<h3
class="mx_Heading_h3"
>
alices_device
</h3>
</section>
<section
class="mx_DeviceDetails_section"
>
<p
class="mx_DeviceDetails_sectionHeading"
>
Session details
</p>
<table
class="mxDeviceDetails_metadataTable"
>
<tbody>
<tr>
<td
class="mxDeviceDetails_metadataLabel"
>
Session ID
</td>
<td
class="mxDeviceDetails_metadataValue"
>
alices_device
</td>
</tr>
<tr>
<td
class="mxDeviceDetails_metadataLabel"
>
Last activity
</td>
<td
class="mxDeviceDetails_metadataValue"
/>
</tr>
</tbody>
</table>
<table
class="mxDeviceDetails_metadataTable"
>
<thead>
<tr>
<th>
Device
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="mxDeviceDetails_metadataLabel"
>
IP address
</td>
<td
class="mxDeviceDetails_metadataValue"
/>
</tr>
</tbody>
</table>
</section>
</div>,
]
`;
exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
<div>
<div
class="mx_SettingsSubsection"
data-testid="current-session-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
>
Current session
</h3>
<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"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
>
Current session
</h3>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_DeviceTile"
data-testid="device-tile-alices_device"
>
<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>
·
·
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</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 or sign out from this session for best security and reliability.
</p>
</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"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
>
Current session
</h3>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_DeviceTile"
data-testid="device-tile-alices_device"
>
<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>
·
·
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</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 or sign out from this session for best security and reliability.
</p>
</div>
</div>
</div>
</div>
</div>
`;

33
test/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap Normal file
View file

@ -0,0 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<DeviceExpandDetailsButton /> renders when expanded 1`] = `
Object {
"container": <div>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_DeviceExpandDetailsButton_expanded mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</div>
</div>,
}
`;
exports[`<DeviceExpandDetailsButton /> renders when not expanded 1`] = `
Object {
"container": <div>
<div
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
role="button"
tabindex="0"
>
<div
class="mx_DeviceExpandDetailsButton_icon"
/>
</div>
</div>,
}
`;