@startinblox/components-ds4go 2.3.0 → 3.0.1

package/cypress/e2e/helpers/ui/formatDate.cy.ts

@@ -0,0 +1,233 @@
+import formatDate from "@helpers/ui/formatDate";
+
+describe("formatDate helper function", () => {
+  describe("Default format", () => {
+    it("should format date with default format (2-digit day, month, year)", () => {
+      const date = new Date("2023-12-25");
+      const result = formatDate(date);
+      expect(result).to.match(/^\d{2}\/\d{2}\/\d{2}$/);
+    });
+
+    it("should format date string with default format", () => {
+      const result = formatDate("2023-12-25");
+      expect(result).to.match(/^\d{2}\/\d{2}\/\d{2}$/);
+    });
+
+    it("should format date with leading zeros", () => {
+      const result = formatDate("2023-01-05");
+      expect(result).to.contain("01");
+      expect(result).to.contain("05");
+    });
+  });
+
+  describe("Custom formats", () => {
+    it("should format with long date style", () => {
+      const result = formatDate("2023-12-25", {
+        dateStyle: "long",
+      });
+      expect(result.length).to.be.greaterThan(10);
+    });
+
+    it("should format with short date style", () => {
+      const result = formatDate("2023-12-25", {
+        dateStyle: "short",
+      });
+      expect(result.length).to.be.lessThan(15);
+    });
+
+    it("should format with specific options", () => {
+      const result = formatDate("2023-12-25", {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+      expect(result).to.include("2023");
+      expect(result.length).to.be.greaterThan(10);
+    });
+
+    it("should format with day and month only", () => {
+      const result = formatDate("2023-12-25", {
+        day: "2-digit",
+        month: "short",
+      });
+      expect(result).to.not.include("2023");
+      expect(result.length).to.be.lessThan(10);
+    });
+
+    it("should format with time options", () => {
+      const result = formatDate("2023-12-25T14:30:00", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
+      // Not testing hours as it depends on the time-formatting of the system
+      expect(result).to.include("30");
+    });
+
+    it("should format with combined date and time", () => {
+      const result = formatDate("2023-12-25T14:30:00", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+      expect(result).to.include("2023");
+      expect(result).to.include("30");
+    });
+  });
+
+  describe("Input types", () => {
+    it("should handle Date object", () => {
+      const date = new Date("2023-12-25");
+      const result = formatDate(date);
+      expect(result).to.be.a("string");
+      expect(result).to.not.equal("");
+    });
+
+    it("should handle ISO date string", () => {
+      const result = formatDate("2023-12-25");
+      expect(result).to.be.a("string");
+      expect(result).to.not.equal("");
+    });
+
+    it("should handle ISO datetime string", () => {
+      const result = formatDate("2023-12-25T14:30:00.000Z");
+      expect(result).to.be.a("string");
+      expect(result).to.not.equal("");
+    });
+
+    it("should handle various date string formats", () => {
+      const result1 = formatDate("2023/12/25");
+      const result2 = formatDate("December 25, 2023");
+      expect(result1).to.be.a("string");
+      expect(result2).to.be.a("string");
+    });
+
+    it("should throw error for invalid timestamp string", () => {
+      const timestamp = "invalid-timestamp";
+      expect(() => formatDate(timestamp)).to.throw();
+    });
+  });
+
+  describe("Edge cases and error handling", () => {
+    it("should return empty string for undefined input", () => {
+      const result = formatDate(undefined);
+      expect(result).to.equal("");
+    });
+
+    it("should return empty string for empty string", () => {
+      const result = formatDate("");
+      expect(result).to.equal("");
+    });
+
+    it("should throw error for invalid date string", () => {
+      expect(() => formatDate("invalid-date")).to.throw();
+    });
+
+    it("should throw error for malformed date", () => {
+      expect(() => formatDate("not-a-date")).to.throw();
+    });
+
+    it("should handle very old dates", () => {
+      const result = formatDate("1900-01-01");
+      expect(result).to.be.a("string");
+    });
+
+    it("should handle future dates", () => {
+      const result = formatDate("2050-12-31");
+      expect(result).to.be.a("string");
+    });
+
+    it("should handle dates with time zones", () => {
+      const result = formatDate("2023-12-25T14:30:00+05:30");
+      expect(result).to.be.a("string");
+    });
+  });
+
+  describe("Date edge cases", () => {
+    it("should handle leap year dates", () => {
+      const result = formatDate("2024-02-29");
+      expect(result).to.be.a("string");
+      expect(result).to.not.equal("");
+    });
+
+    it("should handle last day of month", () => {
+      const result = formatDate("2023-12-31");
+      expect(result).to.be.a("string");
+    });
+
+    it("should handle first day of month", () => {
+      const result = formatDate("2023-01-01");
+      expect(result).to.be.a("string");
+    });
+
+    it("should handle end of year", () => {
+      const result = formatDate("2023-12-31");
+      expect(result).to.be.a("string");
+    });
+
+    it("should handle beginning of year", () => {
+      const result = formatDate("2023-01-01");
+      expect(result).to.be.a("string");
+    });
+  });
+
+  describe("Consistency", () => {
+    it("should return same format for same date multiple times", () => {
+      const date = "2023-12-25";
+      const result1 = formatDate(date);
+      const result2 = formatDate(date);
+      expect(result1).to.equal(result2);
+    });
+
+    it("should handle dates with milliseconds precision", () => {
+      const date = new Date("2023-12-25T14:30:00.123Z");
+      const result = formatDate(date);
+      expect(result).to.be.a("string");
+    });
+
+    it("should format different dates distinctly", () => {
+      const result1 = formatDate("2023-01-15");
+      const result2 = formatDate("2023-12-15");
+      expect(result1).to.not.equal(result2);
+    });
+  });
+
+  describe("Format options variations", () => {
+    it("should handle numeric month", () => {
+      const result = formatDate("2023-12-25", {
+        month: "numeric",
+        day: "numeric",
+        year: "numeric",
+      });
+      expect(result).to.be.a("string");
+    });
+
+    it("should handle 2-digit month", () => {
+      const result = formatDate("2023-12-25", {
+        month: "2-digit",
+        day: "2-digit",
+        year: "2-digit",
+      });
+      expect(result).to.be.a("string");
+    });
+
+    it("should handle narrow weekday", () => {
+      const result = formatDate("2023-12-25", {
+        weekday: "narrow",
+      });
+      expect(result).to.be.a("string");
+      expect(result.length).to.be.lessThan(5);
+    });
+
+    it("should handle short weekday", () => {
+      const result = formatDate("2023-12-25", {
+        weekday: "short",
+      });
+      expect(result).to.be.a("string");
+      expect(result.length).to.be.lessThan(10);
+    });
+  });
+});

package/cypress/e2e/helpers/utils/requestNavigation.cy.ts

@@ -0,0 +1,257 @@
+import requestNavigation from "@helpers/utils/requestNavigation";
+
+describe("requestNavigation helper function", () => {
+  describe("Event dispatching", () => {
+    it("should dispatch requestNavigation event", (done) => {
+      const handler = (e: Event) => {
+        expect(e.type).to.equal("requestNavigation");
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/some-route");
+    });
+
+    it("should dispatch event with correct route in detail", (done) => {
+      const route = "/test-route";
+
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail).to.have.property("route", route);
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation(route);
+    });
+
+    it("should dispatch event with resource object when resource is string", (done) => {
+      const resourceId = "https://example.com/resource/123";
+
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail).to.have.property("resource");
+        expect(customEvent.detail.resource).to.be.an("object");
+        expect(customEvent.detail.resource).to.have.property("@id", resourceId);
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route", resourceId);
+    });
+
+    it("should dispatch event with false when resource is not provided", (done) => {
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail).to.have.property("resource");
+        expect(customEvent.detail.resource).to.equal(false);
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route");
+    });
+
+    it("should dispatch event with false when resource is explicitly false", (done) => {
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail).to.have.property("resource");
+        expect(customEvent.detail.resource).to.equal(false);
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route", false);
+    });
+
+    it("should dispatch event only once per call", (done) => {
+      let callCount = 0;
+
+      const handler = () => {
+        callCount++;
+        if (callCount === 1) {
+          setTimeout(() => {
+            expect(callCount).to.equal(1);
+            window.removeEventListener("requestNavigation", handler);
+            done();
+          }, 10);
+        }
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route");
+    });
+  });
+
+  describe("Multiple calls", () => {
+    it("should dispatch event for each call", (done) => {
+      const routes = ["/route1", "/route2", "/route3"];
+      let eventCount = 0;
+
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail.route).to.equal(routes[eventCount]);
+        eventCount++;
+
+        if (eventCount === routes.length) {
+          window.removeEventListener("requestNavigation", handler);
+          done();
+        }
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      for (const route of routes) {
+        requestNavigation(route);
+      }
+    });
+
+    it("should handle rapid consecutive calls", (done) => {
+      const callCount = 100;
+      let eventCount = 0;
+
+      const handler = () => {
+        eventCount++;
+        if (eventCount === callCount) {
+          window.removeEventListener("requestNavigation", handler);
+          done();
+        }
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      for (let i = 0; i < callCount; i++) {
+        requestNavigation(`/route${i}`);
+      }
+    });
+  });
+
+  describe("Event detail structure", () => {
+    it("should have detail property on event", (done) => {
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent).to.have.property("detail");
+        expect(customEvent.detail).to.be.an("object");
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route");
+    });
+
+    it("should have both route and resource in detail", (done) => {
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail).to.have.all.keys("route", "resource");
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route", "https://example.com/id");
+    });
+  });
+
+  describe("Type handling", () => {
+    it("should convert string resource to object with @id key", (done) => {
+      const resourceId = "https://example.com/resource/456";
+
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail.resource).to.deep.equal({
+          "@id": resourceId,
+        });
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route", resourceId);
+    });
+
+    it("should keep false as false for resource parameter", (done) => {
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail.resource).to.equal(false);
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route", false);
+    });
+
+    it("should pass false when resource parameter is undefined", (done) => {
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail.resource).to.equal(false);
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route", undefined as any);
+    });
+  });
+
+  describe("Edge cases", () => {
+    it("should handle empty string route", (done) => {
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail.route).to.equal("");
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("");
+    });
+
+    it("should handle route with special characters", (done) => {
+      const route = "/route/with/special-chars?query=1&param=value#hash";
+
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail.route).to.equal(route);
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation(route);
+    });
+
+    it("should handle empty string resource", (done) => {
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail.resource).to.deep.equal({ "@id": "" });
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route", "");
+    });
+
+    it("should handle resource URL with special characters", (done) => {
+      const resourceId =
+        "https://example.com/resource?query=1&param=value#hash";
+
+      const handler = (e: Event) => {
+        const customEvent = e as CustomEvent;
+        expect(customEvent.detail.resource).to.deep.equal({
+          "@id": resourceId,
+        });
+        window.removeEventListener("requestNavigation", handler);
+        done();
+      };
+
+      window.addEventListener("requestNavigation", handler);
+      requestNavigation("/route", resourceId);
+    });
+  });
+});

