blinkbitcoin
diff --git a/‎__mocks__/react-native-screenguard.js‎
Lines changed: 5 additions & 0 deletions b/‎__mocks__/react-native-screenguard.js‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎__tests__/components/backup-nudge-banner.spec.tsx‎
Lines changed: 99 additions & 0 deletions b/‎__tests__/components/backup-nudge-banner.spec.tsx‎
Lines changed: 99 additions & 0 deletions
diff --git a/‎__tests__/components/backup-nudge-modal.spec.tsx‎
Lines changed: 153 additions & 0 deletions b/‎__tests__/components/backup-nudge-modal.spec.tsx‎
Lines changed: 153 additions & 0 deletions
diff --git a/‎__tests__/components/info-banner.spec.tsx‎
Lines changed: 42 additions & 5 deletions b/‎__tests__/components/info-banner.spec.tsx‎
Lines changed: 42 additions & 5 deletions
@@ -0,0 +1,5 @@
+module.exports = {
+  initSettings: jest.fn().mockResolvedValue(undefined),
+  register: jest.fn().mockResolvedValue(undefined),
+  unregister: jest.fn().mockResolvedValue(undefined),
+}
@@ -0,0 +1,99 @@
+import React from "react"
+import { render, fireEvent } from "@testing-library/react-native"
+
+import { BackupNudgeBanner } from "@app/components/backup-nudge-banner"
+
+const mockNavigate = jest.fn()
+
+jest.mock("@react-navigation/native", () => ({
+  ...jest.requireActual("@react-navigation/native"),
+  useNavigation: () => ({ navigate: mockNavigate }),
+}))
+
+jest.mock("@rn-vui/themed", () => {
+  const colors = {
+    grey2: "#999",
+    grey5: "#f5f5f5",
+    primary: "#007",
+    black: "#000",
+    white: "#fff",
+  }
+  return {
+    makeStyles:
+      (fn: (theme: { colors: typeof colors }) => Record<string, object>) => () =>
+        fn({ colors }),
+    Text: ({ children, ...props }: { children: React.ReactNode }) =>
+      React.createElement("Text", props, children),
+    useTheme: () => ({ theme: { colors } }),
+  }
+})
+
+jest.mock("@app/components/atomic/galoy-icon", () => ({
+  GaloyIcon: () => null,
+}))
+
+jest.mock("@app/components/atomic/galoy-icon-button", () => ({
+  GaloyIconButton: ({ onPress }: { onPress: () => void }) =>
+    React.createElement("Pressable", { onPress, testID: "dismiss-button" }),
+}))
+
+jest.mock("@app/components/atomic/galoy-primary-button", () => ({
+  GaloyPrimaryButton: ({ onPress, title }: { onPress: () => void; title: string }) =>
+    React.createElement(
+      "Pressable",
+      { onPress, testID: "cta-button" },
+      React.createElement("Text", {}, title),
+    ),
+}))
+
+jest.mock("@app/utils/testProps", () => ({
+  testProps: (id: string) => ({ testID: id }),
+}))
+
+jest.mock("@app/i18n/i18n-react", () => ({
+  useI18nContext: () => ({
+    LL: {
+      BackupNudge: {
+        title: () => "Your funds are at risk",
+        description: () => "Secure your wallet now. It only takes a minute.",
+        cta: () => "Secure wallet",
+      },
+    },
+  }),
+}))
+
+describe("BackupNudgeBanner", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it("renders title and description", () => {
+    const { getByText } = render(<BackupNudgeBanner onDismiss={jest.fn()} />)
+
+    expect(getByText("Your funds are at risk")).toBeTruthy()
+    expect(getByText("Secure your wallet now. It only takes a minute.")).toBeTruthy()
+  })
+
+  it("renders CTA button with correct label", () => {
+    const { getByText } = render(<BackupNudgeBanner onDismiss={jest.fn()} />)
+
+    expect(getByText("Secure wallet")).toBeTruthy()
+  })
+
+  it("calls onDismiss when dismiss button pressed", () => {
+    const onDismiss = jest.fn()
+    const { getByTestId } = render(<BackupNudgeBanner onDismiss={onDismiss} />)
+
+    fireEvent.press(getByTestId("dismiss-button"))
+
+    expect(onDismiss).toHaveBeenCalledTimes(1)
+  })
+
+  it("navigates to backup method screen on CTA press", () => {
+    const { getByTestId } = render(<BackupNudgeBanner onDismiss={jest.fn()} />)
+
+    fireEvent.press(getByTestId("cta-button"))
+
+    expect(mockNavigate).toHaveBeenCalledWith("sparkBackupMethodScreen")
+  })
+})
@@ -0,0 +1,153 @@
+import React from "react"
+import { render, fireEvent } from "@testing-library/react-native"
+
+import { BackupNudgeModal } from "@app/components/backup-nudge-modal"
+
+const mockNavigate = jest.fn()
+
+jest.mock("@react-navigation/native", () => ({
+  ...jest.requireActual("@react-navigation/native"),
+  useNavigation: () => ({ navigate: mockNavigate }),
+}))
+
+jest.mock("@rn-vui/themed", () => {
+  const colors = {
+    grey0: "#ccc",
+    grey2: "#999",
+    grey5: "#f5f5f5",
+    primary: "#fc5805",
+    black: "#000",
+    white: "#fff",
+  }
+  return {
+    makeStyles:
+      (fn: (...args: unknown[]) => Record<string, object>) => (props?: unknown) =>
+        fn({ colors }, props ?? {}),
+    Text: ({ children, ...props }: { children: React.ReactNode }) =>
+      React.createElement("Text", props, children),
+    useTheme: () => ({ theme: { colors, mode: "light" } }),
+  }
+})
+
+const mockGaloyIcon = jest.fn<null, [Record<string, unknown>]>(() => null)
+
+jest.mock("@app/components/atomic/galoy-icon", () => ({
+  GaloyIcon: (props: Record<string, unknown>) => {
+    mockGaloyIcon(props)
+    return null
+  },
+}))
+
+jest.mock("@app/components/atomic/galoy-icon-button", () => ({
+  GaloyIconButton: ({ onPress }: { onPress: () => void }) =>
+    React.createElement("Pressable", { onPress, testID: "close-button" }),
+}))
+
+jest.mock("@app/components/atomic/galoy-primary-button", () => ({
+  GaloyPrimaryButton: ({ onPress, title }: { onPress: () => void; title: string }) =>
+    React.createElement(
+      "Pressable",
+      { onPress, testID: "secure-button" },
+      React.createElement("Text", {}, title),
+    ),
+}))
+
+jest.mock("@app/components/atomic/galoy-secondary-button", () => ({
+  GaloySecondaryButton: () => null,
+}))
+
+jest.mock("react-native-modal", () => {
+  const MockModal = ({
+    children,
+    isVisible,
+  }: {
+    children: React.ReactNode
+    isVisible: boolean
+  }) => (isVisible ? React.createElement("View", { testID: "modal" }, children) : null)
+  MockModal.displayName = "MockModal"
+  return MockModal
+})
+
+jest.mock("@app/utils/testProps", () => ({
+  testProps: (id: string) => ({ testID: id }),
+}))
+
+jest.mock("@app/i18n/i18n-react", () => ({
+  useI18nContext: () => ({
+    LL: {
+      BackupNudge: {
+        modalTitle: () => "Secure your funds",
+        modalDescription: () =>
+          "We highly recommend you backup your wallet to prevent a complete loss of funds in case you lose this device.",
+        secureMe: () => "Secure wallet",
+      },
+    },
+  }),
+}))
+
+describe("BackupNudgeModal", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it("renders when visible", () => {
+    const { getByTestId } = render(
+      <BackupNudgeModal isVisible={true} onClose={jest.fn()} />,
+    )
+
+    expect(getByTestId("modal")).toBeTruthy()
+  })
+
+  it("does not render when not visible", () => {
+    const { queryByTestId } = render(
+      <BackupNudgeModal isVisible={false} onClose={jest.fn()} />,
+    )
+
+    expect(queryByTestId("modal")).toBeNull()
+  })
+
+  it("renders title and description", () => {
+    const { getByText } = render(
+      <BackupNudgeModal isVisible={true} onClose={jest.fn()} />,
+    )
+
+    expect(getByText("Secure your funds")).toBeTruthy()
+    expect(
+      getByText(
+        "We highly recommend you backup your wallet to prevent a complete loss of funds in case you lose this device.",
+      ),
+    ).toBeTruthy()
+  })
+
+  it("renders secure wallet button", () => {
+    const { getByText } = render(
+      <BackupNudgeModal isVisible={true} onClose={jest.fn()} />,
+    )
+
+    expect(getByText("Secure wallet")).toBeTruthy()
+  })
+
+  it("navigates to backup method screen and closes on button press", () => {
+    const onClose = jest.fn()
+    const { getByTestId } = render(
+      <BackupNudgeModal isVisible={true} onClose={onClose} />,
+    )
+
+    fireEvent.press(getByTestId("secure-button"))
+
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(mockNavigate).toHaveBeenCalledWith("sparkBackupMethodScreen")
+  })
+
+  it("uses primary color for warning icon", () => {
+    render(<BackupNudgeModal isVisible={true} onClose={jest.fn()} />)
+
+    expect(mockGaloyIcon).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: "warning",
+        size: 52,
+        color: "#fc5805",
+      }),
+    )
+  })
+})
@@ -17,16 +17,53 @@ describe("InfoBanner", () => {
     expect(getByText("Banner content")).toBeTruthy()
   })
 
