@terreno/ui 0.13.3 → 0.14.1

package/src/DecimalRangeActionSheet.test.tsx

@@ -94,4 +94,32 @@ describe("DecimalRangeActionSheet", () => {
     });
     expect(handleChange).toHaveBeenCalled();
   });
+
+  it("invokes actionSheetRef.setModalVisible(false) when Close is pressed", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <DecimalRangeActionSheet
+          actionSheetRef={actionSheetRef}
+          max={10}
+          min={0}
+          onChange={() => {}}
+          value="5.5"
+        />
+      </ThemeProvider>
+    );
+
+    // Spy on the ActionSheet instance's setModalVisible after React assigns the ref
+    const spy = mock(() => {});
+    if (actionSheetRef.current) {
+      actionSheetRef.current.setModalVisible = spy;
+    }
+
+    const closeButtons = UNSAFE_getAllByProps({text: "Close"});
+    const buttonOnClick = closeButtons[0].props.onClick as () => void;
+    act(() => {
+      buttonOnClick();
+    });
+    expect(spy).toHaveBeenCalledWith(false);
+  });
 });

package/src/ErrorBoundary.test.tsx

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {afterAll, beforeAll, describe, expect, it, mock, spyOn} from "bun:test";
 import React from "react";
 

package/src/HeightActionSheet.test.tsx

@@ -3,6 +3,7 @@ import {act, render} from "@testing-library/react-native";
 import {createRef} from "react";
 
 import type {ActionSheet} from "./ActionSheet";
+import {Button} from "./Button";
 import {HeightActionSheet} from "./HeightActionSheet";
 import {ThemeProvider} from "./Theme";
 
@@ -86,4 +87,19 @@ describe("HeightActionSheet", () => {
     });
     expect(handleChange).toHaveBeenCalled();
   });
+
+  it("calls the Done button onClick handler directly", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const {UNSAFE_root} = render(
+      <ThemeProvider>
+        <HeightActionSheet actionSheetRef={actionSheetRef} onChange={() => {}} value="60" />
+      </ThemeProvider>
+    );
+    const buttons = UNSAFE_root.findAllByType(Button as never);
+    const doneBtn = buttons.find((b) => b.props.text === "Done");
+    expect(doneBtn).toBeTruthy();
+    act(() => {
+      doneBtn!.props.onClick();
+    });
+  });
 });

package/src/HeightField.test.tsx

@@ -1,8 +1,9 @@
-import {afterEach, beforeEach, describe, expect, it, mock} from "bun:test";
+import {afterEach, beforeEach, describe, expect, it, mock, spyOn} from "bun:test";
 import {fireEvent} from "@testing-library/react-native";
 import {HeightActionSheet} from "./HeightActionSheet";
 import {HeightField} from "./HeightField";
 import {renderWithTheme} from "./test-utils";
+import * as Utilities from "./Utilities";
 
 describe("HeightField", () => {
   let mockOnChange: ReturnType<typeof mock>;
@@ -274,3 +275,107 @@ describe("HeightField - Android platform", () => {
     expect(onChange).toHaveBeenCalledWith("63");
   });
 });
