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

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 585 additions and 413 deletions
Download patch file Download diff file Expand all files Collapse all files

114
test/components/views/rooms/SendMessageComposer-test.tsx
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",