onbuzz 4.3.0 → 4.5.0

package/src/modules/widget/__tests__/acceptance.test.js

@@ -0,0 +1,267 @@
+/**
+ * Acceptance test — three properties the widget tool surface must
+ * maintain together. If any fails, the agent experience degrades.
+ *
+ *   (1) AWARENESS  — agent can enumerate every global/hook/primitive/alias
+ *   (2) CAPABILITY — common patterns (state, reducer, forms, effects)
+ *                    work out of the box
+ *   (3) FEEDBACK   — every failure mode produces a named error + next step
+ *
+ * This file is a deliberate end-to-end check: it imports the real
+ * widget tool, the real runtime bundle, builds capabilities, drives a
+ * simulated widget through jsdom, and verifies the error pipeline
+ * names the right APIs with the right rewrite paths.
+ */
+import { describe, test, expect } from '@jest/globals';
+import { WidgetTool } from '../widgetTool.js';
+import { WIDGET_RUNTIME } from '../runtime/bundle.js';
+import { registerRoutes } from '../routes.js';
+
+function tool() { return new WidgetTool(); }
+
+function fakeApp() {
+  const routes = { get: new Map(), post: new Map(), delete: new Map() };
+  return {
+    routes,
+    get:    (p, h) => routes.get.set(p, h),
+    post:   (p, h) => routes.post.set(p, h),
+    delete: (p, h) => routes.delete.set(p, h),
+  };
+}
+function fakeRes() {
+  const r = { _status: 200, _json: null, _headers: {} };
+  r.status = function(c) { this._status = c; return this; };
+  r.json   = function(j) { this._json = j; return this; };
+  r.send   = function(b) { this._body = b; return this; };
+  r.setHeader = function(k, v) { this._headers[k.toLowerCase()] = v; };
+  r.type   = function(t) { this._type = t; return this; };
+  return r;
+}
+
+// ────────────────────────────────────────────────────────────────────────
+// (1) AWARENESS
+// ────────────────────────────────────────────────────────────────────────
+
+describe('(1) AWARENESS — agent can enumerate what we provide', () => {
+  test('list-capabilities returns a complete report covering every layer', async () => {
+    const r = await tool().execute({ action: 'list-capabilities' }, { agentId: 'a' });
+    expect(r.success).toBe(true);
+    const c = r.capabilities;
+    // All layers present
+    expect(c).toHaveProperty('globals');
+    expect(c).toHaveProperty('namespaces.aliased');
+    expect(c).toHaveProperty('loxia');
+    expect(c).toHaveProperty('browserApis');
+    expect(c).toHaveProperty('notImplemented.classes');
+    expect(c).toHaveProperty('notImplemented.functions');
+    expect(c).toHaveProperty('notImplemented.rewritePaths');
+    expect(c).toHaveProperty('hardErrors');
+    expect(c).toHaveProperty('constraints');
+  });
+
+  test('every claimed global is actually present in the runtime bundle', async () => {
+    const r = await tool().execute({ action: 'list-capabilities' }, { agentId: 'a' });
+    const { JSDOM } = await import('jsdom');
+    const dom = new JSDOM('<div id="root"></div>', { runScripts: 'outside-only', pretendToBeVisual: true });
+    const { window } = dom;
+    window.__loxiaWidgetId = 'w';
+    window.__loxiaInitialProps = {};
+    new window.Function(WIDGET_RUNTIME).call(window);
+
+    // Every global the tool claims is available must exist in the runtime.
+    for (const name of r.capabilities.globals) {
+      // Some primitives are under the loxia.primitives namespace too,
+      // but ALL globals must be reachable as bare identifiers on window.
+      expect(window[name]).toBeDefined();
+    }
+    // Every namespace alias must exist and have hooks.
+    for (const alias of r.capabilities.namespaces.aliased) {
+      expect(window[alias]).toBeDefined();
+      expect(typeof window[alias].useState).toBe('function');
+    }
+  });
+
+  test('every claimed not-implemented API actually throws with a named error', async () => {
+    const r = await tool().execute({ action: 'list-capabilities' }, { agentId: 'a' });
+    const { JSDOM } = await import('jsdom');
+    const dom = new JSDOM('<div id="root"></div>', { runScripts: 'outside-only', pretendToBeVisual: true });
+    const { window } = dom;
+    window.__loxiaWidgetId = 'w'; window.__loxiaInitialProps = {};
+    new window.Function(WIDGET_RUNTIME).call(window);
+
+    for (const className of r.capabilities.notImplemented.classes) {
+      expect(typeof window[className]).toBe('function');
+      expect(() => window[className]()).toThrow(new RegExp("'" + className + "' is not implemented"));
+    }
+    for (const fnName of r.capabilities.notImplemented.functions) {
+      const fn = window.preact[fnName];
+      expect(typeof fn).toBe('function');
+      expect(() => fn()).toThrow(new RegExp("'" + fnName + "' is not implemented"));
+    }
+  });
+});
+
+// ────────────────────────────────────────────────────────────────────────
+// (2) CAPABILITY — common patterns work safely
+// ────────────────────────────────────────────────────────────────────────
+
+describe('(2) CAPABILITY — common patterns work out of the box', () => {
+  async function bootRuntime() {
+    const { JSDOM } = await import('jsdom');
+    const dom = new JSDOM('<div id="root"></div>', { runScripts: 'outside-only', pretendToBeVisual: true });
+    const { window } = dom;
+    window.__loxiaWidgetId = 'w';
+    window.__loxiaInitialProps = {};
+    new window.Function(WIDGET_RUNTIME).call(window);
+    return window;
+  }
+
+  test('pattern A: local counter with useState', async () => {
+    const w = await bootRuntime();
+    function App() {
+      const [n, setN] = w.useState(0);
+      return w.h('button', { id: 'b', onClick: () => setN(n + 1) }, 'n=' + n);
+    }
+    w.loxia.render(App, {});
+    w.document.getElementById('b').click();
+    w.document.getElementById('b').click();
+    expect(w.document.getElementById('root').textContent).toContain('n=2');
+  });
+
+  test('pattern: useReducer-driven todo list', async () => {
+    const w = await bootRuntime();
+    function App() {
+      const [state, dispatch] = w.useReducer((s, a) => {
+        if (a.type === 'add') return [...s, a.text];
+        if (a.type === 'clear') return [];
+        return s;
+      }, []);
+      return w.h('div', null,
+        w.h('button', { id: 'add',   onClick: () => dispatch({ type: 'add', text: 'item' }) }, 'add'),
+        w.h('button', { id: 'clear', onClick: () => dispatch({ type: 'clear' }) }, 'clear'),
+        w.h('span',   { id: 'count' }, 'count=' + state.length),
+      );
+    }
+    w.loxia.render(App, {});
+    w.document.getElementById('add').click();
+    w.document.getElementById('add').click();
+    w.document.getElementById('add').click();
+    expect(w.document.getElementById('count').textContent).toBe('count=3');
+    w.document.getElementById('clear').click();
+    expect(w.document.getElementById('count').textContent).toBe('count=0');
+  });
+
+  test('pattern: useEffect cleanup runs on re-render when deps change', async () => {
+    const w = await bootRuntime();
+    let effectRuns = 0, cleanupRuns = 0;
+    function App() {
+      const [n, setN] = w.useState(0);
+      w.useEffect(() => {
+        effectRuns++;
+        return () => { cleanupRuns++; };
+      }, [n]);
+      return w.h('button', { id: 'b', onClick: () => setN(n + 1) }, 'n=' + n);
+    }
+    w.loxia.render(App, {});
+    await new Promise(r => setTimeout(r, 10));
+    expect(effectRuns).toBe(1);
+    w.document.getElementById('b').click();
+    await new Promise(r => setTimeout(r, 10));
+    expect(cleanupRuns).toBe(1);
+    expect(effectRuns).toBe(2);
+  });
+
+  test('pattern: sendEvent for agent-owned state', async () => {
+    const w = await bootRuntime();
+    // Intercept postMessage to capture the event that would go to the parent.
+    const messages = [];
+    w.parent = { postMessage: (msg) => messages.push(msg) };
+    function App() {
+      return w.h('button', { id: 's', onClick: () => w.loxia.sendEvent({ type: 'save', value: 42 }) }, 'save');
+    }
+    w.loxia.render(App, {});
+    w.document.getElementById('s').click();
+    const evt = messages.find(m => m && m.type === 'event');
+    expect(evt).toBeDefined();
+    expect(evt.payload).toEqual({ type: 'save', value: 42 });
+  });
+
+  test('namespace aliases all resolve the same bundle (any name the agent reaches for works)', async () => {
+    const w = await bootRuntime();
+    const names = ['htmPreact', 'preact', 'preactHooks', 'React', 'hooks'];
+    for (const n of names) {
+      expect(w[n].useState).toBe(w.useState);
+      expect(w[n].h).toBe(w.h);
+    }
+  });
+});
+
+// ────────────────────────────────────────────────────────────────────────
+// (3) FEEDBACK — failures are named + actionable
+// ────────────────────────────────────────────────────────────────────────
+
+describe('(3) FEEDBACK — every failure names the problem and points the way', () => {
+  test('widget render error tool-result is shaped for easy parsing + references list-capabilities', async () => {
+    const app = fakeApp();
+    const calls = [], userCalls = [];
+    registerRoutes(app, {
+      agentPool: {
+        addToolResult: async (id, p) => { calls.push({ id, p }); },
+        addUserMessage: async (id, m) => { userCalls.push({ id, m }); },
+      },
+    });
+    const handler = app.routes.post.get('/api/widget/event');
+    const res = fakeRes();
+    await handler({
+      body: {
+        agentId: 'a1', widgetId: 'scientific-calculator',
+        payload: { __widgetError: true, phase: 'render', message: 'htmPreact is not defined' },
+      },
+    }, res);
+    // Tool result carries everything the agent needs
+    const err = calls[0].p.result;
+    expect(err.success).toBe(false);
+    expect(err.widgetId).toBe('scientific-calculator');
+    expect(err.phase).toBe('render');
+    expect(err.message).toBe('htmPreact is not defined');
+    expect(err.error).toMatch(/WIDGET RENDER ERROR/);
+    expect(err.error).toMatch(/htmPreact is not defined/);
+    expect(err.error).toMatch(/list-capabilities/);
+    expect(err.hint).toMatch(/list-capabilities/);
+    // Agent is woken via synthetic user-message that ALSO mentions self-help
+    expect(userCalls).toHaveLength(1);
+    expect(userCalls[0].m.content).toMatch(/scientific-calculator/);
+    expect(userCalls[0].m.content).toMatch(/htmPreact/);
+    expect(userCalls[0].m.content).toMatch(/list-capabilities/);
+  });
+
+  test('unknown action returns an error naming every supported action', async () => {
+    const r = await tool().execute({ action: 'telepathy' }, { agentId: 'a' });
+    expect(r.success).toBe(false);
+    expect(r.error).toMatch(/Unknown action: telepathy/);
+    expect(r.error).toMatch(/render/);
+    expect(r.error).toMatch(/list-capabilities/);
+  });
+
+  test('render validation errors name the invalid field', async () => {
+    const r = await tool().execute(
+      { action: 'render', kind: 'xml', content: 'x' },
+      { agentId: 'a', toolConfig: { allowCustomCode: true } }
+    );
+    expect(r.success).toBe(false);
+    expect(r.error).toMatch(/kind/);
+    expect(r.error).toMatch(/html/);
+    expect(r.error).toMatch(/jsx/);
+  });
+
+  test('disabled-by-default returns a tailored message so the user knows what to do', async () => {
+    const r = await tool().execute(
+      { action: 'render', kind: 'jsx', content: 'return () => h("div");' },
+      { agentId: 'a' } // no toolConfig → default off
+    );
+    expect(r.success).toBe(false);
+    expect(r.disabled).toBe(true);
+    expect(r.error).toMatch(/disabled/);
+    expect(r.error).toMatch(/configurator/);
+  });
+});

