@sproutsocial/seeds-react-list 0.0.2 → 0.1.1

package/src/__tests__/DataList.test.tsx

@@ -0,0 +1,218 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import DataList from "../DataList";
+import DataItemSkeleton from "../DataItemSkeleton";
+
+interface TestItem {
+  id: string;
+  name: string;
+}
+
+const testData: TestItem[] = [
+  { id: "1", name: "First item" },
+  { id: "2", name: "Second item" },
+  { id: "3", name: "Third item" },
+];
+
+describe("DataList", () => {
+  it("should render properly", async () => {
+    const { container, runA11yCheck } = render(
+      <DataList
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+      />
+    );
+    expect(container).toBeTruthy();
+    await runA11yCheck();
+  });
+
+  it("should render all items from the data array", () => {
+    render(
+      <DataList
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+      />
+    );
+    expect(screen.getByText("First item")).toBeInTheDocument();
+    expect(screen.getByText("Second item")).toBeInTheDocument();
+    expect(screen.getByText("Third item")).toBeInTheDocument();
+  });
+
+  it("should render as ul by default", () => {
+    const { container } = render(
+      <DataList
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+      />
+    );
+    const listElement = container.querySelector("ul");
+    expect(listElement).toBeInTheDocument();
+  });
+
+  it("should render as ol when as='ol'", () => {
+    const { container } = render(
+      <DataList
+        as="ol"
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+      />
+    );
+    const listElement = container.querySelector("ol");
+    expect(listElement).toBeInTheDocument();
+  });
+
+  it("should wrap each rendered item in an li element", () => {
+    const { container } = render(
+      <DataList
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+      />
+    );
+    const listItems = container.querySelectorAll("li");
+    expect(listItems).toHaveLength(3);
+  });
+
+  it("should call renderItem for each data item", () => {
+    const renderItem = jest.fn((item: TestItem) => (
+      <div key={item.id}>{item.name}</div>
+    ));
+    render(<DataList data={testData} renderItem={renderItem} />);
+    expect(renderItem).toHaveBeenCalledTimes(3);
+    expect(renderItem).toHaveBeenCalledWith(testData[0], 0);
+    expect(renderItem).toHaveBeenCalledWith(testData[1], 1);
+    expect(renderItem).toHaveBeenCalledWith(testData[2], 2);
+  });
+
+  it("should render loading skeletons when isLoading is true", () => {
+    const { container } = render(
+      <DataList
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+        isLoading={true}
+      />
+    );
+    // Default loading renders 5 skeleton items
+    const listItems = container.querySelectorAll("li");
+    expect(listItems).toHaveLength(5);
+    // Data items should not be rendered when loading
+    expect(screen.queryByText("First item")).not.toBeInTheDocument();
+  });
+
+  it("should use custom LoadingComponent when provided", () => {
+    const CustomLoader = () => <div>Custom Loading</div>;
+    render(
+      <DataList
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+        isLoading={true}
+        LoadingComponent={CustomLoader}
+      />
+    );
+    const loaders = screen.getAllByText("Custom Loading");
+    expect(loaders).toHaveLength(5);
+  });
+
+  it("should pass listItemProps to each list item", () => {
+    const { container } = render(
+      <DataList
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+        listItemProps={{ isBordered: true }}
+      />
+    );
+    const listItems = container.querySelectorAll("li");
+    listItems.forEach((item) => {
+      expect(item).toBeInTheDocument();
+    });
+  });
+
+  it("should render Header when provided", () => {
+    const Header = <div data-testid="header">Custom Header</div>;
+    render(
+      <DataList
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+        Header={Header}
+      />
+    );
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+  });
+
+  it("should render Header with sticky positioning", () => {
+    const Header = <div data-testid="header">Custom Header</div>;
+    const { container } = render(
+      <DataList
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+        Header={Header}
+      />
+    );
+    const headerElement = container.querySelector("#header");
+    expect(headerElement).toBeInTheDocument();
+    expect(headerElement).toHaveStyle({ position: "sticky" });
+  });
+
+  it("should render empty list when data array is empty", () => {
+    const { container } = render(
+      <DataList
+        data={[]}
+        renderItem={(item: TestItem) => <div key={item.id}>{item.name}</div>}
+      />
+    );
+    const listElement = container.querySelector("ul");
+    expect(listElement).toBeInTheDocument();
+    const listItems = container.querySelectorAll("li");
+    expect(listItems).toHaveLength(0);
+  });
+
+  it("should render Header during loading state", () => {
+    const Header = <div data-testid="header">Custom Header</div>;
+    render(
+      <DataList
+        data={testData}
+        renderItem={(item) => <div key={item.id}>{item.name}</div>}
+        isLoading={true}
+        Header={Header}
+      />
+    );
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+  });
+
+  it("should handle complex data items", () => {
+    interface ComplexItem {
+      id: string;
+      user: { name: string; email: string };
+      metadata: { count: number };
+    }
+
+    const complexData: ComplexItem[] = [
+      {
+        id: "1",
+        user: { name: "John", email: "john@example.com" },
+        metadata: { count: 5 },
+      },
+      {
+        id: "2",
+        user: { name: "Jane", email: "jane@example.com" },
+        metadata: { count: 10 },
+      },
+    ];
+
+    render(
+      <DataList
+        data={complexData}
+        renderItem={(item) => (
+          <div key={item.id}>
+            <span>{item.user.name}</span>
+            <span>{item.user.email}</span>
+          </div>
+        )}
+      />
+    );
+
+    expect(screen.getByText("John")).toBeInTheDocument();
+    expect(screen.getByText("john@example.com")).toBeInTheDocument();
+    expect(screen.getByText("Jane")).toBeInTheDocument();
+    expect(screen.getByText("jane@example.com")).toBeInTheDocument();
+  });
+});

