@supersoniks/concorde 4.7.4 → 4.8.0

package/src/core/components/ui/menu/menu.ts

@@ -3,13 +3,21 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
   customElement,
   property,
-  queryAssignedElements,
+  queryAssignedElements as queryAssignedElementsDecorator,
   state,
   query,
+  QueryAssignedElementsDecorator,
+  QueryAssignedElementsOptions,
 } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 import { Size } from "../_css/size";
 import { Shadow, shadowable } from "../_css/shadow";
+
+const queryAssignedElements = (
+  options?: QueryAssignedElementsOptions,
+): QueryAssignedElementsDecorator => {
+  return queryAssignedElementsDecorator(options);
+};
 const tagName = "sonic-menu";
 
 @customElement(tagName)
@@ -107,7 +115,7 @@ export class MenuItems extends LitElement {
           to bottom,
           rgba(0, 0, 0, 0),
           rgba(0, 0, 0, 1) 10%
-        );
+        );queryAssignedElements
         mask-image: linear-gradient(
           to bottom,
           rgba(0, 0, 0, 0),
@@ -246,7 +254,8 @@ export class MenuItems extends LitElement {
     if (this.scrollable) {
       const activeItems = this.menuChildren.filter(
         (item) =>
-          item.hasAttribute("active") && item.getAttribute("active") !== "false"
+          item.hasAttribute("active") &&
+          item.getAttribute("active") !== "false",
       );
 
       if (activeItems.length === 1) {

package/src/core/decorators/api.post.spec.ts

@@ -0,0 +1,293 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { Endpoint } from "../utils/endpoint";
+import { DataProviderKey } from "../utils/dataProviderKey";
+import API, {
+  type ApiResult,
+} from "@supersoniks/concorde/core/utils/api";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { patch, post, put } from "./api";
+
+async function flushSendFrames() {
+  await new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+  await Promise.resolve();
+}
+
+function mockPayload<T>(result: T, method = "POST") {
+  return {
+    request: new Request("https://api.example.test/items/1", { method }),
+    response: new Response(JSON.stringify(result), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    }),
+    result,
+  };
+}
+
+describe("post", () => {
+  beforeEach(() => {
+    vi.spyOn(API.prototype, "postDetailed").mockResolvedValue(
+      mockPayload({ ok: true }) as never,
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    document.body.replaceChildren();
+  });
+
+  it("assigne ApiResult avec body publisher", async () => {
+    const bodyPubId = "postSpecBody1";
+    PublisherManager.get(bodyPubId).set({ value: "payload" });
+    const bodyKey = new DataProviderKey<{ value: string }>(bodyPubId);
+    const syncEp = new Endpoint<{ ok: boolean }>("items/1/sync");
+    const tag = "test-api-post-body";
+
+    class C extends HTMLElement {
+      @post(syncEp, bodyKey)
+      payload: ApiResult<{ ok: boolean }> | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    await flushSendFrames();
+
+    expect(API.prototype.postDetailed).toHaveBeenCalledWith("items/1/sync", {
+      value: "payload",
+    });
+    expect(el.payload?.result).toEqual({ ok: true });
+  });
+
+  it("endpoint dynamique et relance quand le body publisher mute", async () => {
+    const bodyPubId = "postSpecBody2";
+    const pub = PublisherManager.get(bodyPubId);
+    pub.set({ id: "a" });
+    const bodyKey = new DataProviderKey<{ id: string }>(bodyPubId);
+    const syncEp = new Endpoint<{ ok: boolean }, { sessionId: string }>(
+      "sessions/${sessionId}/sync",
+    );
+    const tag = "test-api-post-dynamic";
+
+    class C extends HTMLElement {
+      sessionId = "99";
+
+      @post(syncEp, bodyKey)
+      payload: ApiResult<{ ok: boolean }> | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    await flushSendFrames();
+    expect(API.prototype.postDetailed).toHaveBeenCalledWith(
+      "sessions/99/sync",
+      { id: "a" },
+    );
+
+    pub.set({ id: "b" });
+    await flushSendFrames();
+    expect(API.prototype.postDetailed).toHaveBeenCalled();
+    expect(API.prototype.postDetailed).toHaveBeenLastCalledWith(
+      "sessions/99/sync",
+      { id: "b" },
+    );
+  });
+
+  it("n'envoie qu'une fois par frame quand le body mute en cascade", async () => {
+    const bodyPubId = "postSpecBodyCoalesce";
+    const pub = PublisherManager.get(bodyPubId);
+    pub.set({ a: 1, b: 2 });
+    const bodyKey = new DataProviderKey<{ a: number; b: number }>(bodyPubId);
+    const syncEp = new Endpoint<{ ok: boolean }>("sync");
+    const tag = "test-api-post-coalesce";
+
+    class C extends HTMLElement {
+      @post(syncEp, bodyKey)
+      payload: ApiResult<{ ok: boolean }> | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    await flushSendFrames();
+    vi.mocked(API.prototype.postDetailed).mockClear();
+
+    pub.a.set(10);
+    pub.b.set(20);
+    await flushSendFrames();
+
+    expect(API.prototype.postDetailed).toHaveBeenCalledTimes(1);
+    expect(API.prototype.postDetailed).toHaveBeenCalledWith("sync", {
+      a: 10,
+      b: 20,
+    });
+    expect(el.payload?.result).toEqual({ ok: true });
+  });
+
+  it("ne poste pas sur mutation body si autoPostOnBodyMutation est false", async () => {
+    const bodyPubId = "postSpecBodyManual";
+    const triggerPubId = "postSpecTriggerManual";
+    const pub = PublisherManager.get(bodyPubId);
+    pub.set({ tick: 1 });
+    const bodyKey = new DataProviderKey<{ tick: number }>(bodyPubId);
+    const triggerKey = new DataProviderKey<number>(triggerPubId);
+    const syncEp = new Endpoint<{ ok: boolean }>("sync");
+    const tag = "test-api-post-manual";
+
+    class C extends HTMLElement {
+      @post(syncEp, bodyKey, {
+        autoPostOnBodyMutation: false,
+        triggerKey,
+      })
+      payload: ApiResult<{ ok: boolean }> | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    await flushSendFrames();
+    const callsAfterConnect = vi.mocked(API.prototype.postDetailed).mock.calls
+      .length;
+    expect(callsAfterConnect).toBe(0);
+
+    pub.set({ tick: 2 });
+    await flushSendFrames();
+    expect(API.prototype.postDetailed).toHaveBeenCalledTimes(0);
+
+    PublisherManager.get(triggerPubId).invalidate();
+    await flushSendFrames();
+    expect(API.prototype.postDetailed).toHaveBeenCalledTimes(1);
+    expect(API.prototype.postDetailed).toHaveBeenCalledWith("sync", {
+      tick: 2,
+    });
+    expect(el.payload?.result).toEqual({ ok: true });
+  });
+
+  it("relance le POST quand le publisher trigger est invalidé", async () => {
+    const bodyPubId = "postSpecBody3";
+    const triggerPubId = "postSpecTrigger3";
+    PublisherManager.get(bodyPubId).set({ tick: 1 });
+    const bodyKey = new DataProviderKey<{ tick: number }>(bodyPubId);
+    const triggerKey = new DataProviderKey<number>(triggerPubId);
+    const syncEp = new Endpoint<{ ok: boolean }>("sync");
+    const tag = "test-api-post-trigger";
+
+    class C extends HTMLElement {
+      @post(syncEp, bodyKey, { triggerKey })
+      payload: ApiResult<{ ok: boolean }> | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    await flushSendFrames();
+    const callsBeforeInvalidate = vi.mocked(API.prototype.postDetailed).mock.calls.length;
+    expect(callsBeforeInvalidate).toBeGreaterThanOrEqual(1);
+
+    PublisherManager.get(triggerPubId).invalidate();
+    await flushSendFrames();
+    expect(vi.mocked(API.prototype.postDetailed).mock.calls.length).toBeGreaterThan(
+      callsBeforeInvalidate,
+    );
+    expect(el.payload?.result).toEqual({ ok: true });
+  });
+});
+
+describe("put / patch", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    document.body.replaceChildren();
+  });
+
+  it("@put appelle putDetailed", async () => {
+    vi.spyOn(API.prototype, "putDetailed").mockResolvedValue(
+      mockPayload({ ok: true }, "PUT") as never,
+    );
+    const bodyPubId = "putSpecBody1";
+    PublisherManager.get(bodyPubId).set({ name: "x" });
+    const bodyKey = new DataProviderKey<{ name: string }>(bodyPubId);
+    const ep = new Endpoint<{ ok: boolean }>("items/1");
+    const tag = "test-api-put";
+
+    class C extends HTMLElement {
+      @put(ep, bodyKey)
+      payload: ApiResult<{ ok: boolean }> | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    wrap.appendChild(document.createElement(tag));
+    document.body.appendChild(wrap);
+
+    await flushSendFrames();
+    expect(API.prototype.putDetailed).toHaveBeenCalledWith("items/1", {
+      name: "x",
+    });
+  });
+
+  it("@patch appelle patchDetailed", async () => {
+    vi.spyOn(API.prototype, "patchDetailed").mockResolvedValue(
+      mockPayload({ ok: true }, "PATCH") as never,
+    );
+    const bodyPubId = "patchSpecBody1";
+    PublisherManager.get(bodyPubId).set({ name: "y" });
+    const bodyKey = new DataProviderKey<{ name: string }>(bodyPubId);
+    const ep = new Endpoint<{ ok: boolean }>("items/1");
+    const tag = "test-api-patch";
+
+    class C extends HTMLElement {
+      @patch(ep, bodyKey)
+      payload: ApiResult<{ ok: boolean }> | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    wrap.appendChild(document.createElement(tag));
+    document.body.appendChild(wrap);
+
+    await flushSendFrames();
+    expect(API.prototype.patchDetailed).toHaveBeenCalledWith("items/1", {
+      name: "y",
+    });
+  });
+});

package/src/core/decorators/api.spec.ts

@@ -3,7 +3,7 @@ import { Endpoint } from "../utils/endpoint";
 import { DataProviderKey } from "../utils/dataProviderKey";
 import API, {
   APIConfiguration,
-  type ApiGetResult,
+  type ApiResult,
 } from "@supersoniks/concorde/core/utils/api";
 import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { get } from "./api";
@@ -45,7 +45,7 @@ describe("get", () => {
     document.body.replaceChildren();
   });
 
-  it("assigne ApiGetResult avec configurationKey (publisher)", async () => {
+  it("assigne ApiResult avec configurationKey (publisher)", async () => {
     const pubId = "getSpecPub1";
     PublisherManager.get(pubId).set(staticConfig);
     const confKey = new DataProviderKey<APIConfiguration>(pubId);
@@ -54,7 +54,7 @@ describe("get", () => {
     const tag = "test-api-get-config-key";
     class C extends HTMLElement {
       @get(itemEp, confKey)
-      payload: ApiGetResult<{ id: string }> | null = null;
+      payload: ApiResult<{ id: string }> | null = null;
     }
     if (!customElements.get(tag)) {
       customElements.define(tag, C);
@@ -78,7 +78,7 @@ describe("get", () => {
       rowId = "42";
 
       @get(rowEp, confKey)
-      payload: ApiGetResult<{ id: string }> | null = null;
+      payload: ApiResult<{ id: string }> | null = null;
     }
 
     const tag = "test-api-get-row";
@@ -99,7 +99,7 @@ describe("get", () => {
 
     class TestScoped extends HTMLElement {
       @get(dataEp)
-      payload: ApiGetResult<{ id: string }> | null = null;
+      payload: ApiResult<{ id: string }> | null = null;
     }
 
     const tag = "test-api-get-scoped";
@@ -129,7 +129,7 @@ describe("get", () => {
 
     class C extends HTMLElement {
       @get(itemEp, confKey)
-      payload: ApiGetResult<{ id: string }> | null = null;
+      payload: ApiResult<{ id: string }> | null = null;
     }
     if (!customElements.get(tag)) {
       customElements.define(tag, C);