@civic/auth 0.0.1--.tsc.alpha.1

package/test/unit/shared/components/CivicAuthIframeContainer.test.tsx

@@ -0,0 +1,154 @@
+import { render, act, waitFor } from "@testing-library/react";
+import { CivicAuthIframeContainer } from "@/shared/components/CivicAuthIframeContainer.js";
+import { vi } from "vitest";
+import React, { type RefObject } from "react";
+import { createRef } from "react";
+import { TOKEN_EXCHANGE_TRIGGER_TEXT } from "@/constants.js";
+
+let setAuthResponseUrlMock: any;
+let iframeRefMock: RefObject<HTMLIFrameElement>;
+
+beforeEach(() => {
+  iframeRefMock = createRef();
+
+  vi.mock("@/shared/hooks", () => ({
+    useAuth: () => ({ isLoading: false }),
+    useConfig: () => ({
+      redirectUrl: "https://example.com/redirect",
+      modalIframe: true,
+    }),
+    useIframe: vi.fn(() => ({
+      setAuthResponseUrl: setAuthResponseUrlMock,
+      iframeRef: iframeRefMock,
+    })),
+  }));
+});
+
+describe("CivicAuthIframeContainer", () => {
+  let originalFetch: typeof global.fetch;
+
+  beforeAll(() => {
+    originalFetch = global.fetch;
+  });
+
+  afterAll(() => {
+    global.fetch = originalFetch;
+  });
+
+  it(`triggers a fetch request when '${TOKEN_EXCHANGE_TRIGGER_TEXT}' is in the iframe body`, async () => {
+    const onCloseMock = vi.fn();
+    setAuthResponseUrlMock = vi.fn();
+
+    const fetchMock = vi.fn(() => Promise.resolve({ ok: true }));
+    global.fetch = fetchMock as any;
+
+    render(
+      <CivicAuthIframeContainer onClose={onCloseMock} closeOnRedirect={true} />,
+    );
+
+    act(() => {
+      if (iframeRefMock.current) {
+        Object.defineProperty(iframeRefMock.current, "contentWindow", {
+          value: {
+            location: {
+              href: "https://example.com/redirect?code=1234",
+            },
+            document: {
+              body: {
+                innerHTML: TOKEN_EXCHANGE_TRIGGER_TEXT,
+              },
+            },
+          },
+          configurable: true,
+        });
+      }
+    });
+
+    act(() => {
+      iframeRefMock.current?.dispatchEvent(new Event("load"));
+    });
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledWith(
+        "https://example.com/redirect?code=1234",
+      );
+      expect(onCloseMock).toHaveBeenCalled();
+    });
+  });
+
+  it(`sets auth response URL when no '${TOKEN_EXCHANGE_TRIGGER_TEXT}' in iframe body`, async () => {
+    const onCloseMock = vi.fn();
+    setAuthResponseUrlMock = vi.fn();
+
+    render(
+      <CivicAuthIframeContainer onClose={onCloseMock} closeOnRedirect={true} />,
+    );
+
+    act(() => {
+      if (iframeRefMock.current) {
+        Object.defineProperty(iframeRefMock.current, "contentWindow", {
+          value: {
+            location: {
+              href: "https://example.com/redirect?code=5678",
+            },
+            document: {
+              body: {
+                innerHTML: "",
+              },
+            },
+          },
+          configurable: true,
+        });
+      }
+    });
+
+    act(() => {
+      iframeRefMock.current?.dispatchEvent(new Event("load"));
+    });
+
+    await waitFor(() => {
+      expect(setAuthResponseUrlMock).toHaveBeenCalledWith(
+        "https://example.com/redirect?code=5678",
+      );
+      expect(onCloseMock).toHaveBeenCalled();
+    });
+  });
+
+  it("does not call onClose if closeOnRedirect is false", async () => {
+    const onCloseMock = vi.fn();
+    setAuthResponseUrlMock = vi.fn();
+
+    render(
+      <CivicAuthIframeContainer
+        onClose={onCloseMock}
+        closeOnRedirect={false}
+      />,
+    );
+
+    act(() => {
+      if (iframeRefMock.current) {
+        Object.defineProperty(iframeRefMock.current, "contentWindow", {
+          value: {
+            location: {
+              href: "https://example.com/redirect?code=91011",
+            },
+            document: {
+              body: {
+                innerHTML: TOKEN_EXCHANGE_TRIGGER_TEXT,
+              },
+            },
+          },
+          configurable: true,
+        });
+      }
+    });
+
+    act(() => {
+      iframeRefMock.current?.dispatchEvent(new Event("load"));
+    });
+
+    await waitFor(() => {
+      expect(onCloseMock).not.toHaveBeenCalled();
+    });
+  });
+});

