feat(make findable): add thing to chosen index

pod-os · Feb 14, 2025 · 9678f3e · 9678f3e
1 parent 7aee59e
commit 9678f3e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/elements/src/components/pos-make-findable/pos-make-findable.spec.tsx b/elements/src/components/pos-make-findable/pos-make-findable.spec.tsx
@@ -4,7 +4,7 @@ import { newSpecPage, SpecPage } from '@stencil/core/testing';
 
 import { PosMakeFindable } from './pos-make-findable';
 
-import { fireEvent, screen } from '@testing-library/dom';
+import { fireEvent, screen, within } from '@testing-library/dom';
 import { when } from 'jest-when';
 import session from '../../store/session';
 import { LabelIndex, WebIdProfile } from '@pod-os/core';
@@ -224,6 +224,22 @@ describe('pos-make-findable', () => {
         </ol>`);
     });
 
+    it('add thing to the chosen label index', async () => {
+      // when the button is clicked
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+      await page.waitForChanges();
+
+      // and an option is chosen
+      const options = screen.getAllByRole('option');
+      expect(options.length).toEqual(2);
+      const indexButton = within(options[0]).getByRole('button');
+      fireEvent.click(indexButton);
+
+      // then nothing is added to an index yet
+      expect(mockOs.addToLabelIndex).toHaveBeenCalled();
+    });
+
     it('closes the options, if clicked elsewhere', async () => {
       // given the list does not show up yet
       expect(screen.queryByRole('listbox')).toBeNull();

diff --git a/elements/src/components/pos-make-findable/pos-make-findable.tsx b/elements/src/components/pos-make-findable/pos-make-findable.tsx
@@ -61,12 +61,16 @@ export class PosMakeFindable implements PodOsAware {
   private async onClick(e: MouseEvent) {
     e.preventDefault();
     if (this.indexes.length === 1) {
-      await this.os.addToLabelIndex(this.thing, this.indexes[0]);
+      await this.addToLabelIndex(this.indexes[0]);
     } else if (this.indexes.length > 1) {
       this.showOptions = true;
     }
   }
 
+  private async addToLabelIndex(index: LabelIndex) {
+    await this.os.addToLabelIndex(this.thing, index);
+  }
+
   render() {
     if (!session.state.isLoggedIn) {
       return null;
@@ -94,7 +98,7 @@ export class PosMakeFindable implements PodOsAware {
           <ol role="listbox">
             {this.indexes.map((index: LabelIndex) => (
               <li role="option">
-                <button>
+                <button onClick={e => this.chooseOption(e, index)}>
                   <pos-resource uri={index.uri} lazy={true}>
                     <pos-label></pos-label>
                   </pos-resource>
@@ -106,4 +110,9 @@ export class PosMakeFindable implements PodOsAware {
       </Host>
     );
   }
+
+  private async chooseOption(e: MouseEvent, index: LabelIndex) {
+    e.preventDefault();
+    await this.addToLabelIndex(index);
+  }
 }