test: add e2e tests for new maintainShape property in select mode (#190)

JamesLMilner · Feb 7, 2024 · bd853b3 · bd853b3
1 parent 9a76dc3
commit bd853b3
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 5 deletions.
diff --git a/e2e/src/index.ts b/e2e/src/index.ts
@@ -76,9 +76,22 @@ const example = {
 								},
 							},
 						},
+						rectangle: {
+							feature: {
+								draggable: true,
+								coordinates: {
+									draggable: true,
+									maintainShapeFrom: "opposite",
+								},
+							},
+						},
 						circle: {
 							feature: {
 								draggable: true,
+								coordinates: {
+									draggable: true,
+									maintainShapeFrom: "center",
+								},
 							},
 						},
 						point: {

diff --git a/e2e/tests/leaflet.spec.ts b/e2e/tests/leaflet.spec.ts
@@ -1,7 +1,8 @@
 import { test, expect } from "@playwright/test";
 import {
 	changeMode,
-	drawRectanglePolygon,
+	drawTwoClickShape,
+	drawRectangularPolygon,
 	expectGroupPosition,
 	expectPathDimensions,
 	expectPaths,
@@ -257,7 +258,7 @@ test.describe("select mode", () => {
 		await changeMode({ page, mode: "polygon" });
 
 		// Draw a rectangle
-		const { topLeft } = await drawRectanglePolygon({ mapDiv, page });
+		const { topLeft } = await drawRectangularPolygon({ mapDiv, page });
 
 		// Change to select mode
 		await changeMode({ page, mode });
@@ -292,7 +293,7 @@ test.describe("select mode", () => {
 		await changeMode({ page, mode: "polygon" });
 
 		// Draw a rectangle
-		const { topLeft } = await drawRectanglePolygon({ mapDiv, page });
+		const { topLeft } = await drawRectangularPolygon({ mapDiv, page });
 
 		// Change to select mode
 		await changeMode({ page, mode });
@@ -318,6 +319,73 @@ test.describe("select mode", () => {
 		// Dragged the coordinate to the left and down slightly
 		await expectGroupPosition({ page, x: 538, y: 308 });
 	});
+
+	test("selected rectangle can has it's shape maintained when coordinates are dragged", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+
+		await changeMode({ page, mode: "rectangle" });
+
+		// Draw a rectangle
+		const { topLeft } = await drawTwoClickShape({ mapDiv, page });
+
+		// Change to select mode
+		await changeMode({ page, mode });
+
+		// Before drag
+		const x = topLeft.x - 2;
+		const y = topLeft.y - 2;
+		await expectGroupPosition({ page, x, y });
+
+		// Select
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await expectPaths({ page, count: 5 }); // 4 selection points and 1 square
+
+		// Drag
+		await page.mouse.move(topLeft.x, topLeft.y);
+		await page.mouse.down();
+		await page.mouse.move(topLeft.x - 100, topLeft.y + 100, { steps: 50 }); // Steps is required
+		await page.mouse.up();
+
+		// Deselect
+		await page.mouse.click(mapDiv.width - 10, mapDiv.height / 2);
+
+		// Dragged the square up and to the left
+		await expectGroupPosition({ page, x: 547, y: 267 });
+	});
+
+	test("selected circle can has it's shape maintained from center origin when coordinates are dragged", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+
+		await changeMode({ page, mode: "circle" });
+
+		// Draw a circle
+		await drawTwoClickShape({ mapDiv, page });
+
+		// Change to select mode
+		await changeMode({ page, mode });
+
+		// Select
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await expectPaths({ page, count: 65 }); // 4 selection points and 1 square
+
+		// Drag
+		await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2 + 50);
+		await page.mouse.down();
+		await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2 + 100, {
+			steps: 50,
+		}); // Steps is required
+		await page.mouse.up();
+
+		// Deselect
+		await page.mouse.click(mapDiv.width - 10, mapDiv.height / 2);
+
+		// Dragged the square up and to the left
+		await expectGroupPosition({ page, x: 392, y: 112 });
+	});
 });
 
 test.describe("clear", () => {
@@ -333,7 +401,7 @@ test.describe("clear", () => {
 		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
 
 		await changeMode({ page, mode: "polygon" });
-		await drawRectanglePolygon({ mapDiv, page });
+		await drawRectangularPolygon({ mapDiv, page });
 
 		await expectPaths({ page, count: 3 });
 

diff --git a/e2e/tests/setup.ts b/e2e/tests/setup.ts
@@ -105,7 +105,7 @@ export const expectGroupPosition = async ({
 	expect(boundingBox?.y).toBe(y);
 };
 
-export const drawRectanglePolygon = async ({
+export const drawRectangularPolygon = async ({
 	mapDiv,
 	page,
 }: {
@@ -134,3 +134,31 @@ export const drawRectanglePolygon = async ({
 
 	return { topLeft, topRight, bottomRight, bottomLeft };
 };
+
+export const drawTwoClickShape = async ({
+	mapDiv,
+	page,
+}: {
+	mapDiv: {
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	};
+	page: Page;
+}) => {
+	// Draw a rectangle
+	const sideLength = 100;
+	const halfLength = sideLength / 2;
+	const centerX = mapDiv.width / 2;
+	const centerY = mapDiv.height / 2;
+	const topLeft = { x: centerX - halfLength, y: centerY - halfLength };
+	const topRight = { x: centerX + halfLength, y: centerY - halfLength };
+	const bottomLeft = { x: centerX - halfLength, y: centerY + halfLength };
+	const bottomRight = { x: centerX + halfLength, y: centerY + halfLength };
+	await page.mouse.click(topLeft.x, topLeft.y);
+
+	await page.mouse.click(bottomRight.x, bottomRight.y); // Closed
+
+	return { topLeft, topRight, bottomRight, bottomLeft };
+};