package/test/unit/shared/storage.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+import {
+  CookieStorage,
+  DEFAULT_COOKIE_DURATION,
+  type CookieStorageSettings,
+} from "@/shared/lib/storage.js";
+
+describe("CookieStorage", () => {
+  class MockCookieStorage extends CookieStorage {
+    private storage: Record<string, string> = {};
+
+    constructor(settings: Partial<CookieStorageSettings>) {
+      super(settings);
+    }
+
+    get(key: string): string | null {
+      return this.storage[key] ?? null;
+    }
+    set(key: string, value: string): void {
+      this.storage[key] = value;
+    }
+  }
+
+  it("should set default settings if none are provided", () => {
+    const storage = new MockCookieStorage({});
+
+    const expectedSettings: CookieStorageSettings = {
+      httpOnly: true,
+      secure: true,
+      sameSite: "lax",
+      expires: new Date(Date.now() + 1000 * DEFAULT_COOKIE_DURATION),
+      path: "/",
+    };
+
+    expect(storage["settings"]).toMatchObject({
+      httpOnly: expectedSettings.httpOnly,
+      secure: expectedSettings.secure,
+      sameSite: expectedSettings.sameSite,
+      path: expectedSettings.path,
+    });
+
+    const expires = storage["settings"].expires;
+    const expectedExpires = expectedSettings.expires;
+    expect(expires.getTime()).toBeCloseTo(expectedExpires.getTime(), -3); // Allow small time diff tolerance
+  });
+
+  it("should allow custom settings to override defaults", () => {
+    const customSettings: Partial<CookieStorageSettings> = {
+      httpOnly: false,
+      secure: false,
+      sameSite: "strict",
+      expires: new Date(Date.now() + 1000 * 60 * 30), // 30 minutes
+      path: "/custom",
+    };
+    const storage = new MockCookieStorage(customSettings);
+
+    expect(storage["settings"]).toMatchObject(customSettings);
+  });
+
+  it("should set and get values correctly", () => {
+    const storage = new MockCookieStorage({});
+
+    storage.set("testKey", "testValue");
+    expect(storage.get("testKey")).toBe("testValue");
+    expect(storage.get("nonExistentKey")).toBe(null);
+  });
+});

package/test/unit/utils.test.ts

@@ -0,0 +1,48 @@
+import { isPopupBlocked } from "@/utils";
+import { vi } from "vitest";
+
+describe("isPopupBlocked", () => {
+  afterEach(() => {
+    // Reset mocks after each test
+    vi.restoreAllMocks();
+  });
+
+  it("should return true if window.open returns null", () => {
+    // Mock window.open to return null (popup blocked)
+    vi.spyOn(window, "open").mockReturnValue(null);
+
+    const result = isPopupBlocked();
+    expect(result).toBe(true);
+  });
+
+  it("should return false if window.open returns a valid popup", () => {
+    // Mock a valid popup window object
+    const mockPopup = { closed: false, close: vi.fn() } as unknown as Window;
+
+    vi.spyOn(window, "open").mockReturnValue(mockPopup);
+
+    const result = isPopupBlocked();
+    expect(result).toBe(false);
+    expect(mockPopup.close).toHaveBeenCalled(); // Ensure the popup is closed
+  });
+
+  it("should return true if window.open throws an error accessing properties", () => {
+    // Mock a popup window object that throws an error when accessing properties
+    const mockPopup = {
+      get closed() {
+        throw new Error("Blocked");
+      },
+      close: vi.fn(),
+    } as unknown as Window;
+
+    vi.spyOn(window, "open").mockReturnValue(mockPopup);
+
+    const result = isPopupBlocked();
+    expect(result).toBe(true);
+  });
+  it("should return true if popup properties are not defined", () => {
+    const mockPopup = {} as unknown as Window;
+    vi.spyOn(window, "open").mockReturnValue(mockPopup);
+    expect(isPopupBlocked()).toBe(true);
+  });
+});

package/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src"],
+  "exclude": ["test"]
+}

package/tsconfig.cjs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "verbatimModuleSyntax": false,
+    "outDir": "dist/cjs"
+  }
+}

package/tsconfig.esm.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "outDir": "dist/esm"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "types": ["node"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    /* Base Options: */
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    /* If transpiling with TypeScript: */
+    "module": "NodeNext",
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+
+    /* AND if you're building for a library: */
+    "declaration": true,
+
+    /* AND if you're building for a library in a monorepo: */
+    "composite": true,
+    "declarationMap": true,
+
+    /* If your code runs in the DOM: */
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "jsx": "react"
+  },
+  "include": ["src", "test", "vitest.config.ts", "etc/scripts/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/vitest.config.ts

@@ -0,0 +1,41 @@
+/// <reference types='vitest' />
+import { defineConfig } from "vite";
+import path from "path";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+
+  test: {
+    globals: true,
+    environment: "jsdom",
+    include: ["test/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    env: {
+      NODE_ENV: "development",
+    },
+    reporters: ["default"],
+    coverage: {
+      exclude: [
+        "**/node_modules/**",
+        "**/dist/**",
+        "**/build/**",
+        "postcss.config.cjs",
+        "tailwind.config.js",
+        ".eslintrc.js",
+        "tsup.config.ts",
+        "vitest.config.ts",
+      ],
+      reportsDirectory: "../../coverage/apps/civic-auth-client",
+      provider: "v8",
+      thresholds: {
+        lines: 85,
+        functions: 73,
+        branches: 85,
+        statements: 85,
+      },
+    },
+  },
+});