Added drag tests for positioned space

Author: aeagle

src/components/tests/Common.tsx

@@ -290,7 +290,7 @@ export const commonResizableTests = (
 	});
 };
 
-export const commonPositionedTests = (
+export const commonPositionedResizeTests = (
 	name: string,
 	size: (style: CSSStyleDeclaration) => string | null,
 	edge: (style: CSSStyleDeclaration) => string | null,

src/components/tests/__tests__/Positioned.tsx

@@ -1,8 +1,11 @@
 import * as React from "react";
-import { cleanup } from "@testing-library/react";
+import { cleanup, render } from "@testing-library/react";
 import { Positioned } from "../../Positioned";
 import "@testing-library/jest-dom/extend-expect";
-import { commonPositionedTests, commonPropsTests } from "../Common";
+import { commonPositionedResizeTests, commonPropsTests, mutateComponent } from "../Common";
+import { useCurrentSpace } from "../../../core-react";
+import { ViewPort } from "../../ViewPort";
+import { drag } from "../TestUtils";
 
 afterEach(cleanup);
 
@@ -29,7 +32,7 @@ commonPropsTests("Positioned (left/top/width/height)", positionedLeftTopWidthHei
 	height: "100px",
 });
 
-commonPositionedTests(
+commonPositionedResizeTests(
 	"Positioned left resize",
 	/* size */ (style) => style.width,
 	/* edge */ (style) => style.left,
@@ -39,7 +42,7 @@ commonPositionedTests(
 	/* negate */ false,
 );
 
-commonPositionedTests(
+commonPositionedResizeTests(
 	"Positioned right resize",
 	/* size */ (style) => style.width,
 	/* edge */ (style) => style.right,
@@ -49,7 +52,7 @@ commonPositionedTests(
 	/* negate */ true,
 );
 
-commonPositionedTests(
+commonPositionedResizeTests(
 	"Positioned top resize",
 	/* size */ (style) => style.height,
 	/* edge */ (style) => style.top,
@@ -59,7 +62,7 @@ commonPositionedTests(
 	/* negate */ false,
 );
 
-commonPositionedTests(
+commonPositionedResizeTests(
 	"Positioned bottom resize",
 	/* size */ (style) => style.height,
 	/* edge */ (style) => style.bottom,
@@ -68,3 +71,112 @@ commonPositionedTests(
 	/* horizontal */ false,
 	/* negate */ true,
 );
+
+const testProps = { id: "test" };
+
+[
+	{ name: "left/top/width/height", props: { left: 100, top: 100, width: 100, height: 100 }, widthHeightSpecified: true },
+	{ name: "left/top/right/bottom", props: { left: 100, top: 100, right: 100, bottom: 100 }, widthHeightSpecified: false },
+].forEach((testCase) => {
+	test(`Positioned (${testCase.name}) after drag has correct styles`, async () => {
+		const Inner = () => {
+			const space = useCurrentSpace();
+			return (
+				<button id="test-drag-handle" onMouseDown={space.startMouseDrag} onTouchStart={space.startTouchDrag}>
+					Drag handle
+				</button>
+			);
+		};
+
+		const { container } = render(
+			<ViewPort>
+				{mutateComponent(
+					<Positioned>
+						<Inner />
+					</Positioned>,
+					{ ...testProps, ...testCase.props },
+				)}
+			</ViewPort>,
+		);
+		const sut = container.querySelector("#test")!;
+		const dragHandle = container.querySelector(`#test-drag-handle`)!;
+
+		// act
+		drag(
+			dragHandle,
+			sut,
+			/* start rect */ { width: 50, height: 50 },
+			/* end rect */ { width: 150, height: 150 },
+			/* end X */ 100,
+			/* end Y */ 100,
+		);
+
+		// assert
+		const style = window.getComputedStyle(sut);
+
+		if (testCase.widthHeightSpecified) {
+			expect(style.width).toBe("100px");
+			expect(style.height).toBe("100px");
+		} else {
+			expect(style.left).toBe("calc(100px + 100px)");
+			expect(style.right).toBe("calc(100px + -100px)");
+			expect(style.top).toBe("calc(100px + 100px)");
+			expect(style.bottom).toBe("calc(100px + -100px)");
+		}
+	});
+
+	test(`Positioned (${testCase.name}) after subsequent drag has correct styles`, async () => {
+		const Inner = () => {
+			const space = useCurrentSpace();
+			return (
+				<button id="test-drag-handle" onMouseDown={space.startMouseDrag} onTouchStart={space.startTouchDrag}>
+					Drag handle
+				</button>
+			);
+		};
+
+		const { container } = render(
+			<ViewPort>
+				{mutateComponent(
+					<Positioned>
+						<Inner />
+					</Positioned>,
+					{ ...testProps, ...testCase.props },
+				)}
+			</ViewPort>,
+		);
+		const sut = container.querySelector("#test")!;
+		const dragHandle = container.querySelector(`#test-drag-handle`)!;
+
+		// act
+		drag(
+			dragHandle,
+			sut,
+			/* start rect */ { width: 50, height: 50 },
+			/* end rect */ { width: 150, height: 150 },
+			/* end X */ 100,
+			/* end Y */ 100,
+		);
+		drag(
+			dragHandle,
+			sut,
+			/* start rect */ { width: 150, height: 150 },
+			/* end rect */ { width: 50, height: 50 },
+			/* end X */ -100,
+			/* end Y */ -100,
+		);
+
+		// assert
+		const style = window.getComputedStyle(sut);
+
+		if (testCase.widthHeightSpecified) {
+			expect(style.width).toBe("100px");
+			expect(style.height).toBe("100px");
+		} else {
+			expect(style.left).toBe("calc(100px + 0px)");
+			expect(style.right).toBe("calc(100px + 0px)");
+			expect(style.top).toBe("calc(100px + 0px)");
+			expect(style.bottom).toBe("calc(100px + 0px)");
+		}
+	});
+});