@seed-design/react 1.2.15 → 1.2.17

package/lib/components/Avatar/Avatar.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Avatar.test.d.ts.map

package/lib/components/Avatar/Avatar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.test.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.test.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "1.2.15",
+  "version": "1.2.17",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -47,14 +47,14 @@
     "@seed-design/react-dialog": "1.0.3",
     "@seed-design/react-drawer": "1.0.11",
     "@seed-design/react-field": "1.0.1",
-    "@seed-design/react-image": "0.1.1",
-    "@seed-design/react-fieldset": "0.1.0",
     "@seed-design/react-field-button": "1.0.2",
+    "@seed-design/react-fieldset": "0.1.0",
+    "@seed-design/react-image": "1.1.0",
     "@seed-design/react-popover": "1.0.4",
     "@seed-design/react-portal": "1.0.0",
     "@seed-design/react-primitive": "1.0.0",
     "@seed-design/react-progress": "1.0.0",
-    "@seed-design/react-pull-to-refresh": "1.0.1",
+    "@seed-design/react-pull-to-refresh": "1.0.2",
     "@seed-design/react-radio-group": "1.1.0",
     "@seed-design/react-segmented-control": "1.0.1",
     "@seed-design/react-slider": "1.0.2",
@@ -67,7 +67,7 @@
     "unicode-segmenter": "^0.14.4"
   },
   "peerDependencies": {
-    "@seed-design/css": ">=1.1.17",
+    "@seed-design/css": ">=1.2.19",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/src/components/Avatar/Avatar.test.tsx

@@ -0,0 +1,21 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it } from "bun:test";
+import { AvatarFallback, AvatarImage, AvatarRoot } from "./Avatar";
+
+describe("Avatar.Image", () => {
+  it("forwards a srcSet-only lazy source to the shared image primitive", () => {
+    const { getByAltText, getByText } = render(
+      <AvatarRoot>
+        <AvatarImage srcSet="avatar.png 1x" loading="lazy" alt="Profile" />
+        <AvatarFallback>AB</AvatarFallback>
+      </AvatarRoot>,
+    );
+    const image = getByAltText("Profile");
+    expect(image).toHaveAttribute("srcset", "avatar.png 1x");
+    expect(image).toHaveAttribute("data-loading-state", "loading");
+    expect(image).not.toHaveAttribute("hidden");
+    fireEvent.load(image);
+    expect(image).toHaveAttribute("data-loading-state", "loaded");
+    expect(getByText("AB")).toHaveAttribute("hidden");
+  });
+});

package/src/components/ImageFrame/ImageFrame.test.tsx

@@ -1,9 +1,10 @@
 import { imageFrameReactionButton } from "@seed-design/css/recipes/image-frame-reaction-button";
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it } from "bun:test";
 import type { ReactElement } from "react";
-import { ImageFrameReactionButton } from "./ImageFrame";
+import { renderToString } from "react-dom/server";
+import { ImageFrame, ImageFrameReactionButton } from "./ImageFrame";
 
 function setUp(jsx: ReactElement) {
   return {
@@ -13,12 +14,55 @@ function setUp(jsx: ReactElement) {
 }
 
 describe("ImageFrame", () => {
+  it.each([
+    "eager",
+    "lazy",
+  ] as const)("keeps a server-rendered %s image available before hydration", (loading) => {
+    const container = document.createElement("div");
+    container.innerHTML = renderToString(
+      <ImageFrame src="image.png" alt="Preview" loading={loading} fallback="Loading" />,
+    );
+    const image = container.querySelector("img");
+    expect(image).not.toHaveAttribute("hidden");
+    expect(image).not.toHaveAttribute("aria-hidden");
+    expect(image).toHaveAttribute("data-loading-state", "loading");
+  });
+
+  it("hides an image without a source even when loading is lazy", () => {
+    const { getByAltText } = setUp(<ImageFrame src="" alt="Preview" loading="lazy" />);
+    expect(getByAltText("Preview")).toHaveAttribute("data-loading-state", "error");
+    expect(getByAltText("Preview")).toHaveAttribute("hidden");
+  });
+
+  it("keeps a lazy image in layout while loading and hides the fallback on load", () => {
+    const { getByAltText, getByText } = setUp(
+      <ImageFrame src="image.png" alt="Preview" loading="lazy" fallback="Loading" />,
+    );
+    const image = getByAltText("Preview");
+    expect(image).toHaveAttribute("loading", "lazy");
+    expect(image).not.toHaveAttribute("hidden");
+    fireEvent.load(image);
+    expect(image).toHaveAttribute("data-loading-state", "loaded");
+    expect(getByText("Loading")).toHaveAttribute("hidden");
+  });
+
+  it("uses srcSet when src is empty and hides the image on error", () => {
+    const { getByAltText, getByText } = setUp(
+      <ImageFrame src="" srcSet="image.png 1x" alt="Preview" fallback="Unavailable" />,
+    );
+    const image = getByAltText("Preview");
+    expect(image).toHaveAttribute("data-loading-state", "loading");
+    expect(image).toHaveAttribute("srcset", "image.png 1x");
+    expect(image).not.toHaveAttribute("hidden");
+    fireEvent.error(image);
+    expect(image).toHaveAttribute("hidden");
+    expect(getByText("Unavailable")).not.toHaveAttribute("hidden");
+  });
+
   describe("ImageFrameReactionButton", () => {
     it("renders the unselected icon by default", () => {
       const classNames = imageFrameReactionButton();
-      const { getByRole, container } = setUp(
-        <ImageFrameReactionButton aria-label="Like image" />,
-      );
+      const { getByRole, container } = setUp(<ImageFrameReactionButton aria-label="Like image" />);
 
       const button = getByRole("button", { name: "Like image" });
       const lineIcon = container.querySelector(`.${classNames.lineIcon}`);