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

Load RTE component only when needed (#9804)

Browse source 
Use react lazy to load rte component
This commit is contained in:
Florian Duros 2022-12-20 15:59:18 +01:00 • committed by GitHub
parent 26a01aba00
commit d6e447b934
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 92 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

24
test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
View file

@ -64,13 +64,35 @@ describe("EditWysiwygComposer", () => {
);
};
it("Should not render the component when not ready", async () => {
// When
const { rerender } = customRender(false);
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"), {
timeout: 2000,
});
rerender(
<MatrixClientContext.Provider value={mockClient}>
<RoomContext.Provider value={{ ...defaultRoomContext, room: undefined }}>
<EditWysiwygComposer disabled={false} editorStateTransfer={editorStateTransfer} />
</RoomContext.Provider>
</MatrixClientContext.Provider>,
);
// Then
await waitFor(() => expect(screen.queryByRole("textbox")).toBeNull());
});
describe("Initialize with content", () => {
it("Should initialize useWysiwyg with html content", async () => {
// When
customRender(false, editorStateTransfer);
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
// Then
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"), {
timeout: 2000,
});
await waitFor(() =>
expect(screen.getByRole("textbox")).toContainHTML(mockEvent.getContent()["formatted_body"]),
);

6
test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
View file

@ -24,7 +24,7 @@ import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
import { Action } from "../../../../../src/dispatcher/actions";
import { IRoomState } from "../../../../../src/components/structures/RoomView";
import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer";
import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer/";
import { aboveLeftOf } from "../../../../../src/components/structures/ContextMenu";
import { ComposerInsertPayload, ComposerType } from "../../../../../src/dispatcher/payloads/ComposerInsertPayload";
import { setSelection } from "../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
@ -101,12 +101,12 @@ describe("SendWysiwygComposer", () => {
);
};
it("Should render WysiwygComposer when isRichTextEnabled is at true", () => {
it("Should render WysiwygComposer when isRichTextEnabled is at true", async () => {
// When
customRender(jest.fn(), jest.fn(), false, true);
// Then
expect(screen.getByTestId("WysiwygComposer")).toBeTruthy();
await waitFor(() => expect(screen.getByTestId("WysiwygComposer")).toBeTruthy());
});
it("Should render PlainTextComposer when isRichTextEnabled is at false", () => {