assign-gingerly 0.0.53 → 0.0.55

package/inferencer/playwright.config.ts

@@ -0,0 +1,54 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* 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: [ ['html', { open: 'never' }] ], 
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:8000',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run serve',
+    port: 8000,
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/inferencer/test-results/.last-run.json

@@ -0,0 +1,6 @@
+{
+  "status": "failed",
+  "failedTests": [
+    "9918838107f578fb07d7-213aa187388a2c928788"
+  ]
+}

package/inferencer/test-results/inferencer-Inferencer-Enha-535bc-inferencer-tests-in-browser-chromium/error-context.md

@@ -0,0 +1,55 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: inferencer.spec.ts >> Inferencer Enhancement › should run all inferencer tests in browser
+- Location: tests\inferencer.spec.ts:3:1
+
+# Error details
+
+```
+Error: expect(received).toBe(expected) // Object.is equality
+
+Expected: 28
+Received: 25
+```
+
+# Page snapshot
+
+```yaml
+- generic [active] [ref=e1]:
+  - heading "Inferencer Enhancement Tests" [level=1] [ref=e2]
+  - generic [ref=e3]:
+    - 'heading "Results: 25/28 tests passed" [level=2] [ref=e4]'
+    - generic [ref=e5]: "✓ should set value on text input ✓ should set checked on checkbox ✓ should set checked on radio button ✓ should set value on textarea ✓ should set value on select ✓ should set textContent on div ✓ should set dateTime on time element ✓ should set value on data element ✓ should set value on progress element ✓ should set value on meter element ✓ should set value on output element ✓ should use itemprop as property name ✓ should set display (textContent) on div ✓ should set display (textContent) on time element ✓ should set display (ariaValueText) on meter element ✗ should be accessible via enh.infer: Enhancement not accessible via enh.infer ✓ should handle multiple value assignments ✓ should handle both value and display assignments ✓ should infer \"input\" event for input element ✓ should infer \"input\" event for textarea element ✓ should infer \"input\" event for select element ✓ should infer \"submit\" event for form element ✓ should infer \"toggle\" event for details element ✓ should infer \"close\" event for dialog element ✓ should infer \"click\" event for button element ✓ should infer \"click\" event for div element ✗ should access eventType via enh.infer.eventType: Cannot read properties of undefined (reading 'eventType') ✗ should return correct eventType for different elements via getter: Cannot read properties of undefined (reading 'eventType')"
+```
+
+# Test source
+
+```ts
+  1  | import { test, expect } from '@playwright/test';
+  2  | 
+  3  | test('Inferencer Enhancement › should run all inferencer tests in browser', async ({ page }) => {
+  4  |   // Start local server and navigate
+  5  |   await page.goto('http://localhost:8000/tests/inferencer.html');
+  6  |   
+  7  |   // Wait for tests to complete
+  8  |   await page.waitForFunction(() => window.testResults !== undefined, { timeout: 5000 });
+  9  |   
+  10 |   // Get test results
+  11 |   const results = await page.evaluate(() => window.testResults);
+  12 |   
+  13 |   // Log results
+  14 |   console.log(`Inferencer tests: ${results.passed}/${results.total} passed`);
+  15 |   results.results.forEach((result: string) => console.log(result));
+  16 |   
+  17 |   // Assert all tests passed
+> 18 |   expect(results.passed).toBe(results.total);
+     |                          ^ Error: expect(received).toBe(expected) // Object.is equality
+  19 | });
+  20 | 
+```

package/inferencer/tests/inferencedPropagator.html

