Install Playwright and Convert First Siesta Test #7254

Author: tobiu

.github/ISSUE/ticket-install-playwright-and-convert-test.md

@@ -0,0 +1,27 @@
+# Ticket: Install Playwright and Convert First Siesta Test
+
+GH ticket id: #7254
+
+**Assignee:** Gemini
+**Status:** Done
+
+## Description
+Install the Playwright test runner and convert an initial Siesta unit test to the new framework to establish a baseline pattern for future test migration.
+
+### Implementation Notes
+The initial approach was to convert the VDOM unit test into a browser-based component integration test. However, the goal was refined to keep it as a pure VDOM unit test running within a Node.js environment.
+
+The final, successful implementation uses Playwright's test runner without a browser. It works by:
+1.  Creating a `setup.mjs` file to mock the necessary browser globals (`DOMRect`) and configure the `Neo` namespace on `globalThis` for a headless environment.
+2.  Configuring `playwright.config.mjs` to run without a browser or web server.
+3.  Writing the test spec as a pure Node.js module, importing the framework classes directly and asserting against the VDOM data structures returned by the component's methods.
+
+This pattern allows for fast, browser-less unit testing of framework components using the Playwright test runner.
+
+## Tasks
+- [x] Install `@playwright/test` dependency.
+- [x] Create `playwright.config.mjs` for a Node.js test environment.
+- [x] Create `test/playwright/setup.mjs` to configure the Node.js global scope.
+- [x] Convert `test/siesta/tests/classic/Button.mjs` to `test/playwright/classic/button.spec.mjs`.
+- [x] All tests are passing.
+- [x] Move `playwright.config.mjs` into `test/playwright/` and update paths.

.gitignore

@@ -83,3 +83,6 @@ resources/data/deck/EditorConfig.json
 # Local AI Knowledge Base
 .env
 chroma/
+
+# Playwright test results
+test/playwright/test-results.json

package-lock.json

@@ -33,7 +33,7 @@
         "generate-docs-json"    : "node ./buildScripts/docs/jsdocx.mjs",
         "inject-package-version": "node ./buildScripts/injectPackageVersion.mjs",
         "server-start"          : "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
