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

fix: failing Playwright tests (#52138)

Browse Source
This commit is contained in:
Huyen Nguyen
2023-10-27 21:30:57 +07:00
committed by GitHub
parent f53879b6c7
commit e037c3cbe2
3 changed files with 47 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,14 +38,13 @@ const SearchBarOptimized = ({
role='search'
>
<label className='sr-only' htmlFor='ais-SearchBox-input'>
{t ? t('search.label') : ''}
{t('search.label')}
</label>
<input
autoCapitalize='off'
autoComplete='off'
autoCorrect='off'
id='ais-SearchBox-input'
data-playwright-test-label='header-search'
className='ais-SearchBox-input'
maxLength={512}
onChange={onChange}
@@ -54,7 +53,6 @@ const SearchBarOptimized = ({
type='search'
value={value}
ref={inputElementRef}
data-playwright-test-label='fcc-search-input'
/>
<button
className='ais-SearchBox-submit'

26
e2e/header.spec.ts
View File

@@ -9,7 +9,6 @@ const headerComponentElements = {
examNavLogo: 'header-exam-nav-microsoft-logo',
universalNav: 'header-universal-nav',
universalNavLogo: 'header-universal-nav-logo',
search: 'header-search',
toggleLangButton: 'header-toggle-lang-button',
languageList: 'header-lang-list',
languageButton: 'header-lang-list-option',
@@ -68,15 +67,15 @@ test.describe('Header Component', () => {
page,
isMobile
}) => {
const search = page.getByTestId(headerComponentElements.search);
const searchInput = page.getByLabel(translations.search.label);
const menuButton = page.getByTestId(headerComponentElements.menuButton);
if (isMobile) {
await expect(search).toBeHidden();
await expect(searchInput).toBeHidden();
await menuButton.click();
await expect(search).toBeVisible();
await expect(searchInput).toBeVisible();
} else {
await expect(search).toBeVisible();
await expect(searchInput).toBeVisible();
}
});
@@ -140,9 +139,18 @@ test.describe('Header Component', () => {
name: translations.buttons.donate,
href: '/donate'
},
{ name: translations.buttons.curriculum, href: '/learn' },
{ name: translations.buttons.forum, href: links.nav.forum },
{ name: translations.buttons.news, href: links.nav.news },
{
name: translations.buttons.curriculum,
href: '/learn'
},
{
name: translations.buttons.forum,
href: links.nav.forum
},
{
name: translations.buttons.news,
href: links.nav.news
},
{
name: translations.buttons.radio,
href: process.env.RADIO_LOCATION || 'https://coderadio.freecodecamp.org'
@@ -154,7 +162,7 @@ test.describe('Header Component', () => {
];
for (const menuLink of menuLinks) {
const link = page.getByRole('link', { name: menuLink.name, exact: true });
const link = menu.getByRole('link', { name: menuLink.name });
await expect(link).toBeVisible();
await expect(link).toHaveAttribute('href', menuLink.href);
}

47
e2e/search.spec.ts
View File

@@ -1,7 +1,7 @@
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
const searchElements = {
searchInput: 'fcc-search-input',
searchButton: 'fcc-search-button',
searchClear: 'fcc-search-clear'
};
@@ -10,12 +10,15 @@ test.describe('Search', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('should display correct placeholder', async ({ page, isMobile }) => {
const search = page.getByTestId(searchElements.searchInput);
const searchInput = page.getByLabel(translations.search.label);
if (isMobile) {
await expect(search).not.toBeVisible();
await expect(searchInput).not.toBeVisible();
} else {
await expect(search).toHaveAttribute(
await expect(searchInput).toBeVisible();
await expect(searchInput).toHaveAttribute(
'placeholder',
'Search 9,000+ tutorials'
);
@@ -23,18 +26,22 @@ test.describe('Search', () => {
});
test('searching with enter key', async ({ context, page, isMobile }) => {
const search = page.getByTestId(searchElements.searchInput);
const searchInput = page.getByLabel(translations.search.label);
if (isMobile) {
await expect(search).not.toBeVisible();
await expect(searchInput).not.toBeVisible();
} else {
await search.fill('test');
await expect(searchInput).toBeVisible();
await searchInput.fill('test');
await page.keyboard.press('Enter');
// 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'
);
}
});
@@ -43,11 +50,13 @@ test.describe('Search', () => {
page,
isMobile
}) => {
const search = page.getByTestId(searchElements.searchInput);
const searchInput = page.getByLabel(translations.search.label);
if (isMobile) {
await expect(search).not.toBeVisible();
await expect(searchInput).not.toBeVisible();
} else {
await search.fill('test');
await expect(searchInput).toBeVisible();
await searchInput.fill('test');
await page.getByTestId(searchElements.searchButton).click();
// wait for results to open in new window
@@ -59,14 +68,16 @@ test.describe('Search', () => {
});
test('clearing search with clear button', async ({ page, isMobile }) => {
const search = page.getByTestId(searchElements.searchInput);
const searchInput = page.getByLabel(translations.search.label);
if (isMobile) {
await expect(search).not.toBeVisible();
await expect(searchInput).not.toBeVisible();
} else {
await search.fill('test');
await expect(searchInput).toBeVisible();
await searchInput.fill('test');
await page.getByTestId(searchElements.searchClear).click();
await expect(search).toHaveValue('');
await expect(searchInput).toHaveValue('');
}
});
});