', () => {
});
it('opens message context menu on click', () => {
- const { findByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+ const { getByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
act(() => {
fireEvent.click(queryByLabelText('Options'));
});
- expect(findByTestId('mx_MessageContextMenu')).toBeTruthy();
+ expect(getByTestId('mx_MessageContextMenu')).toBeTruthy();
});
});
@@ -310,11 +310,11 @@ describe('
', () => {
});
it('opens reaction picker on click', () => {
- const { queryByLabelText, findByTestId } = getComponent({ mxEvent: alicesMessageEvent });
+ const { queryByLabelText, getByTestId } = getComponent({ mxEvent: alicesMessageEvent });
act(() => {
fireEvent.click(queryByLabelText('React'));
});
- expect(findByTestId('mx_ReactionPicker')).toBeTruthy();
+ expect(getByTestId('mx_EmojiPicker')).toBeTruthy();
});
});
@@ -565,4 +565,38 @@ describe('
', () => {
});
});
});
+
+ it.each([
+ ["React"],
+ ["Reply"],
+ ["Reply in thread"],
+ ["Favourite"],
+ ["Edit"],
+ ])("does not show context menu when right-clicking", (buttonLabel: string) => {
+ // For favourite button
+ jest.spyOn(SettingsStore, 'getValue').mockReturnValue(true);
+
+ const event = new MouseEvent("contextmenu", {
+ bubbles: true,
+ cancelable: true,
+ });
+ event.stopPropagation = jest.fn();
+ event.preventDefault = jest.fn();
+
+ const { queryByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+ act(() => {
+ fireEvent(queryByLabelText(buttonLabel), event);
+ });
+ expect(event.stopPropagation).toHaveBeenCalled();
+ expect(event.preventDefault).toHaveBeenCalled();
+ expect(queryByTestId("mx_MessageContextMenu")).toBeFalsy();
+ });
+
+ it("does shows context menu when right-clicking options", () => {
+ const { queryByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+ act(() => {
+ fireEvent.contextMenu(queryByLabelText("Options"));
+ });
+ expect(queryByTestId("mx_MessageContextMenu")).toBeTruthy();
+ });
});
diff --git a/test/components/views/rooms/RoomList-test.tsx b/test/components/views/rooms/RoomList-test.tsx
index 7b9d3ee3113..6fa3fe22cf4 100644
--- a/test/components/views/rooms/RoomList-test.tsx
+++ b/test/components/views/rooms/RoomList-test.tsx
@@ -137,7 +137,7 @@ describe('RoomList', () => {
client.getRoom.mockImplementation((roomId) => roomMap[roomId]);
// Now that everything has been set up, prepare and update the store
- await RoomListStore.instance.makeReady(client);
+ await (RoomListStore.instance as RoomListStoreClass).makeReady(client);
done();
});
@@ -150,7 +150,7 @@ describe('RoomList', () => {
}
await RoomListLayoutStore.instance.resetLayouts();
- await RoomListStore.instance.resetStore();
+ await (RoomListStore.instance as RoomListStoreClass).resetStore();
done();
});
diff --git a/test/components/views/settings/DevicesPanel-test.tsx b/test/components/views/settings/DevicesPanel-test.tsx
new file mode 100644
index 00000000000..d9a66ab7bd3
--- /dev/null
+++ b/test/components/views/settings/DevicesPanel-test.tsx
@@ -0,0 +1,203 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { CrossSigningInfo } from 'matrix-js-sdk/src/crypto/CrossSigning';
+import { DeviceInfo } from 'matrix-js-sdk/src/crypto/deviceinfo';
+import { sleep } from 'matrix-js-sdk/src/utils';
+
+import DevicesPanel from "../../../../src/components/views/settings/DevicesPanel";
+import {
+ flushPromises,
+ getMockClientWithEventEmitter,
+ mockClientMethodsUser,
+} from "../../../test-utils";
+
+describe('
', () => {
+ const userId = '@alice:server.org';
+ const device1 = { device_id: 'device_1' };
+ const device2 = { device_id: 'device_2' };
+ const device3 = { device_id: 'device_3' };
+ const mockClient = getMockClientWithEventEmitter({
+ ...mockClientMethodsUser(userId),
+ getDevices: jest.fn(),
+ getDeviceId: jest.fn().mockReturnValue(device1.device_id),
+ deleteMultipleDevices: jest.fn(),
+ getStoredCrossSigningForUser: jest.fn().mockReturnValue(new CrossSigningInfo(userId, {}, {})),
+ getStoredDevice: jest.fn().mockReturnValue(new DeviceInfo('id')),
+ generateClientSecret: jest.fn(),
+ });
+
+ const getComponent = () =>
;
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+
+ mockClient.getDevices
+ .mockReset()
+ .mockResolvedValue({ devices: [device1, device2, device3] });
+ });
+
+ it('renders device panel with devices', async () => {
+ const { container } = render(getComponent());
+ await flushPromises();
+ expect(container).toMatchSnapshot();
+ });
+
+ describe('device deletion', () => {
+ const interactiveAuthError = { httpStatus: 401, data: { flows: [{ stages: ["m.login.password"] }] } };
+
+ const toggleDeviceSelection = (container: HTMLElement, deviceId: string) => act(() => {
+ const checkbox = container.querySelector(`#device-tile-checkbox-${deviceId}`);
+ fireEvent.click(checkbox);
+ });
+
+ beforeEach(() => {
+ mockClient.deleteMultipleDevices.mockReset();
+ });
+
+ it('deletes selected devices when interactive auth is not required', async () => {
+ mockClient.deleteMultipleDevices.mockResolvedValue({});
+ mockClient.getDevices
+ .mockResolvedValueOnce({ devices: [device1, device2, device3] })
+ // pretend it was really deleted on refresh
+ .mockResolvedValueOnce({ devices: [device1, device3] });
+
+ const { container, getByTestId } = render(getComponent());
+ await flushPromises();
+
+ expect(container.getElementsByClassName('mx_DevicesPanel_device').length).toEqual(3);
+
+ toggleDeviceSelection(container, device2.device_id);
+
+ mockClient.getDevices.mockClear();
+
+ act(() => {
+ fireEvent.click(getByTestId('sign-out-devices-btn'));
+ });
+
+ expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
+ expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([device2.device_id], undefined);
+
+ await flushPromises();
+
+ // devices refreshed
+ expect(mockClient.getDevices).toHaveBeenCalled();
+ // and rerendered
+ expect(container.getElementsByClassName('mx_DevicesPanel_device').length).toEqual(2);
+ });
+
+ it('deletes selected devices when interactive auth is required', async () => {
+ mockClient.deleteMultipleDevices
+ // require auth
+ .mockRejectedValueOnce(interactiveAuthError)
+ // then succeed
+ .mockResolvedValueOnce({});
+
+ mockClient.getDevices
+ .mockResolvedValueOnce({ devices: [device1, device2, device3] })
+ // pretend it was really deleted on refresh
+ .mockResolvedValueOnce({ devices: [device1, device3] });
+
+ const { container, getByTestId, getByLabelText } = render(getComponent());
+
+ await flushPromises();
+
+ // reset mock count after initial load
+ mockClient.getDevices.mockClear();
+
+ toggleDeviceSelection(container, device2.device_id);
+
+ act(() => {
+ fireEvent.click(getByTestId('sign-out-devices-btn'));
+ });
+
+ await flushPromises();
+ // modal rendering has some weird sleeps
+ await sleep(100);
+
+ expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([device2.device_id], undefined);
+
+ const modal = document.getElementsByClassName('mx_Dialog');
+ expect(modal).toMatchSnapshot();
+
+ // fill password and submit for interactive auth
+ act(() => {
+ fireEvent.change(getByLabelText('Password'), { target: { value: 'topsecret' } });
+ fireEvent.submit(getByLabelText('Password'));
+ });
+
+ await flushPromises();
+
+ // called again with auth
+ expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([device2.device_id],
+ { identifier: {
+ type: "m.id.user", user: userId,
+ }, password: "", type: "m.login.password", user: userId,
+ });
+ // devices refreshed
+ expect(mockClient.getDevices).toHaveBeenCalled();
+ // and rerendered
+ expect(container.getElementsByClassName('mx_DevicesPanel_device').length).toEqual(2);
+ });
+
+ it('clears loading state when interactive auth fail is cancelled', async () => {
+ mockClient.deleteMultipleDevices
+ // require auth
+ .mockRejectedValueOnce(interactiveAuthError)
+ // then succeed
+ .mockResolvedValueOnce({});
+
+ mockClient.getDevices
+ .mockResolvedValueOnce({ devices: [device1, device2, device3] })
+ // pretend it was really deleted on refresh
+ .mockResolvedValueOnce({ devices: [device1, device3] });
+
+ const { container, getByTestId } = render(getComponent());
+
+ await flushPromises();
+
+ // reset mock count after initial load
+ mockClient.getDevices.mockClear();
+
+ toggleDeviceSelection(container, device2.device_id);
+
+ act(() => {
+ fireEvent.click(getByTestId('sign-out-devices-btn'));
+ });
+
+ expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
+
+ await flushPromises();
+ // modal rendering has some weird sleeps
+ await sleep(10);
+
+ // close the modal without submission
+ act(() => {
+ const modalCloseButton = document.querySelector('[aria-label="Close dialog"]');
+ fireEvent.click(modalCloseButton);
+ });
+
+ await flushPromises();
+
+ // not refreshed
+ expect(mockClient.getDevices).not.toHaveBeenCalled();
+ // spinner removed
+ expect(container.getElementsByClassName('mx_Spinner').length).toBeFalsy();
+ });
+ });
+});
diff --git a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
new file mode 100644
index 00000000000..b0a056b10f9
--- /dev/null
+++ b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
@@ -0,0 +1,327 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`
device deletion deletes selected devices when interactive auth is required 1`] = `
+HTMLCollection [
+
+
+
+
+
+
+
+ Confirm your identity by entering your account password below.
+
+
+
+
+
+
+
,
+]
+`;
+
+exports[`
renders device panel with devices 1`] = `
+
+
+
+
+
+
+
+
+
+
+ device_1
+
+
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+ Sign Out
+
+
+ Verify
+
+
+ Rename
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ device_2
+
+
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ device_3
+
+
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+
+
+
+ Sign out 0 selected devices
+
+
+
+`;
diff --git a/test/components/views/settings/devices/CurrentDeviceSection-test.tsx b/test/components/views/settings/devices/CurrentDeviceSection-test.tsx
new file mode 100644
index 00000000000..966db9f7f2a
--- /dev/null
+++ b/test/components/views/settings/devices/CurrentDeviceSection-test.tsx
@@ -0,0 +1,78 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+
+import CurrentDeviceSection from '../../../../../src/components/views/settings/devices/CurrentDeviceSection';
+
+describe('
', () => {
+ const deviceId = 'alices_device';
+
+ const alicesVerifiedDevice = {
+ device_id: deviceId,
+ isVerified: false,
+ };
+ const alicesUnverifiedDevice = {
+ device_id: deviceId,
+ isVerified: false,
+ };
+
+ const defaultProps = {
+ device: alicesVerifiedDevice,
+ isLoading: false,
+ };
+ const getComponent = (props = {}): React.ReactElement =>
+ (
);
+
+ it('renders spinner while device is loading', () => {
+ const { container } = render(getComponent({ device: undefined, isLoading: true }));
+ expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
+ });
+
+ it('handles when device is falsy', async () => {
+ const { container } = render(getComponent({ device: undefined }));
+ expect(container).toMatchSnapshot();
+ });
+
+ it('renders device and correct security card when device is verified', () => {
+ const { container } = render(getComponent());
+ expect(container).toMatchSnapshot();
+ });
+
+ it('renders device and correct security card when device is unverified', () => {
+ const { container } = render(getComponent({ device: alicesUnverifiedDevice }));
+ expect(container).toMatchSnapshot();
+ });
+
+ it('displays device details on toggle click', () => {
+ const { container, getByTestId } = render(getComponent({ device: alicesUnverifiedDevice }));
+
+ act(() => {
+ fireEvent.click(getByTestId('current-session-toggle-details'));
+ });
+
+ expect(container.getElementsByClassName('mx_DeviceDetails')).toMatchSnapshot();
+
+ act(() => {
+ fireEvent.click(getByTestId('current-session-toggle-details'));
+ });
+
+ // device details are hidden
+ expect(container.getElementsByClassName('mx_DeviceDetails').length).toBeFalsy();
+ });
+});
diff --git a/test/components/views/settings/devices/DeviceDetails-test.tsx b/test/components/views/settings/devices/DeviceDetails-test.tsx
new file mode 100644
index 00000000000..95897f69a1c
--- /dev/null
+++ b/test/components/views/settings/devices/DeviceDetails-test.tsx
@@ -0,0 +1,63 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import DeviceDetails from '../../../../../src/components/views/settings/devices/DeviceDetails';
+
+describe('
', () => {
+ const baseDevice = {
+ device_id: 'my-device',
+ isVerified: false,
+ };
+ const defaultProps = {
+ device: baseDevice,
+ };
+ const getComponent = (props = {}) =>
;
+ // 14.03.2022 16:15
+ const now = 1647270879403;
+ jest.useFakeTimers();
+
+ beforeEach(() => {
+ jest.setSystemTime(now);
+ });
+
+ it('renders device without metadata', () => {
+ const { container } = render(getComponent());
+ expect(container).toMatchSnapshot();
+ });
+
+ it('renders device with metadata', () => {
+ const device = {
+ ...baseDevice,
+ display_name: 'My Device',
+ last_seen_ip: '123.456.789',
+ last_seen_ts: now - 60000000,
+ };
+ const { container } = render(getComponent({ device }));
+ expect(container).toMatchSnapshot();
+ });
+
+ it('renders a verified device', () => {
+ const device = {
+ ...baseDevice,
+ isVerified: true,
+ };
+ const { container } = render(getComponent({ device }));
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx b/test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx
new file mode 100644
index 00000000000..3d790e43c2d
--- /dev/null
+++ b/test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx
@@ -0,0 +1,47 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import DeviceExpandDetailsButton from '../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton';
+
+describe('
', () => {
+ const defaultProps = {
+ isExpanded: false,
+ onClick: jest.fn(),
+ };
+ const getComponent = (props = {}) =>
+
;
+
+ it('renders when not expanded', () => {
+ const { container } = render(getComponent());
+ expect({ container }).toMatchSnapshot();
+ });
+
+ it('renders when expanded', () => {
+ const { container } = render(getComponent({ isExpanded: true }));
+ expect({ container }).toMatchSnapshot();
+ });
+
+ it('calls onClick', () => {
+ const onClick = jest.fn();
+ const { getByTestId } = render(getComponent({ 'data-testid': 'test', onClick }));
+ fireEvent.click(getByTestId('test'));
+
+ expect(onClick).toHaveBeenCalled();
+ });
+});
diff --git a/test/components/views/settings/devices/DeviceSecurityCard-test.tsx b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx
new file mode 100644
index 00000000000..43bf025eba3
--- /dev/null
+++ b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx
@@ -0,0 +1,44 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import DeviceSecurityCard from '../../../../../src/components/views/settings/devices/DeviceSecurityCard';
+import { DeviceSecurityVariation } from '../../../../../src/components/views/settings/devices/types';
+
+describe('
', () => {
+ const defaultProps = {
+ variation: DeviceSecurityVariation.Verified,
+ heading: 'Verified session',
+ description: 'nice',
+ };
+ const getComponent = (props = {}): React.ReactElement =>
+
;
+
+ it('renders basic card', () => {
+ const { container } = render(getComponent());
+ expect(container).toMatchSnapshot();
+ });
+
+ it('renders with children', () => {
+ const { container } = render(getComponent({
+ children:
hey
,
+ variation: DeviceSecurityVariation.Unverified,
+ }));
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/test/components/views/settings/devices/DeviceTile-test.tsx b/test/components/views/settings/devices/DeviceTile-test.tsx
index d688eca9135..c8bc8733902 100644
--- a/test/components/views/settings/devices/DeviceTile-test.tsx
+++ b/test/components/views/settings/devices/DeviceTile-test.tsx
@@ -24,6 +24,7 @@ describe('
', () => {
const defaultProps = {
device: {
device_id: '123',
+ isVerified: false,
},
};
const getComponent = (props = {}) => (
@@ -43,6 +44,11 @@ describe('
', () => {
expect(container).toMatchSnapshot();
});
+ it('renders a verified device with no metadata', () => {
+ const { container } = render(getComponent());
+ expect(container).toMatchSnapshot();
+ });
+
it('renders display name with a tooltip', () => {
const device: IMyDevice = {
device_id: '123',
@@ -103,5 +109,18 @@ describe('
', () => {
const { getByTestId } = render(getComponent({ device }));
expect(getByTestId('device-metadata-lastActivity').textContent).toEqual('Last activity Dec 29, 2021');
});
+
+ it('renders with inactive notice when last activity was more than 90 days ago', () => {
+ const device: IMyDevice = {
+ device_id: '123',
+ last_seen_ip: '1.2.3.4',
+ last_seen_ts: now - (MS_DAY * 100),
+ };
+ const { getByTestId, queryByTestId } = render(getComponent({ device }));
+ expect(getByTestId('device-metadata-inactive').textContent).toEqual('Inactive for 90+ days (Dec 4, 2021)');
+ // last activity and verification not shown when inactive
+ expect(queryByTestId('device-metadata-lastActivity')).toBeFalsy();
+ expect(queryByTestId('device-metadata-verificationStatus')).toBeFalsy();
+ });
});
});
diff --git a/test/components/views/settings/devices/FilteredDeviceList-test.tsx b/test/components/views/settings/devices/FilteredDeviceList-test.tsx
new file mode 100644
index 00000000000..ecfbc0489d3
--- /dev/null
+++ b/test/components/views/settings/devices/FilteredDeviceList-test.tsx
@@ -0,0 +1,207 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react';
+
+import FilteredDeviceList from '../../../../../src/components/views/settings/devices/FilteredDeviceList';
+import { DeviceSecurityVariation } from '../../../../../src/components/views/settings/devices/types';
+import { flushPromises, mockPlatformPeg } from '../../../../test-utils';
+
+mockPlatformPeg();
+
+const MS_DAY = 86400000;
+describe('
', () => {
+ const newDevice = {
+ device_id: 'new',
+ last_seen_ts: Date.now() - 500,
+ last_seen_ip: '123.456.789',
+ display_name: 'My Device',
+ isVerified: true,
+ };
+ const unverifiedNoMetadata = { device_id: 'unverified-no-metadata', isVerified: false };
+ const verifiedNoMetadata = { device_id: 'verified-no-metadata', isVerified: true };
+ const hundredDaysOld = { device_id: '100-days-old', isVerified: true, last_seen_ts: Date.now() - (MS_DAY * 100) };
+ const hundredDaysOldUnverified = {
+ device_id: 'unverified-100-days-old',
+ isVerified: false,
+ last_seen_ts: Date.now() - (MS_DAY * 100),
+ };
+ const defaultProps = {
+ onFilterChange: jest.fn(),
+ onDeviceExpandToggle: jest.fn(),
+ expandedDeviceIds: [],
+ devices: {
+ [unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
+ [verifiedNoMetadata.device_id]: verifiedNoMetadata,
+ [newDevice.device_id]: newDevice,
+ [hundredDaysOld.device_id]: hundredDaysOld,
+ [hundredDaysOldUnverified.device_id]: hundredDaysOldUnverified,
+ },
+ };
+ const getComponent = (props = {}) =>
+ (
);
+
+ it('renders devices in correct order', () => {
+ const { container } = render(getComponent());
+ const tiles = container.querySelectorAll('.mx_DeviceTile');
+ expect(tiles[0].getAttribute('data-testid')).toEqual(`device-tile-${newDevice.device_id}`);
+ expect(tiles[1].getAttribute('data-testid')).toEqual(`device-tile-${hundredDaysOld.device_id}`);
+ expect(tiles[2].getAttribute('data-testid')).toEqual(`device-tile-${hundredDaysOldUnverified.device_id}`);
+ expect(tiles[3].getAttribute('data-testid')).toEqual(`device-tile-${unverifiedNoMetadata.device_id}`);
+ expect(tiles[4].getAttribute('data-testid')).toEqual(`device-tile-${verifiedNoMetadata.device_id}`);
+ });
+
+ it('updates list order when devices change', () => {
+ const updatedOldDevice = { ...hundredDaysOld, last_seen_ts: new Date().getTime() };
+ const updatedDevices = {
+ [hundredDaysOld.device_id]: updatedOldDevice,
+ [newDevice.device_id]: newDevice,
+ };
+ const { container, rerender } = render(getComponent());
+
+ rerender(getComponent({ devices: updatedDevices }));
+
+ const tiles = container.querySelectorAll('.mx_DeviceTile');
+ expect(tiles.length).toBe(2);
+ expect(tiles[0].getAttribute('data-testid')).toEqual(`device-tile-${hundredDaysOld.device_id}`);
+ expect(tiles[1].getAttribute('data-testid')).toEqual(`device-tile-${newDevice.device_id}`);
+ });
+
+ it('displays no results message when there are no devices', () => {
+ const { container } = render(getComponent({ devices: {} }));
+
+ expect(container.getElementsByClassName('mx_FilteredDeviceList_noResults')).toMatchSnapshot();
+ });
+
+ describe('filtering', () => {
+ const setFilter = async (
+ container: HTMLElement,
+ option: DeviceSecurityVariation | string,
+ ) => await act(async () => {
+ const dropdown = container.querySelector('[aria-label="Filter devices"]');
+
+ fireEvent.click(dropdown);
+ // tick to let dropdown render
+ await flushPromises();
+
+ fireEvent.click(container.querySelector(`#device-list-filter__${option}`));
+ });
+
+ it('does not display filter description when filter is falsy', () => {
+ const { container } = render(getComponent({ filter: undefined }));
+ const tiles = container.querySelectorAll('.mx_DeviceTile');
+ expect(container.getElementsByClassName('mx_FilteredDeviceList_securityCard').length).toBeFalsy();
+ expect(tiles.length).toEqual(5);
+ });
+
+ it('updates filter when prop changes', () => {
+ const { container, rerender } = render(getComponent({ filter: DeviceSecurityVariation.Verified }));
+ const tiles = container.querySelectorAll('.mx_DeviceTile');
+ expect(tiles.length).toEqual(3);
+ expect(tiles[0].getAttribute('data-testid')).toEqual(`device-tile-${newDevice.device_id}`);
+ expect(tiles[1].getAttribute('data-testid')).toEqual(`device-tile-${hundredDaysOld.device_id}`);
+ expect(tiles[2].getAttribute('data-testid')).toEqual(`device-tile-${verifiedNoMetadata.device_id}`);
+
+ rerender(getComponent({ filter: DeviceSecurityVariation.Inactive }));
+
+ const rerenderedTiles = container.querySelectorAll('.mx_DeviceTile');
+ expect(rerenderedTiles.length).toEqual(2);
+ expect(rerenderedTiles[0].getAttribute('data-testid')).toEqual(`device-tile-${hundredDaysOld.device_id}`);
+ expect(rerenderedTiles[1].getAttribute('data-testid')).toEqual(
+ `device-tile-${hundredDaysOldUnverified.device_id}`,
+ );
+ });
+
+ it('calls onFilterChange handler', async () => {
+ const onFilterChange = jest.fn();
+ const { container } = render(getComponent({ onFilterChange }));
+ await setFilter(container, DeviceSecurityVariation.Verified);
+
+ expect(onFilterChange).toHaveBeenCalledWith(DeviceSecurityVariation.Verified);
+ });
+
+ it('calls onFilterChange handler correctly when setting filter to All', async () => {
+ const onFilterChange = jest.fn();
+ const { container } = render(getComponent({ onFilterChange, filter: DeviceSecurityVariation.Verified }));
+ await setFilter(container, 'ALL');
+
+ // filter is cleared
+ expect(onFilterChange).toHaveBeenCalledWith(undefined);
+ });
+
+ it.each([
+ [DeviceSecurityVariation.Verified, [newDevice, hundredDaysOld, verifiedNoMetadata]],
+ [DeviceSecurityVariation.Unverified, [hundredDaysOldUnverified, unverifiedNoMetadata]],
+ [DeviceSecurityVariation.Inactive, [hundredDaysOld, hundredDaysOldUnverified]],
+ ])('filters correctly for %s', (filter, expectedDevices) => {
+ const { container } = render(getComponent({ filter }));
+ expect(container.getElementsByClassName('mx_FilteredDeviceList_securityCard')).toMatchSnapshot();
+ const tileDeviceIds = [...container.querySelectorAll('.mx_DeviceTile')]
+ .map(tile => tile.getAttribute('data-testid'));
+ expect(tileDeviceIds).toEqual(expectedDevices.map(device => `device-tile-${device.device_id}`));
+ });
+
+ it.each([
+ [DeviceSecurityVariation.Verified],
+ [DeviceSecurityVariation.Unverified],
+ [DeviceSecurityVariation.Inactive],
+ ])('renders no results correctly for %s', (filter) => {
+ const { container } = render(getComponent({ filter, devices: {} }));
+ expect(container.getElementsByClassName('mx_FilteredDeviceList_securityCard').length).toBeFalsy();
+ expect(container.getElementsByClassName('mx_FilteredDeviceList_noResults')).toMatchSnapshot();
+ });
+
+ it('clears filter from no results message', () => {
+ const onFilterChange = jest.fn();
+ const { getByTestId } = render(getComponent({
+ onFilterChange,
+ filter: DeviceSecurityVariation.Verified,
+ devices: {
+ [unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
+ },
+ }));
+ act(() => {
+ fireEvent.click(getByTestId('devices-clear-filter-btn'));
+ });
+
+ 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);
+ });
+ });
+});
diff --git a/test/components/views/settings/devices/SecurityRecommendations-test.tsx b/test/components/views/settings/devices/SecurityRecommendations-test.tsx
new file mode 100644
index 00000000000..b54745545b7
--- /dev/null
+++ b/test/components/views/settings/devices/SecurityRecommendations-test.tsx
@@ -0,0 +1,72 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import SecurityRecommendations from '../../../../../src/components/views/settings/devices/SecurityRecommendations';
+
+const MS_DAY = 24 * 60 * 60 * 1000;
+describe('
', () => {
+ const unverifiedNoMetadata = { device_id: 'unverified-no-metadata', isVerified: false };
+ const verifiedNoMetadata = { device_id: 'verified-no-metadata', isVerified: true };
+ const hundredDaysOld = { device_id: '100-days-old', isVerified: true, last_seen_ts: Date.now() - (MS_DAY * 100) };
+ const hundredDaysOldUnverified = {
+ device_id: 'unverified-100-days-old',
+ isVerified: false,
+ last_seen_ts: Date.now() - (MS_DAY * 100),
+ };
+
+ const defaultProps = {
+ devices: {},
+ };
+ const getComponent = (props = {}) =>
+ (
);
+
+ it('renders null when no devices', () => {
+ const { container } = render(getComponent());
+ expect(container.firstChild).toBeNull();
+ });
+
+ it('renders unverified devices section when user has unverified devices', () => {
+ const devices = {
+ [unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
+ [verifiedNoMetadata.device_id]: verifiedNoMetadata,
+ [hundredDaysOldUnverified.device_id]: hundredDaysOldUnverified,
+ };
+ const { container } = render(getComponent({ devices }));
+ expect(container).toMatchSnapshot();
+ });
+
+ it('renders inactive devices section when user has inactive devices', () => {
+ const devices = {
+ [verifiedNoMetadata.device_id]: verifiedNoMetadata,
+ [hundredDaysOldUnverified.device_id]: hundredDaysOldUnverified,
+ };
+ const { container } = render(getComponent({ devices }));
+ expect(container).toMatchSnapshot();
+ });
+
+ it('renders both cards when user has both unverified and inactive devices', () => {
+ const devices = {
+ [verifiedNoMetadata.device_id]: verifiedNoMetadata,
+ [hundredDaysOld.device_id]: hundredDaysOld,
+ [unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
+ };
+ const { container } = render(getComponent({ devices }));
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/test/components/views/settings/devices/SelectableDeviceTile-test.tsx b/test/components/views/settings/devices/SelectableDeviceTile-test.tsx
index 77dad3e1383..5c0fe47828b 100644
--- a/test/components/views/settings/devices/SelectableDeviceTile-test.tsx
+++ b/test/components/views/settings/devices/SelectableDeviceTile-test.tsx
@@ -25,6 +25,7 @@ describe('
', () => {
display_name: 'My Device',
device_id: 'my-device',
last_seen_ip: '123.456.789',
+ isVerified: false,
};
const defaultProps = {
onClick: jest.fn(),
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
new file mode 100644
index 00000000000..20c72fc9d38
--- /dev/null
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -0,0 +1,296 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`
displays device details on toggle click 1`] = `
+HTMLCollection [
+
+
+
+ alices_device
+
+
+
+
+
+ Unverified session
+
+
+ Verify or sign out from this session for best security and reliability.
+
+
+
+
+
+ Session details
+
+
+
+
+
,
+]
+`;
+
+exports[`
handles when device is falsy 1`] = `
+
+
+
+ Current session
+
+
+
+
+`;
+
+exports[`
renders device and correct security card when device is unverified 1`] = `
+
+
+
+ Current session
+
+
+
+
+
+ alices_device
+
+
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+
+
+
+
+
+ Unverified session
+
+
+ Verify or sign out from this session for best security and reliability.
+
+
+
+
+
+
+`;
+
+exports[`
renders device and correct security card when device is verified 1`] = `
+
+
+
+ Current session
+
+
+
+
+
+ alices_device
+
+
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+
+
+
+
+
+ Unverified session
+
+
+ Verify or sign out from this session for best security and reliability.
+
+
+
+
+
+
+`;
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
new file mode 100644
index 00000000000..d83ca383150
--- /dev/null
+++ b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
@@ -0,0 +1,320 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`
renders a verified device 1`] = `
+
+
+
+
+ my-device
+
+
+
+
+
+ Verified session
+
+
+ This session is ready for secure messaging.
+
+
+
+
+
+ Session details
+
+
+
+
+
+
+`;
+
+exports[`
renders device with metadata 1`] = `
+
+
+
+
+ My Device
+
+
+
+
+
+ Unverified session
+
+
+ Verify or sign out from this session for best security and reliability.
+
+
+
+
+
+ Session details
+
+
+
+
+
+
+`;
+
+exports[`
renders device without metadata 1`] = `
+
+
+
+
+ my-device
+
+
+
+
+
+ Unverified session
+
+
+ Verify or sign out from this session for best security and reliability.
+
+
+
+
+
+ Session details
+
+
+
+
+
+
+`;
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap
new file mode 100644
index 00000000000..d9c3edaba10
--- /dev/null
+++ b/test/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`
renders when expanded 1`] = `
+Object {
+ "container":
,
+}
+`;
+
+exports[`
renders when not expanded 1`] = `
+Object {
+ "container":
,
+}
+`;
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap
new file mode 100644
index 00000000000..900c94d451d
--- /dev/null
+++ b/test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`
renders basic card 1`] = `
+
+
+
+
+
+ Verified session
+
+
+ nice
+
+
+
+
+`;
+
+exports[`
renders with children 1`] = `
+
+
+
+
+
+ Verified session
+
+
+ nice
+
+
+ hey
+
+
+
+
+`;
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
index 299d72348c8..cafd47a8a74 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`
renders a device with no metadata 1`] = `
renders a device with no metadata 1`] = `
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+