', () => {
});
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/MessageComposer-test.tsx b/test/components/views/rooms/MessageComposer-test.tsx
index 6bbb3cc2af..2aa07fbeef 100644
--- a/test/components/views/rooms/MessageComposer-test.tsx
+++ b/test/components/views/rooms/MessageComposer-test.tsx
@@ -28,48 +28,66 @@ import RoomContext from "../../../../src/contexts/RoomContext";
import { IRoomState } from "../../../../src/components/structures/RoomView";
import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
+import { LocalRoom } from "../../../../src/models/LocalRoom";
+import MessageComposerButtons from "../../../../src/components/views/rooms/MessageComposerButtons";
describe("MessageComposer", () => {
stubClient();
const cli = createTestClient();
- const room = mkStubRoom("!roomId:server", "Room 1", cli);
- it("Renders a SendMessageComposer and MessageComposerButtons by default", () => {
- const wrapper = wrapAndRender({ room });
+ describe("for a Room", () => {
+ const room = mkStubRoom("!roomId:server", "Room 1", cli);
- expect(wrapper.find("SendMessageComposer")).toHaveLength(1);
- expect(wrapper.find("MessageComposerButtons")).toHaveLength(1);
+ it("Renders a SendMessageComposer and MessageComposerButtons by default", () => {
+ const wrapper = wrapAndRender({ room });
+
+ expect(wrapper.find("SendMessageComposer")).toHaveLength(1);
+ expect(wrapper.find("MessageComposerButtons")).toHaveLength(1);
+ });
+
+ it("Does not render a SendMessageComposer or MessageComposerButtons when user has no permission", () => {
+ const wrapper = wrapAndRender({ room }, false);
+
+ expect(wrapper.find("SendMessageComposer")).toHaveLength(0);
+ expect(wrapper.find("MessageComposerButtons")).toHaveLength(0);
+ expect(wrapper.find(".mx_MessageComposer_noperm_error")).toHaveLength(1);
+ });
+
+ it("Does not render a SendMessageComposer or MessageComposerButtons when room is tombstoned", () => {
+ const wrapper = wrapAndRender({ room }, true, mkEvent({
+ event: true,
+ type: "m.room.tombstone",
+ room: room.roomId,
+ user: "@user1:server",
+ skey: "",
+ content: {},
+ ts: Date.now(),
+ }));
+
+ expect(wrapper.find("SendMessageComposer")).toHaveLength(0);
+ expect(wrapper.find("MessageComposerButtons")).toHaveLength(0);
+ expect(wrapper.find(".mx_MessageComposer_roomReplaced_header")).toHaveLength(1);
+ });
});
- it("Does not render a SendMessageComposer or MessageComposerButtons when user has no permission", () => {
- const wrapper = wrapAndRender({ room }, false);
+ describe("for a LocalRoom", () => {
+ const localRoom = new LocalRoom("!room:example.com", cli, cli.getUserId());
- expect(wrapper.find("SendMessageComposer")).toHaveLength(0);
- expect(wrapper.find("MessageComposerButtons")).toHaveLength(0);
- expect(wrapper.find(".mx_MessageComposer_noperm_error")).toHaveLength(1);
- });
-
- it("Does not render a SendMessageComposer or MessageComposerButtons when room is tombstoned", () => {
- const wrapper = wrapAndRender({ room }, true, mkEvent({
- event: true,
- type: "m.room.tombstone",
- room: room.roomId,
- user: "@user1:server",
- skey: "",
- content: {},
- ts: Date.now(),
- }));
-
- expect(wrapper.find("SendMessageComposer")).toHaveLength(0);
- expect(wrapper.find("MessageComposerButtons")).toHaveLength(0);
- expect(wrapper.find(".mx_MessageComposer_roomReplaced_header")).toHaveLength(1);
+ it("should pass the sticker picker disabled prop", () => {
+ const wrapper = wrapAndRender({ room: localRoom });
+ expect(wrapper.find(MessageComposerButtons).props().showStickersButton).toBe(false);
+ });
});
});
-function wrapAndRender(props = {}, canSendMessages = true, tombstone?: MatrixEvent): ReactWrapper {
+function wrapAndRender(
+ props: Partial
> = {},
+ canSendMessages = true,
+ tombstone?: MatrixEvent,
+): ReactWrapper {
const mockClient = MatrixClientPeg.get();
const roomId = "myroomid";
- const room: any = {
+ const room: any = props.room || {
currentState: undefined,
roomId,
client: mockClient,
diff --git a/test/components/views/rooms/RoomList-test.tsx b/test/components/views/rooms/RoomList-test.tsx
index 7b9d3ee311..6fa3fe22cf 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 0000000000..d9a66ab7bd
--- /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 0000000000..b0a056b10f
--- /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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ device_1
+
+
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+ Sign Out
+
+
+ Verify
+
+
+ Rename
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ device_2
+
+
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ device_3
+
+
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+
+
+
+ Sign out 0 selected devices
+
+
+
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 d688eca913..c8bc873390 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 0000000000..ecfbc0489d
--- /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 0000000000..b54745545b
--- /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 77dad3e138..5c0fe47828 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 0000000000..20c72fc9d3
--- /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
+
+
+
+
+
+
+
+ Current session
+
+
+
+
+
+
+ Current session
+
+
+
+
+
+ alices_device
+
+
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+
+
+
+
+
+ Unverified session
+
+
+ Verify or sign out from this session for best security and reliability.
+
+
+
+
+
+
+
+
+ Current session
+
+
+
+
+
+ alices_device
+
+
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+
+
+
+
+
+ Unverified session
+
+
+ Verify or sign out from this session for best security and reliability.
+
+
+
+
+
+
+
+
+
+ my-device
+
+
+
+
+
+ Verified session
+
+
+ This session is ready for secure messaging.
+
+
+
+
+
+ Session details
+
+
+
+
+
+
+
+
+
+ My Device
+
+
+
+
+
+ Unverified session
+
+
+ Verify or sign out from this session for best security and reliability.
+
+
+
+
+
+ Session details
+
+
+
+
+
+
+
+
+
+ my-device
+
+
+
+
+
+ Unverified session
+
+
+ Verify or sign out from this session for best security and reliability.
+
+
+
+
+
+ Session details
+
+
+
+
+
+
+
+
+
+
+ Verified session
+
+
+ nice
+
+
+
+
+
+
+
+
+ Verified session
+
+
+ nice
+
+
+ hey
+
+
+
+
renders a device with no metadata 1`] = `
+
+ Unverified
+
+ ·
+ ·
+
+
+
+
+