ferns-ui 1.10.0 → 1.12.0

package/src/Avatar.test.tsx

@@ -0,0 +1,163 @@
+import {act, fireEvent} from "@testing-library/react-native";
+// import {ImageManipulator} from "expo-image-manipulator";
+// Import the actual implementation for SaveFormat
+import * as ImageManipulator from "expo-image-manipulator";
+import React from "react";
+
+import {Avatar} from "./Avatar";
+import {renderWithTheme} from "./test-utils";
+
+// Mock expo-image-picker
+jest.mock("expo-image-picker", () => ({
+  launchImageLibraryAsync: jest.fn(),
+}));
+
+// Mock expo-image-manipulator
+const mockResize = jest.fn();
+const mockRenderAsync = jest.fn();
+const mockSaveAsync = jest.fn();
+
+jest.mock("expo-image-manipulator", () => {
+  const actual = jest.requireActual("expo-image-manipulator");
+  return {
+    ...actual,
+    ImageManipulator: {
+      manipulate: jest.fn().mockImplementation(() => ({
+        resize: mockResize.mockImplementation(() => ({
+          renderAsync: mockRenderAsync.mockResolvedValue({
+            saveAsync: mockSaveAsync.mockResolvedValue({
+              uri: "test-uri",
+              base64: "test-base64",
+            }),
+          }),
+        })),
+      })),
+    },
+    SaveFormat: {
+      PNG: "png",
+      JPEG: "jpeg",
+    },
+  };
+});
+
+jest.mock("expo-image-picker", () => ({
+  launchImageLibraryAsync: jest.fn().mockResolvedValue({
+    canceled: false,
+    assets: [
+      {
+        uri: "test-uri",
+        width: 100,
+        height: 100,
+      },
+    ],
+  }),
+}));
+
+// Mock the LinearGradient component
+jest.mock("expo-linear-gradient", () => ({
+  LinearGradient: "LinearGradient",
+}));
+
+describe("Avatar", () => {
+  const defaultProps = {
+    name: "John Doe",
+    src: "https://example.com/avatar.jpg",
+    testID: "avatar",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<Avatar {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders initials when no image is provided", () => {
+    const {getByText} = renderWithTheme(<Avatar name="John Doe" testID="avatar" />);
+    expect(getByText("JD")).toBeTruthy();
+  });
+
+  it("renders image when src is provided", () => {
+    const {getByTestId} = renderWithTheme(<Avatar {...defaultProps} />);
+    const image = getByTestId("avatar-image");
+    expect(image).toBeTruthy();
+  });
+
+  it("shows initials when image fails to load", () => {
+    const {getByText, getByTestId} = renderWithTheme(<Avatar {...defaultProps} name="John Doe" />);
+
+    // Simulate image load error
+    fireEvent(getByTestId("avatar-image"), "onError");
+
+    expect(getByText("JD")).toBeTruthy();
+  });
+
+  it("applies correct size class", () => {
+    const size = "lg";
+    const {getByTestId} = renderWithTheme(<Avatar {...defaultProps} size={size} />);
+    const avatar = getByTestId("avatar-image");
+    // Check if the style contains the expected size
+    expect(avatar.props.style).toMatchObject({
+      height: 72, // lg size from the sizes object
+    });
+  });
+
+  it("shows status indicator when status is provided", () => {
+    const {getByTestId} = renderWithTheme(<Avatar {...defaultProps} status="online" />);
+    expect(getByTestId("status-indicator")).toBeTruthy();
+  });
+
+  it("shows edit icon when status is imagePicker and size is xl", () => {
+    const {getByText} = renderWithTheme(
+      <Avatar {...defaultProps} size="xl" status="imagePicker" />
+    );
+    expect(getByText("Upload Image")).toBeTruthy();
+  });
+
+  it("calls onChange when edit icon is pressed", async () => {
+    const mockOnChange = jest.fn();
+    const {getByText} = renderWithTheme(
+      <Avatar {...defaultProps} size="xl" status="imagePicker" onChange={mockOnChange} />
+    );
+
+    await act(async () => {
+      fireEvent.press(getByText("Upload Image"));
+    });
+
+    // The onChange should be called with the processed image
+    expect(mockOnChange).toHaveBeenCalledWith({
+      avatarImageFormat: "png",
+      uri: "data:image/png;base64,test-base64",
+      base64: "test-base64",
+    });
+    expect(ImageManipulator.ImageManipulator.manipulate).toHaveBeenCalled();
+    expect(mockResize).toHaveBeenCalled();
+    expect(mockRenderAsync).toHaveBeenCalled();
+    expect(mockSaveAsync).toHaveBeenCalledWith({
+      format: "png",
+      base64: true,
+    });
+  });
+
+  it("applies border when hasBorder is true", () => {
+    const {getByTestId} = renderWithTheme(<Avatar {...defaultProps} hasBorder />);
+    const avatar = getByTestId("avatar-image");
+    // Check if the style contains border properties
+    expect(avatar.props.style).toMatchObject({
+      borderWidth: expect.any(Number),
+      borderColor: expect.any(String),
+    });
+  });
+
+  it("shows warning when imagePicker status is used with non-xl size", () => {
+    const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+    renderWithTheme(<Avatar {...defaultProps} size="lg" status="imagePicker" />);
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      "Avatars with the status of 'imagePicker' should also have an onChange property."
+    );
+    consoleWarnSpy.mockRestore();
+  });
+});

package/src/Avatar.tsx

