From e58f37e9dea4f8b1764b1130646afcf80f805c7e Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Mon, 10 Jun 2024 09:15:41 -0700
Subject: [PATCH] test(e2e): refactor search.spec.ts (#55109)

---
 e2e/search-bar-optimized.spec.ts |  93 +++++++++++++++++++
 e2e/search.spec.ts               | 152 -------------------------------
 2 files changed, 93 insertions(+), 152 deletions(-)
 create mode 100644 e2e/search-bar-optimized.spec.ts
 delete mode 100644 e2e/search.spec.ts

diff --git a/e2e/search-bar-optimized.spec.ts b/e2e/search-bar-optimized.spec.ts
new file mode 100644
index 00000000000..24ba27d0e76
--- /dev/null
+++ b/e2e/search-bar-optimized.spec.ts
@@ -0,0 +1,93 @@
+import { test, expect, type Page } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+const getSearchInput = async ({
+  page,
+  isMobile
+}: {
+  page: Page;
+  isMobile: boolean;
+}) => {
+  if (isMobile) {
+    const menuButton = page.getByRole('button', {
+      name: translations.buttons.menu
+    });
+    await expect(menuButton).toBeVisible();
+    await menuButton.click();
+  }
+
+  return page.getByLabel('Search');
+};
+
+test.describe('Search bar optimized', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('should display correct placeholder', async ({ page, isMobile }) => {
+    const searchInput = await getSearchInput({ page, isMobile });
+
+    await expect(searchInput).toBeVisible();
+    await expect(searchInput).toHaveAttribute(
+      'placeholder',
+      translations.search.placeholder
+    );
+  });
+
+  test('should return the search results when the user presses Enter', async ({
+    context,
+    page,
+    isMobile
+  }) => {
+    const searchInput = await getSearchInput({ page, isMobile });
+    await expect(searchInput).toBeVisible();
+
+    await searchInput.fill('test');
+    await page.keyboard.press('Enter');
+
+    // Wait for the new page to load.
+    const newPage = await context.waitForEvent('page');
+    await newPage.waitForLoadState();
+
+    expect(newPage.url()).toBe(
+      'https://www.freecodecamp.org/news/search/?query=test'
+    );
+  });
+
+  test('should return the search results when the user clicks the search button', async ({
+    context,
+    page,
+    isMobile
+  }) => {
+    const searchInput = await getSearchInput({ page, isMobile });
+    await expect(searchInput).toBeVisible();
+
+    await searchInput.fill('test');
+    await page
+      .getByRole('button', { name: translations.icons.magnifier })
+      .click();
+
+    // Wait for the new page to load.
+    const newPage = await context.waitForEvent('page');
+    await newPage.waitForLoadState();
+
+    expect(newPage.url()).toBe(
+      'https://www.freecodecamp.org/news/search/?query=test'
+    );
+  });
+
+  test('should clear the search input when the user clicks the clear button', async ({
+    page,
+    isMobile
+  }) => {
+    const searchInput = await getSearchInput({ page, isMobile });
+    await expect(searchInput).toBeVisible();
+
+    await searchInput.fill('test');
+    await page
+      .getByRole('button', { name: translations.icons['input-reset'] })
+      .click();
+
+    await expect(searchInput).toHaveValue('');
+  });
+});
diff --git a/e2e/search.spec.ts b/e2e/search.spec.ts
deleted file mode 100644
index 19b5a317fe0..00000000000
--- a/e2e/search.spec.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import { test, expect } from '@playwright/test';
-import translations from '../client/i18n/locales/english/translations.json';
-
-test.describe('Search', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-  });
-
-  test('should display correct placeholder', async ({ page, isMobile }) => {
-    if (isMobile) {
-      const menuButton = page.getByRole('button', {
-        name: translations.buttons.menu
-      });
-      await expect(menuButton).toBeVisible();
-      await menuButton.click();
-
-      const searchInput = page.getByLabel(translations.search.label);
-
-      await expect(searchInput).toBeVisible();
-      await expect(searchInput).toHaveAttribute(
-        'placeholder',
-        'Search 9,000+ tutorials'
-      );
-    } else {
-      const searchInput = page.getByLabel(translations.search.label);
-
-      await expect(searchInput).toBeVisible();
-      await expect(searchInput).toHaveAttribute(
-        'placeholder',
-        'Search 10,700+ tutorials'
-      );
-    }
-  });
-
-  test('should return the search results when the user presses Enter', async ({
-    context,
-    page,
-    isMobile
-  }) => {
-    if (isMobile) {
-      const menuButton = page.getByRole('button', {
-        name: translations.buttons.menu
-      });
-      await menuButton.click();
-
-      const searchInput = page.getByLabel(translations.search.label);
-      await expect(searchInput).toBeVisible();
-
-      await searchInput.fill('test');
-      await page.keyboard.press('Enter');
-
-      // Wait for the new page to load.
-      const newPage = await context.waitForEvent('page');
-      await newPage.waitForLoadState();
-
-      expect(newPage.url()).toBe(
-        'https://www.freecodecamp.org/news/search/?query=test'
-      );
-    } else {
-      const searchInput = page.getByLabel(translations.search.label);
-      await expect(searchInput).toBeVisible();
-
-      await searchInput.fill('test');
-      await page.keyboard.press('Enter');
-
-      // Wait for the new page to load.
-      const newPage = await context.waitForEvent('page');
-      await newPage.waitForLoadState();
-
-      expect(newPage.url()).toBe(
-        'https://www.freecodecamp.org/news/search/?query=test'
-      );
-    }
-  });
-
-  test('should return the search results when the user clicks the search button', async ({
-    context,
-    page,
-    isMobile
-  }) => {
-    if (isMobile) {
-      const menuButton = page.getByRole('button', {
-        name: translations.buttons.menu
-      });
-      await menuButton.click();
-
-      const searchInput = page.getByLabel(translations.search.label);
-      await expect(searchInput).toBeVisible();
-
-      await searchInput.fill('test');
-      await page
-        .getByRole('button', { name: translations.icons.magnifier })
-        .click();
-
-      // Wait for the new page to load.
-      const newPage = await context.waitForEvent('page');
-      await newPage.waitForLoadState();
-
-      expect(newPage.url()).toBe(
-        'https://www.freecodecamp.org/news/search/?query=test'
-      );
-    } else {
-      const searchInput = page.getByLabel(translations.search.label);
-      await expect(searchInput).toBeVisible();
-
-      await searchInput.fill('test');
-      await page
-        .getByRole('button', { name: translations.icons.magnifier })
-        .click();
-
-      // Wait for the new page to load.
-      const newPage = await context.waitForEvent('page');
-      await newPage.waitForLoadState();
-
-      expect(newPage.url()).toBe(
-        'https://www.freecodecamp.org/news/search/?query=test'
-      );
-    }
-  });
-
-  test('should clear the search input when the user clicks the clear button', async ({
-    page,
-    isMobile
-  }) => {
-    if (isMobile) {
-      const menuButton = page.getByRole('button', {
-        name: translations.buttons.menu
-      });
-      await menuButton.click();
-
-      const searchInput = page.getByLabel(translations.search.label);
-      await expect(searchInput).toBeVisible();
-
-      await searchInput.fill('test');
-      await page
-        .getByRole('button', { name: translations.icons['input-reset'] })
-        .click();
-
-      await expect(searchInput).toHaveValue('');
-    } else {
-      const searchInput = page.getByLabel(translations.search.label);
-      await expect(searchInput).toBeVisible();
-
-      await searchInput.fill('test');
-      await page
-        .getByRole('button', { name: translations.icons['input-reset'] })
-        .click();
-
-      await expect(searchInput).toHaveValue('');
-    }
-  });
-});