@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/components/next-image/index.test.tsx

@@ -0,0 +1,406 @@
+import "@testing-library/jest-dom";
+
+import React, { createRef, forwardRef } from "react";
+import { NextImage } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+// Mock next/image - must use require-style reference due to hoisting
+const mockNextImage = jest.fn();
+
+jest.mock("next/image", () => {
+  const MockNextImage = forwardRef(function MockNextImage(
+    props: any,
+    ref: any
+  ) {
+    mockNextImage(props);
+    const rest = { ...props };
+    const loader = rest.loader;
+    delete rest.loader;
+    delete rest.unoptimized;
+    delete rest.priority;
+    delete rest.fill;
+    delete rest.sizes;
+    return (
+      <img
+        ref={ref}
+        data-testid="next-image"
+        data-unoptimized={props.unoptimized?.toString() || "false"}
+        data-has-loader={loader ? "true" : "false"}
+        {...rest}
+      />
+    );
+  });
+  return { __esModule: true, default: MockNextImage };
+});
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("NextImage", () => {
+  beforeEach(() => {
+    mockNextImage.mockClear();
+  });
+
+  it("has displayName set to NextImage", () => {
+    expect(NextImage.displayName).toBe("NextImage");
+  });
+
+  describe("basic rendering", () => {
+    it("renders an image element", () => {
+      render(<NextImage src="/test.png" alt="Test" width={100} height={100} />);
+      expect(screen.getByTestId("next-image")).toBeInTheDocument();
+    });
+
+    it("passes src, alt, width, height props", () => {
+      render(
+        <NextImage src="/photo.jpg" alt="Photo" width={200} height={150} />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("src", "/photo.jpg");
+      expect(img).toHaveAttribute("alt", "Photo");
+      expect(img).toHaveAttribute("width", "200");
+      expect(img).toHaveAttribute("height", "150");
+    });
+
+    it("passes className to image", () => {
+      render(
+        <NextImage
+          src="/img.png"
+          alt="Img"
+          width={50}
+          height={50}
+          className="rounded-lg"
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveClass("rounded-lg");
+    });
+
+    it("passes additional props through", () => {
+      render(
+        <NextImage
+          src="/img.png"
+          alt="Img"
+          width={50}
+          height={50}
+          priority={true}
+        />
+      );
+      expect(mockNextImage).toHaveBeenCalledWith(
+        expect.objectContaining({ priority: true })
+      );
+    });
+  });
+
+  describe("ref forwarding", () => {
+    it("forwards ref to the underlying image", () => {
+      const ref = createRef<HTMLImageElement>();
+      render(
+        <NextImage ref={ref} src="/img.png" alt="Ref" width={50} height={50} />
+      );
+      expect(ref.current).toBeInstanceOf(HTMLImageElement);
+    });
+  });
+
+  describe("Contentful image detection", () => {
+    it("detects Contentful images by domain", () => {
+      render(
+        <NextImage
+          src="https://images.ctfassets.net/abc/image.png"
+          alt="Contentful"
+          width={100}
+          height={100}
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("data-has-loader", "true");
+      expect(img).toHaveAttribute("data-unoptimized", "false");
+    });
+
+    it("does not use contentful loader for non-Contentful images", () => {
+      render(
+        <NextImage
+          src="https://example.com/photo.jpg"
+          alt="External"
+          width={100}
+          height={100}
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("data-has-loader", "false");
+    });
+
+    it("does not use contentful loader for relative paths", () => {
+      render(
+        <NextImage
+          src="/local/image.png"
+          alt="Local"
+          width={100}
+          height={100}
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("data-has-loader", "false");
+    });
+
+    it("handles non-string src gracefully", () => {
+      const staticImport = { src: "/static.png", height: 100, width: 100 };
+      render(
+        <NextImage
+          src={staticImport as any}
+          alt="Static"
+          width={100}
+          height={100}
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("data-has-loader", "false");
+    });
+  });
+
+  describe("custom loader behavior", () => {
+    it("passes a loader function for Contentful images", () => {
+      render(
+        <NextImage
+          src="https://images.ctfassets.net/space/image.jpg"
+          alt="CF"
+          width={100}
+          height={100}
+        />
+      );
+      expect(mockNextImage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          loader: expect.any(Function),
+          unoptimized: false,
+        })
+      );
+    });
+
+    it("loader appends width, quality, and format params", () => {
+      render(
+        <NextImage
+          src="https://images.ctfassets.net/space/photo.jpg"
+          alt="CF"
+          width={100}
+          height={100}
+        />
+      );
+      const callProps = mockNextImage.mock.calls[0][0];
+      const loader = callProps.loader;
+      const result = loader({
+        src: "https://images.ctfassets.net/space/photo.jpg",
+        width: 800,
+        quality: 75,
+      });
+      expect(result).toContain("w=800");
+      expect(result).toContain("q=75");
+      expect(result).toContain("fm=webp");
+    });
+
+    it("loader uses default quality of 90 when not specified", () => {
+      render(
+        <NextImage
+          src="https://images.ctfassets.net/space/photo.jpg"
+          alt="CF"
+          width={100}
+          height={100}
+        />
+      );
+      const callProps = mockNextImage.mock.calls[0][0];
+      const loader = callProps.loader;
+      const result = loader({
+        src: "https://images.ctfassets.net/space/photo.jpg",
+        width: 400,
+        quality: undefined,
+      });
+      expect(result).toContain("q=90");
+    });
+
+    it("loader preserves existing URL params", () => {
+      render(
+        <NextImage
+          src="https://images.ctfassets.net/space/photo.jpg?fit=fill"
+          alt="CF"
+          width={100}
+          height={100}
+        />
+      );
+      const callProps = mockNextImage.mock.calls[0][0];
+      const loader = callProps.loader;
+      const result = loader({
+        src: "https://images.ctfassets.net/space/photo.jpg?fit=fill",
+        width: 600,
+        quality: 80,
+      });
+      expect(result).toContain("fit=fill");
+      expect(result).toContain("w=600");
+      expect(result).toContain("q=80");
+      expect(result).toContain("fm=webp");
+    });
+  });
+
+  describe("SVG optimization handling", () => {
+    it("marks SVG from Contentful as unoptimized", () => {
+      render(
+        <NextImage
+          src="https://images.ctfassets.net/space/logo.svg"
+          alt="SVG"
+          width={100}
+          height={100}
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("data-unoptimized", "true");
+      expect(img).toHaveAttribute("data-has-loader", "false");
+    });
+
+    it("does not use contentful loader for SVG images", () => {
+      render(
+        <NextImage
+          src="https://images.ctfassets.net/space/icon.svg"
+          alt="SVG Icon"
+          width={24}
+          height={24}
+        />
+      );
+      expect(mockNextImage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          unoptimized: true,
+        })
+      );
+      expect(mockNextImage).not.toHaveBeenCalledWith(
+        expect.objectContaining({
+          loader: expect.any(Function),
+        })
+      );
+    });
+
+    it("handles SVG with query params from Contentful", () => {
+      render(
+        <NextImage
+          src="https://images.ctfassets.net/space/icon.svg?v=1"
+          alt="SVG"
+          width={50}
+          height={50}
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("data-unoptimized", "true");
+      expect(img).toHaveAttribute("data-has-loader", "false");
+    });
+
+    it("handles SVG with uppercase extension from Contentful", () => {
+      render(
+        <NextImage
+          src="https://images.ctfassets.net/space/Logo.SVG"
+          alt="SVG"
+          width={100}
+          height={100}
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("data-unoptimized", "true");
+    });
+
+    it("does not treat non-Contentful SVG specially", () => {
+      render(
+        <NextImage
+          src="https://example.com/icon.svg"
+          alt="Ext SVG"
+          width={24}
+          height={24}
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      // Non-contentful SVG: no loader, unoptimized is false (falsy)
+      expect(img).toHaveAttribute("data-has-loader", "false");
+      expect(img).toHaveAttribute("data-unoptimized", "false");
+    });
+  });
+
+  describe("non-Contentful images", () => {
+    it("does not set unoptimized for regular external images", () => {
+      render(
+        <NextImage
+          src="https://cdn.example.com/photo.webp"
+          alt="WebP"
+          width={400}
+          height={300}
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("data-has-loader", "false");
+    });
+
+    it("does not set unoptimized for local images", () => {
+      render(
+        <NextImage
+          src="/images/hero.png"
+          alt="Hero"
+          width={1200}
+          height={600}
+        />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("data-unoptimized");
+    });
+  });
+});
+
+describe("resolveDefaultExport (CJS/ESM interop)", () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  it("unwraps doubly-wrapped default export", async () => {
+    jest.doMock("next/image", () => {
+      function MockImage(props: any) {
+        return <img {...props} />;
+      }
+      return { __esModule: true, default: { default: MockImage } };
+    });
+    jest.doMock("@shared/utils", () => ({
+      cx: (...args: any[]) => args.filter(Boolean).join(" "),
+    }));
+    const { NextImage } = await import("./index");
+    expect(NextImage).toBeDefined();
+  });
+
+  it("resolves when default export is already a function", async () => {
+    jest.doMock("next/image", () => {
+      function MockImage(props: any) {
+        return <img {...props} />;
+      }
+      return { __esModule: true, default: MockImage };
+    });
+    jest.doMock("@shared/utils", () => ({
+      cx: (...args: any[]) => args.filter(Boolean).join(" "),
+    }));
+    const { NextImage } = await import("./index");
+    expect(NextImage).toBeDefined();
+  });
+
+  it("returns current when loop exhausts iterations", async () => {
+    jest.doMock("next/image", () => {
+      const nested = {
+        default: {
+          default: {
+            default: {
+              default: {
+                default: { default: "not-a-function" },
+              },
+            },
+          },
+        },
+      };
+      return { __esModule: true, default: nested };
+    });
+    jest.doMock("@shared/utils", () => ({
+      cx: (...args: any[]) => args.filter(Boolean).join(" "),
+    }));
+    const { NextImage } = await import("./index");
+    expect(NextImage).toBeDefined();
+  });
+});

package/src/components/next-image/index.tsx

@@ -1,74 +1,74 @@
-"use client";
-
-import { forwardRef } from "react";
-import NextJsImageImport, {
-  type ImageLoaderProps,
-  type ImageProps as NextImageProps,
-} from "next/image";
-
-import { cx } from "@shared/utils";
-
-// Handle CJS/ESM interop: when bundled as ESM and consumed by Webpack,
-// the default import may resolve to { default: Component } (or be doubly
-// wrapped) instead of the function. Unwrap until we land on a callable.
-const resolveDefaultExport = (mod: unknown): unknown => {
-  let current: any = mod;
-  // Limit iterations to avoid pathological cycles.
-  for (let i = 0; i < 5; i++) {
-    if (typeof current === "function") return current;
-    if (current && typeof current === "object" && "default" in current) {
-      current = current.default;
-      continue;
-    }
-    return current;
-  }
-  return current;
-};
-const NextJsImage = resolveDefaultExport(
-  NextJsImageImport
-) as typeof NextJsImageImport;
-
-export interface NextImageComponentProps extends NextImageProps {
-  className?: string;
-}
-
-/**
- * Image loader that uses Contentful's Image API to serve optimized WebP images
- * at the requested width and quality, avoiding an extra round-trip through
- * the Next.js image optimization server.
- */
-const contentfulImageLoader = ({ src, width, quality }: ImageLoaderProps) => {
-  const url = new URL(src);
-  url.searchParams.set("w", String(width));
-  url.searchParams.set("q", String(quality || 90));
-  url.searchParams.set("fm", "webp");
-  return url.toString();
-};
-
-export const NextImage = forwardRef<HTMLImageElement, NextImageComponentProps>(
-  ({ className, ...props }, ref) => {
-    const srcString = typeof props.src === "string" ? props.src : "";
-    const urlWithoutParams = srcString.toLowerCase().split("?")[0] || "";
-    const isContentfulImage = srcString.includes("images.ctfassets.net");
-    const isSvgFromContentful =
-      isContentfulImage && urlWithoutParams.endsWith(".svg");
-
-    // Use Contentful's Image API for non-SVG Contentful images;
-    // skip optimization entirely for SVGs.
-    const loaderProps =
-      isContentfulImage && !isSvgFromContentful
-        ? { loader: contentfulImageLoader, unoptimized: false }
-        : { unoptimized: isSvgFromContentful };
-
-    return (
-      <NextJsImage
-        ref={ref}
-        className={cx(className)}
-        {...props}
-        {...loaderProps}
-      />
-    );
-  }
-);
-
-NextImage.displayName = "NextImage";
+"use client";
+
+import { forwardRef } from "react";
+import NextJsImageImport, {
+  type ImageLoaderProps,
+  type ImageProps as NextImageProps,
+} from "next/image";
+
+import { cx } from "@shared/utils";
+
+// Handle CJS/ESM interop: when bundled as ESM and consumed by Webpack,
+// the default import may resolve to { default: Component } (or be doubly
+// wrapped) instead of the function. Unwrap until we land on a callable.
+const resolveDefaultExport = (mod: unknown): unknown => {
+  let current: any = mod;
+  // Limit iterations to avoid pathological cycles.
+  for (let i = 0; i < 5; i++) {
+    if (typeof current === "function") return current;
+    if (current && typeof current === "object" && "default" in current) {
+      current = current.default;
+      continue;
+    }
+    return current;
+  }
+  return current;
+};
+const NextJsImage = resolveDefaultExport(
+  NextJsImageImport
+) as typeof NextJsImageImport;
+
+export interface NextImageComponentProps extends NextImageProps {
+  className?: string;
+}
+
+/**
+ * Image loader that uses Contentful's Image API to serve optimized WebP images
+ * at the requested width and quality, avoiding an extra round-trip through
+ * the Next.js image optimization server.
+ */
+const contentfulImageLoader = ({ src, width, quality }: ImageLoaderProps) => {
+  const url = new URL(src);
+  url.searchParams.set("w", String(width));
+  url.searchParams.set("q", String(quality || 90));
+  url.searchParams.set("fm", "webp");
+  return url.toString();
+};
+
+export const NextImage = forwardRef<HTMLImageElement, NextImageComponentProps>(
+  ({ className, ...props }, ref) => {
+    const srcString = typeof props.src === "string" ? props.src : "";
+    const urlWithoutParams = srcString.toLowerCase().split("?")[0] || "";
+    const isContentfulImage = srcString.includes("images.ctfassets.net");
+    const isSvgFromContentful =
+      isContentfulImage && urlWithoutParams.endsWith(".svg");
+
+    // Use Contentful's Image API for non-SVG Contentful images;
+    // skip optimization entirely for SVGs.
+    const loaderProps =
+      isContentfulImage && !isSvgFromContentful
+        ? { loader: contentfulImageLoader, unoptimized: false }
+        : { unoptimized: isSvgFromContentful };
+
+    return (
+      <NextJsImage
+        ref={ref}
+        className={cx(className)}
+        {...props}
+        {...loaderProps}
+      />
+    );
+  }
+);
+
+NextImage.displayName = "NextImage";

package/src/components/next-image/types.ts

@@ -1 +1 @@
-export type { NextImageComponentProps } from "./index";
+export type { NextImageComponentProps } from "./index";