From fd676f25efbd254995f8305ad217f8bd5912851f Mon Sep 17 00:00:00 2001
From: Julia Kartasheva <jkartasheva@adobe.com>
Date: Mon, 13 Oct 2025 14:15:39 -0700
Subject: [PATCH 1/2] adding unit tests for content card components

---
 packages/messaging/jest.config.js             |  10 +-
 .../src/ui/components/Button/Button.spec.tsx  |  23 +-
 .../ContentCardContainer.spec.tsx             | 162 ++++++++++---
 .../ContentCardContainer.tsx                  |   2 +
 .../ContentCardView/ContentCardView.spec.tsx  | 224 ++++++++++++++++++
 .../components/Pagination/Pagination.spec.tsx | 159 +++++++++++++
 .../components/UnreadIcon/UnreadIcon.spec.tsx | 129 +++++++++-
 7 files changed, 672 insertions(+), 37 deletions(-)
 create mode 100644 packages/messaging/src/ui/components/ContentCardView/ContentCardView.spec.tsx
 create mode 100644 packages/messaging/src/ui/components/Pagination/Pagination.spec.tsx

diff --git a/packages/messaging/jest.config.js b/packages/messaging/jest.config.js
index 6d8993ba..08b225d8 100644
--- a/packages/messaging/jest.config.js
+++ b/packages/messaging/jest.config.js
@@ -1,4 +1,12 @@
 module.exports = {
   preset: "react-native",
   testMatch: ["<rootDir>/src/ui/**/*.spec.tsx"],
-};
+  collectCoverage: true,
+  collectCoverageFrom: [
+    "<rootDir>/src/ui/components/**/*.{ts,tsx}", // only components
+    "!**/*.spec.tsx",
+    "!**/__tests__/**",
+  ],
+  coverageReporters: ["text", "text-summary", "html", "lcov"],
+  coverageDirectory: "<rootDir>/coverage",
+};
\ No newline at end of file
diff --git a/packages/messaging/src/ui/components/Button/Button.spec.tsx b/packages/messaging/src/ui/components/Button/Button.spec.tsx
index 8639e323..82382ba2 100644
--- a/packages/messaging/src/ui/components/Button/Button.spec.tsx
+++ b/packages/messaging/src/ui/components/Button/Button.spec.tsx
@@ -9,11 +9,11 @@
     ANY KIND, either express or implied. See the License for the specific
     language governing permissions and limitations under the License.
 */
+import { fireEvent, render, screen } from '@testing-library/react-native';
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react-native';
 import { Linking } from 'react-native';
-import Button from './Button';
 import { ThemeProvider } from '../../theme/ThemeProvider';
+import Button from './Button';
 
 // Mock Linking.openURL
 jest.spyOn(Linking, 'openURL');
@@ -157,6 +157,25 @@ describe('Button', () => {
       expect(Linking.openURL).toHaveBeenCalledWith(testUrl);
     });
 
