Write tests for Search Component

src/__tests__/home/Search.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/svelte';
+import SearchBar from '../../lib/home/Search.svelte';
+import { districts } from '../../data';
+describe('Unit:Home/Search', () => {
+	let searchValue = '';
+	let selectValue = '';
+	afterEach(() => {
+		cleanup();
+	});
+
+	test('should change value according to change event', async () => {
+		render(SearchBar, { searchValue, selectValue });
+
+		const inputText = 'Test search';
+		const inputElements = screen.getAllByTestId('search-input');
+
+		inputElements.forEach(async (inputElement) => {
+			await fireEvent.input(inputElement, {
+				target: {
+					value: inputText,
+				},
+			});
+
+			expect((inputElement as HTMLInputElement).value).toBe(inputText);
+		});
+	});
+
+	test('should change select value upon change', () => {
+		render(SearchBar, { searchValue, selectValue });
+
+		const selectElement = screen.getByTestId('search-select');
+		districts.forEach((district) => {
+			fireEvent.select(selectElement, {
+				target: {
+					value: district,
+				},
+			});
+			expect((selectElement as HTMLSelectElement).value).toBe(district);
+		});
+	});
+
+	test('snapshot test', () => {
+		render(SearchBar, { searchValue, selectValue });
+
+		expect(screen).toMatchSnapshot();
+	});
+});

src/__tests__/home/__snapshots__/Search.test.ts.snap

@@ -0,0 +1,56 @@
+// Vitest Snapshot v1
+
+exports[`Unit:Home/Search > snapshot test 1`] = `
+{
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "logTestingPlaygroundURL": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+}
+`;

src/lib/home/Search.svelte

@@ -13,6 +13,7 @@
 		class="w-[65%] px-[25px] py-[10px] bg-[#E7E7E7] text-[#6C6C6C] rounded-full"
 		placeholder="Enter the checmical name"
 		bind:value={searchValue}
+		data-testid="search-input"
 	/>
 	<select
 		class="bg-[#2F8D76] w-[50%] md:w-[25%] border-solid border-b-[1px] border-white text-white p-[10px] outline-none"
@@ -31,6 +32,7 @@
 		<select
 			class="bg-[#2F8D76] w-[50%] md:w-[25%] border-solid border-b-[1px] border-white text-white p-[10px] outline-none"
 			bind:value={selectValue}
+			data-testid="search-select"
 		>
 			{#each districts as district}
 				<option value={district}>{district}</option>
@@ -41,5 +43,6 @@
 		class="ml-[5%] w-[90%] px-[25px] py-[7px] md:py-[10px] bg-[#E7E7E7] text-[#6C6C6C] rounded-full"
 		placeholder="Enter the chemical name"
 		bind:value={searchValue}
+		data-testid="search-input"
 	/>
 </div>