package/src/modules/widget/__tests__/codeAnalyzer.test.js

@@ -0,0 +1,340 @@
+/**
+ * Tests for analyzeWidgetCode — the submission-time static analyzer.
+ *
+ * Produces ONE consolidated multi-line warning per render (or none),
+ * containing:
+ *   - Unwired typo attributes (data-bind-click, data-action, …)
+ *   - Methods referenced ONLY via data-emit (won't fire locally)
+ *   - Methods that look like handlers but are unreferenced (dead)
+ *   - Two fix patterns with copy-pastable code, addEventListener FIRST.
+ */
+
+import { describe, test, expect } from '@jest/globals';
+import { analyzeWidgetCode } from '../codeAnalyzer.js';
+
+describe('analyzeWidgetCode — consolidation', () => {
+  test('clean code (data-on-click + afterRender) → no warnings', () => {
+    const code = `
+      class App extends LoxiaElement {
+        toggleYes() {}
+        afterRender(root) {
+          root.querySelector('#b').addEventListener('click', () => this.toggleYes());
+        }
+        template() { return '<button id="b">X</button>'; }
+      }
+    `;
+    expect(analyzeWidgetCode(code, 'webcomponent').warnings).toEqual([]);
+  });
+
+  test('any number of findings → exactly ONE warning entry', () => {
+    const code = `
+      class App extends LoxiaElement {
+        a() {} b() {} c() {}
+        template() {
+          return '<button data-bind-click="a">X</button><button data-action="b">Y</button>';
+        }
+      }
+    `;
+    expect(analyzeWidgetCode(code, 'webcomponent').warnings).toHaveLength(1);
+  });
+});
+
+describe('typo-attribute detection', () => {
+  test('data-bind-click flagged with method name', () => {
+    const code = `<button data-bind-click="toggleYes">X</button>`;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    expect(w).toMatch(/data-bind-click="toggleYes"/);
+    expect(w).toMatch(/method "toggleYes" will NOT be called/);
+  });
+
+  test('data-on:click (colon) flagged', () => {
+    const code = `<button data-on:click="foo">X</button>`;
+    expect(analyzeWidgetCode(code, 'webcomponent').warnings[0]).toMatch(/data-on:click="foo"/);
+  });
+
+  test('data-action / data-handler / data-click / data-onclick all flagged', () => {
+    const code = `
+      <button data-action="x">A</button>
+      <button data-handler="y">B</button>
+      <button data-click="z">C</button>
+      <button data-onclick="w">D</button>
+    `;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    expect(w).toMatch(/data-action="x"/);
+    expect(w).toMatch(/data-handler="y"/);
+    expect(w).toMatch(/data-click="z"/);
+    expect(w).toMatch(/data-onclick="w"/);
+  });
+
+  test('inline on*= attributes flagged with global-scope explanation', () => {
+    const code = `<button onclick="this.toggleYes()">X</button>`;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    expect(w).toMatch(/inline handler runs in iframe global scope/i);
+  });
+
+  test('duplicates of same typo deduped', () => {
+    const code = `
+      <button data-bind-click="x">A</button>
+      <button data-bind-click="x">B</button>
+      <button data-bind-click="x">C</button>
+    `;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    expect(w.match(/data-bind-click="x"/g)).toHaveLength(1);
+  });
+});
+
+describe('emit-only methods (the new finding)', () => {
+  test('method used ONLY via data-emit → flagged as "click won\'t fire it"', () => {
+    // This was the actual bug from Coder-Rapid-8086: button has data-emit
+    // pointing at a method, agent thinks it'll fire on click — it doesn't.
+    const code = `
+      class App extends LoxiaElement {
+        addTodo() { /* … */ }
+        template() {
+          return '<button data-emit="addTodo">Add</button>';
+        }
+      }
+    `;
+    const { warnings } = analyzeWidgetCode(code, 'webcomponent');
+    expect(warnings).toHaveLength(1);
+    const w = warnings[0];
+    expect(w).toMatch(/Methods referenced ONLY via data-emit/);
+    expect(w).toMatch(/addTodo\(\)/);
+    expect(w).toMatch(/sends an event to the AGENT/);
+    expect(w).toMatch(/does NOT invoke this\.addTodo\(\) locally/);
+  });
+
+  test('method used via BOTH data-emit AND addEventListener → NOT flagged (locally wired)', () => {
+    const code = `
+      class App extends LoxiaElement {
+        addTodo() {}
+        afterRender(root) {
+          root.querySelector('#b').addEventListener('click', () => this.addTodo());
+        }
+        template() {
+          return '<button id="b" data-emit="addTodo">Add</button>';
+        }
+      }
+    `;
+    expect(analyzeWidgetCode(code, 'webcomponent').warnings).toEqual([]);
+  });
+
+  test('method used via data-emit AND data-on-click → NOT flagged', () => {
+    const code = `
+      class App extends LoxiaElement {
+        addTodo() {}
+        template() {
+          return '<button data-emit="addTodo" data-on-click="addTodo">Add</button>';
+        }
+      }
+    `;
+    expect(analyzeWidgetCode(code, 'webcomponent').warnings).toEqual([]);
+  });
+
+  test('multiple emit-only methods all listed', () => {
+    const code = `
+      class App extends LoxiaElement {
+        addTodo() {} clearAll() {} deleteTodo() {}
+        template() {
+          return \`
+            <button data-emit="addTodo">Add</button>
+            <button data-emit="clearAll">Clear</button>
+            <button data-emit="deleteTodo">Del</button>
+          \`;
+        }
+      }
+    `;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    expect(w).toMatch(/addTodo\(\)/);
+    expect(w).toMatch(/clearAll\(\)/);
+    expect(w).toMatch(/deleteTodo\(\)/);
+  });
+});
+
+describe('dead handler-shaped methods', () => {
+  test('handler-shaped method never referenced → flagged', () => {
+    const code = `
+      class App extends LoxiaElement {
+        toggleYes() {}
+        template() { return '<div/>'; }
+      }
+    `;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    expect(w).toMatch(/Methods defined but not wired/);
+    expect(w).toMatch(/toggleYes/);
+  });
+
+  test('lifecycle methods never flagged', () => {
+    const code = `
+      class App extends LoxiaElement {
+        onMount() {}
+        onUnmount() {}
+        afterRender() {}
+        handleUpdate() {}
+        template() { return '<div/>'; }
+      }
+    `;
+    expect(analyzeWidgetCode(code, 'webcomponent').warnings).toEqual([]);
+  });
+
+  test('non-handler methods (formatDate, computeTotal) never flagged', () => {
+    const code = `
+      class App extends LoxiaElement {
+        formatDate() {}
+        computeTotal() {}
+        template() { return '<div/>'; }
+      }
+    `;
+    expect(analyzeWidgetCode(code, 'webcomponent').warnings).toEqual([]);
+  });
+
+  test('method called via this.method() from another method → not flagged', () => {
+    const code = `
+      class App extends LoxiaElement {
+        afterRender(root) { this.handleSubmit(); }
+        handleSubmit() {}
+        template() { return '<div/>'; }
+      }
+    `;
+    expect(analyzeWidgetCode(code, 'webcomponent').warnings).toEqual([]);
+  });
+
+  test('method referenced via data-on-<any-event>="m" → not flagged (generic suffix)', () => {
+    const code = `
+      class App extends LoxiaElement {
+        handleKeyPress() {}
+        template() { return '<input data-on-keypress="handleKeyPress">'; }
+      }
+    `;
+    expect(analyzeWidgetCode(code, 'webcomponent').warnings).toEqual([]);
+  });
+
+  test('method referenced via typo attribute (auto-rewritten by runtime) → still considered wired', () => {
+    const code = `
+      class App extends LoxiaElement {
+        toggleYes() {}
+        template() { return '<button data-bind-click="toggleYes">X</button>'; }
+      }
+    `;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    // Typo IS flagged in "Unwired attributes detected" section
+    expect(w).toMatch(/data-bind-click="toggleYes"/);
+    // But NOT in "Methods defined but not wired" — runtime auto-rewrite wires it.
+    expect(w).not.toMatch(/Methods defined but not wired/);
+  });
+});
+
+describe('fix snippets in the warning', () => {
+  test('addEventListener pattern is presented FIRST (recommended)', () => {
+    const code = `<button data-bind-click="x">X</button>`;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    const idxA = w.indexOf('addEventListener inside afterRender');
+    const idxB = w.indexOf('data-on-<event>');
+    expect(idxA).toBeGreaterThan(0);
+    expect(idxB).toBeGreaterThan(0);
+    expect(idxA).toBeLessThan(idxB);   // (A) before (B)
+  });
+
+  test('addEventListener pattern is labelled RECOMMENDED', () => {
+    const code = `<button data-bind-click="x">X</button>`;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    expect(w).toMatch(/RECOMMENDED.*addEventListener/i);
+  });
+
+  test('warning explicitly says data-emit is NOT recommended', () => {
+    const code = `<button data-bind-click="x">X</button>`;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    expect(w).toMatch(/NOT recommended/);
+    expect(w).toMatch(/data-emit.*sends an event to the AGENT/i);
+  });
+
+  test('addEventListener snippet uses the actual method names', () => {
+    const code = `
+      class App extends LoxiaElement {
+        toggleYes() {}
+        onNoClick() {}
+        template() {
+          return '<button data-bind-click="toggleYes">A</button><button data-bind-click="onNoClick">B</button>';
+        }
+      }
+    `;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    expect(w).toMatch(/this\.toggleYes\(\)/);
+    expect(w).toMatch(/this\.onNoClick\(\)/);
+  });
+
+  test('explains why afterRender (not onMount) is the right hook', () => {
+    const code = `<button data-bind-click="x">X</button>`;
+    const w = analyzeWidgetCode(code, 'webcomponent').warnings[0];
+    expect(w).toMatch(/afterRender/);
+    expect(w).toMatch(/onMount/);
+    expect(w).toMatch(/innerHTML/);
+  });
+});
+
+describe('kind awareness', () => {
+  test('jsx kind: dead-method analysis SKIPPED (preact onClick={fn})', () => {
+    const code = `
+      function App() {
+        function toggleYes() {}
+        return html\`<div/>\`;
+      }
+    `;
+    expect(analyzeWidgetCode(code, 'jsx').warnings).toEqual([]);
+  });
+
+  test('html kind: typos in markup still flagged', () => {
+    const code = `<button data-action="x">A</button>`;
+    expect(analyzeWidgetCode(code, 'html').warnings[0]).toMatch(/data-action/);
+  });
+});
+
+describe('defensive guards', () => {
+  test.each([null, undefined, '', 123, {}, []])('non-string content → no warnings (%p)', (input) => {
+    expect(analyzeWidgetCode(input, 'webcomponent').warnings).toEqual([]);
+  });
+});
+
+describe('regression: the Coder-Rapid-8086 todo widget', () => {
+  test('widget with data-emit on every button + handleInput/handleKeyPress methods → flags BOTH classes', () => {
+    // Reproduces the exact widget from the conversation:
+    //   - Buttons use data-emit (which the agent thought was local)
+    //   - handleInput / handleKeyPress methods defined but unwired
+    const code = `
+      class TodoListWidget extends LoxiaElement {
+        addTodo() {}
+        toggleTodo(id) {}
+        deleteTodo(id) {}
+        clearAll() {}
+        handleInput(e) {}
+        handleKeyPress(e) {}
+        template(state) {
+          return \`
+            <input type="text" data-bind="inputValue" />
+            <button data-emit="addTodo">Add</button>
+            <input type="checkbox" data-emit="toggleTodo" />
+            <button data-emit="deleteTodo">Delete</button>
+            <button data-emit="clearAll">Clear</button>
+          \`;
+        }
+      }
+      loxia.render(TodoListWidget, window.__loxiaInitialProps);
+    `;
+    const { warnings } = analyzeWidgetCode(code, 'webcomponent');
+    expect(warnings).toHaveLength(1);
+    const w = warnings[0];
+    // Emit-only section catches what we MISSED before
+    expect(w).toMatch(/Methods referenced ONLY via data-emit/);
+    expect(w).toMatch(/addTodo\(\)/);
+    expect(w).toMatch(/toggleTodo\(\)/);
+    expect(w).toMatch(/deleteTodo\(\)/);
+    expect(w).toMatch(/clearAll\(\)/);
+    // Dead-method section catches the rest
+    expect(w).toMatch(/Methods defined but not wired/);
+    expect(w).toMatch(/handleInput/);
+    expect(w).toMatch(/handleKeyPress/);
+    // Fix snippet uses addEventListener FIRST and includes the actual methods
+    expect(w).toMatch(/RECOMMENDED.*addEventListener/i);
+    expect(w).toMatch(/this\.addTodo\(\)/);
+  });
+});