+    it('should warn if openURL throws', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const testUrl = 'https://example.com';
+      (Linking.openURL as unknown as jest.Mock).mockImplementationOnce(() => {
+        throw new Error('open failed');
+      });
+
+      render(<Button title="Link" actionUrl={testUrl} />);
+      const button = screen.getByText('Link');
+
+      expect(() => fireEvent.press(button)).not.toThrow();
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining(`Failed to open URL: ${testUrl}`),
+        expect.any(Error)
+      );
+
+      warnSpy.mockRestore();
+    });
+
     it('should not try to open URL when actionUrl is not provided', () => {
       render(<Button title="No Link" onPress={mockOnPress} />);
 
diff --git a/packages/messaging/src/ui/components/ContentCardContainer/ContentCardContainer.spec.tsx b/packages/messaging/src/ui/components/ContentCardContainer/ContentCardContainer.spec.tsx
index 4c335ee8..ac19a6a5 100644
--- a/packages/messaging/src/ui/components/ContentCardContainer/ContentCardContainer.spec.tsx
+++ b/packages/messaging/src/ui/components/ContentCardContainer/ContentCardContainer.spec.tsx
@@ -10,9 +10,10 @@
     language governing permissions and limitations under the License.
 */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react-native';
+import React from 'react';
 import { Dimensions, Text } from 'react-native';
+import EmptyState from './EmptyState';
 import { ContentCardContainer } from './ContentCardContainer';
 
 // Mock hooks used by the container
@@ -68,44 +69,143 @@ describe('ContentCardContainer', () => {
     jest.spyOn(Dimensions, 'get').mockReturnValue({ width: 400, height: 800, scale: 2, fontScale: 2 } as any);
   });
 
-  it('renders loading state', () => {
-    (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: null });
-    (useContentCardUI as jest.Mock).mockReturnValue({ content: undefined, isLoading: true, error: null });
 
-    const Loading = <Text>Loading...</Text> as any;
-    const CC: any = ContentCardContainer;
-    render(<CC surface={surface} LoadingComponent={Loading} />);
-    expect(screen.getByText('Loading...')).toBeTruthy();
+  describe('outer container states', () => {
+    it('renders loading state', () => {
+      (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: null });
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: undefined, isLoading: true, error: null });
+
+      const Loading = <Text>Loading...</Text> as any;
+      const CC: any = ContentCardContainer;
+      render(<CC surface={surface} LoadingComponent={Loading} />);
+      expect(screen.getByText('Loading...')).toBeTruthy();
+    });
+
+    it('renders error state', () => {
+      (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: new Error('x') });
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: undefined, isLoading: false, error: null });
+
+      const ErrorComp = <Text>Error!</Text> as any;
+      const CC: any = ContentCardContainer;
+      render(<CC surface={surface} ErrorComponent={ErrorComp} />);
+      expect(screen.getByText('Error!')).toBeTruthy();
+    });
+
+    it('renders fallback when no content yet', () => {
+      (useContentContainer as jest.Mock).mockReturnValue({ settings: undefined, isLoading: false, error: null });
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: undefined, isLoading: false, error: null });
+
+      const Fallback = <Text>Fallback</Text> as any;
+      const CC: any = ContentCardContainer;
+      render(<CC surface={surface} FallbackComponent={Fallback} />);
+      expect(screen.getByText('Fallback')).toBeTruthy();
+    });
+
+    it('renders outer LoadingComponent when container is loading', () => {
+      (useContentContainer as jest.Mock).mockReturnValue({ settings: undefined, isLoading: true, error: null });
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: undefined, isLoading: false, error: null });
+
+      const Loading = <Text testID="outer-loading">Loading outer...</Text> as any;
+      const CC: any = ContentCardContainer;
+      render(<CC surface={surface} LoadingComponent={Loading} />);
+      expect(screen.getByTestId('outer-loading')).toBeTruthy();
+    });
   });
 
-  it('renders error state', () => {
-    // Outer container handles ErrorComponent when useContentContainer has an error
-    (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: new Error('x') });
-    (useContentCardUI as jest.Mock).mockReturnValue({ content: undefined, isLoading: false, error: null });
-
-    const ErrorComp = <Text>Error!</Text> as any;
-    const CC: any = ContentCardContainer;
-    render(<CC surface={surface} ErrorComponent={ErrorComp} />);
-    expect(screen.getByText('Error!')).toBeTruthy();
+  describe('empty content rendering', () => {
+    it('renders empty state when content is empty', () => {
+      (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: null });
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: [], isLoading: false, error: null });
+
+      const CC: any = ContentCardContainer;
+      render(<CC surface={surface} />);
+      expect(screen.getByText('No Content Available')).toBeTruthy();
+    });
+
+    it('uses light image when colorScheme is null and falls back to default message', () => {
+      jest.spyOn(require('react-native'), 'useColorScheme').mockReturnValue(null);
+      const settings = {
+        ...baseSettings,
+        content: {
+          ...baseSettings.content,
+          emptyStateSettings: {
+            image: { light: { url: 'https://example.com/light-only.png' } }
+          } as any
+        }
+      };
+      (useContentContainer as jest.Mock).mockReturnValue({ settings, isLoading: false, error: null });
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: [], isLoading: false, error: null });
+
+      const CC: any = ContentCardContainer;
+      const { UNSAFE_getByType } = render(<CC surface={surface} />);
+      const empty = UNSAFE_getByType(EmptyState);
+      expect(empty.props.image).toBe('https://example.com/light-only.png');
+      expect(empty.props.text).toBe('No Content Available');
+    });
   });
 
-  it('renders fallback when no content yet', () => {
-    // Outer container handles FallbackComponent when settings are missing
-    (useContentContainer as jest.Mock).mockReturnValue({ settings: undefined, isLoading: false, error: null });
-    (useContentCardUI as jest.Mock).mockReturnValue({ content: undefined, isLoading: false, error: null });
+  describe('heading and layout', () => {
+    it('sets heading color based on color scheme: dark -> #FFFFFF', () => {
+      jest.spyOn(require('react-native'), 'useColorScheme').mockReturnValue('dark');
+      (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: null });
+      const template = { id: '1', type: 'SmallImage', data: { content: { title: { content: 'T' }, body: { content: 'B' }, image: { url: 'u' } } } };
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: [template], isLoading: false, error: null });
+      const CC: any = ContentCardContainer;
+      const { getByText } = render(<CC surface={surface} />);
+      const heading = getByText('Heading');
+      const styles = Array.isArray(heading.props.style) ? heading.props.style : [heading.props.style];
+      expect(styles.some((s: any) => s && s.color === '#FFFFFF')).toBe(true);
+    });
+  });
 
