test(view): add test for attributes and fragment

packages/view/test/attributes.js

@@ -0,0 +1,46 @@
+import { test } from '@cofn/test-lib/client';
+import { fromView } from './utils.js';
+
+const debug = document.getElementById('debug');
+
+test('attribute can be interpolated', ({ eq }) => {
+  const el = fromView(
+    ({ html }) =>
+      ({ attributes }) =>
+        html`<p data-id="${attributes['item-id']}">hello</p>`,
+  );
+  el.setAttribute('item-id', 'someId');
+  debug.appendChild(el);
+  eq(el.querySelector('p').getAttribute('data-id'), 'someId');
+  el.render({
+    attributes: {
+      ['item-id']: 'otherId',
+    },
+  });
+  eq(el.querySelector('p').getAttribute('data-id'), 'otherId');
+});
+
+test('attribute is set when value type is boolean and value is "true", attribute is removed when value is "false"', ({
+  eq,
+}) => {
+  const el = fromView(
+    ({ html }) =>
+      ({ data } = {}) =>
+        html`<p open="${data?.open}">hello</p>`,
+  );
+  debug.appendChild(el);
+  const pEl = el.querySelector('p');
+  el.render({
+    data: {
+      open: true,
+    },
+  });
+  eq(pEl.getAttribute('open'), 'true');
+  eq(pEl.hasAttribute('open'), true);
+  el.render({
+    data: {
+      open: false,
+    },
+  });
+  eq(pEl.hasAttribute('open'), false);
+});

packages/view/test/simple-render.js

@@ -3,7 +3,7 @@ import { fromView } from './utils.js';
 
 const debug = document.getElementById('debug');
 
-test('render a component when mounted', ({ eq }) => {
+test('renders a component when mounted', ({ eq }) => {
   const el = fromView(
     ({ html }) =>
       ({ attributes }) =>
@@ -34,3 +34,35 @@ test('component is updated when rendered is called, passing the relevant data',
 
   eq(el.innerHTML, '<p>hello Robert</p>');
 });
+
+test('a text node can have multiple active sites', ({ eq }) => {
+  const el = fromView(
+    ({ html }) =>
+      ({ attributes }) =>
+        html`<p>hello ${attributes.firstname} ${attributes.lastname}</p>`,
+  );
+  el.setAttribute('firstname', 'Laurent');
+  el.setAttribute('lastname', 'Renard');
+  debug.appendChild(el);
+
+  eq(el.innerHTML, '<p>hello Laurent Renard</p>');
+
+  el.render({
+    attributes: { firstname: 'Robert', lastname: 'Marley' },
+  });
+
+  eq(el.innerHTML, '<p>hello Robert Marley</p>');
+});
+
+test('renders a document fragment', ({ eq }) => {
+  const el = fromView(
+    ({ html }) =>
+      ({ attributes }) =>
+        // prettier-ignore
+        html`<h2>some title</h2><p>hello ${attributes.name}</p>`,
+  );
+
+  el.setAttribute('name', 'Laurent');
+  debug.appendChild(el);
+  eq(el.innerHTML, `<h2>some title</h2><p>hello Laurent</p>`);
+});

packages/view/test/test-suite.html

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