jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-20 12:03:11 -04:00
Code Issues Projects Releases Wiki Activity

test(e2e): refactor search.spec.ts (#55109)

Browse Source
This commit is contained in:
Huyen Nguyen
2024-06-10 09:15:41 -07:00
committed by GitHub
parent d215a48b4c
commit e58f37e9de
2 changed files with 93 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
e2e/search-bar-optimized.spec.ts Normal file
View File

@@ -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('');
});
});

152
e2e/search.spec.ts
View File

@@ -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('');
}
});
});