-    const Fallback = <Text>Fallback</Text> as any;
-    const CC: any = ContentCardContainer;
-    render(<CC surface={surface} FallbackComponent={Fallback} />);
-    expect(screen.getByText('Fallback')).toBeTruthy();
+  describe('inner container states', () => {
+    it('renders inner ErrorComponent when data hook errors', () => {
+      (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: null });
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: undefined, isLoading: false, error: new Error('inner') });
+
+      const ErrorComp = <Text testID="inner-error">Inner Error!</Text> as any;
+      const CC: any = ContentCardContainer;
+      render(<CC surface={surface} ErrorComponent={ErrorComp} />);
+      expect(screen.getByTestId('inner-error')).toBeTruthy();
+    });
+
+    it('uses provided EmptyComponent and passes empty state settings (inner)', () => {
+      (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: null });
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: [], isLoading: false, error: null });
+
+      const EmptyStub = ({ message }: any) => (
+        <Text testID="inner-empty">{message?.content}</Text>
+      );
+      const CC: any = ContentCardContainer;
+      render(<CC surface={surface} EmptyComponent={<EmptyStub />} />);
+      expect(screen.getByTestId('inner-empty')).toBeTruthy();
+      expect(screen.getByText('No Content Available')).toBeTruthy();
+    });
+
+    it('renders inner FallbackComponent when content is undefined and settings exist', () => {
+      (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: null });
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: undefined, isLoading: false, error: null });
+
+      const Fallback = <Text testID="inner-fallback">Inner Fallback</Text> as any;
+      const CC: any = ContentCardContainer;
+      render(<CC surface={surface} FallbackComponent={Fallback} />);
+      expect(screen.getByTestId('inner-fallback')).toBeTruthy();
+    });
   });
 
-  it('renders empty state when content is empty', () => {
-    (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: null });
-    (useContentCardUI as jest.Mock).mockReturnValue({ content: [], isLoading: false, error: null });
+  describe('renderItem passthrough', () => {
+    it('passes expected props to ContentCardView via renderItem (horizontal)', () => {
+      (useContentContainer as jest.Mock).mockReturnValue({ settings: baseSettings, isLoading: false, error: null });
+      const template = { id: '1', type: 'SmallImage', data: { content: { title: { content: 'T' }, body: { content: 'B' }, image: { url: 'u' } } } };
+      (useContentCardUI as jest.Mock).mockReturnValue({ content: [template], isLoading: false, error: null });
+
+      const CC: any = ContentCardContainer;
+      render(<CC surface={surface} />);
 
-    const CC: any = ContentCardContainer;
-    render(<CC surface={surface} />);
-    expect(screen.getByText('No Content Available')).toBeTruthy();
+      expect(mockContentCardView).toHaveBeenCalled();
+      const args = mockContentCardView.mock.calls[0][0];
+      expect(args.template).toEqual(template);
+      expect(args.style).toEqual(expect.arrayContaining([expect.anything()]));
+    });
   });
 });
