First playwright tests

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -24,3 +24,6 @@ out
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+playwright-report/
+test-results/

.prettierignore

@@ -1,3 +1,8 @@
+<<<<<<< Updated upstream
 projects/src/samples/project_06/04_pong_asm.ts
 web/public/pico.min.css
+=======
+simulator/src/projects/project_06/04_pong.ts
+simulator/src/projects/project_06/04_pong_asm.ts
+>>>>>>> Stashed changes
 web/src/locales

e2e/README.md

@@ -0,0 +1,47 @@
+# NAND2Testris Web IDE e2e Tests
+
+This is a brief cookbook for NAND2Tetris web ide Playwright e2e tests.
+
+All commands should be run from the root folder, not this /e2e folder.
+
+Before running any commands, run the server with `npm start` in a separate terminal.
+
+## Install Playwright dependencies
+
+```
+npx playwright install
+```
+
+## Run all e2e tests
+
+```
+npm run e2e
+```
+
+## Only run tests for chip
+
+```
+npm run e2e -- chip
+```
+
+Replace chip with cpu, asm, vm, etc.
+
+## Only run tests in Chromium
+
+```
+npm run e2e -- --project chromium
+```
+
+## Debug Tests
+
+Use the Playwright VSCode plugin.
+
+## View Tests
+
+```
+npm run e2e -- --ui
+```
+
+## More Info
+
+Review the Playwright documentation and e2e folder.

e2e/asm.spec.ts

@@ -0,0 +1,13 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/base.ts";
+
+test.describe("asm", () => {
+  test("has title", async ({ page }) => {
+    await page.goto("asm");
+
+    await expect(page).toHaveTitle(/NAND2Tetris/);
+    await expect(page.getByText("Assembler")).toBeVisible();
+    await expect(page.getByText("Compiled with problems:")).not.toBeAttached();
+    await expect(page.getByText("Uncaught runtime errors:")).not.toBeAttached();
+  });
+});

e2e/chip.spec.ts

@@ -0,0 +1,39 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/base.ts";
+
+const NOT = `CHIP Not {
+IN in;
+OUT out;
+
+PARTS:
+Nand(a=in, b=in, out=out);
+}`;
+
+test.describe("chip", () => {
+  test("has title", async ({ page }) => {
+    await page.goto("chip");
+
+    await expect(page).toHaveTitle(/NAND2Tetris/);
+    await expect(page.getByText("Hardware Simulator")).toBeVisible();
+    await expect(page.getByText("Compiled with problems:")).not.toBeAttached();
+    await expect(page.getByText("Uncaught runtime errors:")).not.toBeAttached();
+  });
+
+  test("simple chip", async ({ page, monaco }) => {
+    await page.goto("chip");
+    await page.getByRole("button", { name: "Accept" }).click();
+    await page.getByTestId("project-picker").selectOption("Project 1");
+    await page.getByTestId("chip-picker").selectOption("Not");
+
+    await monaco.write(NOT);
+    await page.screenshot({ path: "not.png" });
+    await expect(page.getByText("HDL code: No syntax errors")).toBeVisible();
+
+    await page.getByRole("button", { name: "Run ️⏩" }).click();
+    await expect(
+      page.getByText(
+        "Simulation successful: The output file is identical to the compare file",
+      ),
+    ).toBeVisible();
+  });
+});

e2e/compiler.spec.ts

@@ -0,0 +1,13 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/base.ts";
+
+test.describe("compiler", () => {
+  test("has title", async ({ page }) => {
+    await page.goto("compiler");
+
+    await expect(page).toHaveTitle(/NAND2Tetris/);
+    await expect(page.getByText("Jack Compiler")).toBeVisible();
+    await expect(page.getByText("Compiled with problems:")).not.toBeAttached();
+    await expect(page.getByText("Uncaught runtime errors:")).not.toBeAttached();
+  });
+});

e2e/cpu.spec.ts

@@ -0,0 +1,13 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/base.ts";
+
+test.describe("cpu", () => {
+  test("has title", async ({ page }) => {
+    await page.goto("cpu");
+
+    await expect(page).toHaveTitle(/NAND2Tetris/);
+    await expect(page.getByText("CPU Emulator")).toBeVisible();
+    await expect(page.getByText("Compiled with problems:")).not.toBeAttached();
+    await expect(page.getByText("Uncaught runtime errors:")).not.toBeAttached();
+  });
+});

e2e/util/base.ts

@@ -0,0 +1,32 @@
+import type { Locator, Page } from "@playwright/test";
+import { test as base } from "@playwright/test";
+
+export class MonacoPage {
+  public readonly monacoEditor: Locator;
+  constructor(readonly page: Page) {
+    this.monacoEditor = page.locator(".monaco-editor").nth(0);
+  }
+
+  async clearEditor() {
+    await this.monacoEditor.click();
+    await this.page.keyboard.press("ControlOrMeta+KeyA");
+    await this.page.keyboard.press("Backspace");
+    await this.page.keyboard.press("ControlOrMeta+KeyA");
+    await this.page.keyboard.press("Backspace");
+  }
+
+  async write(text: string) {
+    await this.clearEditor();
+    await this.monacoEditor.click();
+    for (const line of text.split("\n")) {
+      await this.page.keyboard.type(`${line}\n`);
+    }
+  }
+}
+
+export const test = base.extend<{ monaco: MonacoPage }>({
+  monaco: async ({ page }, use) => {
+    const monaco = new MonacoPage(page);
+    await use(monaco);
+  },
+});

e2e/vm.spec.ts

@@ -0,0 +1,13 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/base.ts";
+
+test.describe("vm", () => {
+  test("has title", async ({ page }) => {
+    await page.goto("vm");
+
+    await expect(page).toHaveTitle(/NAND2Tetris/);
+    await expect(page.getByText("VM Emulator")).toBeVisible();
+    await expect(page.getByText("Compiled with problems:")).not.toBeAttached();
+    await expect(page.getByText("Uncaught runtime errors:")).not.toBeAttached();
+  });
+});

package.json

@@ -32,6 +32,7 @@
     "test": "CI=true npm test -w simulator && CI=true npm test -w components && CI=true npm test -w web",
     "web": "npm run start -w web",
     "start": "npm run web",
+    "e2e": "playwright test",
     "preinstall-cli": "npm run build -w projects && npm run build -w runner && npm run build -w simulator && npm run build -w cli",
     "install-cli": "npm i -g cli"
   },
@@ -48,5 +49,8 @@
   "engines": {
     "node": ">=16",
     "npm": ">=7"
+  },
+  "dependencies": {
+    "@playwright/test": "^1.45.1"
   }
 }