+
+describe("HeightField - Desktop platform", () => {
+  const {Platform} = require("react-native") as {Platform: {OS: string}};
+  const originalOS = Platform.OS;
+  let isNativeSpy: ReturnType<typeof spyOn>;
+
+  beforeEach(() => {
+    Platform.OS = "web";
+    isNativeSpy = spyOn(Utilities, "isNative").mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    Platform.OS = originalOS;
+    isNativeSpy.mockRestore();
+  });
+
+  it("fires handleBlur on HeightSegment and calls onChange", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent(feetInput, "blur");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("handles text input change in feet segment", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent.changeText(feetInput, "6");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("handles clearing feet input to empty", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent.changeText(feetInput, "");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("calls onChange with empty when both feet and inches are cleared", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent.changeText(feetInput, "");
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("renders HeightSegment in disabled state", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(
+      <HeightField disabled onChange={onChange} value="70" />
+    );
+    expect(getByLabelText("ft input")).toBeTruthy();
+  });
+
+  it("renders HeightSegment with error text", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(
+      <HeightField errorText="Required" onChange={onChange} value="70" />
+    );
+    expect(getByLabelText("ft input")).toBeTruthy();
+  });
+
+  it("fires focus on feet segment", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent(feetInput, "focus");
+    expect(feetInput).toBeTruthy();
+  });
+
+  it("fires focus on inches segment", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const inInput = getByLabelText("in input");
+    fireEvent(inInput, "focus");
+    expect(inInput).toBeTruthy();
+  });
+
+  it("handles text input change in inches segment", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const inInput = getByLabelText("in input");
+    fireEvent.changeText(inInput, "3");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("handles non-numeric input in HeightSegment", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent.changeText(feetInput, "abc");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("clamps to max value in HeightSegment handleChange", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent.changeText(feetInput, "99");
+    expect(feetInput).toBeTruthy();
+  });
+});

package/src/HeightField.tsx

@@ -1,6 +1,7 @@
 import {type FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
 import {Platform, Pressable, type StyleProp, TextInput, View} from "react-native";
 
+import type {ActionSheet} from "./ActionSheet";
 import {Box} from "./Box";
 import type {HeightFieldProps, TextStyleWithOutline} from "./Common";
 import {FieldError, FieldHelperText, FieldTitle} from "./fieldElements";
@@ -154,7 +155,7 @@ export const HeightField: FC<HeightFieldProps> = ({
   max,
 }) => {
   const {theme} = useTheme();
-  const actionSheetRef: React.RefObject<any> = useRef(null);
+  const actionSheetRef = useRef<ActionSheet | null>(null);
   const isMobileOrNative = isMobileDevice() || isNative();
 
   const minInches = min ?? DEFAULT_MIN_INCHES;

package/src/Hyperlink.tsx

@@ -36,73 +36,94 @@
 
 import * as mdurl from "mdurl";
 import React from "react";
-import {Linking, Platform, Text, View} from "react-native";
+import {Linking, Platform, type StyleProp, Text, type TextStyle, View} from "react-native";
 
 import type {HyperlinkProps} from "./Common";
 
-const linkifyLib = require("linkify-it")();
+interface LinkifyMatch {
+  index: number;
+  lastIndex: number;
+  raw: string;
+  schema: string;
+  text: string;
+  url: string;
+}
+
+interface LinkifyItLike {
+  pretest: (text: string) => boolean;
+  test: (text: string) => boolean;
+  match: (text: string) => LinkifyMatch[] | null;
+}
+
+const linkifyLib: LinkifyItLike = require("linkify-it")();
 
 const {OS} = Platform;
 
 // Leaving this as a class component because it was easier to handle the `parse(this)` in
 // `render()`
 class HyperlinkComponent extends React.Component<HyperlinkProps> {
-  isTextNested = (component: any) => {
+  isTextNested = (component: React.ReactElement) => {
     if (!React.isValidElement(component)) throw new Error("Invalid component");
-    const {type: {displayName} = {} as any} = component;
+    const componentType = (component.type as {displayName?: string} | undefined) ?? {};
+    const {displayName} = componentType;
     if (displayName !== "Text") throw new Error("Not a Text component");
-    return typeof (component.props as any).children !== "string";
+    return typeof (component.props as {children?: unknown}).children !== "string";
   };
 
-  linkify = (component: any) => {
+  linkify = (component: React.ReactElement<{children: string; style?: unknown}>) => {
     const linkifyIt = this.props.linkify || linkifyLib;
 
     if (!linkifyIt.pretest(component.props.children) || !linkifyIt.test(component.props.children))
       return component;
 
-    const elements = [];
+    const elements: React.ReactNode[] = [];
     let _lastIndex = 0;
 
-    const {key: _key, ref: _ref, ...componentProps} = component.props;
+    const {key: _key, ref: _ref, ...componentProps} = component.props as Record<string, unknown>;
 
     try {
-      linkifyIt.match(component.props.children).forEach(({index, lastIndex, text, url}: any) => {
-        const nonLinkedText = component.props.children.substring(_lastIndex, index);
-        nonLinkedText && elements.push(nonLinkedText);
-        _lastIndex = lastIndex;
-        if (this.props.linkText)
-          text =
-            typeof this.props.linkText === "function"
-              ? this.props.linkText(url)
-              : this.props.linkText;
-
-        const clickHandlerProps: any = {};
-        if (OS !== "web") {
-          if (this.props.onLongPress) {
-            clickHandlerProps.onLongPress = () => (this.props as any).onLongPress(url, text);
+      linkifyIt
+        .match(component.props.children)
+        ?.forEach(({index, lastIndex, text, url}: LinkifyMatch) => {
+          const nonLinkedText = component.props.children.substring(_lastIndex, index);
+          nonLinkedText && elements.push(nonLinkedText);
+          _lastIndex = lastIndex;
+          if (this.props.linkText)
+            text =
+              typeof this.props.linkText === "function"
+                ? this.props.linkText(url)
+                : this.props.linkText;
+
+          const clickHandlerProps: {onPress?: () => void; onLongPress?: () => void} = {};
+          if (OS !== "web") {
+            if (this.props.onLongPress) {
+              clickHandlerProps.onLongPress = () => this.props.onLongPress?.(url, text);
+            }
+          }
+          if (this.props.onPress) {
+            // The HyperlinkProps onPress signature is (url) => void per Common.ts, but this forked
+            // component invokes it with both url and text. Cast to avoid arity mismatch.
+            const onPressFn = this.props.onPress as (url: string, text: string) => void;
+            clickHandlerProps.onPress = () => onPressFn(url, text);
           }
-        }
-        if (this.props.onPress) {
-          clickHandlerProps.onPress = () => (this.props as any).onPress(url, text);
-        }
-
-        let injected: any = {};
-        if (this.props.injectViewProps) {
-          injected = this.props.injectViewProps(url);
-        }
-
-        elements.push(
-          <Text
-            {...componentProps}
-            {...clickHandlerProps}
-            key={url + index}
-            style={[component.props.style, this.props.linkStyle]}
-            {...injected}
-          >
-            {text}
-          </Text>
-        );
-      });
+
+          let injected: Record<string, unknown> = {};
+          if (this.props.injectViewProps) {
+            injected = this.props.injectViewProps(url);
+          }
+
+          elements.push(
+            <Text
+              {...componentProps}
+              {...clickHandlerProps}
+              key={url + index}
+              style={[component.props.style, this.props.linkStyle]}
+              {...injected}
+            >
+              {text}
+            </Text>
+          );
+        });
       elements.push(
         component.props.children.substring(_lastIndex, component.props.children.length)
       );
@@ -112,11 +133,13 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
     }
   };
 
-  parse = (component: any): React.ReactElement => {
-    const {props: {children} = {} as any} = component || {};
+  parse = (component: React.ReactElement): React.ReactElement => {
+    const props =
+      (component?.props as {children?: React.ReactNode; style?: StyleProp<TextStyle>}) ?? {};
+    const {children} = props;
     if (!children) return component;
 
-    const {key: _key, ref: _ref, ...componentProps} = component.props;
+    const {key: _key, ref: _ref, ...componentProps} = component.props as Record<string, unknown>;
 
     const linkifyIt = this.props.linkify || linkifyLib;
 
@@ -124,15 +147,19 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
       component,
       componentProps,
       React.Children.map(children, (child) => {
-        const {type: {displayName} = {} as any} = child || {};
+        const childType = (child as React.ReactElement | null)?.type as
+          | {displayName?: string}
+          | undefined;
+        const displayName = childType?.displayName;
         if (typeof child === "string" && linkifyIt.pretest(child))
           return this.linkify(
-            <Text {...componentProps} style={component.props.style}>
+            <Text {...componentProps} style={props.style}>
               {child}
             </Text>
           );
-        if (displayName === "Text" && !this.isTextNested(child)) return this.linkify(child);
-        return this.parse(child);
+        if (displayName === "Text" && !this.isTextNested(child as React.ReactElement))
+          return this.linkify(child as React.ReactElement<{children: string; style?: unknown}>);
+        return this.parse(child as React.ReactElement);
       })
     );
   };
@@ -148,7 +175,11 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
       <View {...viewProps} style={this.props.style}>
         {!this.props.onPress && !this.props.onLongPress && !this.props.linkStyle
           ? this.props.children
-          : (this.parse(this).props as {children?: React.ReactNode}).children}
+          : (
+              this.parse(this as unknown as React.ReactElement).props as {
+                children?: React.ReactNode;
+              }
+            ).children}
       </View>
     );
   }

package/src/IconButton.tsx

@@ -159,7 +159,7 @@ const IconButtonComponent: FC<IconButtonProps> = ({
             display: "flex",
             height: 12,
             justifyContent: "center",
-            padding: theme.spacing.xs as any,
+            padding: theme.spacing.xs,
             position: "absolute",
             right: 0,
             width: 12,

package/src/ImageBackground.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import {ImageBackground as ImageBackgroundNative} from "react-native";
+import {
+  ImageBackground as ImageBackgroundNative,
+  type ImageBackgroundProps as NativeImageBackgroundProps,
+} from "react-native";
 
-interface ImageBackgroundProps {
-  children?: any;
-  style?: any;
-  source: any;
-}
+type ImageBackgroundProps = NativeImageBackgroundProps;
 
 export class ImageBackground extends React.Component<ImageBackgroundProps, {}> {
   render() {

package/src/MediaQuery.ts

@@ -1,6 +1,6 @@
 import {Dimensions} from "react-native";
 
-export function mediaQuery(): "xs" | "sm" | "md" | "lg" {
+export const mediaQuery = (): "xs" | "sm" | "md" | "lg" => {
   const width = Dimensions.get("window").width;
   if (width < 576) {
     return "xs";
@@ -11,9 +11,9 @@ export function mediaQuery(): "xs" | "sm" | "md" | "lg" {
   } else {
     return "lg";
   }
-}
+};
 
-export function mediaQueryLargerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
+export const mediaQueryLargerThan = (size: "xs" | "sm" | "md" | "lg"): boolean => {
   const media = mediaQuery();
   if (size === "xs") {
     return true;
@@ -25,9 +25,9 @@ export function mediaQueryLargerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
     return ["lg"].includes(media);
   }
   return false;
-}
+};
 
-export function mediaQuerySmallerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
+export const mediaQuerySmallerThan = (size: "xs" | "sm" | "md" | "lg"): boolean => {
   const media = mediaQuery();
   if (size === "lg") {
     return true;
@@ -39,8 +39,8 @@ export function mediaQuerySmallerThan(size: "xs" | "sm" | "md" | "lg"): boolean
     return ["xs"].includes(media);
   }
   return false;
-}
+};
 
-export function isMobileDevice(): boolean {
+export const isMobileDevice = (): boolean => {
   return !mediaQueryLargerThan("sm");
-}
+};

package/src/MobileAddressAutoComplete.test.tsx

@@ -1,5 +1,5 @@
 import {describe, expect, it, mock} from "bun:test";
-import {fireEvent} from "@testing-library/react-native";
+import {act, fireEvent} from "@testing-library/react-native";
 import {forwardRef, useImperativeHandle, useRef} from "react";
 import {Pressable, Text, View} from "react-native";
 
@@ -185,4 +185,23 @@ describe("MobileAddressAutocomplete", () => {
     expect(wrapper).toBeTruthy();
     expect(() => wrapper.props.onPress?.()).not.toThrow();
   });
+
+  it("fires handleAddressChange from the fallback TextField onChange", () => {
+    const handleAddressChange = mock(() => {});
+    const {TextField} = require("./TextField") as {
+      TextField: React.ComponentType<{onChange?: (v: string) => void}>;
+    };
+    const {UNSAFE_getByType} = renderWithTheme(
+      <MobileAddressAutocomplete
+        handleAddressChange={handleAddressChange}
+        handleAutoCompleteChange={() => {}}
+        inputValue=""
+      />
+    );
+    const textField = UNSAFE_getByType(TextField);
+    act(() => {
+      textField.props.onChange?.("789 Elm St");
+    });
+    expect(handleAddressChange).toHaveBeenCalledWith("789 Elm St");
+  });
 });

package/src/ModalSheet.test.tsx

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock} from "bun:test";
 import {forwardRef, useRef} from "react";
 import {Text, View} from "react-native";
@@ -14,11 +15,6 @@ mock.module("react-native-modalize", () => ({
   )),
 }));
 
-// Mock react-native-portalize
-mock.module("react-native-portalize", () => ({
-  Portal: ({children}: {children: React.ReactNode}) => <View testID="portal">{children}</View>,
-}));
-
 describe("ModalSheet", () => {
   it("renders correctly with children", () => {
     const {toJSON} = renderWithTheme(

package/src/ModalSheet.tsx

@@ -1,14 +1,23 @@
-import {forwardRef, useEffect, useRef} from "react";
+import {
+  forwardRef,
+  type MutableRefObject,
+  type ReactNode,
+  type Ref,
+  useEffect,
+  useRef,
+} from "react";
 import {Animated} from "react-native";
 import {Modalize} from "react-native-modalize";
 import {Portal} from "react-native-portalize";
 
-export const useCombinedRefs = (...refs: any) => {
-  const targetRef = useRef<any>(null);
+export const useCombinedRefs = <T,>(
+  ...refs: Array<Ref<T> | undefined>
+): MutableRefObject<T | null> => {
+  const targetRef = useRef<T | null>(null);
 
   // Iterate through the refs array, and set the ref.current value to the targetRef
   useEffect(() => {
-    refs.forEach((ref: any) => {
+    refs.forEach((ref) => {
       if (!ref) {
         return;
       }
@@ -16,7 +25,7 @@ export const useCombinedRefs = (...refs: any) => {
       if (typeof ref === "function") {
         ref(targetRef.current);
       } else {
-        ref.current = targetRef.current;
+        (ref as MutableRefObject<T | null>).current = targetRef.current;
       }
     });
   }, [refs]);
@@ -25,7 +34,7 @@ export const useCombinedRefs = (...refs: any) => {
 };
 
 interface Props {
-  children: any;
+  children: ReactNode;
 }
 
 export const SimpleContent = forwardRef((props: Props, ref) => {

package/src/NumberField.test.tsx

@@ -110,6 +110,20 @@ describe("NumberField", () => {
     expect(queryByText(/must be/)).toBeNull();
   });
 
+  it("shows decimal error for non-numeric characters in decimal type", () => {
+    const {getByText} = renderWithTheme(
+      <NumberField label="Decimal" onChange={noOp} type="decimal" value="12abc" />
+    );
+    expect(getByText("Value must be a decimal")).toBeTruthy();
+  });
+
+  it("shows decimal error for multiple decimal points", () => {
+    const {getByText} = renderWithTheme(
+      <NumberField label="Decimal" onChange={noOp} type="decimal" value="1.2.3" />
+    );
+    expect(getByText("Value must be a decimal")).toBeTruthy();
+  });
+
   it("syncs value when prop changes", async () => {
     const handleChange = mock((_value: string): void => {});
     const {getByDisplayValue, unmount} = renderWithTheme(

package/src/OfflineBanner.test.tsx

@@ -0,0 +1,70 @@
+import {describe, expect, it} from "bun:test";
+
+import {OfflineBanner} from "./OfflineBanner";
+import {renderWithTheme} from "./test-utils";
+
+describe("OfflineBanner", () => {
+  it("renders nothing when online and not syncing", () => {
+    const {toJSON} = renderWithTheme(
+      <OfflineBanner isOnline={true} isSyncing={false} queueLength={0} />
+    );
+    expect(toJSON()).toBeNull();
+  });
+
+  it("shows offline banner when not online", () => {
+    const {getByTestId, getByText} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={false} queueLength={0} />
+    );
+    expect(getByTestId("offline-banner")).toBeTruthy();
+    expect(getByText("You're offline.")).toBeTruthy();
+  });
+
+  it("shows queue count in offline banner text", () => {
+    const {getByText} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={false} queueLength={5} />
+    );
+    expect(
+      getByText("You're offline. 5 pending changes will sync when you reconnect.")
+    ).toBeTruthy();
+  });
+
+  it("shows singular 'change' for 1 pending", () => {
+    const {getByText} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={false} queueLength={1} />
+    );
+    expect(
+      getByText("You're offline. 1 pending change will sync when you reconnect.")
+    ).toBeTruthy();
+  });
+
+  it("shows plural 'changes' for multiple pending", () => {
+    const {getByText} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={false} queueLength={3} />
+    );
+    expect(
+      getByText("You're offline. 3 pending changes will sync when you reconnect.")
+    ).toBeTruthy();
+  });
+
+  it("shows syncing banner when isSyncing is true", () => {
+    const {getByTestId, getByText} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={true} queueLength={2} />
+    );
+    expect(getByTestId("offline-banner")).toBeTruthy();
+    expect(getByText("Syncing offline changes...")).toBeTruthy();
+  });
+
+  it("uses custom testID prop", () => {
+    const {getByTestId} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={false} queueLength={0} testID="custom-banner" />
+    );
+    expect(getByTestId("custom-banner")).toBeTruthy();
+  });
+
+  it("uses custom testID prop while syncing", () => {
+    const {getByTestId} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={true} queueLength={2} testID="custom-banner" />
+    );
+    expect(getByTestId("custom-banner")).toBeTruthy();
+  });
+});