@kelviq/js-promotions-ui 0.0.1

package/test/sdk.test.ts

@@ -0,0 +1,575 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { KQPromotionUISDK } from "../src/sdk";
+import { fetchPricingData } from "../src/http-utils";
+import { findRelatedElements } from "../src/dom-utils";
+import { pdFormatCurrency } from "../src/utils";
+import { PricingData, DefaultConfig, Widget } from "../src/types";
+
+vi.mock("../src/http-utils");
+vi.mock("../src/dom-utils");
+vi.mock("../src/utils");
+
+// ─── Fixtures ──────────────────────────────────────────────────────────────
+
+const mockBannerWidget: Widget = {
+  type: "BANNER",
+  backgroundColor: "#1a1a2e",
+  fontColor: "#ffffff",
+  highlightFontColor: "#ffff00",
+  fontSize: "14px",
+  unStyled: false,
+  addCloseIcon: false,
+  placement: "top",
+  borderRadius: "0",
+  countryMessage:
+    'Hello {country_flag} You are from {country}. Use "{coupon_code}" for {discount_percentage}% off.',
+};
+
+const mockPricingData: PricingData = {
+  country: "India",
+  countryCode: "IN",
+  percentage: 20,
+  code: "SAVE20",
+  widgets: [{ ...mockBannerWidget }],
+  security: {
+    proxy: false,
+    crawler: false,
+    vpn: false,
+    tor: false,
+    relay: false,
+  },
+};
+
+const defaultFormatResult = {
+  formatted: "$80.00",
+  integer: "80",
+  decimal: "00",
+  decimalSeparator: ".",
+  thousandsSeparator: ",",
+};
+
+// ─── Helpers ───────────────────────────────────────────────────────────────
+
+function createMockElement(attributes: Record<string, string> = {}) {
+  return {
+    setAttribute: vi.fn(),
+    getAttribute: vi.fn((key: string) => attributes[key] ?? null),
+    hasAttribute: vi.fn((key: string) => key in attributes),
+    classList: { toggle: vi.fn(), add: vi.fn(), remove: vi.fn() },
+    textContent: "",
+    innerHTML: "",
+    style: { display: "" },
+    querySelectorAll: vi.fn().mockReturnValue([]),
+  };
+}
+
+function createMockDocument() {
+  const body = {
+    classList: { add: vi.fn(), toggle: vi.fn(), remove: vi.fn() },
+    insertAdjacentHTML: vi.fn(),
+  };
+  const head = { appendChild: vi.fn() };
+  const doc = {
+    readyState: "complete",
+    body,
+    head,
+    querySelectorAll: vi.fn().mockReturnValue([]),
+    querySelector: vi.fn((selector: string) =>
+      selector === "body" ? body : null
+    ),
+    addEventListener: vi.fn(),
+    createElement: vi.fn((tagName: string) =>
+      tagName === "style" ? { innerText: "" } : createMockElement()
+    ),
+  };
+  return doc;
+}
+
+function createMockWindow() {
+  return { KQPromotionUISDK: { q: [] } };
+}
+
+// ─── Tests ─────────────────────────────────────────────────────────────────
+
+describe("KQPromotionUISDK", () => {
+  let mockWindow: ReturnType<typeof createMockWindow>;
+  let mockDocument: ReturnType<typeof createMockDocument>;
+  let sdk: Record<string, (...args: unknown[]) => unknown>;
+
+  function callInit(options: Partial<DefaultConfig> = {}) {
+    return (
+      sdk.init as (
+        options: Partial<DefaultConfig>
+      ) => Promise<PricingData | null>
+    )(options);
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockWindow = createMockWindow();
+    mockDocument = createMockDocument();
+    KQPromotionUISDK(
+      mockWindow as unknown as Window,
+      mockDocument as unknown as Document
+    );
+    sdk = mockWindow.KQPromotionUISDK as unknown as Record<
+      string,
+      (...args: unknown[]) => unknown
+    >;
+    vi.mocked(pdFormatCurrency).mockReturnValue(defaultFormatResult);
+    vi.mocked(findRelatedElements).mockReturnValue(null);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // ─── init ────────────────────────────────────────────────────────────────
+
+  describe("init", () => {
+    it("should fetch pricing data and return it", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      const result = await callInit({ promotionId: "promo-123" });
+      expect(result).toEqual(mockPricingData);
+    });
+
+    it("should pass promotionId, environment, and accessToken to fetchPricingData", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({
+        promotionId: "promo-123",
+        environment: "sandbox",
+        accessToken: "tok-abc",
+      });
+      expect(vi.mocked(fetchPricingData)).toHaveBeenCalledWith(
+        expect.objectContaining({
+          promotionId: "promo-123",
+          environment: "sandbox",
+          accessToken: "tok-abc",
+        })
+      );
+    });
+
+    it("should log error and resolve null when API returns null", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(null);
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+      const result = await callInit({ promotionId: "promo-123" });
+      expect(result).toBeNull();
+      expect(consoleSpy).toHaveBeenCalledWith("No pricing data available");
+    });
+
+    it("should only call fetchPricingData once when init is called multiple times", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      const [r1, r2] = await Promise.all([
+        callInit({ promotionId: "p1" }),
+        callInit({ promotionId: "p2" }),
+      ]);
+      expect(vi.mocked(fetchPricingData)).toHaveBeenCalledTimes(1);
+      expect(r1).toEqual(r2);
+    });
+
+    it("should reject when fetchPricingData throws", async () => {
+      vi.mocked(fetchPricingData).mockRejectedValue(new Error("Network error"));
+      await expect(callInit({ promotionId: "p1" })).rejects.toThrow(
+        "Network error"
+      );
+    });
+  });
+
+  // ─── createBanner ────────────────────────────────────────────────────────
+
+  describe("createBanner", () => {
+    it("should inject banner HTML into the body when countryMessage is present", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ showBanner: true });
+      expect(mockDocument.body.insertAdjacentHTML).toHaveBeenCalled();
+      const [, html] = mockDocument.body.insertAdjacentHTML.mock.calls[0] as [
+        string,
+        string,
+      ];
+      expect(html).toContain('class="parity-banner"');
+    });
+
+    it("should resolve {country} in countryMessage", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ showBanner: true });
+      const [, html] = mockDocument.body.insertAdjacentHTML.mock.calls[0] as [
+        string,
+        string,
+      ];
+      expect(html).toContain("India");
+    });
+
+    it("should resolve {coupon_code} in countryMessage", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ showBanner: true });
+      const [, html] = mockDocument.body.insertAdjacentHTML.mock.calls[0] as [
+        string,
+        string,
+      ];
+      expect(html).toContain("SAVE20");
+    });
+
+    it("should resolve {discount_percentage} in countryMessage", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ showBanner: true });
+      const [, html] = mockDocument.body.insertAdjacentHTML.mock.calls[0] as [
+        string,
+        string,
+      ];
+      expect(html).toContain("20");
+    });
+
+    it("should derive country flag emoji from countryCode", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ showBanner: true });
+      const [, html] = mockDocument.body.insertAdjacentHTML.mock.calls[0] as [
+        string,
+        string,
+      ];
+      // "IN" → 🇮🇳
+      expect(html).toContain("🇮🇳");
+    });
+
+    it("should use 'afterbegin' when placement is 'top'", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ showBanner: true });
+      const [position] = mockDocument.body.insertAdjacentHTML.mock.calls[0] as [
+        string,
+        string,
+      ];
+      expect(position).toBe("afterbegin");
+    });
+
+    it("should use 'beforeend' when placement is not 'top'", async () => {
+      const bottomData: PricingData = {
+        ...mockPricingData,
+        widgets: [{ ...mockBannerWidget, placement: "bottom" }],
+      };
+      vi.mocked(fetchPricingData).mockResolvedValue(bottomData);
+      await callInit({ showBanner: true });
+      const [position] = mockDocument.body.insertAdjacentHTML.mock.calls[0] as [
+        string,
+        string,
+      ];
+      expect(position).toBe("beforeend");
+    });
+
+    it("should add 'kq-has-parity-banner' class to body", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ showBanner: true });
+      expect(mockDocument.body.classList.add).toHaveBeenCalledWith(
+        "kq-has-parity-banner"
+      );
+    });
+
+    it("should inject styles into head when unStyled is false", async () => {
+      const styleEl = { innerText: "" };
+      mockDocument.createElement.mockImplementation((tag: string) =>
+        tag === "style" ? styleEl : createMockElement()
+      );
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ showBanner: true });
+      expect(styleEl.innerText).toContain(".parity-banner");
+      expect(mockDocument.head.appendChild).toHaveBeenCalledWith(styleEl);
+    });
+
+    it("should not include background-color in styles when unStyled is true", async () => {
+      const unstyledData: PricingData = {
+        ...mockPricingData,
+        widgets: [{ ...mockBannerWidget, unStyled: true }],
+      };
+      const styleEl = { innerText: "" };
+      mockDocument.createElement.mockImplementation((tag: string) =>
+        tag === "style" ? styleEl : createMockElement()
+      );
+      vi.mocked(fetchPricingData).mockResolvedValue(unstyledData);
+      await callInit({ showBanner: true });
+      expect(styleEl.innerText).not.toContain("background-color");
+    });
+
+    it("should not render banner when showBanner is false", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ showBanner: false });
+      expect(mockDocument.body.insertAdjacentHTML).not.toHaveBeenCalled();
+    });
+
+    it("should not render banner when no BANNER widget in response", async () => {
+      const noWidget: PricingData = { ...mockPricingData, widgets: [] };
+      vi.mocked(fetchPricingData).mockResolvedValue(noWidget);
+      await callInit({ showBanner: true });
+      expect(mockDocument.body.insertAdjacentHTML).not.toHaveBeenCalled();
+    });
+
+    it("should not render banner when countryMessage is empty string", async () => {
+      const emptyMsg: PricingData = {
+        ...mockPricingData,
+        widgets: [{ ...mockBannerWidget, countryMessage: "" }],
+      };
+      vi.mocked(fetchPricingData).mockResolvedValue(emptyMsg);
+      await callInit({ showBanner: true });
+      expect(mockDocument.body.insertAdjacentHTML).not.toHaveBeenCalled();
+    });
+
+    it("should not render banner when countryMessage is undefined", async () => {
+      const noMsg: PricingData = {
+        ...mockPricingData,
+        widgets: [{ ...mockBannerWidget, countryMessage: undefined }],
+      };
+      vi.mocked(fetchPricingData).mockResolvedValue(noMsg);
+      await callInit({ showBanner: true });
+      expect(mockDocument.body.insertAdjacentHTML).not.toHaveBeenCalled();
+    });
+
+    it("should not insert banner if .parity-banner already exists in DOM", async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      mockDocument.querySelector.mockImplementation((selector: string): any => {
+        if (selector === "body") return mockDocument.body;
+        if (selector === ".parity-banner") return createMockElement();
+        return null;
+      });
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ showBanner: true });
+      expect(mockDocument.body.insertAdjacentHTML).not.toHaveBeenCalled();
+    });
+
+    it("should not inject styles when countryMessage is missing", async () => {
+      const noMsg: PricingData = {
+        ...mockPricingData,
+        widgets: [{ ...mockBannerWidget, countryMessage: undefined }],
+      };
+      vi.mocked(fetchPricingData).mockResolvedValue(noMsg);
+      await callInit({ showBanner: true });
+      expect(mockDocument.head.appendChild).not.toHaveBeenCalled();
+    });
+  });
+
+  // ─── updateBodyClasses ───────────────────────────────────────────────────
+
+  describe("updateBodyClasses", () => {
+    it("should set kq-discount-applied to true when percentage > 0", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({});
+      expect(mockDocument.body.classList.toggle).toHaveBeenCalledWith(
+        "kq-discount-applied",
+        true
+      );
+    });
+
+    it("should set kq-discount-applied to false when percentage is 0", async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue({
+        ...mockPricingData,
+        percentage: 0,
+      });
+      await callInit({});
+      expect(mockDocument.body.classList.toggle).toHaveBeenCalledWith(
+        "kq-discount-applied",
+        false
+      );
+    });
+  });
+
+  // ─── getUpdatedPrice ─────────────────────────────────────────────────────
+
+  describe("getUpdatedPrice", () => {
+    beforeEach(async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({
+        promotionId: "promo-123",
+        baseCurrencyCode: "USD",
+        baseCurrencySymbol: "$",
+      });
+    });
+
+    it("should apply discount percentage to price", async () => {
+      const result = await (
+        sdk.getUpdatedPrice as (
+          price: number,
+          options?: Partial<DefaultConfig>
+        ) => Promise<Record<string, unknown>>
+      )(100);
+      // 100 * (1 - 20/100) = 80
+      expect(result.price).toBe(80);
+    });
+
+    it("should not apply discount when isOriginalDisplay is true", async () => {
+      const result = await (
+        sdk.getUpdatedPrice as (
+          price: number,
+          options?: Partial<DefaultConfig>
+        ) => Promise<Record<string, unknown>>
+      )(100, { isOriginalDisplay: true });
+      expect(result.price).toBe(100);
+    });
+
+    it("should return a complete PriceObject", async () => {
+      vi.mocked(pdFormatCurrency).mockReturnValue({
+        formatted: "$80.00",
+        integer: "80",
+        decimal: "00",
+        decimalSeparator: ".",
+        thousandsSeparator: ",",
+      });
+      const result = await (
+        sdk.getUpdatedPrice as (
+          price: number,
+          options?: Partial<DefaultConfig>
+        ) => Promise<Record<string, unknown>>
+      )(100);
+      expect(result).toMatchObject({
+        price: 80,
+        formattedPrice: "$80.00",
+        integerPart: "80",
+        decimalPart: "00",
+        decimalSeparator: ".",
+        currencySymbol: "$",
+        currencyCode: "USD",
+        apiResponse: mockPricingData,
+      });
+    });
+
+    it("should throw for NaN price", async () => {
+      await expect(
+        (sdk.getUpdatedPrice as (price: number) => Promise<unknown>)(NaN)
+      ).rejects.toThrow("Invalid price provided");
+    });
+
+    it("should throw when init has not been called", async () => {
+      const freshWindow = createMockWindow();
+      const freshDoc = createMockDocument();
+      KQPromotionUISDK(
+        freshWindow as unknown as Window,
+        freshDoc as unknown as Document
+      );
+      const freshSdk = freshWindow.KQPromotionUISDK as unknown as Record<
+        string,
+        (...args: unknown[]) => unknown
+      >;
+      await expect(
+        (freshSdk.getUpdatedPrice as (price: number) => Promise<unknown>)(100)
+      ).rejects.toThrow(
+        "KQPromotionUISDK.init() must be called before using other methods"
+      );
+    });
+  });
+
+  // ─── updatePriceElement ──────────────────────────────────────────────────
+
+  describe("updatePriceElement", () => {
+    beforeEach(async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ promotionId: "promo-123" });
+    });
+
+    it("should update element and return computed price result", async () => {
+      const el = createMockElement({ "data-kq-price": "100" });
+      const result = await (
+        sdk.updatePriceElement as (
+          el: HTMLElement,
+          opts?: Partial<DefaultConfig>
+        ) => Promise<Record<string, unknown>>
+      )(el as unknown as HTMLElement);
+      expect(result).toBeDefined();
+      expect(result.price).toBe(80); // 20% off
+    });
+
+    it("should throw for element without data-kq-price attribute", async () => {
+      const el = createMockElement({});
+      await expect(
+        (sdk.updatePriceElement as (el: HTMLElement) => Promise<unknown>)(
+          el as unknown as HTMLElement
+        )
+      ).rejects.toThrow(
+        "Invalid element provided. Must have data-kq-price attribute."
+      );
+    });
+  });
+
+  // ─── updatePrice ─────────────────────────────────────────────────────────
+
+  describe("updatePrice", () => {
+    beforeEach(async () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      await callInit({ promotionId: "promo-123" });
+    });
+
+    it("should render template with formattedPrice substituted", async () => {
+      const el = createMockElement();
+      vi.mocked(pdFormatCurrency).mockReturnValue({
+        ...defaultFormatResult,
+        formatted: "$80.00",
+      });
+      await (sdk.updatePrice as (configs: unknown[]) => Promise<unknown>)([
+        { element: el, price: 100, template: "Price: {{formattedPrice}}" },
+      ]);
+      expect(el.innerHTML).toBe("Price: $80.00");
+    });
+
+    it("should handle multiple price configs", async () => {
+      const el1 = createMockElement();
+      const el2 = createMockElement();
+      const results = await (
+        sdk.updatePrice as (configs: unknown[]) => Promise<unknown[]>
+      )([
+        { element: el1, price: 100, template: "{{formattedPrice}}" },
+        { element: el2, price: 200, template: "{{formattedPrice}}" },
+      ]);
+      expect(results).toHaveLength(2);
+    });
+
+    it("should throw when element is null", async () => {
+      await expect(
+        (sdk.updatePrice as (configs: unknown[]) => Promise<unknown>)([
+          { element: null, price: 100, template: "{{formattedPrice}}" },
+        ])
+      ).rejects.toThrow("Element is required for each price configuration");
+    });
+
+    it("should throw for invalid price", async () => {
+      const el = createMockElement();
+      await expect(
+        (sdk.updatePrice as (configs: unknown[]) => Promise<unknown>)([
+          { element: el, price: NaN, template: "{{formattedPrice}}" },
+        ])
+      ).rejects.toThrow("Valid price is required for each price configuration");
+    });
+  });
+
+  // ─── Queue Processing ────────────────────────────────────────────────────
+
+  describe("Queue Processing", () => {
+    it("should process queued init command on SDK load", () => {
+      vi.mocked(fetchPricingData).mockResolvedValue(mockPricingData);
+      const queuedWindow = {
+        KQPromotionUISDK: { q: [["init", { promotionId: "queued-promo" }]] },
+      };
+      const queuedDoc = createMockDocument();
+      KQPromotionUISDK(
+        queuedWindow as unknown as Window,
+        queuedDoc as unknown as Document
+      );
+      expect(vi.mocked(fetchPricingData)).toHaveBeenCalled();
+    });
+  });
+
+  // ─── Error Handling ──────────────────────────────────────────────────────
+
+  describe("Error Handling", () => {
+    it("should handle network errors in fetchPricingData", async () => {
+      vi.mocked(fetchPricingData).mockRejectedValue(new Error("Network error"));
+      await expect(callInit({ promotionId: "promo-123" })).rejects.toThrow(
+        "Network error"
+      );
+    });
+
+    it("should handle API request failures", async () => {
+      vi.mocked(fetchPricingData).mockRejectedValue(
+        new Error("API request failed")
+      );
+      await expect(callInit({ promotionId: "promo-123" })).rejects.toThrow(
+        "API request failed"
+      );
+    });
+  });
+});

