Added playwright tests for undo redo behaviour (#40)

* test: Added 2 tests to check undo/redo behavior
* test: Added a undo/redo test for dragging blocks
* fix: test formatting

tests/blink_example.spec.ts

@@ -1,17 +1,14 @@
 import consumers from "node:stream/consumers";
 import { expect, test } from "@playwright/test";
-import { goToHomePage } from "./utils";
+import { goToHomePage, openExample } from "./utils";
 
 test.beforeEach(goToHomePage);
 
 test("Load Blink example and check code", async ({ page }) => {
 	await page.getByText("Leaphy Original").click();
 	await page.getByText("Original Uno").click();
 
-	// Open the blink example
-	await page.getByRole("button", { name: "My projects" }).click();
-	await page.getByRole("cell", { name: "Examples" }).click();
-	await page.getByRole("button", { name: "Blink" }).click();
+	await openExample(page, "blink");
 
 	await page.locator(".side").first().click(); // Open code
 

tests/undo_redo.spec.ts

@@ -0,0 +1,105 @@
+import { expect, test } from "@playwright/test";
+import { goToHomePage, openExample as loadExample } from "./utils";
+
+test.beforeEach(goToHomePage);
+
+test("Undo redo - Deletion", async ({ page }) => {
+	await page.getByText("Leaphy Original").click();
+	await page.getByText("Original Uno").click();
+
+	await loadExample(page, "blink");
+
+	// Delete the repeat forever block
+	await page.getByText("repeat forever").click();
+	await page.locator("svg").filter({ hasText: "Leaphy" }).press("Delete");
+	await expect(page.getByText("repeat forever")).toBeHidden();
+
+	await page.locator("div:nth-child(2) > button").first().click(); // Click undo button
+	await expect(page.getByText("repeat forever")).toBeVisible();
+	await page.locator("div:nth-child(2) > button:nth-child(2)").click(); // Click redo button
+	await expect(page.getByText("repeat forever")).toBeHidden();
+	await page.keyboard.press("Control+z");
+	await expect(page.getByText("repeat forever")).toBeVisible();
+	await page.keyboard.press("Control+y");
+	await expect(page.getByText("repeat forever")).toBeHidden();
+});
+
+test("Undo redo - Variable change", async ({ page }) => {
+	await page.getByText("Leaphy Original").click();
+	await page.getByText("Original Uno").click();
+
+	await loadExample(page, "blink");
+
+	// Change a boolean
+	await page.getByText("true").click();
+	await page.locator("#blockly-1").getByText("false").click();
+	await expect(page.getByText("false")).toHaveCount(2);
+	await page.keyboard.press("Control+z");
+	await expect(page.getByText("false")).toHaveCount(1);
+	await page.keyboard.press("Control+y");
+	await expect(page.getByText("false")).toHaveCount(2);
+
+	// Change one of the delays
+	await page.getByText("1000").first().click();
+	await page.getByRole("textbox").fill("123");
+	await expect(page.getByText("123", { exact: true })).toBeVisible();
+	await page.keyboard.press("Control+z");
+	await expect(page.getByText("123", { exact: true })).toBeHidden();
+	await page.keyboard.press("Control+y");
+	await expect(page.getByText("123", { exact: true })).toBeVisible();
+
+	await page.getByRole("textbox").press("Enter");
+	await expect(page.getByText("123", { exact: true })).toBeVisible();
+	await page.keyboard.press("Control+z");
+	await expect(page.getByText("123", { exact: true })).toBeHidden();
+	await page.keyboard.press("Control+y");
+	await expect(page.getByText("123", { exact: true })).toBeVisible();
+});
+
+test("Undo redo - Dragging", async ({ page }) => {
+	await page.getByText("Leaphy Original").click();
+	await page.getByText("Original Uno").click();
+
+	await loadExample(page, "blink");
+
+	await page.locator(".side").first().click(); // Open code
+
+	// Drag the repeat block somewhere to the left, disconnecting it
+	await page
+		.getByText("repeat forever")
+		.dragTo(page.getByText("repeat forever"), {
+			force: true,
+			targetPosition: {
+				x: -250,
+				y: 0,
+			},
+		});
+
+	await expect(page.locator(".view-lines")).not.toContainText("delay");
+
+	await page.keyboard.press("Control+z");
+	await expect(page.locator(".view-lines")).toContainText("delay");
+	await page.keyboard.press("Control+y");
+	await expect(page.locator(".view-lines")).not.toContainText("delay");
+
+	// Move it back to its original location, connecting it again
+	await page
+		.getByText("repeat forever")
+		.dragTo(page.getByText("Leaphy", { exact: true }), {
+			force: true,
+			targetPosition: {
+				x: 0,
+				y: 50,
+			},
+		});
+
+	await expect(page.locator(".view-lines")).toContainText("delay");
+	await page.keyboard.press("Control+z");
+	await expect(page.locator(".view-lines")).not.toContainText("delay");
+	await page.keyboard.press("Control+y");
+	await expect(page.locator(".view-lines")).toContainText("delay");
+	await page.keyboard.press("Control+z");
+	await expect(page.locator(".view-lines")).not.toContainText("delay");
+	await page.keyboard.press("Control+z");
+	await expect(page.locator(".view-lines")).toContainText("delay");
+});

tests/utils.ts

@@ -1,7 +1,13 @@
-import type { PlaywrightTestArgs } from "@playwright/test";
+import type { Page, PlaywrightTestArgs } from "@playwright/test";
 
 export async function goToHomePage({ page }: PlaywrightTestArgs) {
 	await page.goto("/");
 	await page.getByRole("button", { name: "English" }).click();
 	await page.getByRole("button", { name: "Let's get started!" }).click();
 }
+
+export async function openExample(page: Page, example: string | RegExp) {
+	await page.getByRole("button", { name: "My projects" }).click();
+	await page.getByRole("cell", { name: "Examples" }).click();
+	await page.getByRole("button", { name: example }).click();
+}