Added prop types tests

Author: aeagle

src/components/Anchored.tsx

@@ -8,6 +8,7 @@ export interface IResizableProps extends IReactSpaceCommonProps {
 	size: SizeUnit;
 	order?: number;
 	handleSize?: number;
+	touchHandleSize?: number;
 	handlePlacement?: ResizeHandlePlacement;
 	handleRender?: (handleProps: IResizeHandleProps) => React.ReactNode;
 	minimumSize?: number;
@@ -22,6 +23,7 @@ export const resizableProps = {
 		size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 		order: PropTypes.number,
 		handleSize: PropTypes.number,
+		touchHandleSize: PropTypes.number,
 		handlePlacement: PropTypes.oneOf([ResizeHandlePlacement.Inside, ResizeHandlePlacement.OverlayBoundary, ResizeHandlePlacement.OverlayInside]),
 		handleRender: PropTypes.func,
 		minimumSize: PropTypes.number,

src/components/Custom.tsx

@@ -6,6 +6,8 @@ import { IReactSpaceCommonProps } from "../core-react";
 import { anchoredProps, IAnchorProps } from "./Anchored";
 
 type ICustomProps = Omit<IReactSpaceCommonProps & IAnchorProps, "size"> & {
+	type?: Type;
+
 	// Anchored
 	anchor?: AnchorType;
 	anchorSize?: SizeUnit;
@@ -17,13 +19,14 @@ type ICustomProps = Omit<IReactSpaceCommonProps & IAnchorProps, "size"> & {
 	bottom?: SizeUnit | undefined;
 	width?: SizeUnit | undefined;
 	height?: SizeUnit | undefined;
-	isPositioned?: boolean;
 	resizeTypes?: ResizeType[];
 };
 
 const customProps = {
 	...anchoredProps,
 	...{
+		type: PropTypes.oneOf([Type.Positioned, Type.Fill, Type.Anchored]),
+
 		anchor: PropTypes.oneOf([AnchorType.Left, AnchorType.Top, AnchorType.Right, AnchorType.Bottom]),
 		anchorSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -33,13 +36,13 @@ const customProps = {
 		bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 		width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 		height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-		isPositioned: PropTypes.bool,
-		resizeTypes: PropTypes.any,
+		resizeTypes: PropTypes.array,
 	},
 };
 
 export const Custom: React.FC<ICustomProps> = ({
 	children,
+	type,
 	left,
 	top,
 	right,
@@ -48,15 +51,27 @@ export const Custom: React.FC<ICustomProps> = ({
 	height,
 	anchorSize,
 	anchor,
-	isPositioned,
 	resizable,
 	resizeTypes,
 	...props
 }) => {
 	let position: IPositionalProps;
-	let type = Type.Positioned;
+	type = type || Type.Fill;
 
-	if (!isPositioned) {
+	if (type === Type.Positioned) {
+		position = {
+			left: left,
+			top: top,
+			right: right,
+			bottom: bottom,
+			width: width,
+			height: height,
+			leftResizable: resizeTypes && resizeTypes.includes(ResizeType.Left),
+			topResizable: resizeTypes && resizeTypes.includes(ResizeType.Top),
+			rightResizable: resizeTypes && resizeTypes.includes(ResizeType.Right),
+			bottomResizable: resizeTypes && resizeTypes.includes(ResizeType.Bottom),
+		};
+	} else {
 		if (anchor === AnchorType.Left) {
 			position = { left: 0, top: 0, bottom: 0, width: anchorSize, rightResizable: resizable };
 			type = Type.Anchored;
@@ -78,19 +93,6 @@ export const Custom: React.FC<ICustomProps> = ({
 			};
 			type = Type.Fill;
 		}
-	} else {
-		position = {
-			left: left,
-			top: top,
-			right: right,
-			bottom: bottom,
-			width: width,
-			height: height,
-			leftResizable: resizeTypes && resizeTypes.includes(ResizeType.Left),
-			topResizable: resizeTypes && resizeTypes.includes(ResizeType.Top),
-			rightResizable: resizeTypes && resizeTypes.includes(ResizeType.Right),
-			bottomResizable: resizeTypes && resizeTypes.includes(ResizeType.Bottom),
-		};
 	}
 
 	return (

src/components/stories/02-components/Fixed.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
 import { withKnobs } from "@storybook/addon-knobs";
 import { Fixed, Centered, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../";
 import { red, green, blue, description } from "../Utils";
-import { CommonHeader, PropsTable, PropsHeader, Prop } from "../Utils";
+import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";
 
 <CommonHeader />
 
@@ -39,8 +39,6 @@ Top-level space with a fixed height and optional width.
 		<PropsHeader>Fixed properties</PropsHeader>
 		<Prop name="width" type="number | string" description="Optional width of space. When not specified the space will fill 100% of it's container." />
 		<Prop name="height" type="number | string" description="Height of space." />
-		<PropsHeader>Standard properties</PropsHeader>
-		<Prop name="className" type="string" description="A class name to apply to the space element." />
-		<Prop name="style" type="CSSProperties" description="CSS properties" />
+		<StandardProps />
 	</PropsTable>
 </Story>

src/components/stories/02-components/ViewPort.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
 import { withKnobs } from "@storybook/addon-knobs";
 import { ViewPort, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../";
 import { red, green, blue, description } from "../Utils";
-import { CommonHeader, PropsTable, PropsHeader, Prop } from "../Utils";
+import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";
 
 <CommonHeader />
 
@@ -74,8 +74,6 @@ window elements that may be on the page.
 		<Prop name="left" type="number | string" description="Left offset from viewport edge" />
 		<Prop name="right" type="number | string" description="Right offset from viewport edge" />
 		<Prop name="top" type="number | string" description="Top offset from viewport edge" />
-		<PropsHeader>Standard properties</PropsHeader>
-		<Prop name="className" type="string" description="A class name to apply to the space element." />
-		<Prop name="style" type="CSSProperties" description="CSS properties" />
+		<StandardProps />
 	</PropsTable>
 </Story>

src/components/stories/Utils.tsx

@@ -125,13 +125,30 @@ export const StandardProps = () => (
 export const AnchoredProps = () => (
 	<>
 		<PropsHeader>Anchored properties</PropsHeader>
-		<Prop name="size" type="string | number" description="Initial size of space specified as a percentage or in pixels." />
+		<Prop
+			name="resizable"
+			type="boolean"
+			default="false"
+			description={
+				<>
+					Determines if space is resizable.{" "}
+					<p>
+						<strong>
+							Note this is only available on Left, Top, Right and Bottom spaces to be able to switch non-resizable anchored spaces to
+							resizable spaces without reparenting child components. On LeftResizable, TopResizable, RightResizable and BottomResizable
+							this is inferred by default as true.
+						</strong>
+					</p>
+				</>
+			}
+		/>
 	</>
 );
 
 export const ResizableProps = () => (
 	<>
 		<PropsHeader>Resizable properties</PropsHeader>
+		<Prop name="size" type="string | number" description="Initial size of space specified as a percentage or in pixels." />
 		<Prop name="handleSize" type="number" default="5" description="Size of the resize handle in pixels." />
 		<Prop
 			name="touchHandleSize"

src/components/tests/Common.tsx

@@ -5,11 +5,18 @@ import { ViewPort } from "../ViewPort";
 import { drag } from "./TestUtils";
 import { ResizeType } from "../../core-types";
 import { Positioned } from "../Positioned";
+import { IReactSpaceCommonProps } from "../../core-react";
 
 export const mutateComponent = (component: React.ReactNode, newProps: Object) => {
 	return React.cloneElement(component as React.DetailedReactHTMLElement<any, HTMLElement>, newProps);
 };
 
+export function hasProps(name: string, component: React.FC<IReactSpaceCommonProps>, props: string[]) {
+	props.forEach((prop) => {
+		expect(prop in component.propTypes!, `${prop} missing`).toBe(true);
+	});
+}
+
 export const fixUp = (sut: HTMLElement) => {
 	// This is annoying. A bug in JSDOM means that getComputedStyle() on test elements does
 	// not correctly return the applied styles when a dynamically added style tag is added to
@@ -26,6 +33,54 @@ export const fixUp = (sut: HTMLElement) => {
 	return sut;
 };
 
+export function commonPropTypesTest(name: string, component: React.FC<IReactSpaceCommonProps>) {
+	test(`${name} has correct common prop types`, async () => {
+		hasProps(name, component, [
+			"as",
+			"centerContent",
+			"className",
+			"id",
+			"scrollable",
+			"trackSize",
+			"zIndex",
+			"allowOverflow",
+			"onClick",
+			"onDoubleClick",
+			"onMouseDown",
+			"onMouseEnter",
+			"onMouseLeave",
+			"onMouseMove",
+			"onTouchStart",
+			"onTouchMove",
+			"onTouchEnd",
+		]);
+	});
+}
+
+export function resizablePropTypesTest(name: string, component: React.FC<IReactSpaceCommonProps>) {
+	commonPropTypesTest(name, component);
+	test(`${name} has correct resizable prop types`, async () => {
+		hasProps(name, component, [
+			"size",
+			"handleSize",
+			"touchHandleSize",
+			"handlePlacement",
+			"handleRender",
+			"minimumSize",
+			"maximumSize",
+			"onResizeStart",
+			"onResizeEnd",
+		]);
+	});
+}
+
+export function anchorPropTypesTest(name: string, component: React.FC<IReactSpaceCommonProps>) {
+	resizablePropTypesTest(name, component);
+	test(`${name} has correct anchor prop types`, async () => {
+		hasProps(name, component, ["resizable"]);
+	});
+}
+
 export const commonPropsTests = (name: string, component: React.ReactNode, expectedStyle: Partial<CSSStyleDeclaration>) => {
 	test(`${name} default has correct styles`, async () => {
 		// arrange, act

src/components/tests/__tests__/Bottom.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cleanup } from "@testing-library/react";
 import { Bottom } from "../../Anchored";
-import { commonPropsTests, commonAnchorTests } from "../Common";
+import { commonPropsTests, commonAnchorTests, anchorPropTypesTest } from "../Common";
 
 afterEach(cleanup);
 
@@ -22,3 +22,5 @@ commonAnchorTests(
 	(style) => style.bottom,
 	(style) => style.top,
 );
+
+anchorPropTypesTest("Bottom", Bottom);

src/components/tests/__tests__/BottomResizable.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cleanup } from "@testing-library/react";
 import { BottomResizable } from "../../Anchored";
-import { commonPropsTests, commonAnchorTests, commonResizableTests } from "../Common";
+import { commonPropsTests, commonAnchorTests, commonResizableTests, resizablePropTypesTest } from "../Common";
 
 afterEach(cleanup);
 
@@ -32,3 +32,5 @@ commonResizableTests(
 	false,
 	true,
 );
+
+resizablePropTypesTest("BottomResizable", BottomResizable);

src/components/tests/__tests__/Fill.tsx

@@ -4,7 +4,7 @@ import { Fill } from "../../Fill";
 import { Left, Top, Right, Bottom, LeftResizable, TopResizable, RightResizable, BottomResizable } from "../../Anchored";
 import "@testing-library/jest-dom/extend-expect";
 import { ViewPort } from "../../ViewPort";
-import { commonPropsTests, fixUp } from "../Common";
+import { commonPropsTests, commonPropTypesTest, fixUp } from "../Common";
 
 afterEach(cleanup);
 
@@ -362,3 +362,5 @@ test("Fill with stacked BottomResizable has correct styles", async () => {
 	expect(style.height).toBe("");
 	expect(sut.nodeName).toBe("DIV");
 });
+
+commonPropTypesTest("Fill", Fill);

src/components/tests/__tests__/Fixed.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { render, cleanup } from "@testing-library/react";
 import { Fixed } from "../../Fixed";
 import "@testing-library/jest-dom/extend-expect";
-import { commonPropsTests } from "../Common";
+import { commonPropsTests, commonPropTypesTest, hasProps } from "../Common";
 
 afterEach(cleanup);
 
@@ -28,3 +28,9 @@ test("Fixed with width and height has correct styles", async () => {
 	expect(style.width).toBe("10px");
 	expect(style.height).toBe("20px");
 });
+
+commonPropTypesTest("Fixed", Fixed);
+
+test(`Fixed has correct prop types`, async () => {
+	hasProps("Fixed", Fixed, ["width", "height"]);
+});