@@ -175,6 +175,7 @@ export const Avatar: FC<AvatarProps> = ({
           right: 0,
           zIndex: 5,
         }}
+        testID="status-indicator"
       >
         {icon({
           doNotDisturb,
@@ -213,6 +214,7 @@ export const Avatar: FC<AvatarProps> = ({
               height: avatarImageDiameter,
               overflow: "hidden",
             }}
+            testID="avatar-image"
             onError={handleImageError}
           />
         ) : (

package/src/Badge.test.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+
+import {Badge} from "./Badge";
+import {renderWithTheme} from "./test-utils";
+
+describe("Badge", () => {
+  const defaultProps = {
+    value: "Test",
+  };
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<Badge {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders text value correctly", () => {
+    const {getByText} = renderWithTheme(<Badge {...defaultProps} />);
+    expect(getByText("Test")).toBeTruthy();
+  });
+
+  it("renders number value correctly", () => {
+    const {getByText} = renderWithTheme(<Badge value={42} />);
+    expect(getByText("42")).toBeTruthy();
+  });
+
+  it("truncates large numbers with maxValue", () => {
+    const {getByText} = renderWithTheme(<Badge maxValue={100} value={150} variant="numberOnly" />);
+    expect(getByText("100+")).toBeTruthy();
+  });
+
+  it("does not truncate numbers below maxValue", () => {
+    const {getByText} = renderWithTheme(<Badge maxValue={100} value={50} variant="numberOnly" />);
+    expect(getByText("50")).toBeTruthy();
+  });
+
+  it("applies correct status colors", () => {
+    const statuses = ["error", "warning", "info", "success", "neutral"] as const;
+
+    statuses.forEach((status) => {
+      let {getByTestId} = renderWithTheme(
+        <Badge {...defaultProps} status={status} testID="badge" />
+      );
+
+      // Test primary variant
+      const badge = getByTestId("badge");
+      expect(badge).toHaveStyle({backgroundColor: expect.any(String)});
+
+      // Test secondary variant
+      ({getByTestId} = renderWithTheme(
+        <Badge {...defaultProps} secondary status={status} testID="badge-secondary" />
+      ));
+      const secondaryBadge = getByTestId("badge-secondary");
+      expect(secondaryBadge).toHaveStyle({backgroundColor: expect.any(String)});
+    });
+  });
+
+  it("renders icon when iconName is provided", () => {
+    const {getByTestId} = renderWithTheme(
+      <Badge {...defaultProps} iconName="check" testID="badge-with-icon" />
+    );
+    expect(getByTestId("icon")).toBeTruthy();
+  });
+
+  it("renders icon only when variant is iconOnly", () => {
+    const {getByTestId, queryByText} = renderWithTheme(
+      <Badge {...defaultProps} iconName="check" testID="icon-only-badge" variant="iconOnly" />
+    );
+
+    expect(getByTestId("icon")).toBeTruthy();
+    expect(queryByText("Test")).toBeNull();
+  });
+
+  it("applies custom colors when status is custom", () => {
+    const customColors = {
+      customBackgroundColor: "#123456",
+      customTextColor: "#ffffff",
+      customBorderColor: "#654321",
+      customIconColor: "#ffcc00",
+    };
+
+    const {getByTestId} = renderWithTheme(
+      <Badge
+        {...defaultProps}
+        iconName="star"
+        secondary
+        status="custom"
+        testID="custom-badge"
+        {...(customColors as any)}
+      />
+    );
+
+    const badge = getByTestId("custom-badge");
+    expect(badge).toHaveStyle({
+      backgroundColor: customColors.customBackgroundColor,
+      borderColor: customColors.customBorderColor,
+    });
+  });
+
+  it("applies correct border radius based on variant", () => {
+    // Default variant
+    let {getByTestId} = renderWithTheme(<Badge {...defaultProps} testID="default-badge" />);
+    expect(getByTestId("default-badge")).toHaveStyle({borderRadius: expect.any(Number)});
+
+    // Icon only variant
+    ({getByTestId} = renderWithTheme(
+      <Badge {...defaultProps} iconName="check" testID="icon-only-badge" variant="iconOnly" />
+    ));
+    expect(getByTestId("icon-only-badge")).toHaveStyle({borderRadius: expect.any(Number)});
+
+    // Number only variant
+    ({getByTestId} = renderWithTheme(
+      <Badge {...defaultProps} testID="number-only-badge" variant="numberOnly" />
+    ));
+    expect(getByTestId("number-only-badge")).toHaveStyle({borderRadius: expect.any(Number)});
+  });
+});

package/src/Badge.tsx

@@ -17,6 +17,7 @@ export const Badge = ({
   customBorderColor,
   customIconColor,
   customIconName,
+  testID,
 }: BadgeProps): React.ReactElement => {
   const {theme} = useTheme();
   const isIconOnly = variant === "iconOnly";
@@ -110,9 +111,10 @@ export const Badge = ({
           isIconOnly && {height: 16, width: 16},
           secondary && {borderWidth: 1, borderColor},
         ]}
+        testID={testID}
       >
         {Boolean(variant !== "numberOnly" && iconName) && (
-          <View style={{marginRight: variant === "iconOnly" ? 0 : theme.spacing.sm}}>
+          <View style={{marginRight: variant === "iconOnly" ? 0 : theme.spacing.sm}} testID="icon">
             <Icon color={iconColor} iconName={customIconName ?? iconName!} size="xs" />
           </View>
         )}