/* Copyright 2024 New Vector Ltd. Copyright 2022 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, { MouseEventHandler } from "react"; import { screen, render, RenderResult } from "jest-matrix-react"; import userEvent from "@testing-library/user-event"; import PictureInPictureDragger, { CreatePipChildren, } from "../../../../src/components/structures/PictureInPictureDragger"; describe("PictureInPictureDragger", () => { let renderResult: RenderResult; const mkContent1: Array = [ () => { return
content 1
; }, ]; const mkContent2: Array = [ () => { return (
content 2
content 2.2
); }, ]; describe("when rendering the dragger with PiP content 1", () => { beforeEach(() => { renderResult = render({mkContent1}); }); it("should render the PiP content", () => { expect(renderResult.container).toMatchSnapshot("pip-content-1"); }); describe("and rerendering PiP content 1", () => { beforeEach(() => { renderResult.rerender({mkContent1}); }); it("should not change the PiP content", () => { expect(renderResult.container).toMatchSnapshot("pip-content-1"); }); }); describe("and rendering PiP content 2", () => { beforeEach(() => { renderResult.rerender({mkContent2}); }); it("should update the PiP content", () => { expect(renderResult.container).toMatchSnapshot(); }); }); }); describe("when rendering the dragger with PiP content 1 and 2", () => { beforeEach(() => { renderResult = render( {[...mkContent1, ...mkContent2]}, ); }); it("should render both contents", () => { expect(renderResult.container).toMatchSnapshot(); }); }); describe("when rendering the dragger", () => { let clickSpy: jest.Mocked; let target: HTMLElement; beforeEach(() => { clickSpy = jest.fn(); render( {[ ({ onStartMoving }) => ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events
Hello
), ]}
, ); target = screen.getByText("Hello"); }); it("and clicking without a drag motion, it should pass the click to children", async () => { await userEvent.pointer([{ keys: "[MouseLeft>]", target }, { keys: "[/MouseLeft]" }]); expect(clickSpy).toHaveBeenCalled(); }); it("and clicking with a drag motion above the threshold of 5px, it should not pass the click to children", async () => { await userEvent.pointer([{ keys: "[MouseLeft>]", target }, { coords: { x: 60, y: 2 } }, "[/MouseLeft]"]); expect(clickSpy).not.toHaveBeenCalled(); }); it("and clickign with a drag motion below the threshold of 5px, it should pass the click to the children", async () => { await userEvent.pointer([{ keys: "[MouseLeft>]", target }, { coords: { x: 4, y: 4 } }, "[/MouseLeft]"]); expect(clickSpy).toHaveBeenCalled(); }); }); });