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

Device manager - device security recommendation card (PSG-637) (#9158)

Browse source 
* add security card and style

* deprecate warning and verified svgs that use hard coded color

* style icons, test

* i18n

* stylelint

* redo lost lint fixes

* fix svg ref

* actually fix svg

* fix stupid copy pasting

* use rgba for e2e light variations

* add security card and style

* deprecate warning and verified svgs that use hard coded color

* style icons, test

* i18n

* stylelint

* fix svg ref

* actually fix svg

* fix stupid copy pasting

* use rgba for e2e light variations

* use device security card in current session section

* lint

* update snapshot test after dev merge
This commit is contained in:
Kerry 2022-08-11 12:39:14 +02:00 • committed by GitHub
parent 0be622e7f0
commit 7b52145461
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 401 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

19
test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
View file

@ -143,7 +143,7 @@ describe('<SessionManagerTab />', () => {
expect(getByTestId(`device-tile-${alicesDevice.device_id}`)).toMatchSnapshot();
});
it('renders current session section', async () => {
it('renders current session section with an unverified session', async () => {
mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
const { getByTestId } = render(getComponent());
@ -154,6 +154,21 @@ describe('<SessionManagerTab />', () => {
expect(getByTestId('current-session-section')).toMatchSnapshot();
});
it('renders current session section with a verified session', async () => {
mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
mockClient.getStoredDevice.mockImplementation(() => new DeviceInfo(alicesDevice.device_id));
mockCrossSigningInfo.checkDeviceTrust
.mockReturnValue(new DeviceTrustLevel(true, true, false, false));
const { getByTestId } = render(getComponent());
await act(async () => {
await flushPromisesWithFakeTimers();
});
expect(getByTestId('current-session-section')).toMatchSnapshot();
});
it('does not render other sessions section when user has only one device', async () => {
mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice] });
const { queryByTestId } = render(getComponent());
@ -165,7 +180,7 @@ describe('<SessionManagerTab />', () => {
expect(queryByTestId('other-sessions-section')).toBeFalsy();
});
it('renders other sessions section', async () => {
it('renders other sessions section when user has more than one device', async () => {
mockClient.getDevices.mockResolvedValue({
devices: [alicesDevice, alicesOlderMobileDevice, alicesMobileDevice],
});

101
test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
View file

@ -1,6 +1,78 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<SessionManagerTab /> renders current session section 1`] = `
exports[`<SessionManagerTab /> renders current session section with a verified session 1`] = `
<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"
>
Verified
</span>
·
·
</div>
</div>
<div
class="mx_DeviceTile_actions"
/>
</div>
<br />
<div
class="mx_DeviceSecurityCard"
>
<div
class="mx_DeviceSecurityCard_icon Verified"
>
<div
height="16"
width="16"
/>
</div>
<div
class="mx_DeviceSecurityCard_content"
>
<p
class="mx_DeviceSecurityCard_heading"
>
Verified session
</p>
<p
class="mx_DeviceSecurityCard_description"
>
This session is ready for secure messaging.
</p>
</div>
</div>
</div>
</div>
`;
exports[`<SessionManagerTab /> renders current session section with an unverified session 1`] = `
<div
class="mx_SettingsSubsection"
data-testid="current-session-section"
@ -41,6 +113,33 @@ exports[`<SessionManagerTab /> renders current session section 1`] = `
class="mx_DeviceTile_actions"
/>
</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>
`;