\ No newline at end of file
diff --git a/packages/messaging/src/ui/components/ContentCardContainer/ContentCardContainer.tsx b/packages/messaging/src/ui/components/ContentCardContainer/ContentCardContainer.tsx
index d866498e..e3d080a3 100644
--- a/packages/messaging/src/ui/components/ContentCardContainer/ContentCardContainer.tsx
+++ b/packages/messaging/src/ui/components/ContentCardContainer/ContentCardContainer.tsx
@@ -138,6 +138,8 @@ export function ContentCardContainer<T extends ContentTemplate>({
       settings={settings}
       surface={surface}
       LoadingComponent={LoadingComponent}
+      ErrorComponent={ErrorComponent}
+      FallbackComponent={FallbackComponent}
       {...props}
     />
   );
diff --git a/packages/messaging/src/ui/components/ContentCardView/ContentCardView.spec.tsx b/packages/messaging/src/ui/components/ContentCardView/ContentCardView.spec.tsx
new file mode 100644
index 00000000..d9484009
--- /dev/null
+++ b/packages/messaging/src/ui/components/ContentCardView/ContentCardView.spec.tsx
@@ -0,0 +1,224 @@
+/*
+    Copyright 2025 Adobe. All rights reserved.
+    This file is licensed to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law
+    or agreed to in writing, software distributed under the License is
+    distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF
+    ANY KIND, either express or implied. See the License for the specific
+    language governing permissions and limitations under the License.
+*/
+
+import { fireEvent, render } from '@testing-library/react-native';
+import React from 'react';
+import { Image, Linking } from 'react-native';
+import MessagingEdgeEventType from '../../../models/MessagingEdgeEventType';
+import UnreadIcon from '../UnreadIcon/UnreadIcon';
+import { ContentCardView } from './ContentCardView';
+
+// Mock aspect ratio hook to a stable value
+jest.mock('../../hooks/useAspectRatio', () => ({ __esModule: true, default: () => 1.5 }));
+
+// Mock container settings (unread enabled)
+jest.mock('../../hooks/useContainerSettings', () => {
+  const fn = jest.fn(() => ({
+    content: {
+      isUnreadEnabled: true,
+      unread_indicator: { unread_bg: { clr: { light: '#EEE', dark: '#111' } } }
+    }
+  }));
+  return { __esModule: true, default: fn };
+});
+
+const makeTemplate = (overrides: Partial<any> = {}) => ({
+  id: 'card-1',
+  type: 'SmallImage',
+  isRead: false,
+  data: {
+    content: {
+      title: { content: 'Title' },
+      body: { content: 'Body' },
+      image: { url: 'https://example.com/img.png' },
+      dismissBtn: { style: 'close' },
+      actionUrl: 'https://adobe.com'
+    }
+  },
+  track: jest.fn(),
+  ...overrides,
+});
+
+describe('ContentCardView - rendering variants', () => {
+  it('renders SmallImage with title and body', () => {
+    const template = makeTemplate({ type: 'SmallImage' });
+    const { getByText } = render(
+      <ContentCardView template={template as any} />
+    );
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Body')).toBeTruthy();
+  });
+
+  it('falls back to SmallImage when variant and template.type are missing', () => {
+    const template = makeTemplate({ type: undefined as any });
+    // remove variant prop
+    const { getByText } = render(
+      <ContentCardView template={template as any} />
+    );
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Body')).toBeTruthy();
+  });
+
+  it('renders LargeImage with title, body, and buttons', () => {
+    const template = makeTemplate({
+      type: 'LargeImage',
+      data: {
+        content: {
+          title: { content: 'Title' },
+          body: { content: 'Body' },
+          image: { url: 'https://example.com/img.png' },
+          dismissBtn: { style: 'close' },
+          buttons: [
+            { id: 'btn1', text: { content: 'Go' }, actionUrl: 'https://example.com/go' },
+          ],
+        }
+      }
+    });
+
+    const { getByText } = render(
+      <ContentCardView template={template as any} />
+    );
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Body')).toBeTruthy();
+    // Button rendered from buttons map
+    expect(getByText('Go')).toBeTruthy();
+  });
+
+  it('renders ImageOnly without text sections but with image', () => {
+    const template = makeTemplate({ type: 'ImageOnly' });
+    const { queryByText, UNSAFE_getAllByType } = render(
+      <ContentCardView template={template as any} />
+    );
+    expect(queryByText('Title')).toBeNull();
+    expect(queryByText('Body')).toBeNull();
+    // Ensure an Image is rendered
+    const images = UNSAFE_getAllByType(Image);
+    expect(images.length).toBeGreaterThan(0);
+  });
+
+  it('uses darkUrl for images when in dark mode', () => {
+    const rn = require('react-native');
+    const colorSpy = jest.spyOn(rn, 'useColorScheme');
+    colorSpy.mockReturnValue('dark');
+
+    const template = makeTemplate({
+      data: { content: { image: { url: 'https://light.png', darkUrl: 'https://dark.png' }, title: { content: 'Title' }, body: { content: 'Body' }, dismissBtn: { style: 'close' } } }
+    });
+
+    const { UNSAFE_getAllByType } = render(
+      <ContentCardView template={template as any} />
+    );
+
+    const images = UNSAFE_getAllByType(Image);
+    expect(images[0].props.source.uri).toBe('https://dark.png');
+
+    colorSpy.mockRestore();
+  });
+
+  it('falls back gracefully for unknown variant (default case)', () => {
+    const template = makeTemplate({ type: 'UnknownVariant' as any });
+    const { getByText } = render(
+      <ContentCardView template={template as any} />
+    );
+    // Should still render content without throwing
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Body')).toBeTruthy();
+  });
+
+});
+
+describe('ContentCardView - interactions and tracking', () => {
+  it('does not crash if Linking.openURL throws (error case)', () => {
+    const openSpy = jest.spyOn(Linking, 'openURL').mockImplementationOnce(() => {
+      throw new Error('open failed');
+    });
+
+    const template = makeTemplate();
+    const listener = jest.fn();
+    const { getByTestId } = render(
+      <ContentCardView template={template as any} listener={listener} testID="card" />
+    );
+
+    expect(() => fireEvent.press(getByTestId('card'))).not.toThrow();
+    expect(openSpy).toHaveBeenCalled();
+    expect(listener).toHaveBeenCalledWith('onInteract', template);
+  });
+
+  it('onPress with no track and no actionUrl does not throw or open URL', () => {
+    const openSpy = jest.spyOn(Linking, 'openURL').mockClear();
+    const base = makeTemplate();
+    const tpl = JSON.parse(JSON.stringify(base));
+    tpl.track = undefined;
+    delete tpl.data.content.actionUrl;
+
+    const { getByTestId } = render(
+      <ContentCardView template={tpl as any} testID="card" />
+    );
+    expect(() => fireEvent.press(getByTestId('card'))).not.toThrow();
+    expect(openSpy).not.toHaveBeenCalled();
+  });
+
+  it('calls onDisplay once and tracks DISPLAY', () => {
+    const template = makeTemplate();
+    const listener = jest.fn();
+    render(<ContentCardView template={template as any} listener={listener} testID="card" />);
+    expect(listener).toHaveBeenCalledWith('onDisplay', template);
+    expect(template.track).toHaveBeenCalledWith(MessagingEdgeEventType.DISPLAY);
+  });
+
+  it('tracks INTERACT, marks read, and opens URL on press', () => {
+    const template = makeTemplate();
+    const listener = jest.fn();
+    const { getByTestId } = render(<ContentCardView template={template as any} listener={listener} testID="card" />);
+    fireEvent.press(getByTestId('card'));
+    expect(listener).toHaveBeenCalledWith('onInteract', template);
+    expect(template.track).toHaveBeenCalledWith('content_clicked', MessagingEdgeEventType.INTERACT, null);
+    expect(Linking.openURL).toHaveBeenCalledWith('https://adobe.com');
+    expect(template.isRead).toBe(true);
+  });
+
+  it('calls onDismiss, tracks DISMISS, and hides the card', () => {
+    const template = makeTemplate();
+    const listener = jest.fn();
+    const { queryByText, getByText } = render(
+      <ContentCardView template={template as any} listener={listener} />
+    );
+    // Dismiss button renders as 'x'
+    fireEvent.press(getByText('x'));
+    expect(listener).toHaveBeenCalledWith('onDismiss', template);
+    expect(template.track).toHaveBeenCalledWith(MessagingEdgeEventType.DISMISS);
+    // Card should no longer render title after dismiss
+    expect(queryByText('Title')).toBeNull();
+  });
+
+});
+
+describe('ContentCardView - unread indicator and styles', () => {
+  it('renders UnreadIcon by default when settings are missing', () => {
+    const useContainerSettings = require('../../hooks/useContainerSettings').default as jest.Mock;
+    useContainerSettings.mockReturnValueOnce({});
+    const template = makeTemplate({ isRead: false });
+    const { UNSAFE_getAllByType } = render(
+      <ContentCardView template={template as any} />
+    );
+    expect(UNSAFE_getAllByType(UnreadIcon).length).toBeGreaterThan(0);
+  });
+
+  it('applies dynamic Pressable style function', () => {
+    const tpl = makeTemplate();
+    const styleFn = jest.fn(() => ({}));
+    render(<ContentCardView template={tpl as any} style={styleFn as any} />);
+    expect(styleFn).toHaveBeenCalled();
+  });
+});
+
+
diff --git a/packages/messaging/src/ui/components/Pagination/Pagination.spec.tsx b/packages/messaging/src/ui/components/Pagination/Pagination.spec.tsx
new file mode 100644
index 00000000..9c27f75e
--- /dev/null
+++ b/packages/messaging/src/ui/components/Pagination/Pagination.spec.tsx
@@ -0,0 +1,159 @@
+/*
+    Copyright 2025 Adobe. All rights reserved.
+    This file is licensed to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law
+    or agreed to in writing, software distributed under the License is
+    distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF
+    ANY KIND, either express or implied. See the License for the specific
+    language governing permissions and limitations under the License.
+*/
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import React from 'react';
+import { Animated, TouchableOpacity } from 'react-native';
+import { Pagination } from './Pagination';
+
+// Use fake timers for animation timing
+jest.useFakeTimers();
+
+// Stub Animated APIs to avoid act warnings and native errors
+beforeAll(() => {
+  jest.spyOn(Animated, 'timing').mockReturnValue({ start: (cb?: any) => cb && cb() } as any);
+  jest.spyOn(Animated, 'spring').mockReturnValue({ start: (cb?: any) => cb && cb() } as any);
+  jest.spyOn(Animated, 'parallel').mockReturnValue({ start: (cb?: any) => cb && cb() } as any);
+  jest.spyOn(require('react-native'), 'useColorScheme').mockReturnValue('light');
+});
+
+afterAll(() => {
+  (Animated.timing as unknown as jest.Mock)?.mockRestore?.();
+  (Animated.spring as unknown as jest.Mock)?.mockRestore?.();
+  (Animated.parallel as unknown as jest.Mock)?.mockRestore?.();
+});
+
+describe('Pagination - rendering', () => {
+  it('renders nothing when totalPages <= 1', () => {
+    const { toJSON } = render(
+      <Pagination currentPage={0} totalPages={1} onPageChange={() => {}} />
+    );
+    expect(toJSON()).toBeNull();
+  });
+
+});
+
+describe('Pagination - interactions', () => {
+  it('renders dots and calls onPageChange when a dot is pressed', () => {
+    const onPageChange = jest.fn();
+    render(<Pagination currentPage={1} totalPages={3} onPageChange={onPageChange} />);
+    const touchables = screen.UNSAFE_getAllByType(TouchableOpacity);
+    expect(touchables.length).toBe(3);
+    // press the last dot (page index 2)
+    fireEvent.press(touchables[2]);
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+});
+
+describe('Pagination - theming and sizing', () => {
+  it('uses theme default colors when activeColor/inactiveColor not provided (light)', () => {
+    jest.spyOn(require('react-native'), 'useColorScheme').mockReturnValue('light');
+    render(<Pagination currentPage={0} totalPages={2} onPageChange={() => {}} />);
+    const views = screen.UNSAFE_getAllByType(Animated.View);
+    // Filter to dot views by borderRadius style (unique to dot style)
+    const dotViews = views.filter((v) => {
+      const styles = (Array.isArray(v.props.style) ? v.props.style : [v.props.style]).flat(Infinity).filter(Boolean);
+      return styles.some((s: any) => s && s.borderRadius === 50);
+    });
+    const dot0Styles = (Array.isArray(dotViews[0].props.style) ? dotViews[0].props.style : [dotViews[0].props.style]).flat(Infinity);
+    const dot1Styles = (Array.isArray(dotViews[1].props.style) ? dotViews[1].props.style : [dotViews[1].props.style]).flat(Infinity);
+    expect(dot0Styles.some((s: any) => s && s.backgroundColor === '#0a7ea4')).toBe(true); // active
+    expect(dot1Styles.some((s: any) => s && s.backgroundColor === '#687076')).toBe(true); // inactive
+  });
+
+  it('uses theme default colors when activeColor/inactiveColor not provided (dark)', () => {
+    jest.spyOn(require('react-native'), 'useColorScheme').mockReturnValue('dark');
+    render(<Pagination currentPage={0} totalPages={2} onPageChange={() => {}} />);
+    const views = screen.UNSAFE_getAllByType(Animated.View);
+    const dotViews = views.filter((v) => {
+      const styles = (Array.isArray(v.props.style) ? v.props.style : [v.props.style]).flat(Infinity).filter(Boolean);
+      return styles.some((s: any) => s && s.borderRadius === 50);
+    });
+    const dot0Styles = (Array.isArray(dotViews[0].props.style) ? dotViews[0].props.style : [dotViews[0].props.style]).flat(Infinity);
+    const dot1Styles = (Array.isArray(dotViews[1].props.style) ? dotViews[1].props.style : [dotViews[1].props.style]).flat(Infinity);
+    expect(dot0Styles.some((s: any) => s && s.backgroundColor === '#fff')).toBe(true); // active
+    expect(dot1Styles.some((s: any) => s && s.backgroundColor === '#9BA1A6')).toBe(true); // inactive
+  });
+
+  it('respects custom active/inactive colors and dot size/spacing', () => {
+    render(
+      <Pagination
+        currentPage={0}
+        totalPages={2}
+        onPageChange={() => {}}
+        activeColor="red"
+        inactiveColor="gray"
+        dotSize={12}
+        spacing={10}
+      />
+    );
+    const views = screen.UNSAFE_getAllByType(Animated.View);
+    const dotViews = views.filter((v) => {
+      const styles = (Array.isArray(v.props.style) ? v.props.style : [v.props.style]).flat(Infinity).filter(Boolean);
+      return styles.some((s: any) => s && s.borderRadius === 50);
+    });
+    const dot0Styles = (Array.isArray(dotViews[0].props.style) ? dotViews[0].props.style : [dotViews[0].props.style]).flat(Infinity);
+    expect(dot0Styles.some((s: any) => s && s.backgroundColor === 'red')).toBe(true);
+    expect(dot0Styles.some((s: any) => s && s.width === 12 && s.height === 12)).toBe(true);
+  });
+
+});
+
+describe('Pagination - sliding and windowing', () => {
+  it('slides when the visible window changes (Animated.timing called)', () => {
+    const timingSpy = jest.spyOn(Animated, 'timing');
+    const { rerender } = render(
+      <Pagination currentPage={0} totalPages={10} maxVisibleDots={5} onPageChange={() => {}} />
+    );
+    // Move within the same window (no slide expected)
+    rerender(<Pagination currentPage={4} totalPages={10} maxVisibleDots={5} onPageChange={() => {}} />);
+    const callsBefore = (timingSpy as unknown as jest.Mock).mock.calls.length;
+    // Move to next window (should slide)
+    rerender(<Pagination currentPage={5} totalPages={10} maxVisibleDots={5} onPageChange={() => {}} />);
+    const callsAfter = (timingSpy as unknown as jest.Mock).mock.calls.length;
+    expect(callsAfter).toBeGreaterThan(callsBefore);
+  });
+
+  it('adjusts start page near the end (endPage === totalPages - 1 branch)', () => {
+    const onPageChange = jest.fn();
+    render(
+      <Pagination currentPage={9} totalPages={10} maxVisibleDots={5} onPageChange={onPageChange} />
+    );
+    // Expect visible pages to be [5,6,7,8,9]; pressing first dot should send 5
+    const touchables = screen.UNSAFE_getAllByType(TouchableOpacity);
+    expect(touchables.length).toBe(5);
+    fireEvent.press(touchables[0]);
+    expect(onPageChange).toHaveBeenCalledWith(5);
+    fireEvent.press(touchables[4]);
+    expect(onPageChange).toHaveBeenCalledWith(9);
+  });
+
+  it('slides backward when the visible window shifts left (direction -1)', () => {
+    const timingSpy = jest.spyOn(Animated, 'timing');
+    const setValueSpy = jest.spyOn((Animated.Value as any).prototype, 'setValue');
+
+    const { rerender } = render(
+      <Pagination currentPage={9} totalPages={10} maxVisibleDots={5} onPageChange={() => {}} />
+    );
+    rerender(<Pagination currentPage={4} totalPages={10} maxVisibleDots={5} onPageChange={() => {}} />);
+
+    expect((timingSpy as unknown as jest.Mock).mock.calls.length).toBeGreaterThan(0);
+
+    const calls = (setValueSpy as unknown as jest.Mock).mock.calls as any[];
+    const lastNumericArg = [...calls].reverse().map(c => c[0]).find(a => typeof a === 'number');
+    expect(lastNumericArg).toBeLessThan(0); // negative offset indicates sliding left
+
+    (setValueSpy as unknown as jest.Mock).mockRestore?.();
+  });
+});
+
+
diff --git a/packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.spec.tsx b/packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.spec.tsx
index 64089a0c..3ffac6fe 100644
--- a/packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.spec.tsx
+++ b/packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.spec.tsx
@@ -1,3 +1,4 @@
+
 /*
     Copyright 2025 Adobe. All rights reserved.
     This file is licensed to you under the Apache License, Version 2.0 (the
@@ -9,11 +10,11 @@
     ANY KIND, either express or implied. See the License for the specific
     language governing permissions and limitations under the License.
 */
+import { act, render, waitFor } from '@testing-library/react-native';
 import React from 'react';
-import { render } from '@testing-library/react-native';
-import { useColorScheme, Image } from 'react-native';
-import UnreadIcon from './UnreadIcon';
+import { Image, useColorScheme } from 'react-native';
 import ContentCardContainerProvider from '../../providers/ContentCardContainerProvider';
+import UnreadIcon from './UnreadIcon';
 
 // Mock useColorScheme
 jest.mock('react-native/Libraries/Utilities/useColorScheme');
@@ -170,6 +171,49 @@ describe('UnreadIcon', () => {
         );
       }).not.toThrow();
     });
