test: CoinListWithSearchBar 컴포넌트 단위 테스트 추가

issue: #19

Author: BHyeonKim

src/features/coin-search-list/ui/CoinListWithSearchBar/CoinListWithSearchBar.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import { createRoutesStub } from 'react-router';
+import { describe, expect, it } from 'vitest';
+
+import userEvent from '@testing-library/user-event';
+import type { CoinListWithSearchBarProps } from '.';
+import CoinListWithSearchBar from '.';
+
+const props: CoinListWithSearchBarProps = {
+	coinList: [
+		{
+			coinIcon: <span>🪙</span>,
+			name: '비트코인',
+			ticker: 'BTC',
+			to: '/coin/BTC',
+		},
+		{
+			coinIcon: <span>🪙</span>,
+			name: '이더리움',
+			ticker: 'ETH',
+			to: '/coin/ETH',
+		},
+		{
+			coinIcon: <span>🪙</span>,
+			name: '트럼프',
+			ticker: 'TRUMP',
+			to: '/coin/TRUMP',
+		},
+	],
+};
+
+const Stub = createRoutesStub([
+	{
+		path: '/coin/:ticker',
+		Component: () => <CoinListWithSearchBar {...props} />,
+	},
+]);
+
+describe('CoinListWithSearchBar 컴포넌트 테스트', () => {
+	it('화면에 CoinListWithSearchBar가 렌더링 된다.', () => {
+		render(<Stub initialEntries={['/coin/BTC']} />);
+
+		const coinListWithSearchBar = screen.getByTestId(
+			'coin-list-with-search-bar',
+		);
+
+		expect(coinListWithSearchBar).toBeInTheDocument();
+		expect(screen.getAllByRole('link')).toHaveLength(3);
+	});
+
+	it('사용자가 검색창에 티커를 입력하면 필터링된 리스트가 렌더링 된다.', async () => {
+		const user = userEvent.setup();
+		render(<Stub initialEntries={['/coin/BTC']} />);
+
+		const coinListWithSearchBar = screen.getByTestId(
+			'coin-list-with-search-bar',
+		);
+
+		expect(coinListWithSearchBar).toBeInTheDocument();
+
+		const input = screen.getByRole('textbox');
+		await user.type(input, 'BTC');
+
+		expect(screen.getAllByRole('link')).toHaveLength(1);
+		expect(screen.getAllByRole('link')[0]).toHaveTextContent('비트코인');
+	});
+});

src/features/coin-search-list/ui/CoinListWithSearchBar/index.tsx

@@ -4,7 +4,7 @@ import { IconMagnifying } from '~/assets/svgs';
 import type { CoinListItemProps } from '../CoinListItem';
 import CoinListItem from '../CoinListItem';
 
-type CoinListWithSearchBarProps = {
+export type CoinListWithSearchBarProps = {
 	coinList: CoinListItemProps[];
 };
 
@@ -22,7 +22,10 @@ export default function CoinListWithSearchBar({
 	};
 
 	return (
-		<div className="flex h-full min-h-0 flex-1 flex-col bg-white">
+		<div
+			className="flex h-full min-h-0 flex-1 flex-col bg-white"
+			data-testid="coin-list-with-search-bar"
+		>
 			<div className="px-2 py-3">
 				<div className="relative w-full">
 					<input