@startinblox/components-ds4go 2.3.0 → 3.0.1

package/cypress/e2e/helpers/components/setupCacheOnResourceReady.cy.ts

@@ -0,0 +1,483 @@
+import setupCacheOnResourceReady from "@helpers/components/setupCacheOnResourceReady";
+
+describe("setupCacheOnResourceReady helper function", () => {
+  const createMockComponent = () => {
+    const _subscriptions = new Set();
+
+    const mockComponent: any = {
+      _subscriptions,
+      _subscribe() {
+        for (const subscription of this._subscriptions) {
+          document.addEventListener(subscription[0], subscription[1]);
+        }
+      },
+      _unsubscribe() {
+        for (const subscription of this._subscriptions) {
+          document.removeEventListener(subscription[0], subscription[1]);
+        }
+      },
+      caching: 0,
+      hasCachedDatas: false,
+      requestUpdate: cy.stub(),
+    };
+
+    return mockComponent;
+  };
+
+  describe("Basic functionality", () => {
+    it("should set up resource cache listener on component", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      expect(mockComponent._subscriptions.size).to.be.greaterThan(0);
+    });
+
+    it("should subscribe to resourceReady event", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const subscriptions = Array.from(mockComponent._subscriptions);
+      expect(
+        subscriptions.some((sub: any) => sub[0] === "resourceReady"),
+      ).to.be.true;
+    });
+
+    it("should call _subscribe method", () => {
+      const mockComponent: any = {
+        _subscriptions: new Set(),
+        _subscribe: cy.stub(),
+        caching: 0,
+        hasCachedDatas: false,
+      };
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      expect(mockComponent._subscribe).to.be.calledOnce;
+    });
+
+    it("should initialize caching property if undefined", () => {
+      const mockComponent: any = {
+        _subscriptions: new Set(),
+        _subscribe: cy.stub(),
+      };
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      expect(mockComponent.caching).to.equal(0);
+    });
+
+    it("should initialize hasCachedDatas property if undefined", () => {
+      const mockComponent: any = {
+        _subscriptions: new Set(),
+        _subscribe: cy.stub(),
+        caching: 0,
+      };
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      expect(mockComponent.hasCachedDatas).to.be.false;
+    });
+  });
+
+  describe("Cache invalidation on keyword match", () => {
+    it("should increment caching when keyword matches", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(1);
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should set hasCachedDatas to false when keyword matches", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.hasCachedDatas).to.be.false;
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should request update when keyword matches", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      cy.stub(window, "requestAnimationFrame").callsFake((cb: any) => cb());
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.requestUpdate).to.be.called;
+
+      mockComponent._unsubscribe();
+      cy.wrap(null).then(() => (window.requestAnimationFrame as any).restore());
+    });
+
+    it("should not update cache when keyword doesn't match", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/other/resource" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(0);
+      expect(mockComponent.hasCachedDatas).to.be.true;
+      expect(mockComponent.requestUpdate).to.not.be.called;
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Keyword matching", () => {
+    it("should match keyword at start of URL", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://test.com/resource" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(1);
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should match keyword after slash", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(1);
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should not match keyword in middle of path segment", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/atestresource" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(0);
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should match keyword in last segment", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/path/test" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(1);
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should handle multiple keywords", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, {
+        keywords: ["test", "project", "user"],
+      });
+
+      const resourceEvent1 = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(resourceEvent1);
+
+      const resourceEvent2 = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/user/profile" },
+      });
+      document.dispatchEvent(resourceEvent2);
+
+      expect(mockComponent.caching).to.equal(2);
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Event detail resource handling", () => {
+    it("should handle resource with @id property", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: {
+          resource: { "@id": "https://example.com/test/resource" },
+        },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(1);
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should prioritize id over resource.@id", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: {
+          id: "https://example.com/test/id",
+          resource: { "@id": "https://example.com/test/resource" },
+        },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(1);
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should not update cache when id is missing", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { resource: { name: "test" } },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(0);
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Empty keywords handling", () => {
+    it("should not set up listener when keywords array is empty", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheOnResourceReady(mockComponent, { keywords: [] });
+
+      expect(mockComponent._subscriptions.size).to.equal(0);
+    });
+
+    it("should not set up listener when keywords is undefined", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheOnResourceReady(mockComponent, {});
+
+      expect(mockComponent._subscriptions.size).to.equal(0);
+    });
+  });
+
+  describe("Multiple resourceReady events", () => {
+    it("should handle multiple resourceReady events", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      for (let i = 0; i < 5; i++) {
+        const resourceEvent = new CustomEvent("resourceReady", {
+          detail: { id: `https://example.com/test/resource${i}` },
+        });
+        document.dispatchEvent(resourceEvent);
+      }
+
+      expect(mockComponent.caching).to.equal(5);
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Component property requirements", () => {
+    it("should require component to provide _subscriptions Set", () => {
+      const mockComponent: any = {
+        _subscriptions: new Set(),
+        _subscribe: cy.stub(),
+        caching: 0,
+      };
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      expect(mockComponent._subscriptions).to.be.an.instanceOf(Set);
+      expect(mockComponent._subscriptions.size).to.be.greaterThan(0);
+    });
+
+    it("should create resourceCacheListener property", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      expect(mockComponent.resourceCacheListener).to.be.a("function");
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Edge cases", () => {
+    it("should handle URL with no path", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["example.com"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(1);
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should handle duplicate keywords", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, {
+        keywords: ["test", "test", "test"],
+      });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(1);
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should handle keyword with special characters", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["@type"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/@type/resource" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      expect(mockComponent.caching).to.equal(1);
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Document ready state", () => {
+    it("should set up immediately when document is complete", () => {
+      const mockComponent: any = {
+        _subscriptions: new Set(),
+        _subscribe: cy.stub(),
+        caching: 0,
+        hasCachedDatas: false,
+      };
+
+      cy.document().then((doc) => {
+        const originalReadyState = Object.getOwnPropertyDescriptor(
+          Document.prototype,
+          "readyState",
+        );
+        Object.defineProperty(doc, "readyState", {
+          get: () => "complete",
+          configurable: true,
+        });
+
+        setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+        expect(mockComponent._subscribe).to.be.calledOnce;
+
+        if (originalReadyState) {
+          Object.defineProperty(doc, "readyState", originalReadyState);
+        }
+      });
+    });
+  });
+
+  describe("Comparison with setupCacheInvalidation", () => {
+    it("should listen to resourceReady instead of save event", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const subscriptions = Array.from(mockComponent._subscriptions);
+      expect(
+        subscriptions.some((sub: any) => sub[0] === "resourceReady"),
+      ).to.be.true;
+      expect(subscriptions.some((sub: any) => sub[0] === "save")).to.be.false;
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should not call sibStore.clearCache", () => {
+      cy.window().then((win) => {
+        (win as any).sibStore = {
+          clearCache: cy.stub(),
+        };
+      });
+
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheOnResourceReady(mockComponent, { keywords: ["test"] });
+
+      const resourceEvent = new CustomEvent("resourceReady", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(resourceEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.not.be.called;
+      });
+
+      mockComponent._unsubscribe();
+    });
+  });
+});