Mobile: Implement tag screen redesign (#12551)

packages/app-mobile/components/ComboBox.test.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import createMockReduxStore from '../utils/testing/createMockReduxStore';
+import TestProviderStack from './testing/TestProviderStack';
+import ComboBox, { OnItemSelected, Option } from './ComboBox';
+import { useMemo } from 'react';
+
+interface Item {
+	title: string;
+}
+
+interface WrapperProps {
+	items: Item[];
+	onItemSelected?: OnItemSelected;
+}
+
+const store = createMockReduxStore();
+const WrappedComboBox: React.FC<WrapperProps> = ({
+	items,
+	onItemSelected = jest.fn(),
+}: WrapperProps) => {
+	const mappedItems = useMemo(() => {
+		return items.map((item): Option => ({
+			title: item.title,
+			icon: undefined,
+			accessibilityHint: undefined,
+			willRemoveOnPress: false,
+		}));
+	}, [items]);
+
+	return <TestProviderStack store={store}>
+		<ComboBox
+			items={mappedItems}
+			alwaysExpand={true}
+			style={{}}
+			onItemSelected={onItemSelected}
+			placeholder={'Test combobox'}
+		/>
+	</TestProviderStack>;
+};
+
+const getSearchInput = () => {
+	return screen.getByPlaceholderText('Test combobox');
+};
+const getSearchResults = () => {
+	return screen.getAllByTestId(/^search-result-/);
+};
+
+describe('ComboBox', () => {
+	test('should list all items when the search query is empty', () => {
+		const testItems = [
+			{ title: 'test 1' },
+			{ title: 'test 2' },
+			{ title: 'test 3' },
+		];
+		const { unmount } = render(
+			<WrappedComboBox
+				items={testItems}
+			/>,
+		);
+
+		expect(getSearchInput()).toHaveTextContent('');
+		expect(getSearchResults()).toHaveLength(3);
+
+		// Manually unmounting prevents a warning
+		unmount();
+	});
+
+	test('changing the search query should limit which items are visible', () => {
+		const testItems = [
+			{ title: 'a' },
+			{ title: 'b' },
+			{ title: 'c' },
+			{ title: 'aa' },
+		];
+		const { unmount } = render(
+			<WrappedComboBox items={testItems}/>,
+		);
+
+		expect(getSearchResults()).toHaveLength(4);
+		fireEvent.changeText(getSearchInput(), 'a');
+
+		const updatedResults = getSearchResults();
+		expect(updatedResults[0]).toHaveTextContent('a');
+		expect(updatedResults[1]).toHaveTextContent('aa');
+		expect(updatedResults).toHaveLength(2);
+
+		unmount();
+	});
+});