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

Device manager - expandable session details in device list (PSG-644) (#9188)

Browse source 
* add expandable device details to session list

* test device expansion in filtered list

* test expanded device id management from sessionmanager tab

* i18n

* update snapshot

* update snapshots

* use css instead of br
This commit is contained in:
Kerry 2022-08-17 11:58:34 +02:00 • committed by GitHub
parent fecc03289d
commit e5fedfcd74
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 155 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

25
test/components/views/settings/devices/FilteredDeviceList-test.tsx
View file

@ -42,6 +42,8 @@ describe('<FilteredDeviceList />', () => {
};
const defaultProps = {
onFilterChange: jest.fn(),
onDeviceExpandToggle: jest.fn(),
expandedDeviceIds: [],
devices: {
[unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
[verifiedNoMetadata.device_id]: verifiedNoMetadata,
@ -179,4 +181,27 @@ describe('<FilteredDeviceList />', () => {
expect(onFilterChange).toHaveBeenCalledWith(undefined);
});
});
describe('device details', () => {
it('renders expanded devices with device details', () => {
const expandedDeviceIds = [newDevice.device_id, hundredDaysOld.device_id];
const { container, getByTestId } = render(getComponent({ expandedDeviceIds }));
expect(container.getElementsByClassName('mx_DeviceDetails').length).toBeTruthy();
expect(getByTestId(`device-detail-${newDevice.device_id}`)).toBeTruthy();
expect(getByTestId(`device-detail-${hundredDaysOld.device_id}`)).toBeTruthy();
});
it('clicking toggle calls onDeviceExpandToggle', () => {
const onDeviceExpandToggle = jest.fn();
const { getByTestId } = render(getComponent({ onDeviceExpandToggle }));
act(() => {
const tile = getByTestId(`device-tile-${hundredDaysOld.device_id}`);
const toggle = tile.querySelector('[aria-label="Toggle device details"]');
fireEvent.click(toggle);
});
expect(onDeviceExpandToggle).toHaveBeenCalledWith(hundredDaysOld.device_id);
});
});
});

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

@ -4,6 +4,7 @@ exports[`<CurrentDeviceSection /> displays device details on toggle click 1`] =
HTMLCollection [
<div
class="mx_DeviceDetails"
data-testid="device-detail-alices_device"
>
<section
class="mx_DeviceDetails_section"
@ -164,6 +165,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_DeviceTile_actions"
>
<div
aria-label="Toggle device details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
@ -249,6 +251,7 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_DeviceTile_actions"
>
<div
aria-label="Toggle device details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"

3
test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
View file

@ -4,6 +4,7 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
<div>
<div
class="mx_DeviceDetails"
data-testid="device-detail-my-device"
>
<section
class="mx_DeviceDetails_section"
@ -108,6 +109,7 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
<div>
<div
class="mx_DeviceDetails"
data-testid="device-detail-my-device"
>
<section
class="mx_DeviceDetails_section"
@ -216,6 +218,7 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
<div>
<div
class="mx_DeviceDetails"
data-testid="device-detail-my-device"
>
<section
class="mx_DeviceDetails_section"

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

@ -4,6 +4,7 @@ exports[`<DeviceExpandDetailsButton /> renders when expanded 1`] = `
Object {
"container": <div>
<div
aria-label="Toggle device details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_DeviceExpandDetailsButton_expanded mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
role="button"
tabindex="0"
@ -20,6 +21,7 @@ exports[`<DeviceExpandDetailsButton /> renders when not expanded 1`] = `
Object {
"container": <div>
<div
aria-label="Toggle device details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
role="button"
tabindex="0"

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

@ -15,7 +15,7 @@ limitations under the License.
*/
import React from 'react';
import { render } from '@testing-library/react';
import { fireEvent, render } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import { DeviceInfo } from 'matrix-js-sdk/src/crypto/deviceinfo';
import { logger } from 'matrix-js-sdk/src/logger';
@ -192,4 +192,63 @@ describe('<SessionManagerTab />', () => {
expect(getByTestId('other-sessions-section')).toBeTruthy();
});
describe('device detail expansion', () => {
it('renders no devices expanded by default', async () => {
mockClient.getDevices.mockResolvedValue({
devices: [alicesDevice, alicesOlderMobileDevice, alicesMobileDevice],
});
const { getByTestId } = render(getComponent());
await act(async () => {
await flushPromisesWithFakeTimers();
});
const otherSessionsSection = getByTestId('other-sessions-section');
// no expanded device details
expect(otherSessionsSection.getElementsByClassName('mx_DeviceDetails').length).toBeFalsy();
});
it('toggles device expansion on click', async () => {
mockClient.getDevices.mockResolvedValue({
devices: [alicesDevice, alicesOlderMobileDevice, alicesMobileDevice],
});
const { getByTestId, queryByTestId } = render(getComponent());
await act(async () => {
await flushPromisesWithFakeTimers();
});
act(() => {
const tile = getByTestId(`device-tile-${alicesOlderMobileDevice.device_id}`);
const toggle = tile.querySelector('[aria-label="Toggle device details"]');
fireEvent.click(toggle);
});
// device details are expanded
expect(getByTestId(`device-detail-${alicesOlderMobileDevice.device_id}`)).toBeTruthy();
act(() => {
const tile = getByTestId(`device-tile-${alicesMobileDevice.device_id}`);
const toggle = tile.querySelector('[aria-label="Toggle device details"]');
fireEvent.click(toggle);
});
// both device details are expanded
expect(getByTestId(`device-detail-${alicesOlderMobileDevice.device_id}`)).toBeTruthy();
expect(getByTestId(`device-detail-${alicesMobileDevice.device_id}`)).toBeTruthy();
act(() => {
const tile = getByTestId(`device-tile-${alicesMobileDevice.device_id}`);
const toggle = tile.querySelector('[aria-label="Toggle device details"]');
fireEvent.click(toggle);
});
// alicesMobileDevice was toggled off
expect(queryByTestId(`device-detail-${alicesMobileDevice.device_id}`)).toBeFalsy();
// alicesOlderMobileDevice stayed open
expect(getByTestId(`device-detail-${alicesOlderMobileDevice.device_id}`)).toBeTruthy();
});
});
});

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

@ -41,6 +41,7 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
class="mx_DeviceTile_actions"
>
<div
aria-label="Toggle device details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
@ -124,6 +125,7 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
class="mx_DeviceTile_actions"
>
<div
aria-label="Toggle device details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"
@ -195,6 +197,7 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
class="mx_DeviceTile_actions"
>
<div
aria-label="Toggle device details"
class="mx_AccessibleButton mx_DeviceExpandDetailsButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon"
data-testid="current-session-toggle-details"
role="button"