Initial positioned tests

Author: aeagle

src/components/tests/Common.tsx

@@ -3,8 +3,9 @@ import { render } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { ViewPort } from "../ViewPort";
 import { drag } from "./TestUtils";
+import { ResizeType } from "../../core-types";
 
-const mutateComponent = (component: React.ReactNode, newProps: Object) => {
+export const mutateComponent = (component: React.ReactNode, newProps: Object) => {
 	return React.cloneElement(component as React.DetailedReactHTMLElement<any, HTMLElement>, newProps);
 };
 
@@ -287,3 +288,73 @@ export const commonResizableTests = (
 		expect(size(style)).toBe("150px");
 	});
 };
+
+export const commonPositionedTests = (
+	name: string,
+	component: React.ReactNode,
+	size: (style: CSSStyleDeclaration) => string | null,
+	edge: (style: CSSStyleDeclaration) => string | null,
+	oppositeEdge: (style: CSSStyleDeclaration) => string | null,
+	handle: string,
+	horizontal: boolean,
+	negate: boolean,
+) => {
+	test(`${name} after resize has correct styles`, async () => {
+		// arrange
+		const { container } = render(
+			<ViewPort>
+				{mutateComponent(component, { id: "test", resizable: [ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right] })}
+			</ViewPort>,
+		);
+
+		const resizeHandle = container.querySelector(`#test-${handle}`)!;
+		const sut = container.querySelector("#test")!;
+
+		// act
+		drag(
+			resizeHandle,
+			sut,
+			{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
+			{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
+			horizontal ? (negate ? -100 : 100) : 0,
+			horizontal ? 0 : negate ? -100 : 100,
+		);
+
+		// assert
+		const style = window.getComputedStyle(sut);
+		expect(size(style)).toBe("calc(100px + -100px)");
+	});
+
+	test(`${name} subsequent resize has correct styles`, async () => {
+		// arrange
+		const { container } = render(
+			<ViewPort>
+				{mutateComponent(component, { id: "test", resizable: [ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right] })}
+			</ViewPort>,
+		);
+		const resizeHandle = container.querySelector(`#test-${handle}`)!;
+		const sut = container.querySelector("#test")!;
+
+		// act
+		drag(
+			resizeHandle,
+			sut,
+			{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
+			{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
+			horizontal ? (negate ? -100 : 100) : 0,
+			horizontal ? 0 : negate ? -100 : 100,
+		);
+		drag(
+			resizeHandle,
+			sut,
+			{ width: horizontal ? 150 : 0, height: horizontal ? 0 : 150 },
+			{ width: horizontal ? 50 : 0, height: horizontal ? 0 : 50 },
+			horizontal ? (negate ? 100 : -100) : 0,
+			horizontal ? 0 : negate ? 100 : -100,
+		);
+
+		// assert
+		const style = window.getComputedStyle(sut);
+		expect(size(style)).toBe("100px");
+	});
+};

src/components/tests/__tests__/Positioned.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { cleanup } from "@testing-library/react";
+import { Positioned } from "../../Positioned";
+import "@testing-library/jest-dom/extend-expect";
+import { commonPositionedTests, commonPropsTests } from "../Common";
+
+afterEach(cleanup);
+
+const positionedLeftTopRightBottom = <Positioned left={100} top={100} right={100} bottom={100} />;
+const positionedLeftTopWidthHeight = <Positioned left={100} top={100} width={100} height={100} />;
+
+commonPropsTests("Positioned (left/top/right/bottom)", positionedLeftTopRightBottom, {
+	position: "absolute",
+	left: "100px",
+	top: "100px",
+	right: "100px",
+	bottom: "100px",
+	width: "",
+	height: "",
+});
+
+commonPropsTests("Positioned (left/top/width/height)", positionedLeftTopWidthHeight, {
+	position: "absolute",
+	left: "100px",
+	top: "100px",
+	right: "",
+	bottom: "",
+	width: "100px",
+	height: "100px",
+});
+
+commonPositionedTests(
+	"Positioned left resize (left/top/width/height)",
+	positionedLeftTopWidthHeight,
+	(style) => style.width,
+	(style) => style.left,
+	(style) => style.right,
+	"ml",
+	true,
+	false,
+);
+
+commonPositionedTests(
+	"Positioned right resize (left/top/width/height)",
+	positionedLeftTopWidthHeight,
+	(style) => style.width,
+	(style) => style.right,
+	(style) => style.left,
+	"mr",
+	true,
+	true,
+);
+
+commonPositionedTests(
+	"Positioned top resize (left/top/width/height)",
+	positionedLeftTopWidthHeight,
+	(style) => style.height,
+	(style) => style.top,
+	(style) => style.bottom,
+	"mt",
+	false,
+	false,
+);
+
+commonPositionedTests(
+	"Positioned bottom resize (left/top/width/height)",
+	positionedLeftTopWidthHeight,
+	(style) => style.height,
+	(style) => style.bottom,
+	(style) => style.top,
+	"mb",
+	false,
+	true,
+);