+
+    it('falls back to topright when props.position is unknown and no context placement', () => {
+      const settingsWithoutIndicator = {
+        ...mockContainerSettings,
+        content: {
+          ...mockContainerSettings.content,
+          unread_indicator: undefined,
+        },
+      };
+
+      const { getByTestId } = render(
+        <ContentCardContainerProvider settings={settingsWithoutIndicator}>
+          <UnreadIcon testID="unread-icon" position={'unknown' as any} />
+        </ContentCardContainerProvider>
+      );
+      const container = getByTestId('unread-icon');
+      const styles = (Array.isArray(container.props.style) ? container.props.style : [container.props.style]).flat(Infinity);
+      const hasTopRight = styles.some((s: any) => s && s.top === 6 && s.right === 6);
+      expect(hasTopRight).toBe(true);
+    });
+
+    it('falls back to topright when context placement is unknown', () => {
+      const settingsWithUnknownPlacement = {
+        ...mockContainerSettings,
+        content: {
+          ...mockContainerSettings.content,
+          unread_indicator: {
+            ...mockContainerSettings.content.unread_indicator,
+            unread_icon: { placement: 'unknown' as any, image: { url: '' } },
+          },
+        },
+      };
+
+      const { getByTestId } = render(
+        <ContentCardContainerProvider settings={settingsWithUnknownPlacement}>
+          <UnreadIcon testID="unread-icon" />
+        </ContentCardContainerProvider>
+      );
+      const container = getByTestId('unread-icon');
+      const styles = (Array.isArray(container.props.style) ? container.props.style : [container.props.style]).flat(Infinity);
+      const hasTopRight = styles.some((s: any) => s && s.top === 6 && s.right === 6);
+      expect(hasTopRight).toBe(true);
+    });
   });
 
   describe('Light mode rendering', () => {
@@ -382,6 +426,24 @@ describe('UnreadIcon', () => {
         );
       }).not.toThrow();
     });