@@ -0,0 +1,428 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>InferencedPropagator Tests</title>
+    <!-- #include virtual="/imports.html" -->
+</head>
+<body>
+    <h1>InferencedPropagator Tests</h1>
+    <div id="results"></div>
+    <div id="test-container"></div>
+
+    <script type="module">
+        import { Infer, inferEventType } from '../inferencer.js';
+        import { InferencedPropagator } from '../InferencedPropagator.js';
+
+        const results = [];
+        let testCount = 0;
+        let passCount = 0;
+        const container = document.getElementById('test-container');
+
+        function assert(condition, message) {
+            if (!condition) throw new Error(message);
+        }
+
+        function assertEqual(actual, expected, label) {
+            if (actual !== expected) {
+                throw new Error(`${label}: expected '${expected}', got '${actual}'`);
+            }
+        }
+
+        async function test(name, fn) {
+            testCount++;
+            try {
+                await fn();
+                passCount++;
+                results.push(`✓ ${name}`);
+                console.log(`✓ ${name}`);
+            } catch (error) {
+                results.push(`✗ ${name}: ${error.message}`);
+                console.error(`✗ ${name}:`, error);
+            }
+        }
+
+        // Helper: wait a tick for async wiring to complete
+        function tick() {
+            return new Promise(resolve => setTimeout(resolve, 0));
+        }
+
+        // Helper: wait for a rAF cycle (for polling strategy)
+        function raf() {
+            return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+        }
+
+        // ─── Constructor & Basic Shape ───────────────────────────────────
+
+        await test('should extend EventTarget', () => {
+            const input = document.createElement('input');
+            const infer = new Infer(input);
+            const propagator = new InferencedPropagator(infer);
+            assert(propagator instanceof EventTarget, 'should be instance of EventTarget');
+        });
+
+        await test('should have destroy method', () => {
+            const input = document.createElement('input');
+            const infer = new Infer(input);
+            const propagator = new InferencedPropagator(infer);
+            assert(typeof propagator.destroy === 'function', 'destroy should be a function');
+        });
+
+        // ─── Strategy 1: Attribute-Reflected Properties ──────────────────
+
+        await test('should detect aria property changes via MutationObserver', async () => {
+            const div = document.createElement('div');
+            container.appendChild(div);
+            const infer = new Infer(div);
+            const propagator = new InferencedPropagator(infer);
+
+            let fired = false;
+            propagator.addEventListener('ariaLabel', () => { fired = true; });
+
+            await tick();
+
+            div.ariaLabel = 'hello';
+            // MutationObserver is async, wait a tick
+            await tick();
+            await tick();
+
+            assert(fired, 'should have dispatched event for ariaLabel change');
+            propagator.destroy();
+            container.removeChild(div);
+        });
+
+        await test('should detect href changes on anchor via attribute observation', async () => {
+            const a = document.createElement('a');
+            a.href = 'http://example.com';
+            container.appendChild(a);
+            const infer = new Infer(a);
+            const propagator = new InferencedPropagator(infer);
+
+            let fired = false;
+            propagator.addEventListener('href', () => { fired = true; });
+
+            await tick();
+
+            a.href = 'http://example.org';
+            await tick();
+            await tick();
+
+            assert(fired, 'should have dispatched event for href change');
+            propagator.destroy();
+            container.removeChild(a);
+        });
+
+        await test('should detect output value changes via setter interception', async () => {
+            const output = document.createElement('output');
+            output.value = 'initial';
+            container.appendChild(output);
+            const infer = new Infer(output);
+            const propagator = new InferencedPropagator(infer);
+
+            let fired = false;
+            propagator.addEventListener('value', () => { fired = true; });
+
+            await tick();
+
+            output.value = 'changed';
+            await tick();
+
+            assert(fired, 'should have dispatched event for output value change');
+            propagator.destroy();
+            container.removeChild(output);
+        });
+
+        // ─── Strategy 2: Hybrid (Native Event + Setter) ─────────────────
+
+        await test('should detect input value change from user event', async () => {
+            const input = document.createElement('input');
+            input.type = 'text';
+            container.appendChild(input);
+            const infer = new Infer(input);
+            const propagator = new InferencedPropagator(infer);
+
+            let fired = false;
+            propagator.addEventListener('value', () => { fired = true; });
+
+            await tick();
+
+            // Simulate user-driven input event
+            input.value = 'typed';
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+
+            await tick();
+
+            assert(fired, 'should have dispatched event for user-driven input change');
+            propagator.destroy();
+            container.removeChild(input);
+        });
+
+        await test('should detect input value change from programmatic set', async () => {
+            const input = document.createElement('input');
+            input.type = 'text';
+            container.appendChild(input);
+            const infer = new Infer(input);
+            const propagator = new InferencedPropagator(infer);
+
+            let fired = false;
+            propagator.addEventListener('value', () => { fired = true; });
+
+            await tick();
+
+            // Programmatic change (no event dispatched by browser)
+            input.value = 'programmatic';
+
+            await tick();
+
+            assert(fired, 'should have dispatched event for programmatic input value change');
+            propagator.destroy();
+            container.removeChild(input);
+        });
+
+        await test('should detect checkbox checked change programmatically', async () => {
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            container.appendChild(checkbox);
+            const infer = new Infer(checkbox);
+            const propagator = new InferencedPropagator(infer);
+
+            let fired = false;
+            propagator.addEventListener('checked', () => { fired = true; });
+
+            await tick();
+
+            checkbox.checked = true;
+
+            await tick();
+
+            assert(fired, 'should have dispatched event for programmatic checked change');
+            propagator.destroy();
+            container.removeChild(checkbox);
+        });
+
+        // ─── Strategy 3: Setter Interception (Custom Elements) ───────────
+
+        await test('should detect property changes on custom element via setter interception', async () => {
+            // Define a simple custom element with a getter/setter
+            if (!customElements.get('test-prop-element')) {
+                class TestPropElement extends HTMLElement {
+                    #myProp = '';
+                    get myProp() { return this.#myProp; }
+                    set myProp(v) { this.#myProp = v; }
+                }
+                customElements.define('test-prop-element', TestPropElement);
+            }
+
+            const el = document.createElement('test-prop-element');
+            container.appendChild(el);
+            const infer = new Infer(el);
+            const propagator = new InferencedPropagator(infer);
+
+            let fired = false;
+            propagator.addEventListener('myProp', () => { fired = true; });
+
+            await tick();
+
+            el.myProp = 'new value';
+
+            await tick();
+
+            assert(fired, 'should have dispatched event for custom element property change');
+            propagator.destroy();
+            container.removeChild(el);
+        });
+
+        await test('setter interception should preserve original behavior', async () => {
+            const el = document.createElement('test-prop-element');
+            container.appendChild(el);
+            const infer = new Infer(el);
+            const propagator = new InferencedPropagator(infer);
+
+            propagator.addEventListener('myProp', () => {});
+            await tick();
+
+            el.myProp = 'test value';
+            assertEqual(el.myProp, 'test value', 'getter should still return correct value');
+
+            propagator.destroy();
+            container.removeChild(el);
+        });
+
+        // ─── Strategy 4: Polling Fallback ────────────────────────────────
+
+        await test('should fall back to polling for unknown properties', async () => {
+            const div = document.createElement('div');
+            container.appendChild(div);
+            div.customThing = 'initial';
+            const infer = new Infer(div);
+            const propagator = new InferencedPropagator(infer);
+
+            let fired = false;
+            propagator.addEventListener('customThing', () => { fired = true; });
+
+            await tick();
+
+            div.customThing = 'changed';
+
+            // Polling uses rAF, wait for a couple frames
+            await raf();
+            await raf();
+
+            assert(fired, 'should have dispatched event via polling for expando property');
+            propagator.destroy();
+            container.removeChild(div);
+        });
+
+        // ─── Lazy Wiring (only wire on addEventListener) ─────────────────
+
+        await test('should not wire anything until addEventListener is called', async () => {
+            const input = document.createElement('input');
+            container.appendChild(input);
+            const infer = new Infer(input);
+            const propagator = new InferencedPropagator(infer);
+
+            // No addEventListener called — changing value should not cause errors
+            input.value = 'no listener';
+            await tick();
+
+            // Now add listener
+            let fired = false;
+            propagator.addEventListener('value', () => { fired = true; });
+            await tick();
+
+            input.value = 'with listener';
+            await tick();
+
+            assert(fired, 'should dispatch after listener is wired');
+            propagator.destroy();
+            container.removeChild(input);
+        });
+
+        await test('should only wire once per property even with multiple listeners', async () => {
+            const input = document.createElement('input');
+            container.appendChild(input);
+            const infer = new Infer(input);
+            const propagator = new InferencedPropagator(infer);
+
+            let count = 0;
+            propagator.addEventListener('value', () => { count++; });
+            propagator.addEventListener('value', () => { count++; });
+            await tick();
+
+            input.value = 'multi';
+            await tick();
+
+            // Both listeners fire, but we only get one event dispatch per change
+            // Each listener sees the same event
+            assertEqual(count, 2, 'both listeners should fire');
+            propagator.destroy();
+            container.removeChild(input);
+        });
+
+        // ─── Snapshot / Initial Value Detection ──────────────────────────
+
+        await test('should dispatch if value changes during async wiring', async () => {
+            const div = document.createElement('div');
+            div.ariaLabel = 'before';
+            container.appendChild(div);
+            const infer = new Infer(div);
+            const propagator = new InferencedPropagator(infer);
+
+            let fired = false;
+            // Immediately change value — this may happen during wiring
+            propagator.addEventListener('ariaLabel', () => { fired = true; });
+            div.ariaLabel = 'during';
+
+            await tick();
+            await tick();
+
+            assert(fired, 'should have dispatched due to value change during setup');
+            propagator.destroy();
+            container.removeChild(div);
+        });
+
+        // ─── Cleanup / Destroy ───────────────────────────────────────────
+
+        await test('destroy should stop dispatching events', async () => {
+            const div = document.createElement('div');
+            div.ariaLabel = 'start';
+            container.appendChild(div);
+            const infer = new Infer(div);
+            const propagator = new InferencedPropagator(infer);
+
+            let count = 0;
+            propagator.addEventListener('ariaLabel', () => { count++; });
+            await tick();
+
+            div.ariaLabel = 'change1';
+            await tick();
+            await tick();
+
+            const countAfterFirst = count;
+            propagator.destroy();
+
+            div.ariaLabel = 'change2';
+            await tick();
+            await tick();
+
+            assertEqual(count, countAfterFirst, 'should not fire after destroy');
+            container.removeChild(div);
+        });
+
+        // ─── Infer.getPropagator() Integration ───────────────────────────
+
+        await test('Infer.getPropagator() should return an InferencedPropagator for built-in elements', async () => {
+            const input = document.createElement('input');
+            container.appendChild(input);
+            const infer = new Infer(input);
+            const propagator = await infer.getPropagator();
+
+            assert(propagator instanceof InferencedPropagator, 'should be InferencedPropagator');
+            propagator.destroy();
+            container.removeChild(input);
+        });
+
+        await test('Infer.getPropagator() should cache the propagator', async () => {
+            const input = document.createElement('input');
+            container.appendChild(input);
+            const infer = new Infer(input);
+            const p1 = await infer.getPropagator();
+            const p2 = await infer.getPropagator();
+
+            assert(p1 === p2, 'should return the same instance on subsequent calls');
+            p1.destroy();
+            container.removeChild(input);
+        });
+
+        await test('Infer.getPropagator() should return native propagator for roundabout elements', async () => {
+            // Define a custom element with a propagator property
+            if (!customElements.get('test-roundabout-el')) {
+                class TestRoundaboutEl extends HTMLElement {
+                    propagator = new EventTarget();
+                }
+                customElements.define('test-roundabout-el', TestRoundaboutEl);
+            }
+
+            const el = document.createElement('test-roundabout-el');
+            container.appendChild(el);
+            const infer = new Infer(el);
+            const propagator = await infer.getPropagator();
+
+            assert(propagator === el.propagator, 'should return native propagator from element');
+            assert(!(propagator instanceof InferencedPropagator), 'should NOT be InferencedPropagator');
+            container.removeChild(el);
+        });
+
+        // ─── Display results ─────────────────────────────────────────────
+
+        const resultsDiv = document.getElementById('results');
+        resultsDiv.innerHTML = `
+            <h2>Results: ${passCount}/${testCount} tests passed</h2>
+            <pre>${results.join('\n')}</pre>
+        `;
+
+        window.testResults = { passed: passCount, total: testCount, results };
+    </script>
+</body>
+</html>

package/inferencer/tests/inferencedPropagator.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('InferencedPropagator › should run all propagator tests in browser', async ({ page }) => {
+  await page.goto('http://localhost:8000/tests/inferencedPropagator.html');
+
+  // Wait for tests to complete
+  await page.waitForFunction(() => window.testResults !== undefined, { timeout: 10000 });
+
+  // Get test results
+  const results = await page.evaluate(() => window.testResults);
+
+  // Log results
+  console.log(`InferencedPropagator tests: ${results.passed}/${results.total} passed`);
+  results.results.forEach((result: string) => console.log(result));
+
+  // Assert all tests passed
+  expect(results.passed).toBe(results.total);
+});