@xhsreds/reds-rn-next 0.1.2 → 0.1.4

package/src/components/FAB/test/paper.bench.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import { FAB } from "react-native-paper";
+import { render } from "@testing-library/react-native";
+
+describe("render", () => {
+  redsBench("paper", async () => {
+    render(<FAB icon="plus" onPress={() => console.log("Pressed")} />);
+  });
+});

package/src/components/Picker/test/index.test.tsx

@@ -3,7 +3,6 @@ import { describe, it, expect, vi } from "vitest";
 import { render, fireEvent, userEvent } from "@testing-library/react-native";
 import "@testing-library/react-native/extend-expect";
 import Picker from "../Picker";
-import { PortalProvider } from "../../Portal";
 
 describe("Picker", () => {
   const columns = [
@@ -21,9 +20,7 @@ describe("Picker", () => {
     const onSelect = vi.fn();
     const onCancel = vi.fn();
     const { getByText } = render(
-      <PortalProvider>
-        <Picker columns={columns} value={["1", "A"]} visible={true} onConfirm={onSelect} onCancel={onCancel} />
-      </PortalProvider>,
+      <Picker columns={columns} value={["1", "A"]} visible={true} onConfirm={onSelect} onCancel={onCancel} />,
     );
 
     expect(getByText("1")).toBeTruthy();
@@ -34,28 +31,24 @@ describe("Picker", () => {
     const onConfirm = vi.fn();
     const onCancel = vi.fn();
     const { getByText } = render(
-      <PortalProvider>
-        <Picker columns={columns} value={["1", "A"]} visible={true} onConfirm={onConfirm} onCancel={onCancel} />
-      </PortalProvider>,
+      <Picker columns={columns} value={["1", "A"]} visible={true} onConfirm={onConfirm} onCancel={onCancel} />,
     );
 
-    const confirmButton = getByText("确定");
+    const confirmButton = getByText("Confirm");
     fireEvent.press(confirmButton);
 
-    expect(confirmButton).toBeTruthy();
-    expect(onConfirm).toHaveBeenCalledOnce();
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    expect(onConfirm).toHaveBeenCalledWith(["1", "A"]);
   });
 
   it("should call onCancel function when cancelled", async () => {
     const onCancel = vi.fn();
     const onConfirm = vi.fn();
     const { getByText } = render(
-      <PortalProvider>
-        <Picker columns={columns} value={["1", "A"]} visible={true} onCancel={onCancel} onConfirm={onConfirm} />
-      </PortalProvider>,
+      <Picker columns={columns} value={["1", "A"]} visible={true} onCancel={onCancel} onConfirm={onConfirm} />,
     );
 
-    const cancelButton = getByText("取消");
+    const cancelButton = getByText("Cancel");
     fireEvent.press(cancelButton);
 
     expect(onCancel).toHaveBeenCalledTimes(1);
@@ -66,21 +59,20 @@ describe("Picker", () => {
     const onCancel = vi.fn();
     const onConfirm = vi.fn();
     const { getByText } = render(
-      <PortalProvider>
-        <Picker
-          columns={columns}
-          value={["1", "A"]}
-          visible={true}
-          onChange={onChange}
-          onCancel={onCancel}
-          onConfirm={onConfirm}
-        />
-      </PortalProvider>,
+      <Picker
+        columns={columns}
+        value={["1", "A"]}
+        visible={true}
+        onChange={onChange}
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+      />,
     );
 
     const column = getByText("B");
     fireEvent.press(column);
 
-    expect(column).toBeTruthy();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(["1", "B"]);
   });
 });

package/src/components/Progress/test/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,195 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Progress Component > applies the correct progress color 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "width": "100%",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 3,
+          "flex": 1,
+          "height": "100%",
+          "overflow": "hidden",
+          "position": "relative",
+        },
+        {
+          "backgroundColor": "rgba(48, 48, 52, 0.1)",
+          "height": 6,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "rgba(255, 36, 66, 1)",
+          "borderRadius": 3,
+          "bottom": 0,
+          "height": "100%",
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": "0%",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Progress Component > applies the correct track color 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "width": "100%",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 3,
+          "flex": 1,
+          "height": "100%",
+          "overflow": "hidden",
+          "position": "relative",
+        },
+        {
+          "backgroundColor": "rgba(48, 48, 52, 0.1)",
+          "height": 6,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "rgba(255, 36, 66, 1)",
+          "borderRadius": 3,
+          "bottom": 0,
+          "height": "100%",
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": "0%",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Progress Component > does not apply progress color when disabled 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "width": "100%",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 3,
+          "flex": 1,
+          "height": "100%",
+          "overflow": "hidden",
+          "position": "relative",
+        },
+        {
+          "backgroundColor": "rgba(48, 48, 52, 0.1)",
+          "height": 6,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "rgba(48, 48, 52, 0.2)",
+          "borderRadius": 3,
+          "bottom": 0,
+          "height": "100%",
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": "0%",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Progress Component > renders correctly when disabled 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "rgba(48, 48, 52, 0.1)",
+        "borderRadius": 3,
+        "flex": 1,
+        "height": 6,
+        "overflow": "hidden",
+        "position": "relative",
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "rgba(48, 48, 52, 0.2)",
+          "borderRadius": 3,
+          "bottom": 0,
+          "height": "100%",
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": "0%",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Progress Component > renders correctly when showPercentage is false 1`] = `
 <View
   style={
     {
@@ -42,7 +231,49 @@ exports[`Progress Component > applies the correct progress color 1`] = `
 </View>
 `;
 
-exports[`Progress Component > applies the correct track color 1`] = `
+exports[`Progress Component > renders correctly with custom color 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "rgba(48, 48, 52, 0.1)",
+        "borderRadius": 3,
+        "flex": 1,
+        "height": 6,
+        "overflow": "hidden",
+        "position": "relative",
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "red",
+          "borderRadius": 3,
+          "bottom": 0,
+          "height": "100%",
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": "0%",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Progress Component > renders correctly with custom percentage 1`] = `
 <View
   style={
     {
@@ -81,10 +312,108 @@ exports[`Progress Component > applies the correct track color 1`] = `
       }
     />
   </View>
+  <Text
+    style={
+      {
+        "color": "rgba(0, 0, 0, 0.8)",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "lineHeight": 24,
+        "marginLeft": 8,
+      }
+    }
+  >
+    75
+    %
+  </Text>
 </View>
 `;
 
-exports[`Progress Component > does not apply progress color when disabled 1`] = `
+exports[`Progress Component > renders correctly with custom strokeWidth 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "rgba(48, 48, 52, 0.1)",
+        "borderRadius": 3,
+        "flex": 1,
+        "height": 10,
+        "overflow": "hidden",
+        "position": "relative",
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "rgba(255, 36, 66, 1)",
+          "borderRadius": 3,
+          "bottom": 0,
+          "height": "100%",
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": "0%",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Progress Component > renders correctly with custom trackColor 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "blue",
+        "borderRadius": 3,
+        "flex": 1,
+        "height": 6,
+        "overflow": "hidden",
+        "position": "relative",
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "rgba(255, 36, 66, 1)",
+          "borderRadius": 3,
+          "bottom": 0,
+          "height": "100%",
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": "0%",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Progress Component > renders correctly with default props 1`] = `
 <View
   style={
     {
@@ -111,7 +440,7 @@ exports[`Progress Component > does not apply progress color when disabled 1`] =
       collapsable={false}
       style={
         {
-          "backgroundColor": "rgba(48, 48, 52, 0.2)",
+          "backgroundColor": "rgba(255, 36, 66, 1)",
           "borderRadius": 3,
           "bottom": 0,
           "height": "100%",

package/src/components/Progress/test/index.test.tsx

@@ -2,32 +2,42 @@ import React from "react";
 import { render } from "@testing-library/react-native";
 import { describe, it, expect } from "vitest";
 import Progress from "../Progress";
-import { lightColor } from "@xhs/reds-token-next";
 
 describe("Progress Component", () => {
-  it("renders percentage text when showPercentage is true", () => {
-    const { getByText } = render(<Progress percentage={50} showPercentage={true} />);
-    expect(getByText("50%")).toBeTruthy();
+  it("renders correctly with default props", () => {
+    const { toJSON } = render(<Progress />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it("applies the correct track color", () => {
-    const { toJSON } = render(<Progress trackColor={lightColor.Fill2} />);
-    const tree = toJSON();
-    // 检查进度条背景颜色是否正确应用
-    expect(tree).toMatchSnapshot();
+  it("renders correctly with custom percentage", () => {
+    const { getByText, toJSON } = render(<Progress percentage={75} showPercentage={true} />);
+    expect(getByText("75%")).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it("applies the correct progress color", () => {
-    const { toJSON } = render(<Progress color={lightColor.Primary} percentage={50} />);
-    const tree = toJSON();
-    // 检查进度条前景颜色是否正确应用
-    expect(tree).toMatchSnapshot();
+  it("renders correctly when showPercentage is false", () => {
+    const { queryByText, toJSON } = render(<Progress showPercentage={false} />);
+    expect(queryByText(/%/)).toBeNull();
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it("does not apply progress color when disabled", () => {
-    const { toJSON } = render(<Progress disabled={true} color={lightColor.Primary} />);
-    const tree = toJSON();
-    // 检查禁用状态下进度条颜色是否正确应用
-    expect(tree).toMatchSnapshot();
+  it("renders correctly with custom strokeWidth", () => {
+    const { toJSON } = render(<Progress strokeWidth={10} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with custom color", () => {
+    const { toJSON } = render(<Progress color="red" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with custom trackColor", () => {
+    const { toJSON } = render(<Progress trackColor="blue" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly when disabled", () => {
+    const { toJSON } = render(<Progress disabled={true} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/src/components/PullRefresh/test/index.bench.tsx

@@ -3,7 +3,7 @@ import { describe } from "vitest";
 // @ts-ignore
 import { redsBench } from "~root/utils/redsBench";
 import PullRefresh from "../index";
-import { render, fireEvent } from "@testing-library/react-native";
+import { render } from "@testing-library/react-native";
 
 describe("render", () => {
   redsBench("base", async () => {