@terreno/ui 0.14.1 → 0.15.0

package/src/Banner.test.tsx

@@ -1,12 +1,17 @@
-import {describe, expect, it, mock} from "bun:test";
-import {act, fireEvent, waitFor} from "@testing-library/react-native";
+import {beforeEach, describe, expect, it, mock} from "bun:test";
+import {act, fireEvent, render, waitFor} from "@testing-library/react-native";
 import React from "react";
 
-import {Banner} from "./Banner";
+import {Banner, BannerButton, hideBanner} from "./Banner";
+import {ThemeContext} from "./Theme";
 import {renderWithTheme} from "./test-utils";
 import {Unifier} from "./Unifier";
 
 describe("Banner", () => {
+  beforeEach(() => {
+    Unifier.storage.getItem = mock(() => Promise.resolve(null));
+    Unifier.storage.setItem = mock(() => Promise.resolve());
+  });
   it("renders correctly with default props", () => {
     const {toJSON} = renderWithTheme(<Banner id="test-banner" text="Test message" />);
     expect(toJSON()).toMatchSnapshot();
@@ -239,4 +244,54 @@ describe("Banner", () => {
 
     expect(handleClick).toHaveBeenCalled();
   });
+
+  it("hideBanner persists the banner id to storage", async () => {
+    const setItemMock = Unifier.storage.setItem as ReturnType<typeof mock>;
+    setItemMock.mockClear();
+
+    await hideBanner("my-banner");
+    expect(setItemMock).toHaveBeenCalledWith("@TerrenoUI:my-banner", "true");
+  });
+
+  it("renders with button loading state", () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {toJSON} = renderWithTheme(
+      <Banner
+        buttonOnClick={handleClick}
+        buttonText="Loading"
+        id="test-banner"
+        loading
+        text="Banner loading"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders banner with dismissible=true and no id (non-persistent dismiss)", async () => {
+    const {getByLabelText, queryByText} = renderWithTheme(
+      <Banner dismissible text="Non persistent" />
+    );
+    expect(queryByText("Non persistent")).toBeTruthy();
+    await act(async () => {
+      fireEvent.press(getByLabelText("Dismiss"));
+    });
+    await waitFor(() => {
+      expect(queryByText("Non persistent")).toBeNull();
+    });
+  });
+
+  it("BannerButton returns null when theme is not available", () => {
+    const nullThemeContext = {
+      resetTheme: () => {},
+      setPrimitives: () => {},
+      setTheme: () => {},
+      theme: null,
+    };
+    const {toJSON} = render(
+      <ThemeContext.Provider value={nullThemeContext as never}>
+        <BannerButton buttonOnClick={() => {}} buttonText="Test" />
+      </ThemeContext.Provider>
+    );
+    expect(toJSON()).toBeNull();
+  });
 });

package/src/Banner.tsx

@@ -17,7 +17,7 @@ type BannerButtonProps = {
   loading?: boolean;
 };
 
-const BannerButton = ({
+export const BannerButton = ({
   loading: propsLoading,
   buttonText,
   buttonIconName,
@@ -178,14 +178,14 @@ export const Banner = (props: BannerProps): React.ReactElement | null => {
           <View style={{paddingLeft: 16, paddingRight: 10}}>
             <BannerButton
               buttonIconName={buttonIconName}
-              buttonOnClick={buttonOnClick ?? (() => {})}
+              buttonOnClick={buttonOnClick!}
               buttonText={buttonText}
             />
           </View>
         )}
         {Boolean(buttonText && !buttonIconName && buttonOnClick) && (
           <View style={{paddingLeft: 16, paddingRight: 10}}>
-            <BannerButton buttonOnClick={buttonOnClick ?? (() => {})} buttonText={buttonText} />
+            <BannerButton buttonOnClick={buttonOnClick!} buttonText={buttonText} />
           </View>
         )}
       </View>

package/src/DataTable.test.tsx

@@ -2,6 +2,7 @@
 import {describe, expect, it, mock} from "bun:test";
 import {act} from "@testing-library/react-native";
 
+import type {DataTableCustomComponentMap, DataTableProps} from "./Common";
 import {DataTable} from "./DataTable";
 import {Text} from "./Text";
 import {renderWithTheme} from "./test-utils";
@@ -115,7 +116,7 @@ describe("DataTable", () => {
       <DataTable
         columns={sampleColumns}
         data={sampleData}
-        moreContentComponent={MoreContent as any}
+        moreContentComponent={MoreContent as unknown as DataTableProps["moreContentComponent"]}
       />
     );
     expect(toJSON()).toMatchSnapshot();
@@ -348,4 +349,178 @@ describe("DataTable", () => {
       });
     }
   });
+
+  it("renders with customColumnComponentMap", () => {
+    const CustomCell = ({cellData}: {cellData: {value: unknown}; column: unknown}) => (
+      <Text>Custom: {String(cellData.value)}</Text>
+    );
+    const customColumns = [
+      {columnType: "custom", title: "Custom Col", width: 150},
+      {columnType: "text", title: "Name", width: 100},
+    ];
+    const customData = [[{value: "A"}, {value: "Bob"}]];
+    const {getByText} = renderWithTheme(
+      <DataTable
+        columns={customColumns}
+        customColumnComponentMap={{custom: CustomCell} as DataTableCustomComponentMap}
+        data={customData}
+      />
+    );
+    expect(getByText("Custom: A")).toBeTruthy();
+  });
+
+  it("handleSort cycles through asc, desc, and clear", () => {
+    const sortableColumns = [
+      {columnType: "text", sortable: true, title: "Name", width: 150},
+      {columnType: "text", sortable: false, title: "Age", width: 100},
+    ];
+    const setSortColumn = mock((_val: unknown) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}, {value: "28"}]]}
+        setSortColumn={setSortColumn}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortButton = pressables.find((p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16);
+    expect(sortButton).toBeTruthy();
+
+    // First press: asc
+    act(() => {
+      sortButton!.props.onPress();
+    });
+    expect(setSortColumn).toHaveBeenCalledWith({column: 0, direction: "asc"});
+  });
+
+  it("handleSort from asc to desc", () => {
+    const sortableColumns = [{columnType: "text", sortable: true, title: "Name", width: 150}];
+    const setSortColumn = mock((_val: unknown) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}]]}
+        setSortColumn={setSortColumn}
+        sortColumn={{column: 0, direction: "asc"}}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortButton = pressables.find((p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16);
+
+    act(() => {
+      sortButton!.props.onPress();
+    });
+    expect(setSortColumn).toHaveBeenCalledWith({column: 0, direction: "desc"});
+  });
+
+  it("handleSort from desc clears sort", () => {
+    const sortableColumns = [{columnType: "text", sortable: true, title: "Name", width: 150}];
+    const setSortColumn = mock((_val: unknown) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}]]}
+        setSortColumn={setSortColumn}
+        sortColumn={{column: 0, direction: "desc"}}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortButton = pressables.find((p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16);
+
+    act(() => {
+      sortButton!.props.onPress();
+    });
+    expect(setSortColumn).toHaveBeenCalledWith(undefined);
+  });
+
+  it("handleSort does nothing for non-sortable column", () => {
+    const columns = [{columnType: "text", sortable: false, title: "Name", width: 150}];
+    const setSortColumn = mock((_val: unknown) => {});
+    const {toJSON} = renderWithTheme(
+      <DataTable columns={columns} data={[[{value: "Alice"}]]} setSortColumn={setSortColumn} />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("handleScroll syncs header and body scroll positions", () => {
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable columns={sampleColumns} data={sampleData} pinnedColumns={1} />
+    );
+
+    const {ScrollView: ScrollViewComp} = require("react-native");
+    const scrollViews = UNSAFE_getAllByType(ScrollViewComp);
+    const horizontalScrollViews = scrollViews.filter(
+      (sv: {props: {horizontal?: boolean}}) => sv.props.horizontal
+    );
+
+    if (horizontalScrollViews.length >= 2) {
+      // Trigger scroll on the body scroll view
+      act(() => {
+        horizontalScrollViews[1].props.onScroll({
+          nativeEvent: {contentOffset: {x: 50, y: 0}},
+        });
+      });
+
+      // Trigger scroll on the header scroll view
+      act(() => {
+        horizontalScrollViews[0].props.onScroll({
+          nativeEvent: {contentOffset: {x: 100, y: 0}},
+        });
+      });
+    }
+  });
+
+  it("renders with cell highlight color", () => {
+    const highlightData = [[{highlight: "primary", value: "Highlighted"}]];
+    const highlightColumns = [{columnType: "text", title: "Col", width: 150}];
+    const {toJSON} = renderWithTheme(<DataTable columns={highlightColumns} data={highlightData} />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("opens and closes more content modal", () => {
+    const MoreContent = ({rowIndex}: {rowIndex: number}) => <Text>Row {rowIndex} details</Text>;
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sampleColumns}
+        data={sampleData}
+        moreContentComponent={MoreContent as unknown as DataTableProps["moreContentComponent"]}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    // Find the "Open modal" button (MoreButtonCell)
+    const moreButton = pressables.find(
+      (p: {props: {accessibilityLabel?: string}}) => p.props.accessibilityLabel === "Open modal"
+    );
+
+    if (moreButton) {
+      act(() => {
+        moreButton.props.onPress();
+      });
+    }
+  });
+
+  it("handleSort with no setSortColumn is a no-op", () => {
+    const sortableColumns = [{columnType: "text", sortable: true, title: "Name", width: 150}];
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable columns={sortableColumns} data={[[{value: "Alice"}]]} />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortButton = pressables.find((p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16);
+
+    if (sortButton) {
+      act(() => {
+        sortButton.props.onPress();
+      });
+    }
+  });
 });