+
+    it('renders default dot when no unread_indicator and no image props provided', () => {
+      // With no unread_indicator and no source/darkSource props, default content should be a dot (no Image)
+      const settingsWithoutIndicator = {
+        ...mockContainerSettings,
+        content: {
+          ...mockContainerSettings.content,
+          unread_indicator: undefined,
+        },
+      };
+
+      const { UNSAFE_queryByType } = render(
+        <ContentCardContainerProvider settings={settingsWithoutIndicator}>
+          <UnreadIcon />
+        </ContentCardContainerProvider>
+      );
+      expect(UNSAFE_queryByType(Image)).toBeNull();
+    });
   });
 
   describe('Custom styles', () => {
@@ -421,6 +483,26 @@ describe('UnreadIcon', () => {
         );
       }).not.toThrow();
     });
+
+    it('renders Image when renderType is image via darkSource prop only (branch: imageSource || darkImageSource)', () => {
+      mockUseColorScheme.mockReturnValue('dark');
+      const settingsWithoutIndicator = {
+        ...mockContainerSettings,
+        content: {
+          ...mockContainerSettings.content,
+          unread_indicator: undefined,
+        },
+      };
+
+      const { UNSAFE_getByType } = render(
+        <ContentCardContainerProvider settings={settingsWithoutIndicator}>
+          <UnreadIcon type="dot" darkSource={{ uri: 'https://custom.com/dark.png' }} />
+        </ContentCardContainerProvider>
+      );
+
+      const imageComponent = UNSAFE_getByType(Image);
+      expect(imageComponent.props.source).toEqual({ uri: 'https://custom.com/dark.png' });
+    });
   });
 
   describe('Size variations', () => {
@@ -535,6 +617,47 @@ describe('UnreadIcon', () => {
         );
       }).not.toThrow();
     });
