add: create tests for FilterTabs, GiftCard, and RecipientCard components to verify rendering and interaction

Author: bakaqc

tests/components/utils/FilterTabs.test.tsx

@@ -0,0 +1,57 @@
+import { fireEvent, render } from '@testing-library/react-native';
+
+import FilterTabs from '@/components/utils/FilterTabs';
+
+describe('FilterTabs Component', () => {
+	it('should render all tabs', () => {
+		const mockProps = {
+			selectedTab: 'All',
+			onSelectTab: jest.fn(),
+			recipients: [
+				{ id: '1', name: 'John Doe' },
+				{ id: '2', name: 'Jane Smith' },
+			],
+			selectedRecipient: null,
+			onSelectRecipient: jest.fn(),
+		};
+
+		const { getByText } = render(<FilterTabs {...mockProps} />);
+		expect(getByText('All')).toBeTruthy();
+		expect(getByText('Recipients')).toBeTruthy();
+	});
+
+	it('should call onSelectTab when a tab is pressed', () => {
+		const mockOnSelectTab = jest.fn();
+		const mockProps = {
+			selectedTab: 'All',
+			onSelectTab: mockOnSelectTab,
+			recipients: [
+				{ id: '1', name: 'John Doe' },
+				{ id: '2', name: 'Jane Smith' },
+			],
+			selectedRecipient: null,
+			onSelectRecipient: jest.fn(),
+		};
+
+		const { getByText } = render(<FilterTabs {...mockProps} />);
+		fireEvent.press(getByText('All'));
+		expect(mockOnSelectTab).toHaveBeenCalledWith('All');
+	});
+
+	it('should open the recipient modal when the Recipients tab is pressed', () => {
+		const mockProps = {
+			selectedTab: 'All',
+			onSelectTab: jest.fn(),
+			recipients: [
+				{ id: '1', name: 'John Doe' },
+				{ id: '2', name: 'Jane Smith' },
+			],
+			selectedRecipient: null,
+			onSelectRecipient: jest.fn(),
+		};
+
+		const { getByText } = render(<FilterTabs {...mockProps} />);
+		fireEvent.press(getByText('Recipients'));
+		expect(getByText('Select Recipient')).toBeTruthy();
+	});
+});

tests/components/utils/GiftCard.test.tsx

@@ -0,0 +1,40 @@
+import { fireEvent, render } from '@testing-library/react-native';
+
+import GiftCard from '@/components/utils/GiftCard';
+
+describe('GiftCard Component', () => {
+	it('should render gift details correctly', () => {
+		const mockProps = {
+			id: '1', // Updated to string
+			image: 'https://example.com/image.jpg',
+			title: 'Gift 1',
+			description: 'A wonderful gift',
+			price: 20,
+			recipient: '1',
+			selectedDate: '2025-05-01',
+		};
+
+		const { getByText } = render(<GiftCard {...mockProps} />);
+		expect(getByText('Gift 1')).toBeTruthy();
+		expect(getByText('for Loading...')).toBeTruthy();
+		expect(getByText('Happening on May 1, 2025')).toBeTruthy();
+	});
+
+	it('should trigger onPress when the card is clicked', () => {
+		const mockOnPress = jest.fn();
+		const mockProps = {
+			id: '1', // Updated to string
+			image: 'https://example.com/image.jpg',
+			title: 'Gift 1',
+			description: 'A wonderful gift',
+			price: 20,
+			recipient: '1',
+			selectedDate: '2025-05-01',
+			onEdit: mockOnPress,
+		};
+
+		const { getByText } = render(<GiftCard {...mockProps} />);
+		fireEvent.press(getByText('Gift 1'));
+		expect(mockOnPress).toHaveBeenCalled();
+	});
+});

tests/components/utils/RecipientCard.test.tsx

@@ -0,0 +1,22 @@
+import { fireEvent, render } from '@testing-library/react-native';
+
+import RecipientCard from '@/components/utils/RecipientCard';
+
+describe('RecipientCard Component', () => {
+	it('should render recipient details correctly', () => {
+		const recipient = { id: 1, name: 'John Doe', giftCount: 3 };
+		const { getByText } = render(<RecipientCard recipient={recipient} />);
+		expect(getByText('John Doe')).toBeTruthy();
+		expect(getByText('3 Gifts')).toBeTruthy();
+	});
+
+	it('should trigger onPress when the card is clicked', () => {
+		const mockOnPress = jest.fn();
+		const recipient = { id: 1, name: 'John Doe', giftCount: 3 };
+		const { getByText } = render(
+			<RecipientCard recipient={recipient} onPress={mockOnPress} />,
+		);
+		fireEvent.press(getByText('John Doe'));
+		expect(mockOnPress).toHaveBeenCalledWith(recipient);
+	});
+});