-  it("renders multiple children", () => {
+  it("renders title when provided", () => {
     const { getByText } = render(
+      <ContextForScreen>
+        <InfoBanner title="Warning title">
+          <Text>Content</Text>
+        </InfoBanner>
+      </ContextForScreen>,
+    )
+    expect(getByText("Warning title")).toBeTruthy()
+  })
+
+  it("renders icon when provided", () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <InfoBanner icon="warning" title="With icon">
+          <Text>Content</Text>
+        </InfoBanner>
+      </ContextForScreen>,
+    )
+    expect(getByText("With icon")).toBeTruthy()
+  })
+
+  it("renders without title and icon", () => {
+    const { getByText, queryByText } = render(
       <ContextForScreen>
         <InfoBanner>
-          <Text>First part</Text>
-          <Text>Second part</Text>
+          <Text>Only content</Text>
+        </InfoBanner>
+      </ContextForScreen>,
+    )
+    expect(getByText("Only content")).toBeTruthy()
+    expect(queryByText("Warning title")).toBeNull()
+  })
+
+  it("accepts custom iconColor and titleColor", () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <InfoBanner
+          title="Custom colors"
+          icon="warning"
+          iconColor="error"
+          titleColor="error"
+        >
+          <Text>Content</Text>
         </InfoBanner>
       </ContextForScreen>,
     )
-    expect(getByText("First part")).toBeTruthy()
-    expect(getByText("Second part")).toBeTruthy()
+    expect(getByText("Custom colors")).toBeTruthy()
   })
 })