terra-draw 0.0.1-alpha.54 → 0.0.1-alpha.56

package/e2e/package.json

@@ -6,18 +6,21 @@
 	"scripts": {
 		"build": "webpack",
 		"serve": "webpack serve",
-		"test": "playwright test",
+		"test": "playwright test --workers=1",
+		"test:help": "playwright test --help",
 		"test:ui": "playwright test --ui --headed"
 	},
 	"author": "James Milner",
 	"license": "MIT",
 	"devDependencies": {
+		"@playwright/test": "^1.40.1",
+		"@types/jest": "^29.5.12",
 		"@types/node": "^20.10.5",
 		"dotenv-webpack": "^8.0.0",
+		"ts-loader": "^9.5.1",
 		"typescript": "^4.7.4",
 		"webpack": "^5.73.0",
 		"webpack-cli": "^4.10.0",
-		"webpack-dev-server": "^4.11.1",
-		"@playwright/test": "^1.40.1"
+		"webpack-dev-server": "^4.11.1"
 	}
 }

package/e2e/playwright.config.ts

@@ -29,7 +29,7 @@ export default defineConfig({
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: "on-first-retry",
 	},
-
+	timeout: 5 * 1000,
 	/* Configure projects for major browsers */
 	projects: [
 		{

package/e2e/public/index.html

@@ -35,7 +35,7 @@
             aria-label="A leaflet map used for testing purposes">
         </div>
     </div>
-    <div class="buttons">
+    <div class="buttons" data-testid="buttons">
         <button id="select">Select</button>
         <button id="point">Point</button>
         <button id="linestring">Linestring</button>

package/e2e/src/index.ts

@@ -46,6 +46,7 @@ const example = {
 			}),
 			modes: [
 				new TerraDrawSelectMode({
+					dragEventThrottle: 0,
 					flags: {
 						arbitary: {
 							feature: {},

package/e2e/tests/leaflet.spec.ts

@@ -1,6 +1,8 @@
 import { test, expect } from "@playwright/test";
 import {
 	changeMode,
+	drawRectanglePolygon,
+	expectGroupPosition,
 	expectPathDimensions,
 	expectPaths,
 	pageUrl,
@@ -24,6 +26,26 @@ test.describe("page setup", () => {
 		await expect(page.getByText("Select")).toBeVisible();
 		await expect(page.getByText("Clear")).toBeVisible();
 	});
+
+	test("there are no console errors", async ({ page }) => {
+		const errors: string[] = [];
+		page.on("console", (msg) => {
+			if (msg.type() === "error") {
+				errors.push(msg.text());
+			}
+		});
+		await page.goto(pageUrl);
+		await expect(page.getByRole("application")).toBeVisible();
+
+		expect(errors).toEqual([]);
+	});
+
+	test("there are no build issues", async ({ page }) => {
+		await page.goto(pageUrl);
+		await expect(
+			await page.locator("#webpack-dev-server-client-overlay").count(),
+		).toBe(0);
+	});
 });
 
 test.describe("point mode", () => {
@@ -32,10 +54,9 @@ test.describe("point mode", () => {
 	test("mode can set and can be used to create a point", async ({ page }) => {
 		const mapDiv = await setupMap({ page });
 		await changeMode({ page, mode });
-
 		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
 
-		expectPaths({ page, count: 1 });
+		await expectPaths({ page, count: 1 });
 	});
 
 	test("mode can set and can be used to create multiple points", async ({
@@ -48,7 +69,7 @@ test.describe("point mode", () => {
 		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
 		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
 
-		expectPaths({ page, count: 3 });
+		await expectPaths({ page, count: 3 });
 	});
 });
 
@@ -68,7 +89,7 @@ test.describe("linestring mode", () => {
 
 		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
 
-		expectPaths({ page, count: 1 });
+		await expectPaths({ page, count: 1 });
 	});
 
 	test("mode can set and can be used to create multiple linestrings", async ({
@@ -84,13 +105,13 @@ test.describe("linestring mode", () => {
 		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
 
 		// One point + one line
-		expectPaths({ page, count: 2 });
+		await expectPaths({ page, count: 2 });
 
 		// Close first line
 		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
 
 		// One line
-		expectPaths({ page, count: 2 });
+		await expectPaths({ page, count: 1 });
 
 		// Second line
 		await page.mouse.move(mapDiv.width / 4, mapDiv.height / 4);
@@ -102,7 +123,7 @@ test.describe("linestring mode", () => {
 		await page.mouse.click(mapDiv.width / 5, mapDiv.height / 5);
 
 		// Two lines
-		expectPaths({ page, count: 2 });
+		await expectPaths({ page, count: 2 });
 	});
 });
 
@@ -139,7 +160,7 @@ test.describe("polygon mode", () => {
 		await page.mouse.click(bottomLeft.x, bottomLeft.y);
 
 		// One point + one line
-		expectPaths({ page, count: 1 });
+		await expectPaths({ page, count: 1 });
 	});
 });
 
@@ -229,6 +250,74 @@ test.describe("select mode", () => {
 		await page.mouse.click(mapDiv.width - 10, mapDiv.height / 2);
 		await expectPaths({ page, count: 1 }); // 0 selection points and 1 square
 	});
+
+	test("selected polygon can be dragged", async ({ page }) => {
+		const mapDiv = await setupMap({ page });
+
+		await changeMode({ page, mode: "polygon" });
+
+		// Draw a rectangle
+		const { topLeft } = await drawRectanglePolygon({ 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: 9 }); // 8 selection points and 1 square
+
+		// Drag
+		await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.down();
+		await page.mouse.move(mapDiv.width / 2 + 50, mapDiv.height / 2 + 50, {
+			steps: 30,
+		}); // Steps is required
+		await page.mouse.up();
+
+		await page.mouse.click(mapDiv.width - 10, mapDiv.height / 2);
+
+		await expectGroupPosition({ page, x: x + 48, y: y + 48 });
+	});
+
+	test("selected polygon can have individual coordinates dragged", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+
+		await changeMode({ page, mode: "polygon" });
+
+		// Draw a rectangle
+		const { topLeft } = await drawRectanglePolygon({ 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: 9 }); // 8 selection points and 1 square
+
+		// Drag
+		await page.mouse.move(topLeft.x, topLeft.y);
+		await page.mouse.down();
+		await page.mouse.move(topLeft.x - 50, topLeft.y + 50, { steps: 30 }); // Steps is required
+		await page.mouse.up();
+
+		// Deselect
+		await page.mouse.click(mapDiv.width - 10, mapDiv.height / 2);
+
+		// Dragged the coordinate to the left and down slightly
+		await expectGroupPosition({ page, x: 538, y: 308 });
+	});
 });
 
 test.describe("clear", () => {
@@ -244,25 +333,13 @@ test.describe("clear", () => {
 		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
 
 		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 drawRectanglePolygon({ mapDiv, page });
 
-		expectPaths({ page, count: 3 });
+		await expectPaths({ page, count: 3 });
 
 		const button = page.getByText("clear");
 		await button.click();
 
-		expectPaths({ page, count: 0 });
+		await expectPaths({ page, count: 0 });
 	});
 });

package/e2e/tests/setup.ts

@@ -41,7 +41,8 @@ export const changeMode = async ({
 		| "greatcircle";
 }) => {
 	const modeText = mode.charAt(0).toUpperCase() + mode.slice(1);
-	const button = page.getByText(modeText);
+	const buttons = page.getByTestId("buttons");
+	const button = buttons.getByText(modeText, { exact: true });
 
 	// Click the mode button
 	await button.click();
@@ -63,7 +64,7 @@ export const expectPaths = async ({
 	const selector = "svg > g > path";
 
 	if (count > 0) {
-		page.waitForSelector(selector);
+		await page.waitForSelector(selector);
 		expect(await page.locator(selector).count()).toBe(count);
 	} else {
 		await expect(await page.locator(selector).count()).toBe(0);
@@ -86,3 +87,50 @@ export const expectPathDimensions = async ({
 	expect(boundingBox?.width).toBe(width);
 	expect(boundingBox?.height).toBe(height);
 };
+
+export const expectGroupPosition = async ({
+	page,
+	x,
+	y,
+}: {
+	page: Page;
+	x: number;
+	y: number;
+}) => {
+	const selector = "svg > g > path";
+
+	const boundingBox = await page.locator(selector).boundingBox();
+
+	expect(boundingBox?.x).toBe(x);
+	expect(boundingBox?.y).toBe(y);
+};
+
+export const drawRectanglePolygon = 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(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
+
+	return { topLeft, topRight, bottomRight, bottomLeft };
+};

package/e2e/webpack.config.js

@@ -26,12 +26,10 @@ module.exports = {
 		static: {
 			directory: path.join(__dirname, "public"),
 		},
-		watchFiles: [
-			"./src",
-			"./*.{js,json,ts,html}",
-			"../src",
-			"../*.{js,json,ts,html}",
-		],
+		liveReload: !process.env.CI,
+		watchFiles: !process.env.CI
+			? ["./src", "./*.{js,json,ts,html}", "../src", "../*.{js,json,ts,html}"]
+			: [],
 		compress: true,
 		port: 3000,
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "terra-draw",
-	"version": "0.0.1-alpha.54",
+	"version": "0.0.1-alpha.56",
 	"description": "Frictionless map drawing across mapping provider",
 	"scripts": {
 		"docs": "typedoc",