Adds button-counter.

This exercises `comp.listen` and event handling.
dgp1130 · Dec 28, 2023 · abbadc3 · abbadc3
1 parent e60bec2
commit abbadc3
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 0 deletions.
diff --git a/src/demo/counter/button-counter.test.html b/src/demo/counter/button-counter.test.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>`button-counter` tests</title>
+        <meta charset="utf8">
+    </head>
+    <body></body>
+</html>
diff --git a/src/demo/counter/button-counter.test.ts b/src/demo/counter/button-counter.test.ts
@@ -0,0 +1,51 @@
+import { parseHtml } from 'hydroactive/testing.js';
+import { ButtonCounter } from './button-counter.js';
+
+describe('button-counter', () => {
+  afterEach(() => {
+    for (const node of document.body.childNodes) node.remove();
+  });
+
+  function render({ count }: { count: number }) {
+    return parseHtml(ButtonCounter, `
+      <button-counter>
+        <div>The current count is: <span>${count}</span>.</div>
+        <button id="decrement">-</button>
+        <button id="increment">+</button>
+      </button-counter>
+    `);
+  }
+
+  describe('ButtonCounter', () => {
+    it('does not re-render on hydration', async () => {
+      const el = render({ count: 5 });
+      document.body.appendChild(el);
+
+      await el.stable();
+
+      expect(el.querySelector('span')!.textContent).toBe('5');
+    });
+
+    it('decrements on click', async () => {
+      const el = render({ count: 5 });
+      document.body.appendChild(el);
+
+      (el.querySelector('#decrement')! as HTMLElement).click();
+
+      await el.stable();
+
+      expect(el.querySelector('span')!.textContent).toBe('4');
+    });
+
+    it('increments on click', async () => {
+      const el = render({ count: 5 });
+      document.body.appendChild(el);
+
+      (el.querySelector('#increment')! as HTMLElement).click();
+
+      await el.stable();
+
+      expect(el.querySelector('span')!.textContent).toBe('6');
+    });
+  });
+});
diff --git a/src/demo/counter/button-counter.ts b/src/demo/counter/button-counter.ts
@@ -0,0 +1,17 @@
+import { defineComponent } from 'hydroactive';
+
+/**
+ * A counter which increments and decrements the count based on button clicks.
+ */
+export const ButtonCounter = defineComponent('button-counter', (comp) => {
+  const count = comp.live('span', Number);
+
+  comp.listen('#decrement', 'click', () => { count.set(count() - 1); });
+  comp.listen('#increment', 'click', () => { count.set(count() + 1); });
+});
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'button-counter': InstanceType<typeof ButtonCounter>;
+  }
+}
diff --git a/src/demo/counter/index.html b/src/demo/counter/index.html
@@ -25,5 +25,15 @@ <h2>Auto Counter</h2>
 
             <script src="./auto-counter.js" type="module"></script>
         </auto-counter>
+
+        <button-counter>
+            <h2>Button Counter</h2>
+
+            <div>The current count is: <span>10</span>.</div>
+            <button id="decrement">-</button>
+            <button id="increment">+</button>
+
+            <script src="./button-counter.js" type="module"></script>
+        </button-counter>
     </body>
 </html>