-        "test"                  : "echo \"Error: no test specified\" && exit 1",
+        "test"                  : "playwright test -c test/playwright/playwright.config.mjs",
         "watch-themes"          : "node ./buildScripts/watchThemes.mjs"
     },
     "keywords": [
@@ -87,6 +87,7 @@
         "@chroma-core/default-embed"   : "^0.1.8",
         "@fortawesome/fontawesome-free": "^7.0.1",
         "@google/generative-ai"        : "^0.24.1",
+        "@playwright/test"             : "^1.55.1",
         "acorn"                        : "^8.15.0",
         "astring"                      : "^1.9.0",
         "autoprefixer"                 : "^10.4.21",

package.json

@@ -0,0 +1,112 @@
+import '../setup.mjs'; // Sets up the globalThis.Neo object
+
+import { test, expect } from '@playwright/test';
+
+// Correct import order is critical for Neo.mjs initialization
+import Neo from '../../../src/Neo.mjs';
+import * as core from '../../../src/core/_export.mjs';
+import Button from '../../../src/button/Base.mjs';
+import DomApiVnodeCreator from '../../../src/vdom/util/DomApiVnodeCreator.mjs';
+import VdomHelper from '../../../src/vdom/Helper.mjs';
+
+
+const appName = 'ClassicButtonTest';
+
+test.describe('Neo.button.Base VDOM (Node.js)', () => {
+
+    test('should create initial vnode correctly', async () => {
+        const button = Neo.create(Button, {
+            appName,
+            iconCls: 'fa fa-home',
+            text   : 'Click me'
+        });
+        const { vnode } = await button.initVnode();
+        button.destroy();
+
+        expect(vnode.nodeName).toBe('button');
+        expect(vnode.className).toEqual(['neo-button', 'icon-left']);
+        expect(vnode.childNodes.length).toBe(2);
+
+        const iconNode = vnode.childNodes[0];
+        expect(iconNode.className).toEqual(['neo-button-glyph', 'fa', 'fa-home']);
+
+        const textNode = vnode.childNodes[1];
+        expect(textNode.className).toEqual(['neo-button-text']);
+        expect(textNode.textContent).toBe('Click me');
+    });
+
+    test('should update vnode and create delta for a single config change', async () => {
+        const button = Neo.create(Button, {
+            appName,
+            text: 'Click me'
+        });
+        await button.initVnode();
+        button.mounted = true;
+
+        const textNodeId = button.vnode.childNodes[0].id;
+        const { deltas } = await button.set({text: 'New Text'});
+        button.destroy();
+
+        expect(deltas.length).toBe(1);
+        const delta = deltas[0];
+        expect(delta.id).toBe(textNodeId);
+        expect(delta.textContent).toBe('New Text');
+    });
+
+    test('should update vnode and create delta for multiple config changes', async () => {
+        const button = Neo.create(Button, {
+            appName,
+            iconCls: 'fa fa-home',
+            text   : 'Click me'
+        });
+        await button.initVnode();
+        button.mounted = true;
+
+        const iconNodeId = button.vnode.childNodes[0].id;
+        const textNodeId = button.vnode.childNodes[1].id;
+
+        const { deltas } = await button.set({
+            iconCls: 'fa fa-user',
+            text   : 'Submit'
+        });
+        button.destroy();
+
+        expect(deltas.length).toBe(2);
+
+        const iconDelta = deltas.find(d => d.id === iconNodeId);
+        const textDelta = deltas.find(d => d.id === textNodeId);
+
+        expect(iconDelta).toBeDefined();
+        expect(iconDelta.cls.remove).toEqual(['fa-home']);
+        expect(iconDelta.cls.add).toEqual(['fa-user']);
+
+        expect(textDelta).toBeDefined();
+        expect(textDelta.textContent).toBe('Submit');
+    });
+
+    test('should handle pressed state change', async () => {
+        const button = Neo.create(Button, {
+            appName
+        });
+        const {vnode} = await button.initVnode();
+        button.mounted = true;
+
+        expect(vnode.className.includes('pressed')).toBe(false);
+
+        let updateData = await button.set({pressed: true});
+        expect(updateData.deltas.length).toBe(1);
+        let delta = updateData.deltas[0];
+        expect(delta.id).toBe(button.id);
+        expect(delta.cls.add).toEqual(['pressed']);
+        expect(updateData.vnode.className.includes('pressed')).toBe(true);
+
+        updateData = await button.set({pressed: false});
+        expect(updateData.deltas.length).toBe(1);
+        delta = updateData.deltas[0];
+        expect(delta.id).toBe(button.id);
+        expect(delta.cls.remove).toEqual(['pressed']);
+        expect(updateData.vnode.className.includes('pressed')).toBe(false);
+
+        button.destroy();
+    });
+});

test/playwright/classic/button.spec.mjs

@@ -0,0 +1,23 @@
+import { defineConfig } from '@playwright/test';
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: '.',
+  /* 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,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [['json', { outputFile: 'test-results.json' }]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+});

test/playwright/playwright.config.mjs

@@ -0,0 +1,38 @@
+// This file sets up the Node.js global scope to run Neo.mjs
+// VDOM unit tests without a browser or jsdom.
+
+const appName = 'ClassicButtonTest';
+
+globalThis.Neo = {
+    apps: {
+        [appName]: {
+            name             : appName,
+            fire             : () => {},
+            isMounted        : () => true,
+            vnodeInitialising: false
+        }
+    },
+    config: {
+        allowVdomUpdatesInTests: true,
+        environment            : 'development',
+        unitTestMode           : true,
+        useDomApiRenderer      : true
+    }
+};
+
+// Running the unit tests directly inside nodejs requires a mock for DOMRect.
+globalThis.DOMRect = class DOMRect {
+    constructor(x, y, width, height) {
+        this.x = x || 0;
+        this.y = y || 0;
+        this.width = width || 0;
+        this.height = height || 0;
+        this.top = this.y;
+        this.left = this.x;
+        this.right = this.x + this.width;
+        this.bottom = this.y + this.height;
+    }
+    static fromRect(other) {
+        return new DOMRect(other.x, other.y, other.width, other.height);
+    }
+};