CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-13 21:02:08 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(playwright): correct assertions of search input on mobile (#53261)

Browse Source
This commit is contained in:
Huyen Nguyen 2024-02-17 12:01:15 +07:00 committed by GitHub
parent ced4ba4a0c
commit 3367454af5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 99 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/components/search/searchBar/search-bar-optimized.tsx
View File

@ -57,11 +57,7 @@ const SearchBarOptimized = ({
value={value}
ref={inputElementRef}
/>
<button
className='ais-SearchBox-submit'
type='submit'
data-playwright-test-label='fcc-search-button'
>
<button className='ais-SearchBox-submit' type='submit'>
<Magnifier />
</button>
{value && (
@ -69,7 +65,6 @@ const SearchBarOptimized = ({
className='ais-SearchBox-reset'
onClick={onClick}
type='button'
data-playwright-test-label='fcc-search-clear'
>
<InputReset />
</button>

127
e2e/search.spec.ts
View File

@ -1,22 +1,29 @@
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
const searchElements = {
searchButton: 'fcc-search-button',
searchClear: 'fcc-search-clear'
};
test.describe('Search', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('should display correct placeholder', async ({ page, isMobile }) => {
const searchInput = page.getByLabel(translations.search.label);
if (isMobile) {
await expect(searchInput).not.toBeVisible();
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',
@ -25,13 +32,34 @@ test.describe('Search', () => {
}
});
test('searching with enter key', async ({ context, page, isMobile }) => {
const searchInput = page.getByLabel(translations.search.label);
test('should return the search results when the user presses Enter', async ({
context,
page,
isMobile
}) => {
if (isMobile) {
await expect(searchInput).not.toBeVisible();
} else {
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');
@ -45,37 +73,78 @@ test.describe('Search', () => {
}
});
test('searching with search button click', async ({
test('should return the search results when the user clicks the search button', async ({
context,
page,
isMobile
}) => {
const searchInput = page.getByLabel(translations.search.label);
if (isMobile) {
await expect(searchInput).not.toBeVisible();
} else {
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.getByTestId(searchElements.searchButton).click();
await page
.getByRole('button', { name: translations.icons.magnifier })
.click();
// wait for results to open in new window
await page.waitForTimeout(1000);
// Wait for the new page to load.
const newPage = await context.waitForEvent('page');
await newPage.waitForLoadState();
const url = context.pages()[1].url();
expect(url).toBe('https://www.freecodecamp.org/news/search/?query=test');
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('clearing search with clear button', async ({ page, isMobile }) => {
const searchInput = page.getByLabel(translations.search.label);
test('should clear the search input when the user clicks the clear button', async ({
page,
isMobile
}) => {
if (isMobile) {
await expect(searchInput).not.toBeVisible();
} else {
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.getByTestId(searchElements.searchClear).click();
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('');
}