Playwright tests

.github/workflows/ci.yml

@@ -22,12 +22,18 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      - name: Build package
-        run: yarn build
-
       - name: Run tests
         run: yarn test:unit
 
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - name: Build package
+        run: yarn build
+
       - name: Version bump
         uses: "phips28/gh-action-bump-version@master"
         env:
@@ -36,4 +42,4 @@ jobs:
           major-wording: "major,Major"
           minor-wording: "minor,Minor"
           patch-wording: "patch,bug,Patch,Bug"
-          commit-message: "CI: bump version to {{version}}"
+          commit-message: "CI: bump version to {{version}}"

.github/workflows/pull-request.yml

@@ -25,6 +25,12 @@ jobs:
       - name: Run tests
         run: yarn test:unit
 
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
       - name: Build package
         run: yarn build
 
@@ -33,4 +39,4 @@ jobs:
         with:
           name: pr-container
           path: dist
-          retention-days: 10
+          retention-days: 10

.gitignore

@@ -3,4 +3,8 @@ node_modules/
 dist/
 .vscode/
 coverage/
-stats.json
+stats.json
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
         "^.+\\.[t|j]sx?$": "babel-jest"
     },
     transformIgnorePatterns: ["<rootDir>/node_modules/(?!(power-mixin)/)"],
+    modulePathIgnorePatterns: ["<rootDir>/playwright"],
     collectCoverage: false,
     collectCoverageFrom: [
         "packages/**/*.{js,jsx,ts,tsx}",

package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
+    "@playwright/test": "^1.47.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.12",

packages/web/src/components/color-generator/colors.ts

@@ -7,7 +7,6 @@ export const colors = [
   "#D55697",
   "#1E8A5B",
   "#373639",
-
   "#ff80ed",
   "#065535",
   "#133337",

packages/web/src/components/toolbar/buttons-panel/buttons-panel.tsx

@@ -10,8 +10,9 @@ export const ButtonsPanel: React.FC = () => {
   return (
     <div className={styles.buttonsPanelContainer}>
       <Menu />
-      {chips.map((chip) => (
+      {chips.map(chip => (
         <Button
+          dataTestId={`toolbar-btn-${chip.name}`}
           key={chip.name}
           text={chip.name}
           appearance="secondary"

playwright.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./playwright",
+  snapshotPathTemplate: "{testDir}/__screenshots__/{testFilePath}/{arg}{ext}",
+
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  use: {
+    baseURL: "http://localhost:8080/",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  webServer: {
+    command: "yarn start:prod",
+    url: "http://localhost:8080/",
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI,
+  },
+});

playwright/spawn-core-chips.spec.ts

@@ -0,0 +1,57 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Spawn core chips", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.setViewportSize({
+      width: 640,
+      height: 480,
+    });
+    await page.goto("/");
+  });
+
+  test("Spawns AND chip on button click", async ({ page }) => {
+    await expect(page).toHaveTitle(/Circuit Sim/);
+
+    await page.getByTestId("toolbar-btn-AND").click();
+
+    await page.mouse.move(200, 200);
+    await page.mouse.click(200, 200);
+
+    await expect(page).toHaveScreenshot("and-chip.png");
+  });
+
+  test("Spawns multiple AND chips on button click", async ({ page }) => {
+    await expect(page).toHaveTitle(/Circuit Sim/);
+
+    await page.getByTestId("toolbar-btn-AND").click();
+    await page.getByTestId("toolbar-btn-AND").click();
+    await page.getByTestId("toolbar-btn-AND").click();
+
+    await page.mouse.move(200, 300);
+    await page.mouse.click(200, 300);
+
+    await expect(page).toHaveScreenshot("and-multiple-chip.png");
+  });
+
+  test("Spawns OR chip on button click", async ({ page }) => {
+    await expect(page).toHaveTitle(/Circuit Sim/);
+
+    await page.getByTestId("toolbar-btn-OR").click();
+
+    await page.mouse.move(200, 400);
+    await page.mouse.click(200, 400);
+
+    await expect(page).toHaveScreenshot("or-chip.png");
+  });
+
+  test("Spawns NOT chip on button click", async ({ page }) => {
+    await expect(page).toHaveTitle(/Circuit Sim/);
+
+    await page.getByTestId("toolbar-btn-NOT").click();
+
+    await page.mouse.move(200, 300);
+    await page.mouse.click(200, 300);
+
+    await expect(page).toHaveScreenshot("not-chip.png");
+  });
+});

yarn.lock

@@ -1320,6 +1320,13 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@playwright/test@^1.47.1":
+  version "1.47.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.47.1.tgz#568a46229a5aef54b74977297a7946bb5ac4b67b"
+  integrity sha512-dbWpcNQZ5nj16m+A5UNScYx7HX5trIy7g4phrcitn+Nk83S32EBX/CLU4hiF4RGKX/yRc93AAqtfaXB7JWBd4Q==
+  dependencies:
+    playwright "1.47.1"
+
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
@@ -3413,6 +3420,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+[email protected]:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -5205,6 +5217,20 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+[email protected]:
+  version "1.47.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.47.1.tgz#bb45bdfb0d48412c535501aa3805867282857df8"
+  integrity sha512-i1iyJdLftqtt51mEk6AhYFaAJCDx0xQ/O5NU8EKaWFgMjItPVma542Nh/Aq8aLCjIJSzjaiEQGW/nyqLkGF1OQ==
+
+[email protected]:
+  version "1.47.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.47.1.tgz#cdc1116f5265b8d2ff7be0d8942d49900634dc6c"
+  integrity sha512-SUEKi6947IqYbKxRiqnbUobVZY4bF1uu+ZnZNJX9DfU1tlf2UhWfvVjLf01pQx9URsOr18bFVUKXmanYWhbfkw==
+  dependencies:
+    playwright-core "1.47.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"