test: add basic tests for Rectangle, Circle, Great Circle and Select …

…modes (#151)

e2e/public/index.html

@@ -40,6 +40,9 @@
         <button id="point">Point</button>
         <button id="linestring">Linestring</button>
         <button id="polygon">Polygon</button>
+        <button id="rectangle">Rectangle</button>
+        <button id="circle">Circle</button>
+        <button id="greatcircle">Greatcircle</button>
         <button id="clear">Clear</button>
     </div>
 

e2e/src/index.ts

@@ -113,7 +113,15 @@ const example = {
 
 		draw.start();
 
-		["select", "point", "linestring", "polygon"].forEach((mode) => {
+		[
+			"select",
+			"point",
+			"linestring",
+			"polygon",
+			"rectangle",
+			"circle",
+			"greatcircle",
+		].forEach((mode) => {
 			(document.getElementById(mode) as HTMLButtonElement).addEventListener(
 				"click",
 				() => {

e2e/tests/leaflet.spec.ts

@@ -1,5 +1,11 @@
 import { test, expect } from "@playwright/test";
-import { changeMode, expectPaths, pageUrl, setupMap } from "./setup";
+import {
+	changeMode,
+	expectPathDimensions,
+	expectPaths,
+	pageUrl,
+	setupMap,
+} from "./setup";
 
 test.describe("page setup", () => {
 	test("loads map", async ({ page }) => {
@@ -23,9 +29,7 @@ test.describe("page setup", () => {
 test.describe("point mode", () => {
 	const mode = "point";
 
-	test("mode can be selected and can be used to create a point", async ({
-		page,
-	}) => {
+	test("mode can set and can be used to create a point", async ({ page }) => {
 		const mapDiv = await setupMap({ page });
 		await changeMode({ page, mode });
 
@@ -34,7 +38,7 @@ test.describe("point mode", () => {
 		expectPaths({ page, count: 1 });
 	});
 
-	test("mode can be selected and can be used to create multiple points", async ({
+	test("mode can set and can be used to create multiple points", async ({
 		page,
 	}) => {
 		const mapDiv = await setupMap({ page });
@@ -51,7 +55,7 @@ test.describe("point mode", () => {
 test.describe("linestring mode", () => {
 	const mode = "linestring";
 
-	test("mode can be selected and can be used to create a linestring", async ({
+	test("mode can set and can be used to create a linestring", async ({
 		page,
 	}) => {
 		const mapDiv = await setupMap({ page });
@@ -67,7 +71,7 @@ test.describe("linestring mode", () => {
 		expectPaths({ page, count: 1 });
 	});
 
-	test("mode can be selected and can be used to create multiple linestrings", async ({
+	test("mode can set and can be used to create multiple linestrings", async ({
 		page,
 	}) => {
 		const mapDiv = await setupMap({ page });
@@ -105,9 +109,7 @@ test.describe("linestring mode", () => {
 test.describe("polygon mode", () => {
 	const mode = "polygon";
 
-	test("mode can be selected and can be used to create a polygon", async ({
-		page,
-	}) => {
+	test("mode can set and can be used to create a polygon", async ({ page }) => {
 		const mapDiv = await setupMap({ page });
 		await changeMode({ page, mode });
 
@@ -141,6 +143,94 @@ test.describe("polygon mode", () => {
 	});
 });
 
+test.describe("rectangle mode", () => {
+	const mode = "rectangle";
+
+	test("mode can set and can be used to create a rectangle", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.click(mapDiv.width / 2 + 50, mapDiv.height / 2 + 50);
+
+		// One point + one line
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 54, height: 54 }); // Stroke width of 4
+	});
+});
+
+test.describe("circle mode", () => {
+	const mode = "circle";
+
+	test("mode can set and can be used to create a circle", async ({ page }) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.click(mapDiv.width / 2 + 50, mapDiv.height / 2 + 50);
+
+		// One point + one line
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 146, height: 146 });
+	});
+});
+
+test.describe("greatcircle mode", () => {
+	const mode = "greatcircle";
+
+	test("mode can set and can be used to create a greatcircle", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.click(mapDiv.width / 2 + 50, mapDiv.height / 2 + 50);
+
+		// One point + one line
+		await expectPaths({ page, count: 1 });
+	});
+});
+
+test.describe("select mode", () => {
+	const mode = "select";
+
+	test("mode can set and then polygon can be selected and deselected", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+
+		await changeMode({ page, mode: "polygon" });
+		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(topRight.x, topRight.y);
+		await page.mouse.click(bottomRight.x, bottomRight.y);
+		await page.mouse.click(bottomLeft.x, bottomLeft.y);
+		await page.mouse.click(bottomLeft.x, bottomLeft.y); // Closed
+
+		await changeMode({ page, mode });
+
+		// Select
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await expectPaths({ page, count: 9 }); // 8 selection points and 1 square
+
+		// Deselect
+		await page.mouse.click(mapDiv.width - 10, mapDiv.height / 2);
+		await expectPaths({ page, count: 1 }); // 0 selection points and 1 square
+	});
+});
+
 test.describe("clear", () => {
 	test("drawn geometries can be cleared correctly", async ({ page }) => {
 		const mapDiv = await setupMap({ page });

e2e/tests/setup.ts

@@ -31,7 +31,14 @@ export const changeMode = async ({
 	mode,
 }: {
 	page: Page;
-	mode: "point" | "polygon" | "linestring" | "select";
+	mode:
+		| "point"
+		| "polygon"
+		| "linestring"
+		| "select"
+		| "rectangle"
+		| "circle"
+		| "greatcircle";
 }) => {
 	const modeText = mode.charAt(0).toUpperCase() + mode.slice(1);
 	const button = page.getByText(modeText);
@@ -62,3 +69,20 @@ export const expectPaths = async ({
 		await expect(await page.locator(selector).count()).toBe(0);
 	}
 };
+
+export const expectPathDimensions = async ({
+	page,
+	width,
+	height,
+}: {
+	page: Page;
+	width: number;
+	height: number;
+}) => {
+	const selector = "svg > g > path";
+
+	const boundingBox = await page.locator(selector).boundingBox();
+
+	expect(boundingBox?.width).toBe(width);
+	expect(boundingBox?.height).toBe(height);
+};