sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Remove all usages of UNSAFE_* React methods (#9583)

Browse Source
This commit is contained in:
Michael Telatynski
2022-11-18 09:22:43 +00:00
committed by GitHub
parent 38dbe8ed33
commit 590b845f3f
33 changed files with 585 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
-46
View File
@@ -189,30 +189,7 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
>
<BaseAvatar
height={36}
hideTitle={false}
idName="@alice:server"
member={
RoomMember {
"_events": {},
"_eventsCount": 0,
"_isOutOfBand": false,
"_maxListeners": undefined,
"disambiguate": false,
"events": {},
"membership": undefined,
"modified": 1647270879403,
"name": "@alice:server",
"powerLevel": 0,
"powerLevelNorm": 0,
"rawDisplayName": "@alice:server",
"requestedProfileInfo": false,
"roomId": "!room:server",
"typing": false,
"user": undefined,
"userId": "@alice:server",
Symbol(kCapture): false,
}
}
name="@alice:server"
resizeMethod="crop"
title="@alice:server"
@@ -220,29 +197,6 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
>
<span
className="mx_BaseAvatar"
hideTitle={false}
member={
RoomMember {
"_events": {},
"_eventsCount": 0,
"_isOutOfBand": false,
"_maxListeners": undefined,
"disambiguate": false,
"events": {},
"membership": undefined,
"modified": 1647270879403,
"name": "@alice:server",
"powerLevel": 0,
"powerLevelNorm": 0,
"rawDisplayName": "@alice:server",
"requestedProfileInfo": false,
"roomId": "!room:server",
"typing": false,
"user": undefined,
"userId": "@alice:server",
Symbol(kCapture): false,
}
}
role="presentation"
>
<span
test/components/views/elements/PowerSelector-test.tsx
+16
View File
@@ -59,4 +59,20 @@ describe('<PowerSelector />', () => {
await screen.findByDisplayValue(40);
expect(fn).toHaveBeenCalledWith(40, "key");
});
it("should reset when props get changed", async () => {
const fn = jest.fn();
const { rerender } = render(<PowerSelector value={50} maxValue={100} usersDefault={0} onChange={fn} />);
const select = screen.getByLabelText("Power level");
fireEvent.change(select, { target: { value: "SELECT_VALUE_CUSTOM" } });
rerender(<PowerSelector value={51} maxValue={100} usersDefault={0} onChange={fn} />);
await screen.findByDisplayValue(51);
rerender(<PowerSelector value={50} maxValue={100} usersDefault={0} onChange={fn} />);
const option = await screen.findByText<HTMLOptionElement>("Moderator");
expect(option.selected).toBeTruthy();
expect(fn).not.toHaveBeenCalled();
});
});
test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
+1 -1
View File
@@ -14,4 +14,4 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
</span>"
`;
exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class="mx_EventTile_body markdown-body" dir="auto">Hey <span><bdi><a class="mx_Pill mx_UserPill"><img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" member="[object Object]" aria-hidden="true"><span class="mx_Pill_linkText">Member</span></a></bdi></span></span>"`;
exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class="mx_EventTile_body markdown-body" dir="auto">Hey <span><bdi><a class="mx_Pill mx_UserPill"><img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" aria-hidden="true"><span class="mx_Pill_linkText">Member</span></a></bdi></span></span>"`;
test/components/views/rooms/MessageComposer-test.tsx
+2 -2
View File
@@ -38,7 +38,7 @@ import dis from "../../../../src/dispatcher/dispatcher";
import { Action } from "../../../../src/dispatcher/actions";
import { SendMessageComposer } from "../../../../src/components/views/rooms/SendMessageComposer";
import { E2EStatus } from "../../../../src/utils/ShieldUtils";
import { addTextToComposer } from "../../../test-utils/composer";
import { addTextToComposerEnzyme } from "../../../test-utils/composer";
import UIStore, { UI_EVENTS } from "../../../../src/stores/UIStore";
import { SendWysiwygComposer } from "../../../../src/components/views/rooms/wysiwyg_composer";
@@ -176,7 +176,7 @@ describe("MessageComposer", () => {
beforeEach(() => {
wrapper = wrapAndRender({ room });
addTextToComposer(wrapper, "Hello");
addTextToComposerEnzyme(wrapper, "Hello");
wrapper.update();
});
test/components/views/rooms/SendMessageComposer-test.tsx
+43 -71
View File
@@ -15,17 +15,13 @@ limitations under the License.
*/
import React from "react";
import { act } from "react-dom/test-utils";
import { sleep } from "matrix-js-sdk/src/utils";
import { MatrixClient, MsgType, RelationType } from "matrix-js-sdk/src/matrix";
// eslint-disable-next-line deprecate/import
import { mount } from 'enzyme';
import { fireEvent, render, waitFor } from "@testing-library/react";
import { MatrixClient, MsgType } from "matrix-js-sdk/src/matrix";
import { mocked } from "jest-mock";
import SendMessageComposer, {
createMessageContent,
isQuickReaction,
SendMessageComposer as SendMessageComposerClass,
} from "../../../../src/components/views/rooms/SendMessageComposer";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
@@ -46,15 +42,6 @@ jest.mock("../../../../src/utils/local-room", () => ({
doMaybeLocalRoomAction: jest.fn(),
}));
const WrapWithProviders: React.FC<{
roomContext: IRoomState;
client: MatrixClient;
}> = ({ children, roomContext, client }) => <MatrixClientContext.Provider value={client}>
<RoomContext.Provider value={roomContext}>
{ children }
</RoomContext.Provider>
</MatrixClientContext.Provider>;
describe('<SendMessageComposer/>', () => {
const defaultRoomContext: IRoomState = {
roomLoading: true,
@@ -194,44 +181,48 @@ describe('<SendMessageComposer/>', () => {
toggleStickerPickerOpen: jest.fn(),
permalinkCreator: new RoomPermalinkCreator(mockRoom),
};
const getRawComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => (
<MatrixClientContext.Provider value={client}>
<RoomContext.Provider value={roomContext}>
<SendMessageComposer {...defaultProps} {...props} />
</RoomContext.Provider>
</MatrixClientContext.Provider>
);
const getComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => {
return mount(<SendMessageComposer {...defaultProps} {...props} />, {
wrappingComponent: WrapWithProviders,
wrappingComponentProps: { roomContext, client },
});
return render(getRawComponent(props, roomContext, client));
};
it("renders text and placeholder correctly", () => {
const wrapper = getComponent({ placeholder: "placeholder string" });
const { container } = getComponent({ placeholder: "placeholder string" });
expect(wrapper.find('[aria-label="placeholder string"]')).toHaveLength(1);
expect(container.querySelectorAll('[aria-label="placeholder string"]')).toHaveLength(1);
addTextToComposer(wrapper, "Test Text");
addTextToComposer(container, "Test Text");
expect(wrapper.text()).toBe("Test Text");
expect(container.textContent).toBe("Test Text");
});
it("correctly persists state to and from localStorage", () => {
const wrapper = getComponent({ replyToEvent: mockEvent });
const props = { replyToEvent: mockEvent };
const { container, unmount, rerender } = getComponent(props);
addTextToComposer(wrapper, "Test Text");
addTextToComposer(container, "Test Text");
// @ts-ignore
const key = wrapper.find(SendMessageComposerClass).instance().editorStateKey;
const key = "mx_cider_state_myfakeroom";
expect(wrapper.text()).toBe("Test Text");
expect(container.textContent).toBe("Test Text");
expect(localStorage.getItem(key)).toBeNull();
// ensure the right state was persisted to localStorage
wrapper.unmount();
unmount();
expect(JSON.parse(localStorage.getItem(key))).toStrictEqual({
parts: [{ "type": "plain", "text": "Test Text" }],
replyEventId: mockEvent.getId(),
});
// ensure the correct model is re-loaded
wrapper.mount();
expect(wrapper.text()).toBe("Test Text");
rerender(getRawComponent(props));
expect(container.textContent).toBe("Test Text");
expect(spyDispatcher).toHaveBeenCalledWith({
action: "reply_to_event",
event: mockEvent,
@@ -239,21 +230,20 @@ describe('<SendMessageComposer/>', () => {
});
// now try with localStorage wiped out
wrapper.unmount();
unmount();
localStorage.removeItem(key);
wrapper.mount();
expect(wrapper.text()).toBe("");
rerender(getRawComponent(props));
expect(container.textContent).toBe("");
});
it("persists state correctly without replyToEvent onbeforeunload", () => {
const wrapper = getComponent();
const { container } = getComponent();
addTextToComposer(wrapper, "Hello World");
addTextToComposer(container, "Hello World");
// @ts-ignore
const key = wrapper.find(SendMessageComposerClass).instance().editorStateKey;
const key = "mx_cider_state_myfakeroom";
expect(wrapper.text()).toBe("Hello World");
expect(container.textContent).toBe("Hello World");
expect(localStorage.getItem(key)).toBeNull();
// ensure the right state was persisted to localStorage
@@ -266,22 +256,20 @@ describe('<SendMessageComposer/>', () => {
it("persists to session history upon sending", async () => {
mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
const wrapper = getComponent({ replyToEvent: mockEvent });
const { container } = getComponent({ replyToEvent: mockEvent });
addTextToComposer(wrapper, "This is a message");
act(() => {
wrapper.find(".mx_SendMessageComposer").simulate("keydown", { key: "Enter" });
wrapper.update();
});
await sleep(10); // await the async _sendMessage
wrapper.update();
expect(spyDispatcher).toHaveBeenCalledWith({
action: "reply_to_event",
event: null,
context: TimelineRenderingType.Room,
addTextToComposer(container, "This is a message");
fireEvent.keyDown(container.querySelector(".mx_SendMessageComposer"), { key: "Enter" });
await waitFor(() => {
expect(spyDispatcher).toHaveBeenCalledWith({
action: "reply_to_event",
event: null,
context: TimelineRenderingType.Room,
});
});
expect(wrapper.text()).toBe("");
expect(container.textContent).toBe("");
const str = sessionStorage.getItem(`mx_cider_history_${mockRoom.roomId}[0]`);
expect(JSON.parse(str)).toStrictEqual({
parts: [{ "type": "plain", "text": "This is a message" }],
@@ -289,19 +277,6 @@ describe('<SendMessageComposer/>', () => {
});
});
it('correctly sets the editorStateKey for threads', () => {
const relation = {
rel_type: RelationType.Thread,
event_id: "myFakeThreadId",
};
const includeReplyLegacyFallback = false;
const wrapper = getComponent({ relation, includeReplyLegacyFallback });
const instance = wrapper.find(SendMessageComposerClass).instance();
// @ts-ignore
const key = instance.editorStateKey;
expect(key).toEqual('mx_cider_state_myfakeroom_myFakeThreadId');
});
it("correctly sends a message", () => {
mocked(doMaybeLocalRoomAction).mockImplementation(<T extends {}>(
roomId: string,
@@ -312,13 +287,10 @@ describe('<SendMessageComposer/>', () => {
});
mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
const wrapper = getComponent();
const { container } = getComponent();
addTextToComposer(wrapper, "test message");
act(() => {
wrapper.find(".mx_SendMessageComposer").simulate("keydown", { key: "Enter" });
wrapper.update();
});
addTextToComposer(container, "test message");
fireEvent.keyDown(container.querySelector(".mx_SendMessageComposer"), { key: "Enter" });
expect(mockClient.sendMessage).toHaveBeenCalledWith(
"myfakeroom",
test/components/views/settings/discovery/EmailAddresses-test.tsx
+40
View File
@@ -0,0 +1,40 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { render, screen } from "@testing-library/react";
import { IThreepid, ThreepidMedium } from 'matrix-js-sdk/src/@types/threepids';
import { EmailAddress } from '../../../../../src/components/views/settings/discovery/EmailAddresses';
describe("<EmailAddress/>", () => {
it("should track props.email.bound changes", async () => {
const email: IThreepid = {
medium: ThreepidMedium.Email,
address: "foo@bar.com",
validated_at: 12345,
added_at: 12342,
bound: false,
};
const { rerender } = render(<EmailAddress email={email} />);
await screen.findByText("Share");
email.bound = true;
rerender(<EmailAddress email={{ ...email }} />);
await screen.findByText("Revoke");
});
});
test/components/views/settings/discovery/PhoneNumbers-test.tsx
+40
View File
@@ -0,0 +1,40 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { render, screen } from "@testing-library/react";
import { IThreepid, ThreepidMedium } from 'matrix-js-sdk/src/@types/threepids';
import { PhoneNumber } from "../../../../../src/components/views/settings/discovery/PhoneNumbers";
describe("<PhoneNumber/>", () => {
it("should track props.msisdn.bound changes", async () => {
const msisdn: IThreepid = {
medium: ThreepidMedium.Phone,
address: "+441111111111",
validated_at: 12345,
added_at: 12342,
bound: false,
};
const { rerender } = render(<PhoneNumber msisdn={msisdn} />);
await screen.findByText("Share");
msisdn.bound = true;
rerender(<PhoneNumber msisdn={{ ...msisdn }} />);
await screen.findByText("Revoke");
});
});
test/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx
+22 -1
View File
@@ -15,7 +15,7 @@ limitations under the License.
*/
import React from "react";
import { render, RenderResult } from "@testing-library/react";
import { render, RenderResult, screen } from "@testing-library/react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import userEvent from "@testing-library/user-event";
@@ -24,6 +24,8 @@ import { mkStubRoom, stubClient } from "../../../../../test-utils";
import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
import { EchoChamber } from "../../../../../../src/stores/local-echo/EchoChamber";
import { RoomEchoChamber } from "../../../../../../src/stores/local-echo/RoomEchoChamber";
import SettingsStore from "../../../../../../src/settings/SettingsStore";
import { SettingLevel } from "../../../../../../src/settings/SettingLevel";
describe("NotificatinSettingsTab", () => {
const roomId = "!room:example.com";
@@ -55,4 +57,23 @@ describe("NotificatinSettingsTab", () => {
expect(roomProps.notificationVolume).not.toBe("mentions_only");
});
it("should show the currently chosen custom notification sound", async () => {
SettingsStore.setValue("notificationSound", roomId, SettingLevel.ACCOUNT, {
url: "mxc://server/custom-sound-123",
name: "custom-sound-123",
});
renderTab();
await screen.findByText("custom-sound-123");
});
it("should show the currently chosen custom notification sound url if no name", async () => {
SettingsStore.setValue("notificationSound", roomId, SettingLevel.ACCOUNT, {
url: "mxc://server/custom-sound-123",
});
renderTab();
await screen.findByText("http://this.is.a.url/server/custom-sound-123");
});
});