From 81605aad2fa3bbe0f99b08985cbdfd7b00c5a77b Mon Sep 17 00:00:00 2001
From: PollySt <polina_stadnichenko@pecodesoftware.com>
Date: Mon, 29 Jan 2024 12:39:46 +0200
Subject: [PATCH] add new constant and data-testid, create tests for the search
 functionality

---
 e2e/constants.ts                              |  1 +
 e2e/tests/search.spec.ts                      | 59 +++++++++++++++++++
 .../NavigationTop/NavigationTop.tsx           |  1 +
 3 files changed, 61 insertions(+)
 create mode 100644 e2e/tests/search.spec.ts

diff --git a/e2e/constants.ts b/e2e/constants.ts
index 12ca5da3..71fbb36f 100644
--- a/e2e/constants.ts
+++ b/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);
diff --git a/e2e/tests/search.spec.ts b/e2e/tests/search.spec.ts
new file mode 100644
index 00000000..e2cb3dcc
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/features/Navigation/NavigationTop/NavigationTop.tsx b/src/features/Navigation/NavigationTop/NavigationTop.tsx
index e1efa311..629996c7 100644
--- a/src/features/Navigation/NavigationTop/NavigationTop.tsx
+++ b/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" />