package/cypress/e2e/helpers/utils/uniq.cy.ts

@@ -0,0 +1,160 @@
+import uniq from "@helpers/utils/uniq";
+
+describe("uniq helper function", () => {
+  describe("Basic functionality", () => {
+    it("should return a string", () => {
+      const result = uniq();
+      expect(result).to.be.a("string");
+    });
+
+    it("should return a non-empty string", () => {
+      const result = uniq();
+      expect(result).to.not.equal("");
+    });
+
+    it("should return a value with hyphen separator", () => {
+      const result = uniq();
+      expect(result).to.contain("-");
+    });
+  });
+
+  describe("Format validation", () => {
+    it("should have timestamp as prefix before hyphen", () => {
+      const result = uniq();
+      const parts = result.split("-");
+      expect(parts).to.have.lengthOf(2);
+      expect(parts[0]).to.match(/^\d+$/);
+    });
+
+    it("should have hex string as suffix after hyphen", () => {
+      const result = uniq();
+      const parts = result.split("-");
+      expect(parts).to.have.lengthOf(2);
+      expect(parts[1]).to.match(/^[0-9a-f]+$/);
+    });
+
+    it("should use lowercase hex characters", () => {
+      const result = uniq();
+      const hexPart = result.split("-")[1];
+      expect(hexPart).to.match(/^[0-9a-f]+$/);
+      expect(hexPart).to.not.match(/[A-F]/);
+    });
+  });
+
+  describe("Uniqueness", () => {
+    it("should generate unique values on consecutive calls", () => {
+      const result1 = uniq();
+      const result2 = uniq();
+      expect(result1).to.not.equal(result2);
+    });
+
+    it("should generate unique values across multiple calls", () => {
+      const results = new Set<string>();
+      const callCount = 100;
+
+      for (let i = 0; i < callCount; i++) {
+        results.add(uniq());
+      }
+
+      expect(results.size).to.equal(callCount);
+    });
+
+    it("should generate unique values even when called rapidly", () => {
+      const results = new Set<string>();
+      const callCount = 50;
+
+      for (let i = 0; i < callCount; i++) {
+        results.add(uniq());
+      }
+
+      expect(results.size).to.equal(callCount);
+    });
+  });
+
+  describe("Timestamp component", () => {
+    it("should use current timestamp", () => {
+      const before = Date.now();
+      const result = uniq();
+      const after = Date.now();
+
+      const timestamp = Number(result.split("-")[0]);
+      expect(timestamp).to.be.at.least(before);
+      expect(timestamp).to.be.at.most(after);
+    });
+
+    it("should have increasing timestamp over time", () => {
+      const result1 = uniq();
+      const timestamp1 = Number(result1.split("-")[0]);
+
+      setTimeout(() => {
+        const result2 = uniq();
+        const timestamp2 = Number(result2.split("-")[0]);
+        expect(timestamp2).to.be.greaterThan(timestamp1);
+      }, 10);
+    });
+  });
+
+  describe("Random hex component", () => {
+    it("should have reasonable hex string length", () => {
+      const result = uniq();
+      const hexPart = result.split("-")[1];
+      expect(hexPart.length).to.be.greaterThan(0);
+      expect(hexPart.length).to.be.lessThan(20);
+    });
+
+    it("should vary in hex values", () => {
+      const results: string[] = [];
+      const callCount = 100;
+
+      for (let i = 0; i < callCount; i++) {
+        results.push(uniq());
+      }
+
+      const hexParts = results.map((r) => r.split("-")[1]);
+      const uniqueHexParts = new Set(hexParts);
+      expect(uniqueHexParts.size).to.be.greaterThan(50);
+    });
+  });
+
+  describe("Consistency", () => {
+    it("should always return string type", () => {
+      for (let i = 0; i < 10; i++) {
+        const result = uniq();
+        expect(typeof result).to.equal("string");
+      }
+    });
+
+    it("should always maintain the same format", () => {
+      for (let i = 0; i < 10; i++) {
+        const result = uniq();
+        expect(result).to.match(/^\d+-[0-9a-f]+$/);
+      }
+    });
+  });
+
+  describe("Edge cases", () => {
+    it("should handle rapid successive calls", () => {
+      const results = [];
+      for (let i = 0; i < 1000; i++) {
+        results.push(uniq());
+      }
+
+      const uniqueResults = new Set(results);
+      expect(uniqueResults.size).to.equal(1000);
+    });
+
+    it("should work when called from different contexts", () => {
+      const result1 = uniq();
+      const result2 = {
+        id: uniq(),
+      };
+      const result3 = [uniq()];
+
+      expect(result1).to.be.a("string");
+      expect(result2.id).to.be.a("string");
+      expect(result3[0]).to.be.a("string");
+      expect(result1).to.not.equal(result2.id);
+      expect(result2.id).to.not.equal(result3[0]);
+    });
+  });
+});

package/cypress/support/e2e.ts

@@ -0,0 +1 @@
+/// <reference types="cypress" />

package/cypress.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+  allowCypressEnv: false,
   component: {
     includeShadowDom: true,
     devServer: {
@@ -8,4 +9,5 @@ export default defineConfig({
       bundler: "vite",
     },
   },
+  e2e: {},
 });