@dile/crud 2.2.0 → 2.2.2

package/components/many-relation/index.js

@@ -1 +1,2 @@
 export { DileManyRelation } from './src/DileManyRelation.js';
+export { DileManyRelationOverlay } from './src/DileManyRelationOverlay.js';

package/components/many-relation/many-relation-overlay.js

@@ -0,0 +1,5 @@
+import { DileManyRelationOverlay } from './src/DileManyRelationOverlay.js';
+
+if (!customElements.get('dile-many-relation-overlay')) {
+  customElements.define('dile-many-relation-overlay', DileManyRelationOverlay);
+}

package/components/many-relation/many-relation.spec.js

@@ -0,0 +1,101 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import './many-relation.js';
+import './many-relation-overlay.js';
+
+const VARIANTS = [
+  { tag: 'dile-many-relation', selectTag: 'dile-ajax-select-crud' },
+  { tag: 'dile-many-relation-overlay', selectTag: 'dile-ajax-select-crud-overlay' },
+];
+
+describe.each(VARIANTS)('$tag (select: $selectTag)', ({ tag, selectTag }) => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    delete window.axiosInstance;
+  });
+
+  function mockAxios({ get = vi.fn(), post = vi.fn(), delete: del = vi.fn() } = {}) {
+    window.axiosInstance = { get, post, delete: del };
+    return window.axiosInstance;
+  }
+
+  async function renderManyRelation(attrs = '') {
+    document.body.innerHTML = `
+      <${tag}
+        endpointGet="/api/tags"
+        endpointList="/api/board-games/1/tags"
+        endpointAdd="/api/board-games/1/tags"
+        endpointRemove="/api/board-games/1/tags"
+        idProperty="id"
+        displayProperty="name"
+        ${attrs}
+      ></${tag}>
+    `;
+    const el = document.body.querySelector(tag);
+    await el.updateComplete;
+    return el;
+  }
+
+  function select(el) {
+    return el.shadowRoot.getElementById('theselect');
+  }
+
+  it(`renders a ${selectTag} as the select control`, async () => {
+    mockAxios({ get: vi.fn(() => Promise.resolve({ status: 200, data: [] })) });
+    const el = await renderManyRelation();
+
+    const theselect = select(el);
+    expect(theselect).toBeTruthy();
+    expect(theselect.tagName.toLowerCase()).toBe(selectTag);
+  });
+
+  it('loads the related items list from endpointList on connect', async () => {
+    const get = vi.fn(() =>
+      Promise.resolve({ status: 200, data: { data: [{ id: 1, name: 'Strategy' }] } })
+    );
+    mockAxios({ get });
+    const el = await renderManyRelation('loadFromEndpoint');
+    await vi.waitFor(() => expect(el._items).toEqual([{ id: 1, name: 'Strategy' }]));
+
+    expect(get).toHaveBeenCalledWith('/api/board-games/1/tags', { params: undefined });
+  });
+
+  it('adds the item selected through the select control', async () => {
+    const post = vi.fn(() => Promise.resolve({ status: 201, data: {} }));
+    const get = vi.fn(() => Promise.resolve({ status: 200, data: { data: [] } }));
+    mockAxios({ post, get });
+    const el = await renderManyRelation();
+
+    select(el).dispatchEvent(
+      new CustomEvent('element-changed', { detail: { value: '5' } })
+    );
+    await el.updateComplete;
+    expect(el._selectedId).toBe('5');
+
+    el.shadowRoot.querySelector('button.add-btn').click();
+    // adding successfully triggers a list auto-refresh; wait it out before mocks are torn down
+    await vi.waitFor(() => expect(get).toHaveBeenCalled());
+
+    expect(post).toHaveBeenCalledWith('/api/board-games/1/tags', { id: '5' }, undefined);
+  });
+
+  it('removes an item and dispatches many-relation-remove-success', async () => {
+    const del = vi.fn(() => Promise.resolve({ status: 200, data: {} }));
+    const get = vi.fn(() => Promise.resolve({ status: 200, data: { data: [] } }));
+    mockAxios({ get, delete: del });
+    const el = await renderManyRelation();
+    el.relatedItems = [{ id: 9, name: 'Party' }];
+
+    const removeListener = vi.fn();
+    el.addEventListener('many-relation-remove-success', removeListener);
+
+    await vi.waitFor(() =>
+      expect(el.shadowRoot.querySelector('button.remove-btn')).toBeTruthy()
+    );
+    el.shadowRoot.querySelector('button.remove-btn').click();
+    await vi.waitFor(() => expect(removeListener).toHaveBeenCalled());
+    // wait out the list auto-refresh triggered by the removal before mocks are torn down
+    await vi.waitFor(() => expect(get).toHaveBeenCalled());
+
+    expect(del).toHaveBeenCalledWith('/api/board-games/1/tags/9', {}, undefined);
+  });
+});

package/components/many-relation/src/DileManyRelation.js

@@ -1,4 +1,5 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, css } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
 import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 import { addIcon, clearIcon } from '@dile/icons';
 import '../../ajax/ajax.js';
@@ -9,13 +10,15 @@ import '@dile/ui/components/input/input-message.js';
 import { labelStyles } from '@dile/ui/components/input/src/label-styles.js';
 
 export class DileManyRelation extends DileI18nMixin(LitElement) {
+  static selectTag = 'dile-ajax-select-crud';
+
   static styles = [
     labelStyles,
     css`
       :host {
         display: block;
       }
-      dile-ajax-select-crud{
+      #theselect {
           margin-bottom: 0;
       }
       .relation-item {
@@ -61,7 +64,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
         gap: 0.5rem;
         margin-bottom: 0.5rem;
       }
-      .add-row dile-ajax-select-crud {
+      .add-row #theselect {
         flex: 1;
       }
       button.add-btn dile-icon {
@@ -159,6 +162,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
   }
 
   render() {
+    const selectTag = unsafeStatic(this.constructor.selectTag);
     return html`
       <dile-ajax
         id="ajaxlist"
@@ -186,7 +190,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
           : ""
       }
       <div class="add-row">
-        <dile-ajax-select-crud
+        <${selectTag}
           id="theselect"
           endpoint="${this.endpointGet}"
           displayProperty="${this.displayProperty}"
@@ -200,7 +204,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
           .getSelectResultList="${this.getSelectResultList}"
           language="${this.language}"
           @element-changed="${this._onSelectChanged}"
-        ></dile-ajax-select-crud>
+        ></${selectTag}>
         ${!this.addOnSelect ? html`
           <button
             class="add-btn"

package/components/many-relation/src/DileManyRelationOverlay.js

@@ -0,0 +1,6 @@
+import { DileManyRelation } from './DileManyRelation.js';
+import '../../ajax-select-crud/ajax-select-crud-overlay.js';
+
+export class DileManyRelationOverlay extends DileManyRelation {
+  static selectTag = 'dile-ajax-select-crud-overlay';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "type": "module",
@@ -25,12 +25,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^3.5.0",
+    "@dile/ui": "^3.5.2",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "817f0dfc3c345957ae7a63c113e22aa0f80a773f"
+  "gitHead": "352830a2d1bd846bd07ffc0084df32dc3f8bac83"
 }