element-web/test/components/structures/MainSplit-test.tsx

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

100 lines
3.2 KiB
TypeScript
Raw Normal View History

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
Tweak default right panel size to be 320px except for maximised widgets at 420px (#110) * Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak default right panel size to be 320px except for video rooms/maximised widgets at 420px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Track panel resizing in analytics Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix import cycle Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test/components/structures/MainSplit-test.tsx Co-authored-by: David Baker <dbkr@users.noreply.github.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2024-10-04 09:41:00 +00:00
import { fireEvent, render } from "@testing-library/react";
import MainSplit from "../../../src/components/structures/MainSplit";
import ResizeNotifier from "../../../src/utils/ResizeNotifier";
Tweak default right panel size to be 320px except for maximised widgets at 420px (#110) * Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak default right panel size to be 320px except for video rooms/maximised widgets at 420px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Track panel resizing in analytics Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix import cycle Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test/components/structures/MainSplit-test.tsx Co-authored-by: David Baker <dbkr@users.noreply.github.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2024-10-04 09:41:00 +00:00
import { PosthogAnalytics } from "../../../src/PosthogAnalytics.ts";
describe("<MainSplit/>", () => {
const resizeNotifier = new ResizeNotifier();
const children = (
<div>
Child<span>Foo</span>Bar
</div>
);
const panel = <div>Right panel</div>;
Tweak default right panel size to be 320px except for maximised widgets at 420px (#110) * Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak default right panel size to be 320px except for video rooms/maximised widgets at 420px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Track panel resizing in analytics Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix import cycle Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test/components/structures/MainSplit-test.tsx Co-authored-by: David Baker <dbkr@users.noreply.github.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2024-10-04 09:41:00 +00:00
beforeEach(() => {
localStorage.clear();
});
it("renders", () => {
const { asFragment, container } = render(
Tweak default right panel size to be 320px except for maximised widgets at 420px (#110) * Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak default right panel size to be 320px except for video rooms/maximised widgets at 420px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Track panel resizing in analytics Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix import cycle Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test/components/structures/MainSplit-test.tsx Co-authored-by: David Baker <dbkr@users.noreply.github.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2024-10-04 09:41:00 +00:00
<MainSplit
resizeNotifier={resizeNotifier}
children={children}
panel={panel}
analyticsRoomType="other_room"
/>,
);
expect(asFragment()).toMatchSnapshot();
Tweak default right panel size to be 320px except for maximised widgets at 420px (#110) * Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak default right panel size to be 320px except for video rooms/maximised widgets at 420px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Track panel resizing in analytics Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix import cycle Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test/components/structures/MainSplit-test.tsx Co-authored-by: David Baker <dbkr@users.noreply.github.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2024-10-04 09:41:00 +00:00
// Assert it matches the default width of 320
expect(container.querySelector<HTMLElement>(".mx_RightPanel_ResizeWrapper")!.style.width).toBe("320px");
});
it("respects defaultSize prop", () => {
const { asFragment, container } = render(
Tweak default right panel size to be 320px except for maximised widgets at 420px (#110) * Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak default right panel size to be 320px except for video rooms/maximised widgets at 420px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Track panel resizing in analytics Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix import cycle Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test/components/structures/MainSplit-test.tsx Co-authored-by: David Baker <dbkr@users.noreply.github.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2024-10-04 09:41:00 +00:00
<MainSplit
resizeNotifier={resizeNotifier}
children={children}
panel={panel}
defaultSize={500}
analyticsRoomType="other_room"
/>,
);
expect(asFragment()).toMatchSnapshot();
// Assert it matches the default width of 350
expect(container.querySelector<HTMLElement>(".mx_RightPanel_ResizeWrapper")!.style.width).toBe("500px");
});
it("prefers size stashed in LocalStorage to the defaultSize prop", () => {
localStorage.setItem("mx_rhs_size_thread", "333");
const { container } = render(
<MainSplit
resizeNotifier={resizeNotifier}
children={children}
panel={panel}
sizeKey="thread"
defaultSize={400}
Tweak default right panel size to be 320px except for maximised widgets at 420px (#110) * Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak default right panel size to be 320px except for video rooms/maximised widgets at 420px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Track panel resizing in analytics Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix import cycle Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test/components/structures/MainSplit-test.tsx Co-authored-by: David Baker <dbkr@users.noreply.github.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2024-10-04 09:41:00 +00:00
analyticsRoomType="other_room"
/>,
);
expect(container.querySelector<HTMLElement>(".mx_RightPanel_ResizeWrapper")!.style.width).toBe("333px");
});
Tweak default right panel size to be 320px except for maximised widgets at 420px (#110) * Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak default right panel size to be 320px except for video rooms/maximised widgets at 420px Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Track panel resizing in analytics Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix import cycle Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test/components/structures/MainSplit-test.tsx Co-authored-by: David Baker <dbkr@users.noreply.github.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2024-10-04 09:41:00 +00:00
it("should report to analytics on resize stop", () => {
const { container } = render(
<MainSplit
resizeNotifier={resizeNotifier}
children={children}
panel={panel}
sizeKey="thread"
defaultSize={400}
analyticsRoomType="other_room"
/>,
);
const spy = jest.spyOn(PosthogAnalytics.instance, "trackEvent");
const handle = container.querySelector(".mx_ResizeHandle--horizontal")!;
fireEvent.mouseDown(handle);
fireEvent.mouseMove(handle, { clientX: 0 });
fireEvent.mouseUp(handle);
expect(spy).toHaveBeenCalledWith({
eventName: "WebPanelResize",
panel: "right",
roomType: "other_room",
size: 400,
});
});
});