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

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();
});
});
});