feat(pos-add-relation): fire event after successful save

Author: angelo-v

elements/src/components/pos-add-literal-value/pos-add-literal-value.tsx

@@ -24,7 +24,7 @@ export class PosAddLiteralValue implements ResourceAware, PodOsAware {
   /**
    * The entered literal value has been added to the resource and successfully stored to the Pod.
    */
-  @Event({ eventName: 'pod-os:added-literal-value' }) addedLiteralValue: EventEmitter;
+  @Event({ eventName: 'pod-os:added-literal-value' }) addedLiteralValue: EventEmitter<Literal>;
 
   /**
    * Something went wrong while adding the literal value.

elements/src/components/pos-add-relation/pos-add-relation.spec.tsx

@@ -1,12 +1,14 @@
 jest.mock('../events/useResource');
+jest.mock('@pod-os/core', () => ({
+  labelFromUri: uri => `fake label for ${uri}`,
+}));
 import { mockPodOS } from '../../test/mockPodOS';
-
 import { newSpecPage } from '@stencil/core/testing';
 import { PosAddRelation } from './pos-add-relation';
 import { useResource } from '../events/useResource';
 import { when } from 'jest-when';
 
-import { PodOS, Thing } from '@pod-os/core';
+import { PodOS, Relation, Thing } from '@pod-os/core';
 import { fireEvent } from '@testing-library/dom';
 
 function mockResource(thing: Partial<Thing> = {}) {
@@ -110,4 +112,38 @@ describe('pos-add-relation', () => {
     expect(input.value).toEqual('');
     expect(page.rootInstance.currentValue).toBe('');
   });
+
+  it('fires event after save', async () => {
+    // given the resource in context is editable
+    const thing = { editable: true, fake: 'thing' };
+    mockResource(thing);
+
+    // and a page with a pos-add-relation component
+    const page = await newSpecPage({
+      supportsShadowDom: false,
+      components: [PosAddRelation],
+      html: `<pos-add-relation></pos-add-relation>`,
+    });
+
+    // and the page listens for pod-os:added-relation events
+    const eventListener = jest.fn();
+    page.root.addEventListener('pod-os:added-relation', eventListener);
+
+    // when save is called
+    page.rootInstance.selectedTermUri = 'http://xmlns.com/foaf/0.1/knows';
+    page.rootInstance.currentValue = 'https://alice.test/profile/card#me';
+    await page.rootInstance.save();
+
+    // then a pod-os:added-relation event with the added relation is received in the listener
+    const relation: Relation = {
+      predicate: 'http://xmlns.com/foaf/0.1/knows',
+      label: 'fake label for http://xmlns.com/foaf/0.1/knows',
+      uris: ['https://alice.test/profile/card#me'],
+    };
+    expect(eventListener).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: relation,
+      }),
+    );
+  });
 });

elements/src/components/pos-add-relation/pos-add-relation.tsx

@@ -1,8 +1,8 @@
-import { Component, h, Host, Element, State } from '@stencil/core';
+import { Component, h, Host, Element, State, Event, EventEmitter } from '@stencil/core';
 import { useResource } from '../events/useResource';
 
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import { PodOS, Thing } from '@pod-os/core';
+import { labelFromUri, PodOS, Relation, Thing } from '@pod-os/core';
 import { usePodOS } from '../events/usePodOS';
 
 /**
@@ -28,6 +28,11 @@ export class PosAddRelation {
 
   @State() currentValue: string;
 
+  /**
+   * The relation has been added to the resource and successfully stored to the Pod.
+   */
+  @Event({ eventName: 'pod-os:added-relation' }) addedRelation: EventEmitter<Relation>;
+
   private valueInput: HTMLInputElement;
 
   async componentWillLoad() {
@@ -42,6 +47,12 @@ export class PosAddRelation {
 
   async save() {
     await this.os.addRelation(this.resource, this.selectedTermUri, this.currentValue);
+    const relation = {
+      predicate: this.selectedTermUri,
+      label: labelFromUri(this.selectedTermUri),
+      uris: [this.currentValue],
+    };
+      this.addedRelation.emit(relation);
     this.currentValue = '';
   }
 
@@ -55,11 +66,11 @@ export class PosAddRelation {
         <pos-select-term placeholder="Add relation" onPod-os:term-selected={ev => this.onTermSelected(ev)} />
         <input
           ref={el => (this.valueInput = el)}
-          value={this.currentValue}
-          onInput={ev => (this.currentValue = (ev.target as HTMLInputElement).value)}
           type="url"
           aria-label="URI"
           placeholder=""
+          value={this.currentValue}
+          onInput={ev => (this.currentValue = (ev.target as HTMLInputElement).value)}
           onChange={() => this.save()}
         ></input>
       </Host>