+
+    it('renders dot when image load fails (onError branch)', async () => {
+      const settings = {
+        ...mockContainerSettings,
+        content: {
+          ...mockContainerSettings.content,
+          unread_indicator: {
+            ...mockContainerSettings.content.unread_indicator,
+            unread_icon: {
+              ...mockContainerSettings.content.unread_indicator.unread_icon,
+              image: {
+                url: 'https://example.com/icon.png',
+                darkUrl: '',
+              },
+            },
+          },
+        },
+      };
+
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const { UNSAFE_getByType, UNSAFE_getAllByType } = render(
+        <ContentCardContainerProvider settings={settings}>
+          <UnreadIcon testID="unread-icon" />
+        </ContentCardContainerProvider>
+      );
+
+      const image = UNSAFE_getByType(Image);
+      await act(async () => {
+        image.props.onError({ nativeEvent: { error: 'failed' } });
+      });
+
+      await waitFor(() => {
+        expect(warnSpy).toHaveBeenCalledWith(
+          'Failed to load unread icon image:',
+          'failed'
+        );
+      });
+
+      warnSpy.mockRestore();
+    });
   });
 
   describe('Edge cases', () => {

From df6ddbdcc5710f973c25f4ca8231d91c02cc7fe2 Mon Sep 17 00:00:00 2001
From: Julia Kartasheva <jkartasheva@adobe.com>
Date: Mon, 13 Oct 2025 14:31:34 -0700
Subject: [PATCH 2/2] removing unused value

---
 .../messaging/src/ui/components/UnreadIcon/UnreadIcon.spec.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.spec.tsx b/packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.spec.tsx
index 3ffac6fe..af0419d6 100644
--- a/packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.spec.tsx
+++ b/packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.spec.tsx
@@ -638,7 +638,7 @@ describe('UnreadIcon', () => {
 
       const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
-      const { UNSAFE_getByType, UNSAFE_getAllByType } = render(
+      const { UNSAFE_getByType } = render(
         <ContentCardContainerProvider settings={settings}>
           <UnreadIcon testID="unread-icon" />
         </ContentCardContainerProvider>