@startinblox/components-ds4go 2.3.0 → 3.0.0

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

@@ -0,0 +1,512 @@
+import setupCacheInvalidation from "@helpers/components/setupCacheInvalidation";
+
+describe("setupCacheInvalidation 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,
+      dataSrc: "https://example.com/test/data",
+      requestUpdate: cy.stub(),
+    };
+
+    return mockComponent;
+  };
+
+  beforeEach(() => {
+    cy.window().then((win) => {
+      (win as any).sibStore = {
+        clearCache: cy.stub(),
+      };
+    });
+  });
+
+  describe("Basic functionality", () => {
+    it("should set up cache listener on component", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      expect(mockComponent._subscriptions.size).to.be.greaterThan(0);
+    });
+
+    it("should subscribe to save event", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const subscriptions = Array.from(mockComponent._subscriptions);
+      expect(subscriptions.some((sub: any) => sub[0] === "save")).to.be.true;
+    });
+
+    it("should initialize caching property if undefined", () => {
+      const mockComponent: any = {
+        _subscriptions: new Set(),
+        _subscribe: cy.stub(),
+        dataSrc: "https://example.com/test/data",
+      };
+
+      setupCacheInvalidation(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,
+        dataSrc: "https://example.com/test/data",
+      };
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      expect(mockComponent.hasCachedDatas).to.be.false;
+    });
+  });
+
+  describe("Cache clearing on keyword match", () => {
+    it("should clear cache when keyword matches", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledOnceWith(
+          mockComponent.dataSrc,
+        );
+      });
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should not clear cache when keyword doesn't match", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.dataSrc = "https://example.com/other/data";
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: "https://example.com/other/resource" },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.not.be.called;
+      });
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should request update when cache is cleared", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.wait(0).then(() => {
+        expect(mockComponent.requestUpdate).to.be.called;
+      });
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Attribute configuration", () => {
+    it("should use default dataSrc attribute", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledWith(
+          mockComponent.dataSrc,
+        );
+      });
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should clear cache for custom attributes", () => {
+      const mockComponent: any = {
+        _subscriptions: new Set(),
+        _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: true,
+        customAttr: "https://example.com/test/data",
+        requestUpdate: cy.stub(),
+      };
+
+      setupCacheInvalidation(mockComponent, {
+        keywords: ["test"],
+        attributes: ["customAttr"],
+      });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledWith(
+          mockComponent.customAttr,
+        );
+      });
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should clear cache for multiple attributes", () => {
+      const mockComponent: any = {
+        _subscriptions: new Set(),
+        _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: true,
+        dataSrc: "https://example.com/test/data1",
+        src: "https://example.com/test/data2",
+        requestUpdate: cy.stub(),
+      };
+
+      setupCacheInvalidation(mockComponent, {
+        keywords: ["test"],
+        attributes: ["dataSrc", "src"],
+      });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledTwice;
+      });
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should skip attributes that are undefined", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, {
+        keywords: ["test"],
+        attributes: ["dataSrc", "undefinedAttr"],
+      });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledOnce;
+      });
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Same resource check", () => {
+    it("should not clear cache if saved resource is the same as dataSrc", () => {
+      const dataUrl = "https://example.com/test/data";
+      const mockComponent = createMockComponent();
+      mockComponent.dataSrc = dataUrl;
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: dataUrl },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.not.be.called;
+      });
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should clear cache if saved resource differs from dataSrc", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.dataSrc = "https://example.com/test/data1";
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/data2" },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledOnce;
+      });
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Keyword matching behavior", () => {
+    it("should match keyword at start of URL", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.dataSrc = "https://example.com/other/data";
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: "https://test.com/resource" },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledOnce;
+      });
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should match keyword after slash", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.dataSrc = "https://example.com/other/data";
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledOnce;
+      });
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should handle multiple keywords", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.dataSrc = "https://example.com/data";
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, {
+        keywords: ["test", "project", "user"],
+      });
+
+      const saveEvent1 = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource" },
+      });
+      document.dispatchEvent(saveEvent1);
+
+      const saveEvent2 = new CustomEvent("save", {
+        detail: { id: "https://example.com/user/profile" },
+      });
+      document.dispatchEvent(saveEvent2);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledTwice;
+        expect(mockComponent.caching).to.equal(2);
+      });
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Empty configuration handling", () => {
+    it("should not set up listener when keywords array is empty", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheInvalidation(mockComponent, { keywords: [] });
+
+      expect(mockComponent._subscriptions.size).to.equal(0);
+    });
+
+    it("should not set up listener when keywords is undefined", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheInvalidation(mockComponent, {});
+
+      expect(mockComponent._subscriptions.size).to.equal(0);
+    });
+
+    it("should not set up listener when attributes array is empty", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheInvalidation(mockComponent, {
+        keywords: ["test"],
+        attributes: [],
+      });
+
+      expect(mockComponent._subscriptions.size).to.equal(0);
+    });
+  });
+
+  describe("Multiple cache invalidations", () => {
+    it("should handle multiple save events", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      for (let i = 0; i < 3; i++) {
+        const saveEvent = new CustomEvent("save", {
+          detail: { id: `https://example.com/test/resource${i}` },
+        });
+        document.dispatchEvent(saveEvent);
+      }
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledThrice;
+        expect(mockComponent.caching).to.equal(3);
+      });
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should prevent duplicate updates via requestAnimationFrame", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent1 = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource1" },
+      });
+      const saveEvent2 = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource2" },
+      });
+      const saveEvent3 = new CustomEvent("save", {
+        detail: { id: "https://example.com/test/resource3" },
+      });
+
+      document.dispatchEvent(saveEvent1);
+      document.dispatchEvent(saveEvent2);
+      document.dispatchEvent(saveEvent3);
+
+      cy.wait(20).then(() => {
+        expect(mockComponent.requestUpdate).to.be.calledOnce;
+      });
+
+      mockComponent._unsubscribe();
+    });
+  });
+
+  describe("Event detail resource handling", () => {
+    it("should handle resource with @id property", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.dataSrc = "https://example.com/data";
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: {
+          resource: { "@id": "https://example.com/test/resource" },
+        },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.be.calledOnce;
+      });
+
+      mockComponent._unsubscribe();
+    });
+
+    it("should not clear cache when id is missing", () => {
+      const mockComponent = createMockComponent();
+      mockComponent.dataSrc = "https://example.com/data";
+      mockComponent.hasCachedDatas = true;
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      const saveEvent = new CustomEvent("save", {
+        detail: { resource: { name: "test" } },
+      });
+      document.dispatchEvent(saveEvent);
+
+      cy.window().then((win) => {
+        expect((win as any).sibStore.clearCache).to.not.be.called;
+      });
+
+      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,
+        dataSrc: "https://example.com/test/data",
+        requestUpdate: cy.stub(),
+      };
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      expect(mockComponent._subscriptions).to.be.an.instanceOf(Set);
+      expect(mockComponent._subscriptions.size).to.be.greaterThan(0);
+    });
+
+    it("should create cacheListener property", () => {
+      const mockComponent = createMockComponent();
+
+      setupCacheInvalidation(mockComponent, { keywords: ["test"] });
+
+      expect(mockComponent.cacheListener).to.be.a("function");
+
+      mockComponent._unsubscribe();
+    });
+  });
+});