hundredpercent/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-26 17:08:21 +00:00
Code Issues Releases Wiki Activity

Update tests and storybook

Browse Source
This commit is contained in:
R Midhun Suresh
2026-05-25 03:48:49 +05:30
parent 3eb4c1406f
commit 09ef9799b6
8 changed files with 258 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/viewmodels/structures/ResizerViewModel-test.ts
+16 -1
View File
@@ -85,7 +85,7 @@ describe("LeftPanelResizerViewModel", () => {
expect(mockHandle.resize).not.toHaveBeenCalledWith("34%");
});
describe("should expand panel on click()", () => {
describe("should expand panel on click when panel is collapsed", () => {
it("to last non-zero width that the user set", () => {
const vm = new ResizerViewModel();
SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
@@ -118,6 +118,21 @@ describe("LeftPanelResizerViewModel", () => {
});
});
it("should collapse panel on click when panel is expanded", () => {
const vm = new ResizerViewModel();
const mockHandle = {
collapse: jest.fn(),
isCollapsed: jest.fn().mockReturnValue(false),
} as unknown as PanelImperativeHandle;
vm.setPanelHandle(mockHandle);
// Simulate click
vm.onPointerDown();
vm.onPointerUp();
expect(mockHandle.collapse).toHaveBeenCalled();
});
it("should resize to nearest whole number", () => {
const vm = new ResizerViewModel();
const mockHandle = {
packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-collapsed-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-expanded-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/keyboard-focused-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 14 KiB

packages/shared-components/__vis__/linux/__baselines__/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

packages/shared-components/src/resize/separator/SeparatorView.stories.tsx
+43 -1
View File
@@ -116,7 +116,7 @@ export const KeyboardFocused: Story = {
},
};
export const Hover: Story = {
export const HoverWhenCollapsed: Story = {
// We'll manually take a screenshot for this story
tags: ["autodocs", "!snapshot"],
decorators: [
@@ -148,3 +148,45 @@ export const Hover: Story = {
await expect(canvasElement).toMatchImageSnapshot();
},
};
export const HoverWhenExpanded: Story = {
// We'll manually take a screenshot for this story
tags: ["autodocs", "!snapshot"],
args: {
isCollapsed: false,
},
decorators: [
(Story) => (
<div
style={{
height: "600px",
}}
>
<ResizableGroup>
<div
style={{
height: "600px",
width: "200px",
}}
/>
<Panel collapsible defaultSize="0" minSize="200px" maxSize="400px">
<Flex tabIndex={0} align="center" justify="center">
LEFT CONTENT
</Flex>
</Panel>
<Story />
<Panel>
<Flex align="center" justify="center">
MAIN CONTENT
</Flex>
</Panel>
</ResizableGroup>
</div>
),
],
play: async ({ canvas, canvasElement }) => {
const separator = canvas.getByRole("separator");
separator.dataset.separator = "hover";
await expect(canvasElement).toMatchImageSnapshot();
},
};
packages/shared-components/src/resize/separator/SeparatorView.test.tsx
+11 -1
View File
@@ -15,7 +15,7 @@ import * as stories from "./SeparatorView.stories";
import { BaseViewModel } from "../../core/viewmodel";
import { ResizableGroup, Panel, type ResizerViewSnapshot, SeparatorView, type SeparatorViewActions } from "..";
const { Default, LeftPanelExpanded, KeyboardFocused } = composeStories(stories);
const { Default, LeftPanelExpanded, KeyboardFocused, HoverWhenCollapsed, HoverWhenExpanded } = composeStories(stories);
class MockViewModel extends BaseViewModel<ResizerViewSnapshot, unknown> implements SeparatorViewActions {
public constructor(snapshot: ResizerViewSnapshot) {
@@ -55,6 +55,16 @@ describe("<SeparatorView />", () => {
expect(container).toMatchSnapshot();
});
it("renders HoverWhenCollapsed story", () => {
const { container } = render(<HoverWhenCollapsed />);
expect(container).toMatchSnapshot();
});
it("renders HoverWhenExpanded story", () => {
const { container } = render(<HoverWhenExpanded />);
expect(container).toMatchSnapshot();
});
it("should call onPointerDown and onPointerUp on pointer events", async () => {
const vm = renderPanel();
const separator = screen.getByRole("separator");
packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
+188 -16
View File
@@ -57,6 +57,175 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
d="M5 15a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 14q0-.424.287-.713A.97.97 0 0 1 5 13h14q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 19 15zm0-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 10q0-.424.287-.713A.97.97 0 0 1 5 9h14q.424 0 .712.287Q20 9.576 20 10t-.288.713A.97.97 0 0 1 19 11z"
/>
</svg>
<div
class="SeparatorView-module_activeSeparatorContainer"
>
<div
class="SeparatorView-module_activeSeparator"
/>
</div>
</div>
<div
data-panel="true"
data-testid="react-use-id-4"
id="react-use-id-4"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
>
<div
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
>
<div
class="Flex-module_flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
MAIN CONTENT
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`<SeparatorView /> > renders HoverWhenCollapsed story 1`] = `
<div>
<div
style="height: 600px;"
>
<div
data-group="true"
data-testid="react-use-id-1"
id="react-use-id-1"
style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
>
<div
data-panel="true"
data-testid="react-use-id-2"
id="react-use-id-2"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 0 1 0px; overflow: visible;"
>
<div
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
>
<div
class="Flex-module_flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
tabindex="0"
>
LEFT CONTENT
</div>
</div>
</div>
<div
aria-controls="react-use-id-2"
aria-label="Click or drag to expand"
aria-orientation="vertical"
aria-valuemax="99.502"
aria-valuemin="0"
aria-valuenow="0"
class="SeparatorView-module_separator Separator"
data-separator="inactive"
data-separator-type="bar"
data-testid="react-use-id-3"
id="react-use-id-3"
role="separator"
style="flex: 0 0 auto; touch-action: none;"
tabindex="0"
>
<svg
fill="currentColor"
height="12px"
transform="rotate(90)"
viewBox="3.999704360961914 8.999704360961914 16.000295639038086 6.000591278076172"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 15a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 14q0-.424.287-.713A.97.97 0 0 1 5 13h14q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 19 15zm0-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 10q0-.424.287-.713A.97.97 0 0 1 5 9h14q.424 0 .712.287Q20 9.576 20 10t-.288.713A.97.97 0 0 1 19 11z"
/>
</svg>
<div
class="SeparatorView-module_activeSeparatorContainer"
>
<div
class="SeparatorView-module_activeSeparator"
/>
</div>
</div>
<div
data-panel="true"
data-testid="react-use-id-4"
id="react-use-id-4"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
>
<div
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
>
<div
class="Flex-module_flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
MAIN CONTENT
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`<SeparatorView /> > renders HoverWhenExpanded story 1`] = `
<div>
<div
style="height: 600px;"
>
<div
data-group="true"
data-testid="react-use-id-1"
id="react-use-id-1"
style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
>
<div
data-panel="true"
data-testid="react-use-id-2"
id="react-use-id-2"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 0 1 0px; overflow: visible;"
>
<div
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
>
<div
class="Flex-module_flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
tabindex="0"
>
LEFT CONTENT
</div>
</div>
</div>
<div
aria-controls="react-use-id-2"
aria-label="Click or drag to expand"
aria-orientation="vertical"
aria-valuemax="96.618"
aria-valuemin="0"
aria-valuenow="0"
class="SeparatorView-module_separator Separator"
data-separator="inactive"
data-separator-type="border"
data-testid="react-use-id-3"
id="react-use-id-3"
role="separator"
style="flex: 0 0 auto; touch-action: none;"
tabindex="0"
>
<div
class="SeparatorView-module_activeSeparatorContainer"
>
<div
class="SeparatorView-module_activeSeparator"
/>
</div>
</div>
<div
data-panel="true"
@@ -95,7 +264,7 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
data-panel="true"
data-testid="react-use-id-2"
id="react-use-id-2"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 49.751 1 0px; overflow: visible;"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 48.309 1 0px; overflow: visible;"
>
<div
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
@@ -113,36 +282,31 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
aria-controls="react-use-id-2"
aria-label="Click or drag to expand"
aria-orientation="vertical"
aria-valuemax="99.502"
aria-valuemax="96.618"
aria-valuemin="0"
aria-valuenow="49.751"
aria-valuenow="48.309"
class="SeparatorView-module_separator Separator"
data-separator="inactive"
data-separator-type="bar"
data-separator-type="border"
data-testid="react-use-id-3"
id="react-use-id-3"
role="separator"
style="flex: 0 0 auto; touch-action: none;"
tabindex="0"
>
<svg
fill="currentColor"
height="12px"
transform="rotate(90)"
viewBox="3.999704360961914 8.999704360961914 16.000295639038086 6.000591278076172"
width="20px"
xmlns="http://www.w3.org/2000/svg"
<div
class="SeparatorView-module_activeSeparatorContainer"
>
<path
d="M5 15a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 14q0-.424.287-.713A.97.97 0 0 1 5 13h14q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 19 15zm0-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 10q0-.424.287-.713A.97.97 0 0 1 5 9h14q.424 0 .712.287Q20 9.576 20 10t-.288.713A.97.97 0 0 1 19 11z"
<div
class="SeparatorView-module_activeSeparator"
/>
</svg>
</div>
</div>
<div
data-panel="true"
data-testid="react-use-id-4"
id="react-use-id-4"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 50.249 1 0px; overflow: visible;"
style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 51.691 1 0px; overflow: visible;"
>
<div
style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
@@ -204,7 +368,15 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
role="separator"
style="flex: 0 0 auto; touch-action: none;"
tabindex="0"
/>
>
<div
class="SeparatorView-module_activeSeparatorContainer"
>
<div
class="SeparatorView-module_activeSeparator"
/>
</div>
</div>
<div
data-panel="true"
data-testid="react-use-id-4"