package/test/setup.ts

@@ -0,0 +1,83 @@
+import { vi } from "vitest";
+
+// Set up global mocks for browser APIs BEFORE any modules are imported
+global.window = {
+  KQPromotionUISDK: { q: [] },
+  location: { href: "https://example.com" },
+} as any;
+
+global.document = {
+  readyState: "complete",
+  body: {
+    classList: {
+      add: vi.fn(),
+      toggle: vi.fn(),
+    },
+    insertAdjacentHTML: vi.fn(),
+  },
+  querySelectorAll: vi.fn().mockReturnValue([]),
+  querySelector: vi.fn((selector: string) => {
+    if (selector === "body") {
+      return global.document.body;
+    }
+    return null;
+  }),
+  head: {
+    appendChild: vi.fn(),
+  },
+  addEventListener: vi.fn(),
+  createElement: vi.fn((tagName: string) => {
+    if (tagName === "style") {
+      return { innerText: "" };
+    }
+    return {
+      setAttribute: vi.fn(),
+      getAttribute: vi.fn(),
+      hasAttribute: vi.fn(),
+      classList: { toggle: vi.fn(), add: vi.fn() },
+      textContent: "",
+      innerHTML: "",
+      style: { display: "" },
+      querySelectorAll: vi.fn().mockReturnValue([]),
+    };
+  }),
+} as any;
+
+// Mock console methods to avoid noise in tests
+global.console = {
+  ...console,
+  log: vi.fn(),
+  warn: vi.fn(),
+  error: vi.fn(),
+  info: vi.fn(),
+  debug: vi.fn(),
+};
+
+// Mock fetch if not available
+if (!global.fetch) {
+  global.fetch = vi.fn();
+}
+
+// Mock localStorage if not available
+if (!global.localStorage) {
+  global.localStorage = {
+    getItem: vi.fn(),
+    setItem: vi.fn(),
+    removeItem: vi.fn(),
+    clear: vi.fn(),
+    key: vi.fn(),
+    length: 0,
+  };
+}
+
+// Mock sessionStorage if not available
+if (!global.sessionStorage) {
+  global.sessionStorage = {
+    getItem: vi.fn(),
+    setItem: vi.fn(),
+    removeItem: vi.fn(),
+    clear: vi.fn(),
+    key: vi.fn(),
+    length: 0,
+  };
+}