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

Apply prettier formatting

Browse source
This commit is contained in:
Michael Weimann 2022-12-12 12:24:14 +01:00
parent 1cac306093
commit 526645c791
No known key found for this signature in database
GPG key ID: 53F535A266BB9584
1576 changed files with 65385 additions and 62478 deletions
Download patch file Download diff file Expand all files Collapse all files

82
test/components/views/settings/AddPrivilegedUsers-test.tsx
View file

@ -13,34 +13,31 @@ 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, waitFor } from '@testing-library/react';
import React from "react";
import { act, fireEvent, render, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { mocked } from "jest-mock";
import { RoomMember, EventType } from "matrix-js-sdk/src/matrix";
import {
getMockClientWithEventEmitter,
makeRoomWithStateEvents,
mkEvent,
} from "../../../test-utils";
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
import { getMockClientWithEventEmitter, makeRoomWithStateEvents, mkEvent } from "../../../test-utils";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import {
AddPrivilegedUsers,
getUserIdsFromCompletions, hasLowerOrEqualLevelThanDefaultLevel,
getUserIdsFromCompletions,
hasLowerOrEqualLevelThanDefaultLevel,
} from "../../../../src/components/views/settings/AddPrivilegedUsers";
import UserProvider from "../../../../src/autocomplete/UserProvider";
import { ICompletion } from "../../../../src/autocomplete/Autocompleter";
jest.mock('../../../../src/autocomplete/UserProvider');
jest.mock("../../../../src/autocomplete/UserProvider");
const completions: ICompletion[] = [
{ type: 'user', completion: 'user_1', completionId: '@user_1:host.local', range: { start: 1, end: 1 } },
{ type: 'user', completion: 'user_2', completionId: '@user_2:host.local', range: { start: 1, end: 1 } },
{ type: 'user', completion: 'user_without_completion_id', range: { start: 1, end: 1 } },
{ type: "user", completion: "user_1", completionId: "@user_1:host.local", range: { start: 1, end: 1 } },
{ type: "user", completion: "user_2", completionId: "@user_2:host.local", range: { start: 1, end: 1 } },
{ type: "user", completion: "user_without_completion_id", range: { start: 1, end: 1 } },
];
describe('<AddPrivilegedUsers />', () => {
describe("<AddPrivilegedUsers />", () => {
const provider = mocked(UserProvider, { shallow: true });
provider.prototype.getCompletions.mockResolvedValue(completions);
@ -50,9 +47,9 @@ describe('<AddPrivilegedUsers />', () => {
setPowerLevel: jest.fn(),
});
const room = makeRoomWithStateEvents([], { roomId: 'room_id', mockClient: mockClient });
const room = makeRoomWithStateEvents([], { roomId: "room_id", mockClient: mockClient });
room.getMember = (userId: string) => {
const member = new RoomMember('room_id', userId);
const member = new RoomMember("room_id", userId);
member.powerLevel = 0;
return member;
@ -61,36 +58,34 @@ describe('<AddPrivilegedUsers />', () => {
return mkEvent({
type: EventType.RoomPowerLevels,
content: {},
user: 'user_id',
user: "user_id",
});
};
const getComponent = () =>
const getComponent = () => (
<MatrixClientContext.Provider value={mockClient}>
<AddPrivilegedUsers
room={room}
defaultUserLevel={0}
/>
</MatrixClientContext.Provider>;
<AddPrivilegedUsers room={room} defaultUserLevel={0} />
</MatrixClientContext.Provider>
);
it('checks whether form submit works as intended', async () => {
it("checks whether form submit works as intended", async () => {
const { getByTestId, queryAllByTestId } = render(getComponent());
// Verify that the submit button is disabled initially.
const submitButton = getByTestId('add-privileged-users-submit-button');
const submitButton = getByTestId("add-privileged-users-submit-button");
expect(submitButton).toBeDisabled();
// Find some suggestions and select them.
const autocompleteInput = getByTestId('autocomplete-input');
const autocompleteInput = getByTestId("autocomplete-input");
act(() => {
fireEvent.focus(autocompleteInput);
fireEvent.change(autocompleteInput, { target: { value: 'u' } });
fireEvent.change(autocompleteInput, { target: { value: "u" } });
});
await waitFor(() => expect(provider.mock.instances[0].getCompletions).toHaveBeenCalledTimes(1));
const matchOne = getByTestId('autocomplete-suggestion-item-@user_1:host.local');
const matchTwo = getByTestId('autocomplete-suggestion-item-@user_2:host.local');
const matchOne = getByTestId("autocomplete-suggestion-item-@user_1:host.local");
const matchTwo = getByTestId("autocomplete-suggestion-item-@user_2:host.local");
act(() => {
fireEvent.mouseDown(matchOne);
@ -101,16 +96,16 @@ describe('<AddPrivilegedUsers />', () => {
});
// Check that `defaultUserLevel` is initially set and select a higher power level.
expect((getByTestId('power-level-option-0') as HTMLOptionElement).selected).toBeTruthy();
expect((getByTestId('power-level-option-50') as HTMLOptionElement).selected).toBeFalsy();
expect((getByTestId('power-level-option-100') as HTMLOptionElement).selected).toBeFalsy();
expect((getByTestId("power-level-option-0") as HTMLOptionElement).selected).toBeTruthy();
expect((getByTestId("power-level-option-50") as HTMLOptionElement).selected).toBeFalsy();
expect((getByTestId("power-level-option-100") as HTMLOptionElement).selected).toBeFalsy();
const powerLevelSelect = getByTestId('power-level-select-element');
const powerLevelSelect = getByTestId("power-level-select-element");
await userEvent.selectOptions(powerLevelSelect, "100");
expect((getByTestId('power-level-option-0') as HTMLOptionElement).selected).toBeFalsy();
expect((getByTestId('power-level-option-50') as HTMLOptionElement).selected).toBeFalsy();
expect((getByTestId('power-level-option-100') as HTMLOptionElement).selected).toBeTruthy();
expect((getByTestId("power-level-option-0") as HTMLOptionElement).selected).toBeFalsy();
expect((getByTestId("power-level-option-50") as HTMLOptionElement).selected).toBeFalsy();
expect((getByTestId("power-level-option-100") as HTMLOptionElement).selected).toBeTruthy();
// The submit button should be enabled now.
expect(submitButton).toBeEnabled();
@ -126,24 +121,25 @@ describe('<AddPrivilegedUsers />', () => {
expect(submitButton).toBeDisabled();
// Verify that previously selected items are reset.
const selectionItems = queryAllByTestId('autocomplete-selection-item', { exact: false });
const selectionItems = queryAllByTestId("autocomplete-selection-item", { exact: false });
expect(selectionItems).toHaveLength(0);
// Verify that power level select is reset to `defaultUserLevel`.
expect((getByTestId('power-level-option-0') as HTMLOptionElement).selected).toBeTruthy();
expect((getByTestId('power-level-option-50') as HTMLOptionElement).selected).toBeFalsy();
expect((getByTestId('power-level-option-100') as HTMLOptionElement).selected).toBeFalsy();
expect((getByTestId("power-level-option-0") as HTMLOptionElement).selected).toBeTruthy();
expect((getByTestId("power-level-option-50") as HTMLOptionElement).selected).toBeFalsy();
expect((getByTestId("power-level-option-100") as HTMLOptionElement).selected).toBeFalsy();
});
it('getUserIdsFromCompletions() should map completions to user id\'s', () => {
expect(getUserIdsFromCompletions(completions)).toStrictEqual(['@user_1:host.local', '@user_2:host.local']);
it("getUserIdsFromCompletions() should map completions to user id's", () => {
expect(getUserIdsFromCompletions(completions)).toStrictEqual(["@user_1:host.local", "@user_2:host.local"]);
});
it.each([
{ defaultUserLevel: -50, expectation: false },
{ defaultUserLevel: 0, expectation: true },
{ defaultUserLevel: 50, expectation: true },
])('hasLowerOrEqualLevelThanDefaultLevel() should return $expectation for default level $defaultUserLevel',
])(
"hasLowerOrEqualLevelThanDefaultLevel() should return $expectation for default level $defaultUserLevel",
({ defaultUserLevel, expectation }) => {
expect(hasLowerOrEqualLevelThanDefaultLevel(room, completions[0], defaultUserLevel)).toBe(expectation);
},

18
test/components/views/settings/CryptographyPanel-test.tsx
View file

@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { ReactElement } from 'react';
import ReactDOM from 'react-dom';
import { MatrixClient } from 'matrix-js-sdk/src/matrix';
import React, { ReactElement } from "react";
import ReactDOM from "react-dom";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
import * as TestUtils from '../../../test-utils';
import CryptographyPanel from '../../../../src/components/views/settings/CryptographyPanel';
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import * as TestUtils from "../../../test-utils";
import CryptographyPanel from "../../../../src/components/views/settings/CryptographyPanel";
describe('CryptographyPanel', () => {
it('shows the session ID and key', () => {
describe("CryptographyPanel", () => {
it("shows the session ID and key", () => {
const sessionId = "ABCDEFGHIJ";
const sessionKey = "AbCDeFghIJK7L/m4nOPqRSTUVW4xyzaBCDef6gHIJkl";
const sessionKeyFormatted = "<b>AbCD eFgh IJK7 L/m4 nOPq RSTU VW4x yzaB CDef 6gHI Jkl</b>";
@ -45,7 +45,7 @@ describe('CryptographyPanel', () => {
});
function render(component: ReactElement<CryptographyPanel>): HTMLDivElement {
const parentDiv = document.createElement('div');
const parentDiv = document.createElement("div");
document.body.appendChild(parentDiv);
ReactDOM.render(component, parentDiv);
return parentDiv;

113
test/components/views/settings/DevicesPanel-test.tsx
View file

@ -13,81 +13,76 @@ 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 { PUSHER_DEVICE_ID, PUSHER_ENABLED } from 'matrix-js-sdk/src/@types/event';
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 { PUSHER_DEVICE_ID, PUSHER_ENABLED } from "matrix-js-sdk/src/@types/event";
import DevicesPanel from "../../../../src/components/views/settings/DevicesPanel";
import {
flushPromises,
getMockClientWithEventEmitter,
mkPusher,
mockClientMethodsUser,
} from "../../../test-utils";
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
import { flushPromises, getMockClientWithEventEmitter, mkPusher, mockClientMethodsUser } from "../../../test-utils";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
describe('<DevicesPanel />', () => {
const userId = '@alice:server.org';
const device1 = { device_id: 'device_1' };
const device2 = { device_id: 'device_2' };
const device3 = { device_id: 'device_3' };
describe("<DevicesPanel />", () => {
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')),
getStoredDevice: jest.fn().mockReturnValue(new DeviceInfo("id")),
generateClientSecret: jest.fn(),
getPushers: jest.fn(),
setPusher: jest.fn(),
});
const getComponent = () =>
const getComponent = () => (
<MatrixClientContext.Provider value={mockClient}>
<DevicesPanel />
</MatrixClientContext.Provider>;
</MatrixClientContext.Provider>
);
beforeEach(() => {
jest.clearAllMocks();
mockClient.getDevices
.mockReset()
.mockResolvedValue({ devices: [device1, device2, device3] });
mockClient.getDevices.mockReset().mockResolvedValue({ devices: [device1, device2, device3] });
mockClient.getPushers
.mockReset()
.mockResolvedValue({
pushers: [mkPusher({
mockClient.getPushers.mockReset().mockResolvedValue({
pushers: [
mkPusher({
[PUSHER_DEVICE_ID.name]: device1.device_id,
[PUSHER_ENABLED.name]: true,
})],
});
}),
],
});
});
it('renders device panel with devices', async () => {
it("renders device panel with devices", async () => {
const { container } = render(getComponent());
await flushPromises();
expect(container).toMatchSnapshot();
});
describe('device deletion', () => {
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);
});
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 () => {
it("deletes selected devices when interactive auth is not required", async () => {
mockClient.deleteMultipleDevices.mockResolvedValue({});
mockClient.getDevices
.mockResolvedValueOnce({ devices: [device1, device2, device3] })
@ -97,17 +92,17 @@ describe('<DevicesPanel />', () => {
const { container, getByTestId } = render(getComponent());
await flushPromises();
expect(container.getElementsByClassName('mx_DevicesPanel_device').length).toEqual(3);
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'));
fireEvent.click(getByTestId("sign-out-devices-btn"));
});
expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
expect(container.getElementsByClassName("mx_Spinner").length).toBeTruthy();
expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([device2.device_id], undefined);
await flushPromises();
@ -115,10 +110,10 @@ describe('<DevicesPanel />', () => {
// devices refreshed
expect(mockClient.getDevices).toHaveBeenCalled();
// and rerendered
expect(container.getElementsByClassName('mx_DevicesPanel_device').length).toEqual(2);
expect(container.getElementsByClassName("mx_DevicesPanel_device").length).toEqual(2);
});
it('deletes selected devices when interactive auth is required', async () => {
it("deletes selected devices when interactive auth is required", async () => {
mockClient.deleteMultipleDevices
// require auth
.mockRejectedValueOnce(interactiveAuthError)
@ -140,7 +135,7 @@ describe('<DevicesPanel />', () => {
toggleDeviceSelection(container, device2.device_id);
act(() => {
fireEvent.click(getByTestId('sign-out-devices-btn'));
fireEvent.click(getByTestId("sign-out-devices-btn"));
});
await flushPromises();
@ -149,30 +144,34 @@ describe('<DevicesPanel />', () => {
expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([device2.device_id], undefined);
const modal = document.getElementsByClassName('mx_Dialog');
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'));
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,
});
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);
expect(container.getElementsByClassName("mx_DevicesPanel_device").length).toEqual(2);
});
it('clears loading state when interactive auth fail is cancelled', async () => {
it("clears loading state when interactive auth fail is cancelled", async () => {
mockClient.deleteMultipleDevices
// require auth
.mockRejectedValueOnce(interactiveAuthError)
@ -194,10 +193,10 @@ describe('<DevicesPanel />', () => {
toggleDeviceSelection(container, device2.device_id);
act(() => {
fireEvent.click(getByTestId('sign-out-devices-btn'));
fireEvent.click(getByTestId("sign-out-devices-btn"));
});
expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
expect(container.getElementsByClassName("mx_Spinner").length).toBeTruthy();
await flushPromises();
// modal rendering has some weird sleeps
@ -214,7 +213,7 @@ describe('<DevicesPanel />', () => {
// not refreshed
expect(mockClient.getDevices).not.toHaveBeenCalled();
// spinner removed
expect(container.getElementsByClassName('mx_Spinner').length).toBeFalsy();
expect(container.getElementsByClassName("mx_Spinner").length).toBeFalsy();
});
});
});

27
test/components/views/settings/FontScalingPanel-test.tsx
View file

@ -14,28 +14,23 @@ 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 React from "react";
import { render } from "@testing-library/react";
import * as TestUtils from "../../../test-utils";
import FontScalingPanel from '../../../../src/components/views/settings/FontScalingPanel';
import FontScalingPanel from "../../../../src/components/views/settings/FontScalingPanel";
// Fake random strings to give a predictable snapshot
jest.mock(
'matrix-js-sdk/src/randomstring',
() => {
return {
randomString: () => "abdefghi",
};
},
);
jest.mock("matrix-js-sdk/src/randomstring", () => {
return {
randomString: () => "abdefghi",
};
});
describe('FontScalingPanel', () => {
it('renders the font scaling UI', () => {
describe("FontScalingPanel", () => {
it("renders the font scaling UI", () => {
TestUtils.stubClient();
const { asFragment } = render(
<FontScalingPanel />,
);
const { asFragment } = render(<FontScalingPanel />);
expect(asFragment()).toMatchSnapshot();
});
});

1
test/components/views/settings/KeyboardShortcut-test.tsx
View file

@ -1,4 +1,3 @@
/*
Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>

297
test/components/views/settings/Notifications-test.tsx
View file

@ -12,7 +12,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
import {
IPushRule,
IPushRules,
@ -22,15 +22,15 @@ import {
MatrixEvent,
Room,
NotificationCountType,
} from 'matrix-js-sdk/src/matrix';
import { IThreepid, ThreepidMedium } from 'matrix-js-sdk/src/@types/threepids';
import { act } from 'react-dom/test-utils';
import { fireEvent, getByTestId, render, screen, waitFor } from '@testing-library/react';
} from "matrix-js-sdk/src/matrix";
import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
import { act } from "react-dom/test-utils";
import { fireEvent, getByTestId, render, screen, waitFor } from "@testing-library/react";
import Notifications from '../../../../src/components/views/settings/Notifications';
import Notifications from "../../../../src/components/views/settings/Notifications";
import SettingsStore from "../../../../src/settings/SettingsStore";
import { StandardActions } from '../../../../src/notifications/StandardActions';
import { getMockClientWithEventEmitter, mkMessage } from '../../../test-utils';
import { StandardActions } from "../../../../src/notifications/StandardActions";
import { getMockClientWithEventEmitter, mkMessage } from "../../../test-utils";
// don't pollute test output with error logs from mock rejections
jest.mock("matrix-js-sdk/src/logger");
@ -46,17 +46,155 @@ const masterRule = {
rule_id: RuleId.Master,
};
// eslint-disable-next-line max-len
const oneToOneRule = { "conditions": [{ "kind": "room_member_count", "is": "2" }, { "kind": "event_match", "key": "type", "pattern": "m.room.message" }], "actions": ["notify", { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.room_one_to_one", "default": true, "enabled": true } as IPushRule;
const oneToOneRule = {
conditions: [
{ kind: "room_member_count", is: "2" },
{ kind: "event_match", key: "type", pattern: "m.room.message" },
],
actions: ["notify", { set_tweak: "highlight", value: false }],
rule_id: ".m.rule.room_one_to_one",
default: true,
enabled: true,
} as IPushRule;
// eslint-disable-next-line max-len
const encryptedOneToOneRule = { "conditions": [{ "kind": "room_member_count", "is": "2" }, { "kind": "event_match", "key": "type", "pattern": "m.room.encrypted" }], "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.encrypted_room_one_to_one", "default": true, "enabled": true } as IPushRule;
const encryptedOneToOneRule = {
conditions: [
{ kind: "room_member_count", is: "2" },
{ kind: "event_match", key: "type", pattern: "m.room.encrypted" },
],
actions: ["notify", { set_tweak: "sound", value: "default" }, { set_tweak: "highlight", value: false }],
rule_id: ".m.rule.encrypted_room_one_to_one",
default: true,
enabled: true,
} as IPushRule;
// eslint-disable-next-line max-len
const encryptedGroupRule = { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.encrypted" }], "actions": ["dont_notify"], "rule_id": ".m.rule.encrypted", "default": true, "enabled": true } as IPushRule;
const encryptedGroupRule = {
conditions: [{ kind: "event_match", key: "type", pattern: "m.room.encrypted" }],
actions: ["dont_notify"],
rule_id: ".m.rule.encrypted",
default: true,
enabled: true,
} as IPushRule;
// eslint-disable-next-line max-len
const pushRules: IPushRules = { "global": { "underride": [{ "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.call.invite" }], "actions": ["notify", { "set_tweak": "sound", "value": "ring" }, { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.call", "default": true, "enabled": true }, oneToOneRule, encryptedOneToOneRule, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.message" }], "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.message", "default": true, "enabled": true }, encryptedGroupRule, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "im.vector.modular.widgets" }, { "kind": "event_match", "key": "content.type", "pattern": "jitsi" }, { "kind": "event_match", "key": "state_key", "pattern": "*" }], "actions": ["notify", { "set_tweak": "highlight", "value": false }], "rule_id": ".im.vector.jitsi", "default": true, "enabled": true }], "sender": [], "room": [{ "actions": ["dont_notify"], "rule_id": "!zJPyWqpMorfCcWObge:matrix.org", "default": false, "enabled": true }], "content": [{ "actions": ["notify", { "set_tweak": "highlight", "value": false }], "pattern": "banana", "rule_id": "banana", "default": false, "enabled": true }, { "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight" }], "pattern": "kadev1", "rule_id": ".m.rule.contains_user_name", "default": true, "enabled": true }], "override": [{ "conditions": [], "actions": ["dont_notify"], "rule_id": ".m.rule.master", "default": true, "enabled": false }, { "conditions": [{ "kind": "event_match", "key": "content.msgtype", "pattern": "m.notice" }], "actions": ["dont_notify"], "rule_id": ".m.rule.suppress_notices", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.member" }, { "kind": "event_match", "key": "content.membership", "pattern": "invite" }, { "kind": "event_match", "key": "state_key", "pattern": "@kadev1:matrix.org" }], "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.invite_for_me", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.member" }], "actions": ["dont_notify"], "rule_id": ".m.rule.member_event", "default": true, "enabled": true }, { "conditions": [{ "kind": "contains_display_name" }], "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight" }], "rule_id": ".m.rule.contains_display_name", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "content.body", "pattern": "@room" }, { "kind": "sender_notification_permission", "key": "room" }], "actions": ["notify", { "set_tweak": "highlight", "value": true }], "rule_id": ".m.rule.roomnotif", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.tombstone" }, { "kind": "event_match", "key": "state_key", "pattern": "" }], "actions": ["notify", { "set_tweak": "highlight", "value": true }], "rule_id": ".m.rule.tombstone", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.reaction" }], "actions": ["dont_notify"], "rule_id": ".m.rule.reaction", "default": true, "enabled": true }] }, "device": {} } as IPushRules;
const pushRules: IPushRules = {
global: {
underride: [
{
conditions: [{ kind: "event_match", key: "type", pattern: "m.call.invite" }],
actions: ["notify", { set_tweak: "sound", value: "ring" }, { set_tweak: "highlight", value: false }],
rule_id: ".m.rule.call",
default: true,
enabled: true,
},
oneToOneRule,
encryptedOneToOneRule,
{
conditions: [{ kind: "event_match", key: "type", pattern: "m.room.message" }],
actions: ["notify", { set_tweak: "sound", value: "default" }, { set_tweak: "highlight", value: false }],
rule_id: ".m.rule.message",
default: true,
enabled: true,
},
encryptedGroupRule,
{
conditions: [
{ kind: "event_match", key: "type", pattern: "im.vector.modular.widgets" },
{ kind: "event_match", key: "content.type", pattern: "jitsi" },
{ kind: "event_match", key: "state_key", pattern: "*" },
],
actions: ["notify", { set_tweak: "highlight", value: false }],
rule_id: ".im.vector.jitsi",
default: true,
enabled: true,
},
],
sender: [],
room: [{ actions: ["dont_notify"], rule_id: "!zJPyWqpMorfCcWObge:matrix.org", default: false, enabled: true }],
content: [
{
actions: ["notify", { set_tweak: "highlight", value: false }],
pattern: "banana",
rule_id: "banana",
default: false,
enabled: true,
},
{
actions: ["notify", { set_tweak: "sound", value: "default" }, { set_tweak: "highlight" }],
pattern: "kadev1",
rule_id: ".m.rule.contains_user_name",
default: true,
enabled: true,
},
],
override: [
{ conditions: [], actions: ["dont_notify"], rule_id: ".m.rule.master", default: true, enabled: false },
{
conditions: [{ kind: "event_match", key: "content.msgtype", pattern: "m.notice" }],
actions: ["dont_notify"],
rule_id: ".m.rule.suppress_notices",
default: true,
enabled: true,
},
{
conditions: [
{ kind: "event_match", key: "type", pattern: "m.room.member" },
{ kind: "event_match", key: "content.membership", pattern: "invite" },
{ kind: "event_match", key: "state_key", pattern: "@kadev1:matrix.org" },
],
actions: ["notify", { set_tweak: "sound", value: "default" }, { set_tweak: "highlight", value: false }],
rule_id: ".m.rule.invite_for_me",
default: true,
enabled: true,
},
{
conditions: [{ kind: "event_match", key: "type", pattern: "m.room.member" }],
actions: ["dont_notify"],
rule_id: ".m.rule.member_event",
default: true,
enabled: true,
},
{
conditions: [{ kind: "contains_display_name" }],
actions: ["notify", { set_tweak: "sound", value: "default" }, { set_tweak: "highlight" }],
rule_id: ".m.rule.contains_display_name",
default: true,
enabled: true,
},
{
conditions: [
{ kind: "event_match", key: "content.body", pattern: "@room" },
{ kind: "sender_notification_permission", key: "room" },
],
actions: ["notify", { set_tweak: "highlight", value: true }],
rule_id: ".m.rule.roomnotif",
default: true,
enabled: true,
},
{
conditions: [
{ kind: "event_match", key: "type", pattern: "m.room.tombstone" },
{ kind: "event_match", key: "state_key", pattern: "" },
],
actions: ["notify", { set_tweak: "highlight", value: true }],
rule_id: ".m.rule.tombstone",
default: true,
enabled: true,
},
{
conditions: [{ kind: "event_match", key: "type", pattern: "m.reaction" }],
actions: ["dont_notify"],
rule_id: ".m.rule.reaction",
default: true,
enabled: true,
},
],
},
device: {},
} as IPushRules;
const flushPromises = async () => await new Promise(resolve => window.setTimeout(resolve));
const flushPromises = async () => await new Promise((resolve) => window.setTimeout(resolve));
describe('<Notifications />', () => {
describe("<Notifications />", () => {
const getComponent = () => render(<Notifications />);
// get component, wait for async data and force a render
@ -74,7 +212,7 @@ describe('<Notifications />', () => {
setPushRuleEnabled: jest.fn(),
setPushRuleActions: jest.fn(),
getRooms: jest.fn().mockReturnValue([]),
getAccountData: jest.fn().mockImplementation(eventType => {
getAccountData: jest.fn().mockImplementation((eventType) => {
if (eventType.startsWith(LOCAL_NOTIFICATION_SETTINGS_PREFIX.name)) {
return new MatrixEvent({
type: eventType,
@ -97,29 +235,29 @@ describe('<Notifications />', () => {
mockClient.setPusher.mockClear().mockResolvedValue({});
});
it('renders spinner while loading', async () => {
it("renders spinner while loading", async () => {
getComponent();
expect(screen.getByTestId('spinner')).toBeInTheDocument();
expect(screen.getByTestId("spinner")).toBeInTheDocument();
});
it('renders error message when fetching push rules fails', async () => {
it("renders error message when fetching push rules fails", async () => {
mockClient.getPushRules.mockRejectedValue({});
await getComponentAndWait();
expect(screen.getByTestId('error-message')).toBeInTheDocument();
expect(screen.getByTestId("error-message")).toBeInTheDocument();
});
it('renders error message when fetching pushers fails', async () => {
it("renders error message when fetching pushers fails", async () => {
mockClient.getPushers.mockRejectedValue({});
await getComponentAndWait();
expect(screen.getByTestId('error-message')).toBeInTheDocument();
expect(screen.getByTestId("error-message")).toBeInTheDocument();
});
it('renders error message when fetching threepids fails', async () => {
it("renders error message when fetching threepids fails", async () => {
mockClient.getThreePids.mockRejectedValue({});
await getComponentAndWait();
expect(screen.getByTestId('error-message')).toBeInTheDocument();
expect(screen.getByTestId("error-message")).toBeInTheDocument();
});
describe('main notification switches', () => {
it('renders only enable notifications switch when notifications are disabled', async () => {
describe("main notification switches", () => {
it("renders only enable notifications switch when notifications are disabled", async () => {
const disableNotificationsPushRules = {
global: {
...pushRules.global,
@ -131,18 +269,18 @@ describe('<Notifications />', () => {
expect(container).toMatchSnapshot();
});
it('renders switches correctly', async () => {
it("renders switches correctly", async () => {
await getComponentAndWait();
expect(screen.getByTestId('notif-master-switch')).toBeInTheDocument();
expect(screen.getByTestId('notif-device-switch')).toBeInTheDocument();
expect(screen.getByTestId('notif-setting-notificationsEnabled')).toBeInTheDocument();
expect(screen.getByTestId('notif-setting-notificationBodyEnabled')).toBeInTheDocument();
expect(screen.getByTestId('notif-setting-audioNotificationsEnabled')).toBeInTheDocument();
expect(screen.getByTestId("notif-master-switch")).toBeInTheDocument();
expect(screen.getByTestId("notif-device-switch")).toBeInTheDocument();
expect(screen.getByTestId("notif-setting-notificationsEnabled")).toBeInTheDocument();
expect(screen.getByTestId("notif-setting-notificationBodyEnabled")).toBeInTheDocument();
expect(screen.getByTestId("notif-setting-audioNotificationsEnabled")).toBeInTheDocument();
});
describe('email switches', () => {
const testEmail = 'tester@test.com';
describe("email switches", () => {
const testEmail = "tester@test.com";
beforeEach(() => {
mockClient.getThreePids.mockResolvedValue({
threepids: [
@ -155,49 +293,47 @@ describe('<Notifications />', () => {
});
});
it('renders email switches correctly when email 3pids exist', async () => {
it("renders email switches correctly when email 3pids exist", async () => {
await getComponentAndWait();
expect(screen.getByTestId('notif-email-switch')).toBeInTheDocument();
expect(screen.getByTestId("notif-email-switch")).toBeInTheDocument();
});
it('renders email switches correctly when notifications are on for email', async () => {
it("renders email switches correctly when notifications are on for email", async () => {
mockClient.getPushers.mockResolvedValue({
pushers: [
{ kind: 'email', pushkey: testEmail } as unknown as IPusher,
],
pushers: [{ kind: "email", pushkey: testEmail } as unknown as IPusher],
});
await getComponentAndWait();
const emailSwitch = screen.getByTestId('notif-email-switch');
const emailSwitch = screen.getByTestId("notif-email-switch");
expect(emailSwitch.querySelector('[aria-checked="true"]')).toBeInTheDocument();
});
it('enables email notification when toggling on', async () => {
it("enables email notification when toggling on", async () => {
await getComponentAndWait();
const emailToggle = screen.getByTestId('notif-email-switch')
.querySelector('div[role="switch"]');
const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]');
await act(async () => {
fireEvent.click(emailToggle);
});
expect(mockClient.setPusher).toHaveBeenCalledWith(expect.objectContaining({
kind: "email",
app_id: "m.email",
pushkey: testEmail,
app_display_name: "Email Notifications",
device_display_name: testEmail,
append: true,
}));
expect(mockClient.setPusher).toHaveBeenCalledWith(
expect.objectContaining({
kind: "email",
app_id: "m.email",
pushkey: testEmail,
app_display_name: "Email Notifications",
device_display_name: testEmail,
append: true,
}),
);
});
it('displays error when pusher update fails', async () => {
it("displays error when pusher update fails", async () => {
mockClient.setPusher.mockRejectedValue({});
await getComponentAndWait();
const emailToggle = screen.getByTestId('notif-email-switch')
.querySelector('div[role="switch"]');
const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]');
await act(async () => {
fireEvent.click(emailToggle);
@ -206,33 +342,34 @@ describe('<Notifications />', () => {
// force render
await flushPromises();
expect(screen.getByTestId('error-message')).toBeInTheDocument();
expect(screen.getByTestId("error-message")).toBeInTheDocument();
});
it('enables email notification when toggling off', async () => {
const testPusher = { kind: 'email', pushkey: 'tester@test.com' } as unknown as IPusher;
it("enables email notification when toggling off", async () => {
const testPusher = { kind: "email", pushkey: "tester@test.com" } as unknown as IPusher;
mockClient.getPushers.mockResolvedValue({ pushers: [testPusher] });
await getComponentAndWait();
const emailToggle = screen.getByTestId('notif-email-switch')
.querySelector('div[role="switch"]');
const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]');
await act(async () => {
fireEvent.click(emailToggle);
});
expect(mockClient.setPusher).toHaveBeenCalledWith({
...testPusher, kind: null,
...testPusher,
kind: null,
});
});
});
it('toggles and sets settings correctly', async () => {
it("toggles and sets settings correctly", async () => {
await getComponentAndWait();
let audioNotifsToggle;
const update = () => {
audioNotifsToggle = screen.getByTestId('notif-setting-audioNotificationsEnabled')
audioNotifsToggle = screen
.getByTestId("notif-setting-audioNotificationsEnabled")
.querySelector('div[role="switch"]');
};
update();
@ -240,7 +377,9 @@ describe('<Notifications />', () => {
expect(audioNotifsToggle.getAttribute("aria-checked")).toEqual("true");
expect(SettingsStore.getValue("audioNotificationsEnabled")).toEqual(true);
act(() => { fireEvent.click(audioNotifsToggle); });
act(() => {
fireEvent.click(audioNotifsToggle);
});
update();
expect(audioNotifsToggle.getAttribute("aria-checked")).toEqual("false");
@ -248,22 +387,22 @@ describe('<Notifications />', () => {
});
});
describe('individual notification level settings', () => {
it('renders categories correctly', async () => {
describe("individual notification level settings", () => {
it("renders categories correctly", async () => {
await getComponentAndWait();
expect(screen.getByTestId('notif-section-vector_global')).toBeInTheDocument();
expect(screen.getByTestId('notif-section-vector_mentions')).toBeInTheDocument();
expect(screen.getByTestId('notif-section-vector_other')).toBeInTheDocument();
expect(screen.getByTestId("notif-section-vector_global")).toBeInTheDocument();
expect(screen.getByTestId("notif-section-vector_mentions")).toBeInTheDocument();
expect(screen.getByTestId("notif-section-vector_other")).toBeInTheDocument();
});
it('renders radios correctly', async () => {
it("renders radios correctly", async () => {
await getComponentAndWait();
const section = 'vector_global';
const section = "vector_global";
const globalSection = screen.getByTestId(`notif-section-${section}`);
// 4 notification rules with class 'global'
expect(globalSection.querySelectorAll('fieldset').length).toEqual(4);
expect(globalSection.querySelectorAll("fieldset").length).toEqual(4);
// oneToOneRule is set to 'on'
const oneToOneRuleElement = screen.getByTestId(section + oneToOneRule.rule_id);
expect(oneToOneRuleElement.querySelector("[aria-label='On']")).toBeInTheDocument();
@ -275,9 +414,9 @@ describe('<Notifications />', () => {
expect(encryptedGroupElement.querySelector("[aria-label='Off']")).toBeInTheDocument();
});
it('updates notification level when changed', async () => {
it("updates notification level when changed", async () => {
await getComponentAndWait();
const section = 'vector_global';
const section = "vector_global";
// oneToOneRule is set to 'on'
// and is kind: 'underride'
@ -289,11 +428,19 @@ describe('<Notifications />', () => {
});
expect(mockClient.setPushRuleEnabled).toHaveBeenCalledWith(
'global', 'underride', oneToOneRule.rule_id, true);
"global",
"underride",
oneToOneRule.rule_id,
true,
);
// actions for '.m.rule.room_one_to_one' state is ACTION_DONT_NOTIFY
expect(mockClient.setPushRuleActions).toHaveBeenCalledWith(
'global', 'underride', oneToOneRule.rule_id, StandardActions.ACTION_DONT_NOTIFY);
"global",
"underride",
oneToOneRule.rule_id,
StandardActions.ACTION_DONT_NOTIFY,
);
});
});

31
test/components/views/settings/SettingsFieldset-test.tsx
View file

@ -12,35 +12,42 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { renderIntoDocument } from 'react-dom/test-utils';
import React from "react";
import { renderIntoDocument } from "react-dom/test-utils";
import SettingsFieldset from '../../../../src/components/views/settings/SettingsFieldset';
import SettingsFieldset from "../../../../src/components/views/settings/SettingsFieldset";
describe('<SettingsFieldset />', () => {
describe("<SettingsFieldset />", () => {
const defaultProps = {
"legend": 'Who can read history?',
"legend": "Who can read history?",
"children": <div>test</div>,
'data-test-id': 'test',
"data-test-id": "test",
};
const getComponent = (props = {}) => {
const wrapper = renderIntoDocument<HTMLDivElement>(
<div><SettingsFieldset {...defaultProps} {...props} /></div>,
<div>
<SettingsFieldset {...defaultProps} {...props} />
</div>,
) as HTMLDivElement;
return wrapper.children[0];
};
it('renders fieldset without description', () => {
it("renders fieldset without description", () => {
expect(getComponent()).toMatchSnapshot();
});
it('renders fieldset with plain text description', () => {
const description = 'Changes to who can read history.';
it("renders fieldset with plain text description", () => {
const description = "Changes to who can read history.";
expect(getComponent({ description })).toMatchSnapshot();
});
it('renders fieldset with react description', () => {
const description = <><p>Test</p><a href='#test'>a link</a></>;
it("renders fieldset with react description", () => {
const description = (
<>
<p>Test</p>
<a href="#test">a link</a>
</>
);
expect(getComponent({ description })).toMatchSnapshot();
});
});

27
test/components/views/settings/ThemeChoicePanel-test.tsx
View file

@ -14,28 +14,23 @@ 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 React from "react";
import { render } from "@testing-library/react";
import * as TestUtils from "../../../test-utils";
import ThemeChoicePanel from '../../../../src/components/views/settings/ThemeChoicePanel';
import ThemeChoicePanel from "../../../../src/components/views/settings/ThemeChoicePanel";
// Fake random strings to give a predictable snapshot
jest.mock(
'matrix-js-sdk/src/randomstring',
() => {
return {
randomString: () => "abdefghi",
};
},
);
jest.mock("matrix-js-sdk/src/randomstring", () => {
return {
randomString: () => "abdefghi",
};
});
describe('ThemeChoicePanel', () => {
it('renders the theme choice UI', () => {
describe("ThemeChoicePanel", () => {
it("renders the theme choice UI", () => {
TestUtils.stubClient();
const { asFragment } = render(
<ThemeChoicePanel />,
);
const { asFragment } = render(<ThemeChoicePanel />);
expect(asFragment()).toMatchSnapshot();
});
});

20
test/components/views/settings/UiFeatureSettingWrapper-test.tsx
View file

@ -14,16 +14,16 @@ 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 React from "react";
import { render } from "@testing-library/react";
import SettingsStore from '../../../../src/settings/SettingsStore';
import UiFeatureSettingWrapper from '../../../../src/components/views/settings/UiFeatureSettingWrapper';
import { UIFeature } from '../../../../src/settings/UIFeature';
import SettingsStore from "../../../../src/settings/SettingsStore";
import UiFeatureSettingWrapper from "../../../../src/components/views/settings/UiFeatureSettingWrapper";
import { UIFeature } from "../../../../src/settings/UIFeature";
jest.mock('../../../../src/settings/SettingsStore');
jest.mock("../../../../src/settings/SettingsStore");
describe('<UiFeatureSettingWrapper>', () => {
describe("<UiFeatureSettingWrapper>", () => {
const defaultProps = {
uiFeature: UIFeature.Feedback,
children: <div>test</div>,
@ -34,20 +34,20 @@ describe('<UiFeatureSettingWrapper>', () => {
(SettingsStore.getValue as jest.Mock).mockClear().mockReturnValue(true);
});
it('renders children when setting is truthy', () => {
it("renders children when setting is truthy", () => {
const { asFragment } = getComponent();
expect(asFragment()).toMatchSnapshot();
expect(SettingsStore.getValue).toHaveBeenCalledWith(defaultProps.uiFeature);
});
it('returns null when setting is truthy but children are undefined', () => {
it("returns null when setting is truthy but children are undefined", () => {
const { asFragment } = getComponent({ children: undefined });
expect(asFragment()).toMatchSnapshot();
});
it('returns null when setting is falsy', () => {
it("returns null when setting is falsy", () => {
(SettingsStore.getValue as jest.Mock).mockReturnValue(false);
const { asFragment } = getComponent();

43
test/components/views/settings/devices/CurrentDeviceSection-test.tsx
View file

@ -14,15 +14,15 @@ 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 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';
import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
import CurrentDeviceSection from "../../../../../src/components/views/settings/devices/CurrentDeviceSection";
import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
describe('<CurrentDeviceSection />', () => {
const deviceId = 'alices_device';
describe("<CurrentDeviceSection />", () => {
const deviceId = "alices_device";
const alicesVerifiedDevice = {
device_id: deviceId,
@ -44,60 +44,59 @@ describe('<CurrentDeviceSection />', () => {
isSigningOut: false,
};
const getComponent = (props = {}): React.ReactElement =>
(<CurrentDeviceSection {...defaultProps} {...props} />);
const getComponent = (props = {}): React.ReactElement => <CurrentDeviceSection {...defaultProps} {...props} />;
it('renders spinner while device is loading', () => {
it("renders spinner while device is loading", () => {
const { container } = render(getComponent({ device: undefined, isLoading: true }));
expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
expect(container.getElementsByClassName("mx_Spinner").length).toBeTruthy();
});
it('handles when device is falsy', async () => {
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', () => {
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', () => {
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 main tile click', () => {
it("displays device details on main tile click", () => {
const { getByTestId, container } = render(getComponent({ device: alicesUnverifiedDevice }));
act(() => {
fireEvent.click(getByTestId(`device-tile-${alicesUnverifiedDevice.device_id}`));
});
expect(container.getElementsByClassName('mx_DeviceDetails').length).toBeTruthy();
expect(container.getElementsByClassName("mx_DeviceDetails").length).toBeTruthy();
act(() => {
fireEvent.click(getByTestId(`device-tile-${alicesUnverifiedDevice.device_id}`));
});
// device details are hidden
expect(container.getElementsByClassName('mx_DeviceDetails').length).toBeFalsy();
expect(container.getElementsByClassName("mx_DeviceDetails").length).toBeFalsy();
});
it('displays device details on toggle click', () => {
it("displays device details on toggle click", () => {
const { container, getByTestId } = render(getComponent({ device: alicesUnverifiedDevice }));
act(() => {
fireEvent.click(getByTestId('current-session-toggle-details'));
fireEvent.click(getByTestId("current-session-toggle-details"));
});
expect(container.getElementsByClassName('mx_DeviceDetails')).toMatchSnapshot();
expect(container.getElementsByClassName("mx_DeviceDetails")).toMatchSnapshot();
act(() => {
fireEvent.click(getByTestId('current-session-toggle-details'));
fireEvent.click(getByTestId("current-session-toggle-details"));
});
// device details are hidden
expect(container.getElementsByClassName('mx_DeviceDetails').length).toBeFalsy();
expect(container.getElementsByClassName("mx_DeviceDetails").length).toBeFalsy();
});
});

103
test/components/views/settings/devices/DeviceDetailHeading-test.tsx
View file

@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { fireEvent, render, RenderResult } from '@testing-library/react';
import React from "react";
import { fireEvent, render, RenderResult } from "@testing-library/react";
import { DeviceDetailHeading } from '../../../../../src/components/views/settings/devices/DeviceDetailHeading';
import { flushPromisesWithFakeTimers } from '../../../../test-utils';
import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
import { DeviceDetailHeading } from "../../../../../src/components/views/settings/devices/DeviceDetailHeading";
import { flushPromisesWithFakeTimers } from "../../../../test-utils";
import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
jest.useFakeTimers();
describe('<DeviceDetailHeading />', () => {
describe("<DeviceDetailHeading />", () => {
const device = {
device_id: '123',
display_name: 'My device',
device_id: "123",
display_name: "My device",
isVerified: true,
deviceType: DeviceType.Unknown,
};
@ -34,104 +34,101 @@ describe('<DeviceDetailHeading />', () => {
device,
saveDeviceName: jest.fn(),
};
const getComponent = (props = {}) =>
<DeviceDetailHeading {...defaultProps} {...props} />;
const getComponent = (props = {}) => <DeviceDetailHeading {...defaultProps} {...props} />;
const setInputValue = (getByTestId: RenderResult['getByTestId'], value: string) => {
const input = getByTestId('device-rename-input');
const setInputValue = (getByTestId: RenderResult["getByTestId"], value: string) => {
const input = getByTestId("device-rename-input");
fireEvent.change(input, { target: { value } });
};
it('renders device name', () => {
it("renders device name", () => {
const { container } = render(getComponent());
expect({ container }).toMatchSnapshot();
});
it('renders device id as fallback when device has no display name ', () => {
const { getByText } = render(getComponent({
device: { ...device, display_name: undefined },
}));
it("renders device id as fallback when device has no display name ", () => {
const { getByText } = render(
getComponent({
device: { ...device, display_name: undefined },
}),
);
expect(getByText(device.device_id)).toBeTruthy();
});
it('displays name edit form on rename button click', () => {
it("displays name edit form on rename button click", () => {
const { getByTestId, container } = render(getComponent());
fireEvent.click(getByTestId('device-heading-rename-cta'));
fireEvent.click(getByTestId("device-heading-rename-cta"));
expect({ container }).toMatchSnapshot();
});
it('cancelling edit switches back to original display', () => {
it("cancelling edit switches back to original display", () => {
const { getByTestId, container } = render(getComponent());
// start editing
fireEvent.click(getByTestId('device-heading-rename-cta'));
fireEvent.click(getByTestId("device-heading-rename-cta"));
// stop editing
fireEvent.click(getByTestId('device-rename-cancel-cta'));
fireEvent.click(getByTestId("device-rename-cancel-cta"));
expect(container.getElementsByClassName('mx_DeviceDetailHeading').length).toBe(1);
expect(container.getElementsByClassName("mx_DeviceDetailHeading").length).toBe(1);
});
it('clicking submit updates device name with edited value', () => {
it("clicking submit updates device name with edited value", () => {
const saveDeviceName = jest.fn();
const { getByTestId } = render(getComponent({ saveDeviceName }));
// start editing
fireEvent.click(getByTestId('device-heading-rename-cta'));
fireEvent.click(getByTestId("device-heading-rename-cta"));
setInputValue(getByTestId, 'new device name');
setInputValue(getByTestId, "new device name");
fireEvent.click(getByTestId('device-rename-submit-cta'));
fireEvent.click(getByTestId("device-rename-submit-cta"));
expect(saveDeviceName).toHaveBeenCalledWith('new device name');
expect(saveDeviceName).toHaveBeenCalledWith("new device name");
});
it('disables form while device name is saving', () => {
it("disables form while device name is saving", () => {
const { getByTestId, container } = render(getComponent());
// start editing
fireEvent.click(getByTestId('device-heading-rename-cta'));
fireEvent.click(getByTestId("device-heading-rename-cta"));
setInputValue(getByTestId, 'new device name');
setInputValue(getByTestId, "new device name");
fireEvent.click(getByTestId('device-rename-submit-cta'));
fireEvent.click(getByTestId("device-rename-submit-cta"));
// buttons disabled
expect(
getByTestId('device-rename-cancel-cta').getAttribute('aria-disabled'),
).toEqual("true");
expect(
getByTestId('device-rename-submit-cta').getAttribute('aria-disabled'),
).toEqual("true");
expect(getByTestId("device-rename-cancel-cta").getAttribute("aria-disabled")).toEqual("true");
expect(getByTestId("device-rename-submit-cta").getAttribute("aria-disabled")).toEqual("true");
expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
expect(container.getElementsByClassName("mx_Spinner").length).toBeTruthy();
});
it('toggles out of editing mode when device name is saved successfully', async () => {
it("toggles out of editing mode when device name is saved successfully", async () => {
const { getByTestId } = render(getComponent());
// start editing
fireEvent.click(getByTestId('device-heading-rename-cta'));
setInputValue(getByTestId, 'new device name');
fireEvent.click(getByTestId('device-rename-submit-cta'));
fireEvent.click(getByTestId("device-heading-rename-cta"));
setInputValue(getByTestId, "new device name");
fireEvent.click(getByTestId("device-rename-submit-cta"));
await flushPromisesWithFakeTimers();
// read mode displayed
expect(getByTestId('device-detail-heading')).toBeTruthy();
expect(getByTestId("device-detail-heading")).toBeTruthy();
});
it('displays error when device name fails to save', async () => {
const saveDeviceName = jest.fn().mockRejectedValueOnce('oups').mockResolvedValue({});
it("displays error when device name fails to save", async () => {
const saveDeviceName = jest.fn().mockRejectedValueOnce("oups").mockResolvedValue({});
const { getByTestId, queryByText, container } = render(getComponent({ saveDeviceName }));
// start editing
fireEvent.click(getByTestId('device-heading-rename-cta'));
setInputValue(getByTestId, 'new device name');
fireEvent.click(getByTestId('device-rename-submit-cta'));
fireEvent.click(getByTestId("device-heading-rename-cta"));
setInputValue(getByTestId, "new device name");
fireEvent.click(getByTestId("device-rename-submit-cta"));
// flush promise
await flushPromisesWithFakeTimers();
@ -139,14 +136,14 @@ describe('<DeviceDetailHeading />', () => {
await flushPromisesWithFakeTimers();
// error message displayed
expect(queryByText('Failed to set display name')).toBeTruthy();
expect(queryByText("Failed to set display name")).toBeTruthy();
// spinner removed
expect(container.getElementsByClassName('mx_Spinner').length).toBeFalsy();
expect(container.getElementsByClassName("mx_Spinner").length).toBeFalsy();
// try again
fireEvent.click(getByTestId('device-rename-submit-cta'));
fireEvent.click(getByTestId("device-rename-submit-cta"));
// error message cleared
expect(queryByText('Failed to set display name')).toBeFalsy();
expect(queryByText("Failed to set display name")).toBeFalsy();
});
});

130
test/components/views/settings/devices/DeviceDetails-test.tsx
View file

@ -14,17 +14,17 @@ 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 { PUSHER_ENABLED } from 'matrix-js-sdk/src/@types/event';
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { PUSHER_ENABLED } from "matrix-js-sdk/src/@types/event";
import DeviceDetails from '../../../../../src/components/views/settings/devices/DeviceDetails';
import { mkPusher } from '../../../../test-utils/test-utils';
import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
import DeviceDetails from "../../../../../src/components/views/settings/devices/DeviceDetails";
import { mkPusher } from "../../../../test-utils/test-utils";
import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
describe('<DeviceDetails />', () => {
describe("<DeviceDetails />", () => {
const baseDevice = {
device_id: 'my-device',
device_id: "my-device",
isVerified: false,
deviceType: DeviceType.Unknown,
};
@ -49,27 +49,27 @@ describe('<DeviceDetails />', () => {
jest.setSystemTime(now);
});
it('renders device without metadata', () => {
it("renders device without metadata", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders device with metadata', () => {
it("renders device with metadata", () => {
const device = {
...baseDevice,
display_name: 'My Device',
last_seen_ip: '123.456.789',
display_name: "My Device",
last_seen_ip: "123.456.789",
last_seen_ts: now - 60000000,
appName: 'Element Web',
client: 'Firefox 100',
deviceModel: 'Iphone X',
deviceOperatingSystem: 'Windows 95',
appName: "Element Web",
client: "Firefox 100",
deviceModel: "Iphone X",
deviceOperatingSystem: "Windows 95",
};
const { container } = render(getComponent({ device }));
expect(container).toMatchSnapshot();
});
it('renders a verified device', () => {
it("renders a verified device", () => {
const device = {
...baseDevice,
isVerified: true,
@ -78,17 +78,15 @@ describe('<DeviceDetails />', () => {
expect(container).toMatchSnapshot();
});
it('disables sign out button while sign out is pending', () => {
it("disables sign out button while sign out is pending", () => {
const device = {
...baseDevice,
};
const { getByTestId } = render(getComponent({ device, isSigningOut: true }));
expect(
getByTestId('device-detail-sign-out-cta').getAttribute('aria-disabled'),
).toEqual("true");
expect(getByTestId("device-detail-sign-out-cta").getAttribute("aria-disabled")).toEqual("true");
});
it('renders the push notification section when a pusher exists', () => {
it("renders the push notification section when a pusher exists", () => {
const device = {
...baseDevice,
};
@ -96,30 +94,34 @@ describe('<DeviceDetails />', () => {
device_id: device.device_id,
});
const { getByTestId } = render(getComponent({
device,
pusher,
isSigningOut: true,
}));
const { getByTestId } = render(
getComponent({
device,
pusher,
isSigningOut: true,
}),
);
expect(getByTestId('device-detail-push-notification')).toBeTruthy();
expect(getByTestId("device-detail-push-notification")).toBeTruthy();
});
it('hides the push notification section when no pusher', () => {
it("hides the push notification section when no pusher", () => {
const device = {
...baseDevice,
};
const { getByTestId } = render(getComponent({
device,
pusher: null,
isSigningOut: true,
}));
const { getByTestId } = render(
getComponent({
device,
pusher: null,
isSigningOut: true,
}),
);
expect(() => getByTestId('device-detail-push-notification')).toThrow();
expect(() => getByTestId("device-detail-push-notification")).toThrow();
});
it('disables the checkbox when there is no server support', () => {
it("disables the checkbox when there is no server support", () => {
const device = {
...baseDevice,
};
@ -128,20 +130,22 @@ describe('<DeviceDetails />', () => {
[PUSHER_ENABLED.name]: false,
});
const { getByTestId } = render(getComponent({
device,
pusher,
isSigningOut: true,
supportsMSC3881: false,
}));
const { getByTestId } = render(
getComponent({
device,
pusher,
isSigningOut: true,
supportsMSC3881: false,
}),
);
const checkbox = getByTestId('device-detail-push-notification-checkbox');
const checkbox = getByTestId("device-detail-push-notification-checkbox");
expect(checkbox.getAttribute('aria-disabled')).toEqual("true");
expect(checkbox.getAttribute('aria-checked')).toEqual("false");
expect(checkbox.getAttribute("aria-disabled")).toEqual("true");
expect(checkbox.getAttribute("aria-checked")).toEqual("false");
});
it('changes the pusher status when clicked', () => {
it("changes the pusher status when clicked", () => {
const device = {
...baseDevice,
};
@ -153,35 +157,39 @@ describe('<DeviceDetails />', () => {
[PUSHER_ENABLED.name]: enabled,
});
const { getByTestId } = render(getComponent({
device,
pusher,
isSigningOut: true,
}));
const { getByTestId } = render(
getComponent({
device,
pusher,
isSigningOut: true,
}),
);
const checkbox = getByTestId('device-detail-push-notification-checkbox');
const checkbox = getByTestId("device-detail-push-notification-checkbox");
fireEvent.click(checkbox);
expect(defaultProps.setPushNotifications).toHaveBeenCalledWith(device.device_id, !enabled);
});
it('changes the local notifications settings status when clicked', () => {
it("changes the local notifications settings status when clicked", () => {
const device = {
...baseDevice,
};
const enabled = false;
const { getByTestId } = render(getComponent({
device,
localNotificationSettings: {
is_silenced: !enabled,
},
isSigningOut: true,
}));
const { getByTestId } = render(
getComponent({
device,
localNotificationSettings: {
is_silenced: !enabled,
},
isSigningOut: true,
}),
);
const checkbox = getByTestId('device-detail-push-notification-checkbox');
const checkbox = getByTestId("device-detail-push-notification-checkbox");
fireEvent.click(checkbox);
expect(defaultProps.setPushNotifications).toHaveBeenCalledWith(device.device_id, !enabled);

23
test/components/views/settings/devices/DeviceExpandDetailsButton-test.tsx
View file

@ -14,35 +14,32 @@ 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 React from "react";
import { fireEvent, render } from "@testing-library/react";
import {
DeviceExpandDetailsButton,
} from '../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton';
import { DeviceExpandDetailsButton } from "../../../../../src/components/views/settings/devices/DeviceExpandDetailsButton";
describe('<DeviceExpandDetailsButton />', () => {
describe("<DeviceExpandDetailsButton />", () => {
const defaultProps = {
isExpanded: false,
onClick: jest.fn(),
};
const getComponent = (props = {}) =>
<DeviceExpandDetailsButton {...defaultProps} {...props} />;
const getComponent = (props = {}) => <DeviceExpandDetailsButton {...defaultProps} {...props} />;
it('renders when not expanded', () => {
it("renders when not expanded", () => {
const { container } = render(getComponent());
expect({ container }).toMatchSnapshot();
});
it('renders when expanded', () => {
it("renders when expanded", () => {
const { container } = render(getComponent({ isExpanded: true }));
expect({ container }).toMatchSnapshot();
});
it('calls onClick', () => {
it("calls onClick", () => {
const onClick = jest.fn();
const { getByTestId } = render(getComponent({ 'data-testid': 'test', onClick }));
fireEvent.click(getByTestId('test'));
const { getByTestId } = render(getComponent({ "data-testid": "test", onClick }));
fireEvent.click(getByTestId("test"));
expect(onClick).toHaveBeenCalled();
});

31
test/components/views/settings/devices/DeviceSecurityCard-test.tsx
View file

@ -14,31 +14,32 @@ 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 { 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';
import DeviceSecurityCard from "../../../../../src/components/views/settings/devices/DeviceSecurityCard";
import { DeviceSecurityVariation } from "../../../../../src/components/views/settings/devices/types";
describe('<DeviceSecurityCard />', () => {
describe("<DeviceSecurityCard />", () => {
const defaultProps = {
variation: DeviceSecurityVariation.Verified,
heading: 'Verified session',
description: 'nice',
heading: "Verified session",
description: "nice",
};
const getComponent = (props = {}): React.ReactElement =>
<DeviceSecurityCard {...defaultProps} {...props} />;
const getComponent = (props = {}): React.ReactElement => <DeviceSecurityCard {...defaultProps} {...props} />;
it('renders basic card', () => {
it("renders basic card", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders with children', () => {
const { container } = render(getComponent({
children: <div>hey</div>,
variation: DeviceSecurityVariation.Unverified,
}));
it("renders with children", () => {
const { container } = render(
getComponent({
children: <div>hey</div>,
variation: DeviceSecurityVariation.Unverified,
}),
);
expect(container).toMatchSnapshot();
});
});

96
test/components/views/settings/devices/DeviceTile-test.tsx
View file

@ -14,24 +14,22 @@ 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 { IMyDevice } from 'matrix-js-sdk/src/matrix';
import React from "react";
import { render } from "@testing-library/react";
import { IMyDevice } from "matrix-js-sdk/src/matrix";
import DeviceTile from '../../../../../src/components/views/settings/devices/DeviceTile';
import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
import DeviceTile from "../../../../../src/components/views/settings/devices/DeviceTile";
import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
describe('<DeviceTile />', () => {
describe("<DeviceTile />", () => {
const defaultProps = {
device: {
device_id: '123',
device_id: "123",
isVerified: false,
deviceType: DeviceType.Unknown,
},
};
const getComponent = (props = {}) => (
<DeviceTile {...defaultProps} {...props} />
);
const getComponent = (props = {}) => <DeviceTile {...defaultProps} {...props} />;
// 14.03.2022 16:15
const now = 1647270879403;
@ -41,96 +39,94 @@ describe('<DeviceTile />', () => {
jest.setSystemTime(now);
});
it('renders a device with no metadata', () => {
it("renders a device with no metadata", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('applies interactive class when tile has click handler', () => {
it("applies interactive class when tile has click handler", () => {
const onClick = jest.fn();
const { getByTestId } = render(getComponent({ onClick }));
expect(
getByTestId('device-tile-123').className.includes('mx_DeviceTile_interactive'),
).toBeTruthy();
expect(getByTestId("device-tile-123").className.includes("mx_DeviceTile_interactive")).toBeTruthy();
});
it('renders a verified device with no metadata', () => {
it("renders a verified device with no metadata", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders display name with a tooltip', () => {
it("renders display name with a tooltip", () => {
const device: IMyDevice = {
device_id: '123',
display_name: 'My device',
device_id: "123",
display_name: "My device",
};
const { container } = render(getComponent({ device }));
expect(container).toMatchSnapshot();
});
it('renders last seen ip metadata', () => {
it("renders last seen ip metadata", () => {
const device: IMyDevice = {
device_id: '123',
display_name: 'My device',
last_seen_ip: '1.2.3.4',
device_id: "123",
display_name: "My device",
last_seen_ip: "1.2.3.4",
};
const { getByTestId } = render(getComponent({ device }));
expect(getByTestId('device-metadata-lastSeenIp').textContent).toEqual(device.last_seen_ip);
expect(getByTestId("device-metadata-lastSeenIp").textContent).toEqual(device.last_seen_ip);
});
it('separates metadata with a dot', () => {
it("separates metadata with a dot", () => {
const device: IMyDevice = {
device_id: '123',
last_seen_ip: '1.2.3.4',
device_id: "123",
last_seen_ip: "1.2.3.4",
last_seen_ts: now - 60000,
};
const { container } = render(getComponent({ device }));
expect(container).toMatchSnapshot();
});
describe('Last activity', () => {
describe("Last activity", () => {
const MS_DAY = 24 * 60 * 60 * 1000;
it('renders with day of week and time when last activity is less than 6 days ago', () => {
it("renders with day of week and time when last activity is less than 6 days ago", () => {
const device: IMyDevice = {
device_id: '123',
last_seen_ip: '1.2.3.4',
last_seen_ts: now - (MS_DAY * 3),
device_id: "123",
last_seen_ip: "1.2.3.4",
last_seen_ts: now - MS_DAY * 3,
};
const { getByTestId } = render(getComponent({ device }));
expect(getByTestId('device-metadata-lastActivity').textContent).toEqual('Last activity Fri 15:14');
expect(getByTestId("device-metadata-lastActivity").textContent).toEqual("Last activity Fri 15:14");
});
it('renders with month and date when last activity is more than 6 days ago', () => {
it("renders with month and date when last activity is more than 6 days ago", () => {
const device: IMyDevice = {
device_id: '123',
last_seen_ip: '1.2.3.4',
last_seen_ts: now - (MS_DAY * 8),
device_id: "123",
last_seen_ip: "1.2.3.4",
last_seen_ts: now - MS_DAY * 8,
};
const { getByTestId } = render(getComponent({ device }));
expect(getByTestId('device-metadata-lastActivity').textContent).toEqual('Last activity Mar 6');
expect(getByTestId("device-metadata-lastActivity").textContent).toEqual("Last activity Mar 6");
});
it('renders with month, date, year when activity is in a different calendar year', () => {
it("renders with month, date, year when activity is in a different calendar year", () => {
const device: IMyDevice = {
device_id: '123',
last_seen_ip: '1.2.3.4',
last_seen_ts: new Date('2021-12-29').getTime(),
device_id: "123",
last_seen_ip: "1.2.3.4",
last_seen_ts: new Date("2021-12-29").getTime(),
};
const { getByTestId } = render(getComponent({ device }));
expect(getByTestId('device-metadata-lastActivity').textContent).toEqual('Last activity Dec 29, 2021');
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', () => {
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),
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)');
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();
expect(queryByTestId("device-metadata-lastActivity")).toBeFalsy();
expect(queryByTestId("device-metadata-verificationStatus")).toBeFalsy();
});
});
});

39
test/components/views/settings/devices/DeviceTypeIcon-test.tsx
View file

@ -14,61 +14,60 @@ 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 { render } from "@testing-library/react";
import React from "react";
import { DeviceTypeIcon } from '../../../../../src/components/views/settings/devices/DeviceTypeIcon';
import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
import { DeviceTypeIcon } from "../../../../../src/components/views/settings/devices/DeviceTypeIcon";
import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
describe('<DeviceTypeIcon />', () => {
describe("<DeviceTypeIcon />", () => {
const defaultProps = {
isVerified: false,
isSelected: false,
};
const getComponent = (props = {}) =>
<DeviceTypeIcon {...defaultProps} {...props} />;
const getComponent = (props = {}) => <DeviceTypeIcon {...defaultProps} {...props} />;
it('renders an unverified device', () => {
it("renders an unverified device", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders a verified device', () => {
it("renders a verified device", () => {
const { container } = render(getComponent({ isVerified: true }));
expect(container).toMatchSnapshot();
});
it('renders correctly when selected', () => {
it("renders correctly when selected", () => {
const { container } = render(getComponent({ isSelected: true }));
expect(container).toMatchSnapshot();
});
it('renders an unknown device icon when no device type given', () => {
it("renders an unknown device icon when no device type given", () => {
const { getByLabelText } = render(getComponent());
expect(getByLabelText('Unknown session type')).toBeTruthy();
expect(getByLabelText("Unknown session type")).toBeTruthy();
});
it('renders a desktop device type', () => {
it("renders a desktop device type", () => {
const deviceType = DeviceType.Desktop;
const { getByLabelText } = render(getComponent({ deviceType }));
expect(getByLabelText('Desktop session')).toBeTruthy();
expect(getByLabelText("Desktop session")).toBeTruthy();
});
it('renders a web device type', () => {
it("renders a web device type", () => {
const deviceType = DeviceType.Web;
const { getByLabelText } = render(getComponent({ deviceType }));
expect(getByLabelText('Web session')).toBeTruthy();
expect(getByLabelText("Web session")).toBeTruthy();
});
it('renders a mobile device type', () => {
it("renders a mobile device type", () => {
const deviceType = DeviceType.Mobile;
const { getByLabelText } = render(getComponent({ deviceType }));
expect(getByLabelText('Mobile session')).toBeTruthy();
expect(getByLabelText("Mobile session")).toBeTruthy();
});
it('renders an unknown device type', () => {
it("renders an unknown device type", () => {
const deviceType = DeviceType.Unknown;
const { getByLabelText } = render(getComponent({ deviceType }));
expect(getByLabelText('Unknown session type')).toBeTruthy();
expect(getByLabelText("Unknown session type")).toBeTruthy();
});
});

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

@ -14,43 +14,46 @@ 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 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';
import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
import { FilteredDeviceList } from "../../../../../src/components/views/settings/devices/FilteredDeviceList";
import { DeviceSecurityVariation } from "../../../../../src/components/views/settings/devices/types";
import { flushPromises, mockPlatformPeg } from "../../../../test-utils";
import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
mockPlatformPeg();
const MS_DAY = 86400000;
describe('<FilteredDeviceList />', () => {
describe("<FilteredDeviceList />", () => {
const newDevice = {
device_id: 'new',
device_id: "new",
last_seen_ts: Date.now() - 500,
last_seen_ip: '123.456.789',
display_name: 'My Device',
last_seen_ip: "123.456.789",
display_name: "My Device",
isVerified: true,
deviceType: DeviceType.Unknown,
};
const unverifiedNoMetadata = {
device_id: 'unverified-no-metadata',
device_id: "unverified-no-metadata",
isVerified: false,
deviceType: DeviceType.Unknown };
deviceType: DeviceType.Unknown,
};
const verifiedNoMetadata = {
device_id: 'verified-no-metadata',
device_id: "verified-no-metadata",
isVerified: true,
deviceType: DeviceType.Unknown };
deviceType: DeviceType.Unknown,
};
const hundredDaysOld = {
device_id: '100-days-old',
device_id: "100-days-old",
isVerified: true,
last_seen_ts: Date.now() - (MS_DAY * 100),
deviceType: DeviceType.Unknown };
last_seen_ts: Date.now() - MS_DAY * 100,
deviceType: DeviceType.Unknown,
};
const hundredDaysOldUnverified = {
device_id: 'unverified-100-days-old',
device_id: "unverified-100-days-old",
isVerified: false,
last_seen_ts: Date.now() - (MS_DAY * 100),
last_seen_ts: Date.now() - MS_DAY * 100,
deviceType: DeviceType.Unknown,
};
const defaultProps = {
@ -76,20 +79,19 @@ describe('<FilteredDeviceList />', () => {
supportsMSC3881: true,
};
const getComponent = (props = {}) =>
(<FilteredDeviceList {...defaultProps} {...props} />);
const getComponent = (props = {}) => <FilteredDeviceList {...defaultProps} {...props} />;
it('renders devices in correct order', () => {
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}`);
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', () => {
it("updates list order when devices change", () => {
const updatedOldDevice = { ...hundredDaysOld, last_seen_ts: new Date().getTime() };
const updatedDevices = {
[hundredDaysOld.device_id]: updatedOldDevice,
@ -99,58 +101,56 @@ describe('<FilteredDeviceList />', () => {
rerender(getComponent({ devices: updatedDevices }));
const tiles = container.querySelectorAll('.mx_DeviceTile');
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}`);
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', () => {
it("displays no results message when there are no devices", () => {
const { container } = render(getComponent({ devices: {} }));
expect(container.getElementsByClassName('mx_FilteredDeviceList_noResults')).toMatchSnapshot();
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"]');
describe("filtering", () => {
const setFilter = async (container: HTMLElement, option: DeviceSecurityVariation | string) =>
await act(async () => {
const dropdown = container.querySelector('[aria-label="Filter devices"]');
fireEvent.click(dropdown as Element);
// tick to let dropdown render
await flushPromises();
fireEvent.click(dropdown as Element);
// tick to let dropdown render
await flushPromises();
fireEvent.click(container.querySelector(`#device-list-filter__${option}`) as Element);
});
fireEvent.click(container.querySelector(`#device-list-filter__${option}`) as Element);
});
it('does not display filter description when filter is falsy', () => {
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();
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', () => {
it("updates filter when prop changes", () => {
const { container, rerender } = render(getComponent({ filter: DeviceSecurityVariation.Verified }));
const tiles = container.querySelectorAll('.mx_DeviceTile');
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}`);
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');
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(
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 () => {
it("calls onFilterChange handler", async () => {
const onFilterChange = jest.fn();
const { container } = render(getComponent({ onFilterChange }));
await setFilter(container, DeviceSecurityVariation.Verified);
@ -158,10 +158,10 @@ describe('<FilteredDeviceList />', () => {
expect(onFilterChange).toHaveBeenCalledWith(DeviceSecurityVariation.Verified);
});
it('calls onFilterChange handler correctly when setting filter to All', async () => {
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');
await setFilter(container, "ALL");
// filter is cleared
expect(onFilterChange).toHaveBeenCalledWith(undefined);
@ -171,51 +171,54 @@ describe('<FilteredDeviceList />', () => {
[DeviceSecurityVariation.Verified, [newDevice, hundredDaysOld, verifiedNoMetadata]],
[DeviceSecurityVariation.Unverified, [hundredDaysOldUnverified, unverifiedNoMetadata]],
[DeviceSecurityVariation.Inactive, [hundredDaysOld, hundredDaysOldUnverified]],
])('filters correctly for %s', (filter, expectedDevices) => {
])("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}`));
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) => {
])("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();
expect(container.getElementsByClassName("mx_FilteredDeviceList_securityCard").length).toBeFalsy();
expect(container.getElementsByClassName("mx_FilteredDeviceList_noResults")).toMatchSnapshot();
});
it('clears filter from no results message', () => {
it("clears filter from no results message", () => {
const onFilterChange = jest.fn();
const { getByTestId } = render(getComponent({
onFilterChange,
filter: DeviceSecurityVariation.Verified,
devices: {
[unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
},
}));
const { getByTestId } = render(
getComponent({
onFilterChange,
filter: DeviceSecurityVariation.Verified,
devices: {
[unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
},
}),
);
act(() => {
fireEvent.click(getByTestId('devices-clear-filter-btn'));
fireEvent.click(getByTestId("devices-clear-filter-btn"));
});
expect(onFilterChange).toHaveBeenCalledWith(undefined);
});
});
describe('device details', () => {
it('renders expanded devices with device details', () => {
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(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', () => {
it("clicking toggle calls onDeviceExpandToggle", () => {
const onDeviceExpandToggle = jest.fn();
const { getByTestId } = render(getComponent({ onDeviceExpandToggle }));

24
test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
View file

@ -14,40 +14,40 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { fireEvent, render } from "@testing-library/react";
import React from "react";
import FilteredDeviceListHeader from '../../../../../src/components/views/settings/devices/FilteredDeviceListHeader';
import FilteredDeviceListHeader from "../../../../../src/components/views/settings/devices/FilteredDeviceListHeader";
describe('<FilteredDeviceListHeader />', () => {
describe("<FilteredDeviceListHeader />", () => {
const defaultProps = {
selectedDeviceCount: 0,
isAllSelected: false,
toggleSelectAll: jest.fn(),
children: <div>test</div>,
['data-testid']: 'test123',
["data-testid"]: "test123",
};
const getComponent = (props = {}) => (<FilteredDeviceListHeader {...defaultProps} {...props} />);
const getComponent = (props = {}) => <FilteredDeviceListHeader {...defaultProps} {...props} />;
it('renders correctly when no devices are selected', () => {
it("renders correctly when no devices are selected", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders correctly when all devices are selected', () => {
it("renders correctly when all devices are selected", () => {
const { container } = render(getComponent({ isAllSelected: true }));
expect(container).toMatchSnapshot();
});
it('renders correctly when some devices are selected', () => {
it("renders correctly when some devices are selected", () => {
const { getByText } = render(getComponent({ selectedDeviceCount: 2 }));
expect(getByText('2 sessions selected')).toBeTruthy();
expect(getByText("2 sessions selected")).toBeTruthy();
});
it('clicking checkbox toggles selection', () => {
it("clicking checkbox toggles selection", () => {
const toggleSelectAll = jest.fn();
const { getByTestId } = render(getComponent({ toggleSelectAll }));
fireEvent.click(getByTestId('device-select-all-checkbox'));
fireEvent.click(getByTestId("device-select-all-checkbox"));
expect(toggleSelectAll).toHaveBeenCalled();
});

176
test/components/views/settings/devices/LoginWithQR-test.tsx
View file

@ -14,21 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { cleanup, render, waitFor } from '@testing-library/react';
import { mocked } from 'jest-mock';
import React from 'react';
import { MSC3906Rendezvous, RendezvousFailureReason } from 'matrix-js-sdk/src/rendezvous';
import { cleanup, render, waitFor } from "@testing-library/react";
import { mocked } from "jest-mock";
import React from "react";
import { MSC3906Rendezvous, RendezvousFailureReason } from "matrix-js-sdk/src/rendezvous";
import LoginWithQR, { Click, Mode, Phase } from '../../../../../src/components/views/auth/LoginWithQR';
import type { MatrixClient } from 'matrix-js-sdk/src/matrix';
import LoginWithQR, { Click, Mode, Phase } from "../../../../../src/components/views/auth/LoginWithQR";
import type { MatrixClient } from "matrix-js-sdk/src/matrix";
jest.mock('matrix-js-sdk/src/rendezvous');
jest.mock('matrix-js-sdk/src/rendezvous/transports');
jest.mock('matrix-js-sdk/src/rendezvous/channels');
jest.mock("matrix-js-sdk/src/rendezvous");
jest.mock("matrix-js-sdk/src/rendezvous/transports");
jest.mock("matrix-js-sdk/src/rendezvous/channels");
const mockedFlow = jest.fn();
jest.mock('../../../../../src/components/views/auth/LoginWithQRFlow', () => (props) => {
jest.mock("../../../../../src/components/views/auth/LoginWithQRFlow", () => (props) => {
mockedFlow(props);
return <div />;
});
@ -43,7 +43,7 @@ function makeClient() {
on: jest.fn(),
isSynapseAdministrator: jest.fn().mockResolvedValue(false),
isRoomEncrypted: jest.fn().mockReturnValue(false),
mxcUrlToHttp: jest.fn().mockReturnValue('mock-mxcUrlToHttp'),
mxcUrlToHttp: jest.fn().mockReturnValue("mock-mxcUrlToHttp"),
doesServerSupportUnstableFeature: jest.fn().mockReturnValue(true),
removeListener: jest.fn(),
requestLoginToken: jest.fn(),
@ -57,33 +57,36 @@ function unresolvedPromise<T>(): Promise<T> {
return new Promise(() => {});
}
describe('<LoginWithQR />', () => {
describe("<LoginWithQR />", () => {
let client = makeClient();
const defaultProps = {
mode: Mode.Show,
onFinished: jest.fn(),
};
const mockConfirmationDigits = 'mock-confirmation-digits';
const mockRendezvousCode = 'mock-rendezvous-code';
const newDeviceId = 'new-device-id';
const mockConfirmationDigits = "mock-confirmation-digits";
const mockRendezvousCode = "mock-rendezvous-code";
const newDeviceId = "new-device-id";
const getComponent = (props: { client: MatrixClient, onFinished?: () => void }) =>
(<React.StrictMode><LoginWithQR {...defaultProps} {...props} /></React.StrictMode>);
const getComponent = (props: { client: MatrixClient; onFinished?: () => void }) => (
<React.StrictMode>
<LoginWithQR {...defaultProps} {...props} />
</React.StrictMode>
);
beforeEach(() => {
mockedFlow.mockReset();
jest.resetAllMocks();
jest.spyOn(MSC3906Rendezvous.prototype, 'generateCode').mockResolvedValue();
jest.spyOn(MSC3906Rendezvous.prototype, "generateCode").mockResolvedValue();
// @ts-ignore
// workaround for https://github.com/facebook/jest/issues/9675
MSC3906Rendezvous.prototype.code = mockRendezvousCode;
jest.spyOn(MSC3906Rendezvous.prototype, 'cancel').mockResolvedValue();
jest.spyOn(MSC3906Rendezvous.prototype, 'startAfterShowingCode').mockResolvedValue(mockConfirmationDigits);
jest.spyOn(MSC3906Rendezvous.prototype, 'declineLoginOnExistingDevice').mockResolvedValue();
jest.spyOn(MSC3906Rendezvous.prototype, 'approveLoginOnExistingDevice').mockResolvedValue(newDeviceId);
jest.spyOn(MSC3906Rendezvous.prototype, 'verifyNewDeviceOnExistingDevice').mockResolvedValue(undefined);
jest.spyOn(MSC3906Rendezvous.prototype, "cancel").mockResolvedValue();
jest.spyOn(MSC3906Rendezvous.prototype, "startAfterShowingCode").mockResolvedValue(mockConfirmationDigits);
jest.spyOn(MSC3906Rendezvous.prototype, "declineLoginOnExistingDevice").mockResolvedValue();
jest.spyOn(MSC3906Rendezvous.prototype, "approveLoginOnExistingDevice").mockResolvedValue(newDeviceId);
jest.spyOn(MSC3906Rendezvous.prototype, "verifyNewDeviceOnExistingDevice").mockResolvedValue(undefined);
client.requestLoginToken.mockResolvedValue({
login_token: 'token',
login_token: "token",
expires_in: 1000,
});
});
@ -95,9 +98,9 @@ describe('<LoginWithQR />', () => {
cleanup();
});
test('no homeserver support', async () => {
test("no homeserver support", async () => {
// simulate no support
jest.spyOn(MSC3906Rendezvous.prototype, 'generateCode').mockRejectedValue('');
jest.spyOn(MSC3906Rendezvous.prototype, "generateCode").mockRejectedValue("");
render(getComponent({ client }));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith({
@ -110,8 +113,8 @@ describe('<LoginWithQR />', () => {
expect(rendezvous.generateCode).toHaveBeenCalled();
});
test('failed to connect', async () => {
jest.spyOn(MSC3906Rendezvous.prototype, 'startAfterShowingCode').mockRejectedValue('');
test("failed to connect", async () => {
jest.spyOn(MSC3906Rendezvous.prototype, "startAfterShowingCode").mockRejectedValue("");
render(getComponent({ client }));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith({
@ -125,15 +128,19 @@ describe('<LoginWithQR />', () => {
expect(rendezvous.startAfterShowingCode).toHaveBeenCalled();
});
test('render QR then cancel and try again', async () => {
test("render QR then cancel and try again", async () => {
const onFinished = jest.fn();
jest.spyOn(MSC3906Rendezvous.prototype, 'startAfterShowingCode').mockImplementation(() => unresolvedPromise());
jest.spyOn(MSC3906Rendezvous.prototype, "startAfterShowingCode").mockImplementation(() => unresolvedPromise());
render(getComponent({ client, onFinished }));
const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
await waitFor(() => expect(mockedFlow).toHaveBeenLastCalledWith(expect.objectContaining({
phase: Phase.ShowingQR,
})));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith(
expect.objectContaining({
phase: Phase.ShowingQR,
}),
),
);
// display QR code
expect(mockedFlow).toHaveBeenLastCalledWith({
phase: Phase.ShowingQR,
@ -151,9 +158,13 @@ describe('<LoginWithQR />', () => {
// try again
onClick(Click.TryAgain);
await waitFor(() => expect(mockedFlow).toHaveBeenLastCalledWith(expect.objectContaining({
phase: Phase.ShowingQR,
})));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith(
expect.objectContaining({
phase: Phase.ShowingQR,
}),
),
);
// display QR code
expect(mockedFlow).toHaveBeenLastCalledWith({
phase: Phase.ShowingQR,
@ -162,15 +173,19 @@ describe('<LoginWithQR />', () => {
});
});
test('render QR then back', async () => {
test("render QR then back", async () => {
const onFinished = jest.fn();
jest.spyOn(MSC3906Rendezvous.prototype, 'startAfterShowingCode').mockReturnValue(unresolvedPromise());
jest.spyOn(MSC3906Rendezvous.prototype, "startAfterShowingCode").mockReturnValue(unresolvedPromise());
render(getComponent({ client, onFinished }));
const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
await waitFor(() => expect(mockedFlow).toHaveBeenLastCalledWith(expect.objectContaining({
phase: Phase.ShowingQR,
})));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith(
expect.objectContaining({
phase: Phase.ShowingQR,
}),
),
);
// display QR code
expect(mockedFlow).toHaveBeenLastCalledWith({
phase: Phase.ShowingQR,
@ -187,14 +202,18 @@ describe('<LoginWithQR />', () => {
expect(rendezvous.cancel).toHaveBeenCalledWith(RendezvousFailureReason.UserCancelled);
});
test('render QR then decline', async () => {
test("render QR then decline", async () => {
const onFinished = jest.fn();
render(getComponent({ client, onFinished }));
const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
await waitFor(() => expect(mockedFlow).toHaveBeenLastCalledWith(expect.objectContaining({
phase: Phase.Connected,
})));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith(
expect.objectContaining({
phase: Phase.Connected,
}),
),
);
expect(mockedFlow).toHaveBeenLastCalledWith({
phase: Phase.Connected,
confirmationDigits: mockConfirmationDigits,
@ -211,7 +230,7 @@ describe('<LoginWithQR />', () => {
expect(rendezvous.declineLoginOnExistingDevice).toHaveBeenCalled();
});
test('approve - no crypto', async () => {
test("approve - no crypto", async () => {
// @ts-ignore
client.crypto = undefined;
const onFinished = jest.fn();
@ -219,9 +238,13 @@ describe('<LoginWithQR />', () => {
render(getComponent({ client, onFinished }));
const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
await waitFor(() => expect(mockedFlow).toHaveBeenLastCalledWith(expect.objectContaining({
phase: Phase.Connected,
})));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith(
expect.objectContaining({
phase: Phase.Connected,
}),
),
);
expect(mockedFlow).toHaveBeenLastCalledWith({
phase: Phase.Connected,
confirmationDigits: mockConfirmationDigits,
@ -234,27 +257,36 @@ describe('<LoginWithQR />', () => {
const onClick = mockedFlow.mock.calls[0][0].onClick;
await onClick(Click.Approve);
await waitFor(() => expect(mockedFlow).toHaveBeenLastCalledWith(expect.objectContaining({
phase: Phase.WaitingForDevice,
})));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith(
expect.objectContaining({
phase: Phase.WaitingForDevice,
}),
),
);
expect(rendezvous.approveLoginOnExistingDevice).toHaveBeenCalledWith('token');
expect(rendezvous.approveLoginOnExistingDevice).toHaveBeenCalledWith("token");
expect(onFinished).toHaveBeenCalledWith(true);
});
test('approve + verifying', async () => {
test("approve + verifying", async () => {
const onFinished = jest.fn();
// @ts-ignore
client.crypto = {};
jest.spyOn(MSC3906Rendezvous.prototype, 'verifyNewDeviceOnExistingDevice')
.mockImplementation(() => unresolvedPromise());
jest.spyOn(MSC3906Rendezvous.prototype, "verifyNewDeviceOnExistingDevice").mockImplementation(() =>
unresolvedPromise(),
);
render(getComponent({ client, onFinished }));
const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
await waitFor(() => expect(mockedFlow).toHaveBeenLastCalledWith(expect.objectContaining({
phase: Phase.Connected,
})));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith(
expect.objectContaining({
phase: Phase.Connected,
}),
),
);
expect(mockedFlow).toHaveBeenLastCalledWith({
phase: Phase.Connected,
confirmationDigits: mockConfirmationDigits,
@ -267,25 +299,33 @@ describe('<LoginWithQR />', () => {
const onClick = mockedFlow.mock.calls[0][0].onClick;
onClick(Click.Approve);
await waitFor(() => expect(mockedFlow).toHaveBeenLastCalledWith(expect.objectContaining({
phase: Phase.Verifying,
})));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith(
expect.objectContaining({
phase: Phase.Verifying,
}),
),
);
expect(rendezvous.approveLoginOnExistingDevice).toHaveBeenCalledWith('token');
expect(rendezvous.approveLoginOnExistingDevice).toHaveBeenCalledWith("token");
expect(rendezvous.verifyNewDeviceOnExistingDevice).toHaveBeenCalled();
// expect(onFinished).toHaveBeenCalledWith(true);
});
test('approve + verify', async () => {
test("approve + verify", async () => {
const onFinished = jest.fn();
// @ts-ignore
client.crypto = {};
render(getComponent({ client, onFinished }));
const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
await waitFor(() => expect(mockedFlow).toHaveBeenLastCalledWith(expect.objectContaining({
phase: Phase.Connected,
})));
await waitFor(() =>
expect(mockedFlow).toHaveBeenLastCalledWith(
expect.objectContaining({
phase: Phase.Connected,
}),
),
);
expect(mockedFlow).toHaveBeenLastCalledWith({
phase: Phase.Connected,
confirmationDigits: mockConfirmationDigits,
@ -297,7 +337,7 @@ describe('<LoginWithQR />', () => {
// approve
const onClick = mockedFlow.mock.calls[0][0].onClick;
await onClick(Click.Approve);
expect(rendezvous.approveLoginOnExistingDevice).toHaveBeenCalledWith('token');
expect(rendezvous.approveLoginOnExistingDevice).toHaveBeenCalledWith("token");
expect(rendezvous.verifyNewDeviceOnExistingDevice).toHaveBeenCalled();
expect(onFinished).toHaveBeenCalledWith(true);
});

78
test/components/views/settings/devices/LoginWithQRFlow-test.tsx
View file

@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
import React from 'react';
import { RendezvousFailureReason } from 'matrix-js-sdk/src/rendezvous';
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
import React from "react";
import { RendezvousFailureReason } from "matrix-js-sdk/src/rendezvous";
import LoginWithQRFlow from '../../../../../src/components/views/auth/LoginWithQRFlow';
import { Click, Phase } from '../../../../../src/components/views/auth/LoginWithQR';
import LoginWithQRFlow from "../../../../../src/components/views/auth/LoginWithQRFlow";
import { Click, Phase } from "../../../../../src/components/views/auth/LoginWithQR";
describe('<LoginWithQRFlow />', () => {
describe("<LoginWithQRFlow />", () => {
const onClick = jest.fn();
const defaultProps = {
@ -34,81 +34,81 @@ describe('<LoginWithQRFlow />', () => {
failureReason?: RendezvousFailureReason;
code?: string;
confirmationDigits?: string;
}) =>
(<LoginWithQRFlow {...defaultProps} {...props} />);
}) => <LoginWithQRFlow {...defaultProps} {...props} />;
beforeEach(() => {
});
beforeEach(() => {});
afterEach(() => {
onClick.mockReset();
cleanup();
});
it('renders spinner while loading', async () => {
it("renders spinner while loading", async () => {
const { container } = render(getComponent({ phase: Phase.Loading }));
expect(container).toMatchSnapshot();
});
it('renders spinner whilst QR generating', async () => {
it("renders spinner whilst QR generating", async () => {
const { container } = render(getComponent({ phase: Phase.ShowingQR }));
expect(screen.getAllByTestId('cancel-button')).toHaveLength(1);
expect(screen.getAllByTestId("cancel-button")).toHaveLength(1);
expect(container).toMatchSnapshot();
fireEvent.click(screen.getByTestId('cancel-button'));
fireEvent.click(screen.getByTestId("cancel-button"));
expect(onClick).toHaveBeenCalledWith(Click.Cancel);
});
it('renders QR code', async () => {
const { container } = render(getComponent({ phase: Phase.ShowingQR, code: 'mock-code' }));
it("renders QR code", async () => {
const { container } = render(getComponent({ phase: Phase.ShowingQR, code: "mock-code" }));
// QR code is rendered async so we wait for it:
await waitFor(() => screen.getAllByAltText('QR Code').length === 1);
await waitFor(() => screen.getAllByAltText("QR Code").length === 1);
expect(container).toMatchSnapshot();
});
it('renders spinner while connecting', async () => {
it("renders spinner while connecting", async () => {
const { container } = render(getComponent({ phase: Phase.Connecting }));
expect(screen.getAllByTestId('cancel-button')).toHaveLength(1);
expect(screen.getAllByTestId("cancel-button")).toHaveLength(1);
expect(container).toMatchSnapshot();
fireEvent.click(screen.getByTestId('cancel-button'));
fireEvent.click(screen.getByTestId("cancel-button"));
expect(onClick).toHaveBeenCalledWith(Click.Cancel);
});
it('renders code when connected', async () => {
const { container } = render(getComponent({ phase: Phase.Connected, confirmationDigits: 'mock-digits' }));
expect(screen.getAllByText('mock-digits')).toHaveLength(1);
expect(screen.getAllByTestId('decline-login-button')).toHaveLength(1);
expect(screen.getAllByTestId('approve-login-button')).toHaveLength(1);
it("renders code when connected", async () => {
const { container } = render(getComponent({ phase: Phase.Connected, confirmationDigits: "mock-digits" }));
expect(screen.getAllByText("mock-digits")).toHaveLength(1);
expect(screen.getAllByTestId("decline-login-button")).toHaveLength(1);
expect(screen.getAllByTestId("approve-login-button")).toHaveLength(1);
expect(container).toMatchSnapshot();
fireEvent.click(screen.getByTestId('decline-login-button'));
fireEvent.click(screen.getByTestId("decline-login-button"));
expect(onClick).toHaveBeenCalledWith(Click.Decline);
fireEvent.click(screen.getByTestId('approve-login-button'));
fireEvent.click(screen.getByTestId("approve-login-button"));
expect(onClick).toHaveBeenCalledWith(Click.Approve);
});
it('renders spinner while signing in', async () => {
it("renders spinner while signing in", async () => {
const { container } = render(getComponent({ phase: Phase.WaitingForDevice }));
expect(screen.getAllByTestId('cancel-button')).toHaveLength(1);
expect(screen.getAllByTestId("cancel-button")).toHaveLength(1);
expect(container).toMatchSnapshot();
fireEvent.click(screen.getByTestId('cancel-button'));
fireEvent.click(screen.getByTestId("cancel-button"));
expect(onClick).toHaveBeenCalledWith(Click.Cancel);
});
it('renders spinner while verifying', async () => {
it("renders spinner while verifying", async () => {
const { container } = render(getComponent({ phase: Phase.Verifying }));
expect(container).toMatchSnapshot();
});
describe('errors', () => {
describe("errors", () => {
for (const failureReason of Object.values(RendezvousFailureReason)) {
it(`renders ${failureReason}`, async () => {
const { container } = render(getComponent({
phase: Phase.Error,
failureReason,
}));
expect(screen.getAllByTestId('cancellation-message')).toHaveLength(1);
expect(screen.getAllByTestId('try-again-button')).toHaveLength(1);
const { container } = render(
getComponent({
phase: Phase.Error,
failureReason,
}),
);
expect(screen.getAllByTestId("cancellation-message")).toHaveLength(1);
expect(screen.getAllByTestId("try-again-button")).toHaveLength(1);
expect(container).toMatchSnapshot();
fireEvent.click(screen.getByTestId('try-again-button'));
fireEvent.click(screen.getByTestId("try-again-button"));
expect(onClick).toHaveBeenCalledWith(Click.TryAgain);
});
}

57
test/components/views/settings/devices/LoginWithQRSection-test.tsx
View file

@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { render } from '@testing-library/react';
import { mocked } from 'jest-mock';
import { IServerVersions, MatrixClient } from 'matrix-js-sdk/src/matrix';
import React from 'react';
import { render } from "@testing-library/react";
import { mocked } from "jest-mock";
import { IServerVersions, MatrixClient } from "matrix-js-sdk/src/matrix";
import React from "react";
import LoginWithQRSection from '../../../../../src/components/views/settings/devices/LoginWithQRSection';
import { MatrixClientPeg } from '../../../../../src/MatrixClientPeg';
import { SettingLevel } from '../../../../../src/settings/SettingLevel';
import SettingsStore from '../../../../../src/settings/SettingsStore';
import LoginWithQRSection from "../../../../../src/components/views/settings/devices/LoginWithQRSection";
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
import { SettingLevel } from "../../../../../src/settings/SettingLevel";
import SettingsStore from "../../../../../src/settings/SettingsStore";
function makeClient() {
return mocked({
@ -34,7 +34,7 @@ function makeClient() {
on: jest.fn(),
isSynapseAdministrator: jest.fn().mockResolvedValue(false),
isRoomEncrypted: jest.fn().mockReturnValue(false),
mxcUrlToHttp: jest.fn().mockReturnValue('mock-mxcUrlToHttp'),
mxcUrlToHttp: jest.fn().mockReturnValue("mock-mxcUrlToHttp"),
removeListener: jest.fn(),
currentState: {
on: jest.fn(),
@ -49,9 +49,9 @@ function makeVersions(unstableFeatures: Record<string, boolean>): IServerVersion
};
}
describe('<LoginWithQRSection />', () => {
describe("<LoginWithQRSection />", () => {
beforeAll(() => {
jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(makeClient());
jest.spyOn(MatrixClientPeg, "get").mockReturnValue(makeClient());
});
const defaultProps = {
@ -59,35 +59,38 @@ describe('<LoginWithQRSection />', () => {
versions: makeVersions({}),
};
const getComponent = (props = {}) =>
(<LoginWithQRSection {...defaultProps} {...props} />);
const getComponent = (props = {}) => <LoginWithQRSection {...defaultProps} {...props} />;
describe('should not render', () => {
it('no support at all', () => {
describe("should not render", () => {
it("no support at all", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('feature enabled', async () => {
await SettingsStore.setValue('feature_qr_signin_reciprocate_show', null, SettingLevel.DEVICE, true);
it("feature enabled", async () => {
await SettingsStore.setValue("feature_qr_signin_reciprocate_show", null, SettingLevel.DEVICE, true);
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('only feature + MSC3882 enabled', async () => {
await SettingsStore.setValue('feature_qr_signin_reciprocate_show', null, SettingLevel.DEVICE, true);
const { container } = render(getComponent({ versions: makeVersions({ 'org.matrix.msc3882': true }) }));
it("only feature + MSC3882 enabled", async () => {
await SettingsStore.setValue("feature_qr_signin_reciprocate_show", null, SettingLevel.DEVICE, true);
const { container } = render(getComponent({ versions: makeVersions({ "org.matrix.msc3882": true }) }));
expect(container).toMatchSnapshot();
});
});
describe('should render panel', () => {
it('enabled by feature + MSC3882 + MSC3886', async () => {
await SettingsStore.setValue('feature_qr_signin_reciprocate_show', null, SettingLevel.DEVICE, true);
const { container } = render(getComponent({ versions: makeVersions({
'org.matrix.msc3882': true,
'org.matrix.msc3886': true,
}) }));
describe("should render panel", () => {
it("enabled by feature + MSC3882 + MSC3886", async () => {
await SettingsStore.setValue("feature_qr_signin_reciprocate_show", null, SettingLevel.DEVICE, true);
const { container } = render(
getComponent({
versions: makeVersions({
"org.matrix.msc3882": true,
"org.matrix.msc3886": true,
}),
}),
);
expect(container).toMatchSnapshot();
});
});

43
test/components/views/settings/devices/SecurityRecommendations-test.tsx
View file

@ -14,37 +14,36 @@ 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 React from "react";
import { act, fireEvent, render } from "@testing-library/react";
import SecurityRecommendations from '../../../../../src/components/views/settings/devices/SecurityRecommendations';
import { DeviceSecurityVariation } from '../../../../../src/components/views/settings/devices/types';
import SecurityRecommendations from "../../../../../src/components/views/settings/devices/SecurityRecommendations";
import { DeviceSecurityVariation } from "../../../../../src/components/views/settings/devices/types";
const MS_DAY = 24 * 60 * 60 * 1000;
describe('<SecurityRecommendations />', () => {
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) };
describe("<SecurityRecommendations />", () => {
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',
device_id: "unverified-100-days-old",
isVerified: false,
last_seen_ts: Date.now() - (MS_DAY * 100),
last_seen_ts: Date.now() - MS_DAY * 100,
};
const defaultProps = {
devices: {},
goToFilteredList: jest.fn(),
currentDeviceId: 'abc123',
currentDeviceId: "abc123",
};
const getComponent = (props = {}) =>
(<SecurityRecommendations {...defaultProps} {...props} />);
const getComponent = (props = {}) => <SecurityRecommendations {...defaultProps} {...props} />;
it('renders null when no devices', () => {
it("renders null when no devices", () => {
const { container } = render(getComponent());
expect(container.firstChild).toBeNull();
});
it('renders unverified devices section when user has unverified devices', () => {
it("renders unverified devices section when user has unverified devices", () => {
const devices = {
[unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
[verifiedNoMetadata.device_id]: verifiedNoMetadata,
@ -54,7 +53,7 @@ describe('<SecurityRecommendations />', () => {
expect(container).toMatchSnapshot();
});
it('does not render unverified devices section when only the current device is unverified', () => {
it("does not render unverified devices section when only the current device is unverified", () => {
const devices = {
[unverifiedNoMetadata.device_id]: unverifiedNoMetadata,
[verifiedNoMetadata.device_id]: verifiedNoMetadata,
@ -64,7 +63,7 @@ describe('<SecurityRecommendations />', () => {
expect(container.firstChild).toBeFalsy();
});
it('renders inactive devices section when user has inactive devices', () => {
it("renders inactive devices section when user has inactive devices", () => {
const devices = {
[verifiedNoMetadata.device_id]: verifiedNoMetadata,
[hundredDaysOldUnverified.device_id]: hundredDaysOldUnverified,
@ -73,7 +72,7 @@ describe('<SecurityRecommendations />', () => {
expect(container).toMatchSnapshot();
});
it('renders both cards when user has both unverified and inactive devices', () => {
it("renders both cards when user has both unverified and inactive devices", () => {
const devices = {
[verifiedNoMetadata.device_id]: verifiedNoMetadata,
[hundredDaysOld.device_id]: hundredDaysOld,
@ -83,7 +82,7 @@ describe('<SecurityRecommendations />', () => {
expect(container).toMatchSnapshot();
});
it('clicking view all unverified devices button works', () => {
it("clicking view all unverified devices button works", () => {
const goToFilteredList = jest.fn();
const devices = {
[verifiedNoMetadata.device_id]: verifiedNoMetadata,
@ -93,13 +92,13 @@ describe('<SecurityRecommendations />', () => {
const { getByTestId } = render(getComponent({ devices, goToFilteredList }));
act(() => {
fireEvent.click(getByTestId('unverified-devices-cta'));
fireEvent.click(getByTestId("unverified-devices-cta"));
});
expect(goToFilteredList).toHaveBeenCalledWith(DeviceSecurityVariation.Unverified);
});
it('clicking view all inactive devices button works', () => {
it("clicking view all inactive devices button works", () => {
const goToFilteredList = jest.fn();
const devices = {
[verifiedNoMetadata.device_id]: verifiedNoMetadata,
@ -109,7 +108,7 @@ describe('<SecurityRecommendations />', () => {
const { getByTestId } = render(getComponent({ devices, goToFilteredList }));
act(() => {
fireEvent.click(getByTestId('inactive-devices-cta'));
fireEvent.click(getByTestId("inactive-devices-cta"));
});
expect(goToFilteredList).toHaveBeenCalledWith(DeviceSecurityVariation.Inactive);

39
test/components/views/settings/devices/SelectableDeviceTile-test.tsx
View file

@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { fireEvent, render } from "@testing-library/react";
import React from "react";
import { act } from "react-dom/test-utils";
import SelectableDeviceTile from '../../../../../src/components/views/settings/devices/SelectableDeviceTile';
import { DeviceType } from '../../../../../src/utils/device/parseUserAgent';
import SelectableDeviceTile from "../../../../../src/components/views/settings/devices/SelectableDeviceTile";
import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
describe('<SelectableDeviceTile />', () => {
describe("<SelectableDeviceTile />", () => {
const device = {
display_name: 'My Device',
device_id: 'my-device',
last_seen_ip: '123.456.789',
display_name: "My Device",
device_id: "my-device",
last_seen_ip: "123.456.789",
isVerified: false,
deviceType: DeviceType.Unknown,
};
@ -36,20 +36,19 @@ describe('<SelectableDeviceTile />', () => {
children: <div>test</div>,
isSelected: false,
};
const getComponent = (props = {}) =>
(<SelectableDeviceTile {...defaultProps} {...props} />);
const getComponent = (props = {}) => <SelectableDeviceTile {...defaultProps} {...props} />;
it('renders unselected device tile with checkbox', () => {
it("renders unselected device tile with checkbox", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders selected tile', () => {
it("renders selected tile", () => {
const { container } = render(getComponent({ isSelected: true }));
expect(container.querySelector(`#device-tile-checkbox-${device.device_id}`)).toMatchSnapshot();
});
it('calls onSelect on checkbox click', () => {
it("calls onSelect on checkbox click", () => {
const onSelect = jest.fn();
const { container } = render(getComponent({ onSelect }));
@ -60,7 +59,7 @@ describe('<SelectableDeviceTile />', () => {
expect(onSelect).toHaveBeenCalled();
});
it('calls onClick on device tile info click', () => {
it("calls onClick on device tile info click", () => {
const onClick = jest.fn();
const { getByText } = render(getComponent({ onClick }));
@ -71,14 +70,18 @@ describe('<SelectableDeviceTile />', () => {
expect(onClick).toHaveBeenCalled();
});
it('does not call onClick when clicking device tiles actions', () => {
it("does not call onClick when clicking device tiles actions", () => {
const onClick = jest.fn();
const onDeviceActionClick = jest.fn();
const children = <button onClick={onDeviceActionClick} data-testid='device-action-button'>test</button>;
const children = (
<button onClick={onDeviceActionClick} data-testid="device-action-button">
test
</button>
);
const { getByTestId } = render(getComponent({ onClick, children }));
act(() => {
fireEvent.click(getByTestId('device-action-button'));
fireEvent.click(getByTestId("device-action-button"));
});
// action click handler called

34
test/components/views/settings/devices/deleteDevices-test.tsx
View file

@ -18,15 +18,15 @@ import { deleteDevicesWithInteractiveAuth } from "../../../../../src/components/
import Modal from "../../../../../src/Modal";
import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../test-utils";
describe('deleteDevices()', () => {
const userId = '@alice:server.org';
const deviceIds = ['device_1', 'device_2'];
describe("deleteDevices()", () => {
const userId = "@alice:server.org";
const deviceIds = ["device_1", "device_2"];
const mockClient = getMockClientWithEventEmitter({
...mockClientMethodsUser(userId),
deleteMultipleDevices: jest.fn(),
});
const modalSpy = jest.spyOn(Modal, 'createDialog');
const modalSpy = jest.spyOn(Modal, "createDialog");
const interactiveAuthError = { httpStatus: 401, data: { flows: [] } };
@ -34,7 +34,7 @@ describe('deleteDevices()', () => {
jest.clearAllMocks();
});
it('deletes devices and calls onFinished when interactive auth is not required', async () => {
it("deletes devices and calls onFinished when interactive auth is not required", async () => {
mockClient.deleteMultipleDevices.mockResolvedValue({});
const onFinished = jest.fn();
@ -47,16 +47,14 @@ describe('deleteDevices()', () => {
expect(modalSpy).not.toHaveBeenCalled();
});
it('throws without opening auth dialog when delete fails with a non-401 status code', async () => {
const error = new Error('');
it("throws without opening auth dialog when delete fails with a non-401 status code", async () => {
const error = new Error("");
// @ts-ignore
error.httpStatus = 404;
mockClient.deleteMultipleDevices.mockRejectedValue(error);
const onFinished = jest.fn();
await expect(
deleteDevicesWithInteractiveAuth(mockClient, deviceIds, onFinished),
).rejects.toThrow(error);
await expect(deleteDevicesWithInteractiveAuth(mockClient, deviceIds, onFinished)).rejects.toThrow(error);
expect(onFinished).not.toHaveBeenCalled();
@ -64,8 +62,8 @@ describe('deleteDevices()', () => {
expect(modalSpy).not.toHaveBeenCalled();
});
it('throws without opening auth dialog when delete fails without data.flows', async () => {
const error = new Error('');
it("throws without opening auth dialog when delete fails without data.flows", async () => {
const error = new Error("");
// @ts-ignore
error.httpStatus = 401;
// @ts-ignore
@ -73,9 +71,7 @@ describe('deleteDevices()', () => {
mockClient.deleteMultipleDevices.mockRejectedValue(error);
const onFinished = jest.fn();
await expect(
deleteDevicesWithInteractiveAuth(mockClient, deviceIds, onFinished),
).rejects.toThrow(error);
await expect(deleteDevicesWithInteractiveAuth(mockClient, deviceIds, onFinished)).rejects.toThrow(error);
expect(onFinished).not.toHaveBeenCalled();
@ -83,7 +79,7 @@ describe('deleteDevices()', () => {
expect(modalSpy).not.toHaveBeenCalled();
});
it('opens interactive auth dialog when delete fails with 401', async () => {
it("opens interactive auth dialog when delete fails with 401", async () => {
mockClient.deleteMultipleDevices.mockRejectedValue(interactiveAuthError);
const onFinished = jest.fn();
@ -94,12 +90,10 @@ describe('deleteDevices()', () => {
// opened modal
expect(modalSpy).toHaveBeenCalled();
const [, {
title, authData, aestheticsForStagePhases,
}] = modalSpy.mock.calls[0];
const [, { title, authData, aestheticsForStagePhases }] = modalSpy.mock.calls[0];
// modal opened as expected
expect(title).toEqual('Authentication');
expect(title).toEqual("Authentication");
expect(authData).toEqual(interactiveAuthError.data);
expect(aestheticsForStagePhases).toMatchSnapshot();
});

56
test/components/views/settings/devices/filter-test.ts
View file

@ -14,58 +14,48 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import {
filterDevicesBySecurityRecommendation,
} from "../../../../../src/components/views/settings/devices/filter";
import {
DeviceSecurityVariation,
} from "../../../../../src/components/views/settings/devices/types";
import { filterDevicesBySecurityRecommendation } from "../../../../../src/components/views/settings/devices/filter";
import { DeviceSecurityVariation } from "../../../../../src/components/views/settings/devices/types";
import { DeviceType } from "../../../../../src/utils/device/parseUserAgent";
const MS_DAY = 86400000;
describe('filterDevicesBySecurityRecommendation()', () => {
describe("filterDevicesBySecurityRecommendation()", () => {
const unverifiedNoMetadata = {
device_id: 'unverified-no-metadata',
device_id: "unverified-no-metadata",
isVerified: false,
deviceType: DeviceType.Unknown,
};
const verifiedNoMetadata = {
device_id: 'verified-no-metadata',
device_id: "verified-no-metadata",
isVerified: true,
deviceType: DeviceType.Unknown,
};
const hundredDaysOld = {
device_id: '100-days-old',
device_id: "100-days-old",
isVerified: true,
last_seen_ts: Date.now() - (MS_DAY * 100),
last_seen_ts: Date.now() - MS_DAY * 100,
deviceType: DeviceType.Unknown,
};
const hundredDaysOldUnverified = {
device_id: 'unverified-100-days-old',
device_id: "unverified-100-days-old",
isVerified: false,
last_seen_ts: Date.now() - (MS_DAY * 100),
last_seen_ts: Date.now() - MS_DAY * 100,
deviceType: DeviceType.Unknown,
};
const fiftyDaysOld = {
device_id: '50-days-old',
device_id: "50-days-old",
isVerified: true,
last_seen_ts: Date.now() - (MS_DAY * 50),
last_seen_ts: Date.now() - MS_DAY * 50,
deviceType: DeviceType.Unknown,
};
const devices = [
unverifiedNoMetadata,
verifiedNoMetadata,
hundredDaysOld,
hundredDaysOldUnverified,
fiftyDaysOld,
];
const devices = [unverifiedNoMetadata, verifiedNoMetadata, hundredDaysOld, hundredDaysOldUnverified, fiftyDaysOld];
it('returns all devices when no securityRecommendations are passed', () => {
it("returns all devices when no securityRecommendations are passed", () => {
expect(filterDevicesBySecurityRecommendation(devices, [])).toBe(devices);
});
it('returns devices older than 90 days as inactive', () => {
it("returns devices older than 90 days as inactive", () => {
expect(filterDevicesBySecurityRecommendation(devices, [DeviceSecurityVariation.Inactive])).toEqual([
// devices without ts metadata are not filtered as inactive
hundredDaysOld,
@ -73,7 +63,7 @@ describe('filterDevicesBySecurityRecommendation()', () => {
]);
});
it('returns correct devices for verified filter', () => {
it("returns correct devices for verified filter", () => {
expect(filterDevicesBySecurityRecommendation(devices, [DeviceSecurityVariation.Verified])).toEqual([
verifiedNoMetadata,
hundredDaysOld,
@ -81,19 +71,19 @@ describe('filterDevicesBySecurityRecommendation()', () => {
]);
});
it('returns correct devices for unverified filter', () => {
it("returns correct devices for unverified filter", () => {
expect(filterDevicesBySecurityRecommendation(devices, [DeviceSecurityVariation.Unverified])).toEqual([
unverifiedNoMetadata,
hundredDaysOldUnverified,
]);
});
it('returns correct devices for combined verified and inactive filters', () => {
expect(filterDevicesBySecurityRecommendation(
devices,
[DeviceSecurityVariation.Unverified, DeviceSecurityVariation.Inactive],
)).toEqual([
hundredDaysOldUnverified,
]);
it("returns correct devices for combined verified and inactive filters", () => {
expect(
filterDevicesBySecurityRecommendation(devices, [
DeviceSecurityVariation.Unverified,
DeviceSecurityVariation.Inactive,
]),
).toEqual([hundredDaysOldUnverified]);
});
});

6
test/components/views/settings/discovery/EmailAddresses-test.tsx
View file

@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
import { render, screen } from "@testing-library/react";
import { IThreepid, ThreepidMedium } from 'matrix-js-sdk/src/@types/threepids';
import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
import { EmailAddress } from '../../../../../src/components/views/settings/discovery/EmailAddresses';
import { EmailAddress } from "../../../../../src/components/views/settings/discovery/EmailAddresses";
describe("<EmailAddress/>", () => {
it("should track props.email.bound changes", async () => {

4
test/components/views/settings/discovery/PhoneNumbers-test.tsx
View file

@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
import { render, screen } from "@testing-library/react";
import { IThreepid, ThreepidMedium } from 'matrix-js-sdk/src/@types/threepids';
import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
import { PhoneNumber } from "../../../../../src/components/views/settings/discovery/PhoneNumbers";

31
test/components/views/settings/shared/SettingsSubsection-test.tsx
View file

@ -14,42 +14,45 @@ 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 React from "react";
import { render } from "@testing-library/react";
import SettingsSubsection from '../../../../../src/components/views/settings/shared/SettingsSubsection';
import SettingsSubsection from "../../../../../src/components/views/settings/shared/SettingsSubsection";
describe('<SettingsSubsection />', () => {
describe("<SettingsSubsection />", () => {
const defaultProps = {
heading: 'Test',
heading: "Test",
children: <div>test settings content</div>,
};
const getComponent = (props = {}): React.ReactElement =>
(<SettingsSubsection {...defaultProps} {...props} />);
const getComponent = (props = {}): React.ReactElement => <SettingsSubsection {...defaultProps} {...props} />;
it('renders with plain text heading', () => {
it("renders with plain text heading", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders with react element heading', () => {
it("renders with react element heading", () => {
const heading = <h3>This is the heading</h3>;
const { container } = render(getComponent({ heading }));
expect(container).toMatchSnapshot();
});
it('renders without description', () => {
it("renders without description", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders with plain text description', () => {
const { container } = render(getComponent({ description: 'This describes the subsection' }));
it("renders with plain text description", () => {
const { container } = render(getComponent({ description: "This describes the subsection" }));
expect(container).toMatchSnapshot();
});
it('renders with react element description', () => {
const description = <p>This describes the section <a href='/#'>link</a></p>;
it("renders with react element description", () => {
const description = (
<p>
This describes the section <a href="/#">link</a>
</p>
);
const { container } = render(getComponent({ description }));
expect(container).toMatchSnapshot();
});

21
test/components/views/settings/shared/SettingsSubsectionHeading-test.tsx
View file

@ -14,27 +14,24 @@ 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 { render } from "@testing-library/react";
import React from "react";
import {
SettingsSubsectionHeading,
} from '../../../../../src/components/views/settings/shared/SettingsSubsectionHeading';
import { SettingsSubsectionHeading } from "../../../../../src/components/views/settings/shared/SettingsSubsectionHeading";
describe('<SettingsSubsectionHeading />', () => {
describe("<SettingsSubsectionHeading />", () => {
const defaultProps = {
heading: 'test',
heading: "test",
};
const getComponent = (props = {}) =>
render(<SettingsSubsectionHeading {...defaultProps} {...props} />);
const getComponent = (props = {}) => render(<SettingsSubsectionHeading {...defaultProps} {...props} />);
it('renders without children', () => {
it("renders without children", () => {
const { container } = getComponent();
expect({ container }).toMatchSnapshot();
});
it('renders with children', () => {
const children = <a href='/#'>test</a>;
it("renders with children", () => {
const children = <a href="/#">test</a>;
const { container } = getComponent({ children });
expect({ container }).toMatchSnapshot();
});

15
test/components/views/settings/tabs/SettingsTab-test.tsx
View file

@ -14,17 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { ReactElement } from 'react';
import { render } from '@testing-library/react';
import React, { ReactElement } from "react";
import { render } from "@testing-library/react";
import SettingsTab, { SettingsTabProps } from '../../../../../src/components/views/settings/tabs/SettingsTab';
import SettingsTab, { SettingsTabProps } from "../../../../../src/components/views/settings/tabs/SettingsTab";
describe('<SettingsTab />', () => {
const getComponent = (props: SettingsTabProps): ReactElement => (<SettingsTab {...props} />);
it('renders tab', () => {
const { container } = render(getComponent({ heading: 'Test Tab', children: <div>test</div> }));
describe("<SettingsTab />", () => {
const getComponent = (props: SettingsTabProps): ReactElement => <SettingsTab {...props} />;
it("renders tab", () => {
const { container } = render(getComponent({ heading: "Test Tab", children: <div>test</div> }));
expect(container).toMatchSnapshot();
});
});

5
test/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx
View file

@ -33,7 +33,7 @@ describe("NotificatinSettingsTab", () => {
let roomProps: RoomEchoChamber;
const renderTab = (): RenderResult => {
return render(<NotificationSettingsTab roomId={roomId} closeSettingsFn={() => { }} />);
return render(<NotificationSettingsTab roomId={roomId} closeSettingsFn={() => {}} />);
};
beforeEach(() => {
@ -50,7 +50,8 @@ describe("NotificatinSettingsTab", () => {
// settings link of mentions_only volume
const settingsLink = tab.container.querySelector(
"label.mx_NotificationSettingsTab_mentionsKeywordsEntry div.mx_AccessibleButton");
"label.mx_NotificationSettingsTab_mentionsKeywordsEntry div.mx_AccessibleButton",
);
if (!settingsLink) throw new Error("settings link does not exist.");
await userEvent.click(settingsLink);

36
test/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx
View file

@ -92,15 +92,11 @@ describe("RolesRoomSettingsTab", () => {
});
it("should update the power levels", () => {
expect(cli.sendStateEvent).toHaveBeenCalledWith(
roomId,
EventType.RoomPowerLevels,
{
events: {
[VoiceBroadcastInfoEventType]: 0,
},
expect(cli.sendStateEvent).toHaveBeenCalledWith(roomId, EventType.RoomPowerLevels, {
events: {
[VoiceBroadcastInfoEventType]: 0,
},
);
});
});
});
@ -145,15 +141,11 @@ describe("RolesRoomSettingsTab", () => {
});
expect(getJoinCallSelectedOption(tab)?.textContent).toBe("Default");
expect(cli.sendStateEvent).toHaveBeenCalledWith(
roomId,
EventType.RoomPowerLevels,
{
events: {
[ElementCall.MEMBER_EVENT_TYPE.name]: 0,
},
expect(cli.sendStateEvent).toHaveBeenCalledWith(roomId, EventType.RoomPowerLevels, {
events: {
[ElementCall.MEMBER_EVENT_TYPE.name]: 0,
},
);
});
});
});
@ -170,15 +162,11 @@ describe("RolesRoomSettingsTab", () => {
});
expect(getStartCallSelectedOption(tab)?.textContent).toBe("Default");
expect(cli.sendStateEvent).toHaveBeenCalledWith(
roomId,
EventType.RoomPowerLevels,
{
events: {
[ElementCall.CALL_EVENT_TYPE.name]: 0,
},
expect(cli.sendStateEvent).toHaveBeenCalledWith(roomId, EventType.RoomPowerLevels, {
events: {
[ElementCall.CALL_EVENT_TYPE.name]: 0,
},
);
});
});
});
});

66
test/components/views/settings/tabs/room/VoipRoomSettingsTab-test.tsx
View file

@ -88,16 +88,18 @@ describe("RolesRoomSettingsTab", () => {
const tab = renderTab();
fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch"));
await waitFor(() => expect(cli.sendStateEvent).toHaveBeenCalledWith(
room.roomId,
EventType.RoomPowerLevels,
expect.objectContaining({
events: {
[ElementCall.CALL_EVENT_TYPE.name]: 50,
[ElementCall.MEMBER_EVENT_TYPE.name]: 0,
},
}),
));
await waitFor(() =>
expect(cli.sendStateEvent).toHaveBeenCalledWith(
room.roomId,
EventType.RoomPowerLevels,
expect.objectContaining({
events: {
[ElementCall.CALL_EVENT_TYPE.name]: 50,
[ElementCall.MEMBER_EVENT_TYPE.name]: 0,
},
}),
),
);
});
it("enables Element calls in private room", async () => {
@ -106,16 +108,18 @@ describe("RolesRoomSettingsTab", () => {
const tab = renderTab();
fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch"));
await waitFor(() => expect(cli.sendStateEvent).toHaveBeenCalledWith(
room.roomId,
EventType.RoomPowerLevels,
expect.objectContaining({
events: {
[ElementCall.CALL_EVENT_TYPE.name]: 0,
[ElementCall.MEMBER_EVENT_TYPE.name]: 0,
},
}),
));
await waitFor(() =>
expect(cli.sendStateEvent).toHaveBeenCalledWith(
room.roomId,
EventType.RoomPowerLevels,
expect.objectContaining({
events: {
[ElementCall.CALL_EVENT_TYPE.name]: 0,
[ElementCall.MEMBER_EVENT_TYPE.name]: 0,
},
}),
),
);
});
});
@ -125,16 +129,18 @@ describe("RolesRoomSettingsTab", () => {
const tab = renderTab();
fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch"));
await waitFor(() => expect(cli.sendStateEvent).toHaveBeenCalledWith(
room.roomId,
EventType.RoomPowerLevels,
expect.objectContaining({
events: {
[ElementCall.CALL_EVENT_TYPE.name]: 100,
[ElementCall.MEMBER_EVENT_TYPE.name]: 100,
},
}),
));
await waitFor(() =>
expect(cli.sendStateEvent).toHaveBeenCalledWith(
room.roomId,
EventType.RoomPowerLevels,
expect.objectContaining({
events: {
[ElementCall.CALL_EVENT_TYPE.name]: 100,
[ElementCall.MEMBER_EVENT_TYPE.name]: 100,
},
}),
),
);
});
});
});

17
test/components/views/settings/tabs/user/KeyboardUserSettingsTab-test.tsx
View file

@ -1,4 +1,3 @@
/*
Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>
@ -18,8 +17,7 @@ limitations under the License.
import { render } from "@testing-library/react";
import React from "react";
import KeyboardUserSettingsTab from
"../../../../../../src/components/views/settings/tabs/user/KeyboardUserSettingsTab";
import KeyboardUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/KeyboardUserSettingsTab";
import { Key } from "../../../../../../src/Keyboard";
import { mockPlatformPeg } from "../../../../../test-utils/platform";
@ -58,19 +56,19 @@ describe("KeyboardUserSettingsTab", () => {
it("renders list of keyboard shortcuts", () => {
mockKeyboardShortcuts({
"CATEGORIES": {
"Composer": {
CATEGORIES: {
Composer: {
settingNames: ["keybind1", "keybind2"],
categoryLabel: "Composer",
},
"Navigation": {
Navigation: {
settingNames: ["keybind3"],
categoryLabel: "Navigation",
},
},
});
mockKeyboardShortcutUtils({
"getKeyboardShortcutValue": (name) => {
getKeyboardShortcutValue: (name) => {
switch (name) {
case "keybind1":
return {
@ -80,7 +78,8 @@ describe("KeyboardUserSettingsTab", () => {
case "keybind2": {
return {
key: Key.B,
ctrlKey: true };
ctrlKey: true,
};
}
case "keybind3": {
return {
@ -89,7 +88,7 @@ describe("KeyboardUserSettingsTab", () => {
}
}
},
"getKeyboardShortcutDisplayName": (name) => {
getKeyboardShortcutDisplayName: (name) => {
switch (name) {
case "keybind1":
return "Cancel replying to a message";

34
test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx
View file

@ -14,33 +14,33 @@ 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 React from "react";
import { render } from "@testing-library/react";
import LabsUserSettingsTab from '../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab';
import SettingsStore from '../../../../../../src/settings/SettingsStore';
import LabsUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab";
import SettingsStore from "../../../../../../src/settings/SettingsStore";
import {
getMockClientWithEventEmitter,
mockClientMethodsServer,
mockClientMethodsUser,
} from '../../../../../test-utils';
import SdkConfig from '../../../../../../src/SdkConfig';
} from "../../../../../test-utils";
import SdkConfig from "../../../../../../src/SdkConfig";
describe('<SecurityUserSettingsTab />', () => {
const sdkConfigSpy = jest.spyOn(SdkConfig, 'get');
describe("<SecurityUserSettingsTab />", () => {
const sdkConfigSpy = jest.spyOn(SdkConfig, "get");
const defaultProps = {
closeSettingsFn: jest.fn(),
};
const getComponent = () => <LabsUserSettingsTab {...defaultProps} />;
const userId = '@alice:server.org';
const userId = "@alice:server.org";
getMockClientWithEventEmitter({
...mockClientMethodsUser(userId),
...mockClientMethodsServer(),
});
const settingsValueSpy = jest.spyOn(SettingsStore, 'getValue');
const settingsValueSpy = jest.spyOn(SettingsStore, "getValue");
beforeEach(() => {
jest.clearAllMocks();
@ -48,26 +48,26 @@ describe('<SecurityUserSettingsTab />', () => {
sdkConfigSpy.mockReturnValue(false);
});
it('renders settings marked as beta as beta cards', () => {
it("renders settings marked as beta as beta cards", () => {
const { getByTestId } = render(getComponent());
expect(getByTestId("labs-beta-section")).toMatchSnapshot();
});
it('does not render non-beta labs settings when disabled in config', () => {
it("does not render non-beta labs settings when disabled in config", () => {
const { container } = render(getComponent());
expect(sdkConfigSpy).toHaveBeenCalledWith('show_labs_settings');
expect(sdkConfigSpy).toHaveBeenCalledWith("show_labs_settings");
const labsSections = container.getElementsByClassName('mx_SettingsTab_section');
const labsSections = container.getElementsByClassName("mx_SettingsTab_section");
// only section is beta section
expect(labsSections.length).toEqual(1);
});
it('renders non-beta labs settings when enabled in config', () => {
it("renders non-beta labs settings when enabled in config", () => {
// enable labs
sdkConfigSpy.mockImplementation(configName => configName === 'show_labs_settings');
sdkConfigSpy.mockImplementation((configName) => configName === "show_labs_settings");
const { container } = render(getComponent());
const labsSections = container.getElementsByClassName('mx_SettingsTab_section');
const labsSections = container.getElementsByClassName("mx_SettingsTab_section");
expect(labsSections.length).toEqual(11);
});
});

11
test/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx
View file

@ -17,8 +17,7 @@ limitations under the License.
import React from "react";
import { fireEvent, render, RenderResult, waitFor } from "@testing-library/react";
import PreferencesUserSettingsTab from
"../../../../../../src/components/views/settings/tabs/user/PreferencesUserSettingsTab";
import PreferencesUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/PreferencesUserSettingsTab";
import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
import { mockPlatformPeg, stubClient } from "../../../../../test-utils";
import SettingsStore from "../../../../../../src/settings/SettingsStore";
@ -62,12 +61,8 @@ describe("PreferencesUserSettingsTab", () => {
};
};
const expectSetValueToHaveBeenCalled = (
name: string,
roomId: string,
level: SettingLevel,
value: boolean,
) => expect(SettingsStore.setValue).toHaveBeenCalledWith(name, roomId, level, value);
const expectSetValueToHaveBeenCalled = (name: string, roomId: string, level: SettingLevel, value: boolean) =>
expect(SettingsStore.setValue).toHaveBeenCalledWith(name, roomId, level, value);
describe("with server support", () => {
beforeEach(() => {

53
test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
View file

@ -13,12 +13,12 @@ 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 { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { fireEvent, render } from "@testing-library/react";
import React from "react";
import SecurityUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/SecurityUserSettingsTab";
import MatrixClientContext from '../../../../../../src/contexts/MatrixClientContext';
import SettingsStore from '../../../../../../src/settings/SettingsStore';
import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
import SettingsStore from "../../../../../../src/settings/SettingsStore";
import {
getMockClientWithEventEmitter,
mockClientMethodsServer,
@ -27,15 +27,15 @@ import {
mockClientMethodsDevice,
mockPlatformPeg,
flushPromises,
} from '../../../../../test-utils';
} from "../../../../../test-utils";
describe('<SecurityUserSettingsTab />', () => {
describe("<SecurityUserSettingsTab />", () => {
const defaultProps = {
closeSettingsFn: jest.fn(),
};
const userId = '@alice:server.org';
const deviceId = 'alices-device';
const userId = "@alice:server.org";
const deviceId = "alices-device";
const mockClient = getMockClientWithEventEmitter({
...mockClientMethodsUser(userId),
...mockClientMethodsServer(),
@ -45,18 +45,19 @@ describe('<SecurityUserSettingsTab />', () => {
getIgnoredUsers: jest.fn(),
getVersions: jest.fn().mockResolvedValue({
unstable_features: {
'org.matrix.msc3882': true,
'org.matrix.msc3886': true,
"org.matrix.msc3882": true,
"org.matrix.msc3886": true,
},
}),
});
const getComponent = () =>
const getComponent = () => (
<MatrixClientContext.Provider value={mockClient}>
<SecurityUserSettingsTab {...defaultProps} />
</MatrixClientContext.Provider>;
</MatrixClientContext.Provider>
);
const settingsValueSpy = jest.spyOn(SettingsStore, 'getValue');
const settingsValueSpy = jest.spyOn(SettingsStore, "getValue");
beforeEach(() => {
mockPlatformPeg();
@ -64,46 +65,46 @@ describe('<SecurityUserSettingsTab />', () => {
settingsValueSpy.mockReturnValue(false);
});
it('renders sessions section when new session manager is disabled', () => {
it("renders sessions section when new session manager is disabled", () => {
settingsValueSpy.mockReturnValue(false);
const { getByTestId } = render(getComponent());
expect(getByTestId('devices-section')).toBeTruthy();
expect(getByTestId("devices-section")).toBeTruthy();
});
it('does not render sessions section when new session manager is enabled', () => {
it("does not render sessions section when new session manager is enabled", () => {
settingsValueSpy.mockReturnValue(true);
const { queryByTestId } = render(getComponent());
expect(queryByTestId('devices-section')).toBeFalsy();
expect(queryByTestId("devices-section")).toBeFalsy();
});
it('does not render qr code login section when disabled', () => {
it("does not render qr code login section when disabled", () => {
settingsValueSpy.mockReturnValue(false);
const { queryByText } = render(getComponent());
expect(settingsValueSpy).toHaveBeenCalledWith('feature_qr_signin_reciprocate_show');
expect(settingsValueSpy).toHaveBeenCalledWith("feature_qr_signin_reciprocate_show");
expect(queryByText('Sign in with QR code')).toBeFalsy();
expect(queryByText("Sign in with QR code")).toBeFalsy();
});
it('renders qr code login section when enabled', async () => {
settingsValueSpy.mockImplementation(settingName => settingName === 'feature_qr_signin_reciprocate_show');
it("renders qr code login section when enabled", async () => {
settingsValueSpy.mockImplementation((settingName) => settingName === "feature_qr_signin_reciprocate_show");
const { getByText } = render(getComponent());
// wait for versions call to settle
await flushPromises();
expect(getByText('Sign in with QR code')).toBeTruthy();
expect(getByText("Sign in with QR code")).toBeTruthy();
});
it('enters qr code login section when show QR code button clicked', async () => {
settingsValueSpy.mockImplementation(settingName => settingName === 'feature_qr_signin_reciprocate_show');
it("enters qr code login section when show QR code button clicked", async () => {
settingsValueSpy.mockImplementation((settingName) => settingName === "feature_qr_signin_reciprocate_show");
const { getByText, getByTestId } = render(getComponent());
// wait for versions call to settle
await flushPromises();
fireEvent.click(getByText('Show QR code'));
fireEvent.click(getByText("Show QR code"));
expect(getByTestId("login-with-qr")).toBeTruthy();
});

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

File diff suppressed because it is too large Load diff

22
test/components/views/settings/tabs/user/VoiceUserSettingsTab-test.tsx
View file

@ -14,31 +14,31 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { mocked } from 'jest-mock';
import { render } from '@testing-library/react';
import React from "react";
import { mocked } from "jest-mock";
import { render } from "@testing-library/react";
import VoiceUserSettingsTab from '../../../../../../src/components/views/settings/tabs/user/VoiceUserSettingsTab';
import VoiceUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/VoiceUserSettingsTab";
import MediaDeviceHandler from "../../../../../../src/MediaDeviceHandler";
jest.mock("../../../../../../src/MediaDeviceHandler");
const MediaDeviceHandlerMock = mocked(MediaDeviceHandler);
describe('<VoiceUserSettingsTab />', () => {
const getComponent = (): React.ReactElement => (<VoiceUserSettingsTab />);
describe("<VoiceUserSettingsTab />", () => {
const getComponent = (): React.ReactElement => <VoiceUserSettingsTab />;
beforeEach(() => {
jest.clearAllMocks();
});
it('renders audio processing settings', () => {
it("renders audio processing settings", () => {
const { getByTestId } = render(getComponent());
expect(getByTestId('voice-auto-gain')).toBeTruthy();
expect(getByTestId('voice-noise-suppression')).toBeTruthy();
expect(getByTestId('voice-echo-cancellation')).toBeTruthy();
expect(getByTestId("voice-auto-gain")).toBeTruthy();
expect(getByTestId("voice-noise-suppression")).toBeTruthy();
expect(getByTestId("voice-echo-cancellation")).toBeTruthy();
});
it('sets and displays audio processing settings', () => {
it("sets and displays audio processing settings", () => {
MediaDeviceHandlerMock.getAudioAutoGainControl.mockReturnValue(false);
MediaDeviceHandlerMock.getAudioEchoCancellation.mockReturnValue(true);
MediaDeviceHandlerMock.getAudioNoiseSuppression.mockReturnValue(false);