feat(web-components): Add Powerbox-compatible petname component

packages/web-components/agoric-petname.js

@@ -0,0 +1,3 @@
+import { AgoricPetname } from './src/AgoricPetname.js';
+
+window.customElements.define('agoric-petname', AgoricPetname);

packages/web-components/package.json

@@ -37,14 +37,15 @@
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "next",
     "@web/dev-server": "^0.1.22",
-    "@web/test-runner": "^0.13.16",
+    "@web/test-runner": "^0.13.23",
     "eslint": "^7.32.0",
     "eslint-plugin-lit": "^1.5.1",
     "eslint-plugin-lit-a11y": "^1.0.1",
     "eslint-plugin-wc": "^1.3.1",
     "lint-staged": "^10.5.4",
     "lit": "^2.0.2",
-    "mock-socket": "^9.0.4"
+    "mock-socket": "^9.0.4",
+    "sinon": "^12.0.1"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {

packages/web-components/src/AgoricPetname.js

@@ -0,0 +1,26 @@
+import { html, LitElement } from 'lit';
+import Powerbox from './Powerbox.js';
+
+export class AgoricPetname extends LitElement {
+  static get properties() {
+    return {
+      uid: { type: String },
+    };
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  updated() {
+    Powerbox.expandPetdata();
+  }
+
+  render() {
+    return html`
+      <span
+        data-powerbox-target="petname-if-known"
+        data-powerbox-id="${this.uid}"
+      >
+        ${this.uid}
+      </span>
+    `;
+  }
+}

packages/web-components/src/Powerbox.js

@@ -0,0 +1,21 @@
+/* global powerbox */
+
+class Powerbox {
+  constructor() {
+    this.loaded = false;
+    window.addEventListener('load', () => {
+      this.loaded = true;
+      this.expandPetdata();
+    });
+  }
+
+  expandPetdata() {
+    if (!this.loaded) return;
+    if (typeof powerbox === 'undefined') {
+      throw new Error('powerbox not found');
+    }
+    powerbox.expandPetdata();
+  }
+}
+
+export default new Powerbox();

packages/web-components/test/agoric-petname.test.js

@@ -0,0 +1,52 @@
+import { html } from 'lit';
+import { stub, restore } from 'sinon';
+import { fixture, expect } from '@open-wc/testing';
+import '../agoric-petname.js';
+import Powerbox from '../src/Powerbox.js';
+
+describe('AgoricPetname', () => {
+  beforeEach(() => {});
+
+  afterEach(() => {
+    restore();
+  });
+
+  it('passes the a11y audit', async () => {
+    const el = await fixture(
+      html`
+        <agoric-petname uid="AG.1"></agoric-petname>
+      `,
+    );
+
+    await expect(el).shadowDom.to.be.accessible();
+  });
+
+  it('calls Powerbox.expandPetdata on update', async () => {
+    const expandPetdataStub = stub(Powerbox, 'expandPetdata');
+    const el = await fixture(
+      html`
+        <agoric-petname uid="AG.1"></agoric-petname>
+      `,
+    );
+    expect(expandPetdataStub).to.have.callCount(1);
+
+    await el.setAttribute('uid', 'AG.2');
+
+    expect(expandPetdataStub).to.have.callCount(2);
+  });
+
+  it('renders a span with the correct data', async () => {
+    const el = await fixture(
+      html`
+        <agoric-petname uid="AG.1"></agoric-petname>
+      `,
+    );
+
+    const inner = el.shadowRoot.querySelector('span');
+    expect(inner.getAttribute('data-powerbox-target')).to.equal(
+      'petname-if-known',
+    );
+    expect(inner.getAttribute('data-powerbox-id')).to.equal('AG.1');
+    expect(inner.innerText).to.equal('AG.1');
+  });
+});