test(view): add test for listeners binding

packages/test-lib/src/client/test.js

@@ -12,7 +12,14 @@ const createReporter = (messageStream) => {
   });
 };
 
-const { test, skip, only, report: _report } = createHarness();
+const {
+  test,
+  skip,
+  only,
+  report: _report,
+} = createHarness({
+  onlyMode: new URL(window.location).searchParams.get('only') === 'true',
+});
 const report = () => _report({ reporter: createReporter });
 
 export { test, skip, only, report };

packages/test-lib/src/client/theme.css

@@ -2,7 +2,7 @@
     --flag-success-color: #1a751a;
     --flag-failure-color: #ef4d4d;
     --code-block-bg-color: #ececec;
-    --spacing: 0.75em;
+    --spacing: 0.9em;
 }
 
 @media (prefers-color-scheme: dark) {

packages/view/test/event-listeners.js

@@ -0,0 +1,81 @@
+import { test } from '@cofn/test-lib/client';
+import { fromView, nextTick } from './utils.js';
+
+const debug = document.getElementById('debug');
+test('attribute starting with a @ is an event listener', ({ eq }) => {
+  let count = 0;
+
+  const listener = () => (count += 1);
+
+  const el = fromView(
+    ({ html }) =>
+      () =>
+        html`<button @click="${listener}">click</button>`,
+  );
+
+  debug.appendChild(el);
+  eq(count, 0);
+
+  el.firstElementChild.click();
+
+  eq(count, 1);
+});
+
+test('when updated, legacy listener is removed while new listener is attached', ({
+  eq,
+}) => {
+  let count = 0;
+
+  const listener1 = () => (count += 1);
+  const listener2 = () => (count += 2);
+
+  const el = fromView(
+    ({ html }) =>
+      ({ onclick = listener1 }) =>
+        html`<button @click="${onclick}">click</button>`,
+  );
+
+  debug.appendChild(el);
+  eq(count, 0);
+
+  const button = el.firstElementChild;
+
+  button.click();
+
+  eq(count, 1);
+
+  el.render({
+    onclick: listener2,
+  });
+
+  button.click();
+
+  eq(count, 3);
+});
+
+test('when element is removed all listeners are removed', async ({ eq }) => {
+  let count = 0;
+  const listener = () => {
+    count += 1;
+  };
+
+  const el = fromView(({ html, $signal }) => {
+    return () => html`<button @click="${listener}">click</button>`;
+  });
+
+  debug.appendChild(el);
+  eq(count, 0);
+
+  const button = el.firstElementChild;
+  button.click();
+
+  eq(count, 1);
+
+  el.remove();
+
+  await nextTick();
+
+  button.click();
+
+  eq(count, 1);
+});

packages/view/test/test-suite.html

@@ -19,6 +19,7 @@ <h1>Test reporting</h1>
   import { report, createHTMLReporter, createSocketSink } from '@cofn/test-lib/client';
   import './simple-render.js';
   import './attributes.js';
+  import './event-listeners.js'
 
   const [st1, st2] = report().tee();
   st1.pipeTo(createSocketSink(import.meta.hot));