package/src/__tests__/List.test.tsx

@@ -6,8 +6,8 @@ describe("List", () => {
   it("should render properly", async () => {
     const { container, runA11yCheck } = render(
       <List as="ul">
-        <div>Item 1</div>
-        <div>Item 2</div>
+        <li>Item 1</li>
+        <li>Item 2</li>
       </List>
     );
     expect(container).toBeTruthy();
@@ -17,7 +17,7 @@ describe("List", () => {
   it("should render as ul when as='ul'", () => {
     const { container } = render(
       <List as="ul">
-        <div>Item 1</div>
+        <li>Item 1</li>
       </List>
     );
     const listElement = container.querySelector("ul");
@@ -27,7 +27,7 @@ describe("List", () => {
   it("should render as ol when as='ol'", () => {
     const { container } = render(
       <List as="ol">
-        <div>Item 1</div>
+        <li>Item 1</li>
       </List>
     );
     const listElement = container.querySelector("ol");
@@ -37,9 +37,9 @@ describe("List", () => {
   it("should wrap each child in an li element", () => {
     const { container } = render(
       <List as="ul">
-        <div>Item 1</div>
-        <div>Item 2</div>
-        <div>Item 3</div>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
       </List>
     );
     const listItems = container.querySelectorAll("li");
@@ -52,9 +52,9 @@ describe("List", () => {
   it("should add mt={300} to all items except the first", () => {
     const { container } = render(
       <List as="ul">
-        <div>Item 1</div>
-        <div>Item 2</div>
-        <div>Item 3</div>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
       </List>
     );
     const listItems = container.querySelectorAll("li");

package/src/index.ts

@@ -1,7 +1,19 @@
 import List from "./List";
 import ListItem from "./ListItem";
 import ListItemContent from "./ListItemContent";
+import DataList from "./DataList";
+import DataItemSkeleton from "./DataItemSkeleton";
+import Experimental_VirtualizedDataList from "./VirtualizedDataList";
 
-export { List, ListItem, ListItemContent };
+export {
+  List,
+  ListItem,
+  ListItemContent,
+  DataList,
+  DataItemSkeleton,
+  Experimental_VirtualizedDataList,
+};
 export * from "./ListTypes";
 export * from "./ListItemTypes";
+export * from "./DataListTypes";
+export * from "./DataItemSkeletonTypes";