add new constant and data-testid, create tests for the search functio…

…nality

e2e/constants.ts

@@ -15,3 +15,4 @@ export const VALID_PHONE_NUMBER = '+1' + faker.string.numeric(10);
 export const USER_NAME = 'test';
 export const MESSAGE = faker.lorem.sentence();
 export const BRAND_NAME = process.env.PLAYWRIGHT_BRAND_NAME;
+export const RANDOM_STRING = faker.string.alpha(10);

e2e/tests/search.spec.ts

@@ -0,0 +1,59 @@
+import { test } from '../fixtures';
+import { expect } from 'playwright/test';
+import { BRAND_NAME, COLLECTION_NAME, HOMEPAGE_ENDPOINT, PRODUCT_NAME, RANDOM_STRING } from '../constants';
+
+test.describe('Search functionality', () => {
+  test.beforeEach('Navigate to the home page', async ({ page }) => {
+    await page.goto(HOMEPAGE_ENDPOINT);
+  });
+
+  test('Search by product name', async ({ page }) => {
+    if (!PRODUCT_NAME) {
+      test.skip(!PRODUCT_NAME, 'PLAYWRIGHT_PRODUCT_NAME was not defined');
+      return;
+    }
+
+    await page.getByTestId('search-icon').click();
+    await page.getByPlaceholder('Search...').waitFor();
+    await page.getByPlaceholder('Search...').fill(PRODUCT_NAME);
+    await page.getByRole('listbox').waitFor();
+    await expect(page.getByRole('listbox')).toContainText(PRODUCT_NAME);
+  });
+
+  test('Search by brand name', async ({ page }) => {
+    if (!BRAND_NAME) {
+      test.skip(!BRAND_NAME, 'PLAYWRIGHT_BRAND_NAME was not defined');
+      return;
+    }
+
+    await page.getByTestId('search-icon').click();
+    await page.getByPlaceholder('Search...').waitFor();
+    await page.getByPlaceholder('Search...').fill(BRAND_NAME);
+    await page.getByRole('listbox').waitFor();
+
+    const searchResults = await page.getByRole('listbox').locator('li').all();
+    for (const item of searchResults) {
+      await expect(item).toContainText(BRAND_NAME, { ignoreCase: true });
+    }
+  });
+
+  test('Search by collection name', async ({ page }) => {
+    if (!COLLECTION_NAME) {
+      test.skip(!COLLECTION_NAME, 'PLAYWRIGHT_COLLECTION_NAME was not defined');
+      return;
+    }
+
+    await page.getByTestId('search-icon').click();
+    await page.getByPlaceholder('Search...').waitFor();
+    await page.getByPlaceholder('Search...').fill(COLLECTION_NAME);
+    await page.getByRole('listbox').waitFor();
+    await expect(page.getByRole('listbox').locator('li')).not.toHaveCount(0);
+  });
+
+  test('Search by invalid parameter', async ({ page }) => {
+    await page.getByTestId('search-icon').click();
+    await page.getByPlaceholder('Search...').waitFor();
+    await page.getByPlaceholder('Search...').fill(RANDOM_STRING);
+    await expect(page.getByText('No results found')).toBeVisible();
+  });
+});

src/features/Navigation/NavigationTop/NavigationTop.tsx

@@ -111,6 +111,7 @@ export const NavigationTop = ({ message, sections, currencies }: NavigationTopPr
                         <div
                           onClick={() => setIsSearchOpen(true)}
                           className="-m-2 p-2 text-primary-400 hover:text-primary-500"
+                          data-testid="search-icon"
                         >
                           <span className="sr-only">Search</span>
                           <MagnifyingGlassIcon className="w-6 h-6" aria-hidden="true" />