mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
test(e2e,playwright): Landing, Header (#52104)
This commit is contained in:
Prince
+154
-160
@@ -26,164 +26,158 @@ test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
});
|
||||
|
||||
test.describe('Header Component', () => {
|
||||
test('Should contain a skip link', async ({ page }) => {
|
||||
const skipContent = page.getByTestId(headerComponentElements.skipContent);
|
||||
await expect(skipContent).toBeVisible();
|
||||
await expect(skipContent).toHaveAttribute('href', '#content-start');
|
||||
});
|
||||
|
||||
test('Renders universal nav by default', async ({ page }) => {
|
||||
const universalNavigation = page.getByTestId(
|
||||
headerComponentElements.universalNav
|
||||
);
|
||||
const universalNavigationLogo = page.getByTestId(
|
||||
headerComponentElements.universalNavLogo
|
||||
);
|
||||
await expect(universalNavigation).toBeVisible();
|
||||
await expect(universalNavigationLogo).toBeVisible();
|
||||
await expect(universalNavigationLogo).toHaveAttribute('href', '/learn');
|
||||
});
|
||||
|
||||
test('Renders exam nav for Foundational C# with Microsoft exam', async ({
|
||||
page
|
||||
}) => {
|
||||
await page.goto(examUrl);
|
||||
await page
|
||||
.getByRole('button', {
|
||||
name: translations.buttons['click-start-exam']
|
||||
})
|
||||
.click();
|
||||
await expect(page).toHaveURL(examUrl);
|
||||
await expect(
|
||||
page.getByTestId(headerComponentElements.examNav)
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByTestId(headerComponentElements.examNavLogo)
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('Should display search in header on desktop and in menu on mobile', async ({
|
||||
page,
|
||||
isMobile
|
||||
}) => {
|
||||
const searchInput = page.getByLabel(translations.search.label);
|
||||
const menuButton = page.getByTestId(headerComponentElements.menuButton);
|
||||
|
||||
if (isMobile) {
|
||||
await expect(searchInput).toBeHidden();
|
||||
await menuButton.click();
|
||||
await expect(searchInput).toBeVisible();
|
||||
} else {
|
||||
await expect(searchInput).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('Clicking the "Change Language" button should open the language list', async ({
|
||||
page
|
||||
}) => {
|
||||
const toggleLangButton = page.getByTestId(
|
||||
headerComponentElements.toggleLangButton
|
||||
);
|
||||
await expect(toggleLangButton).toBeVisible();
|
||||
await toggleLangButton.click();
|
||||
const langList = page.getByTestId(headerComponentElements.languageList);
|
||||
await expect(langList).toBeVisible();
|
||||
});
|
||||
|
||||
test('The language list should contain a button for each available language', async ({
|
||||
page
|
||||
}) => {
|
||||
const locales = availableLangs.client.filter(
|
||||
lang => !hiddenLangs.includes(lang)
|
||||
);
|
||||
|
||||
const toggleLangButton = page.getByTestId(
|
||||
headerComponentElements.toggleLangButton
|
||||
);
|
||||
await expect(toggleLangButton).toBeVisible();
|
||||
await toggleLangButton.click();
|
||||
const langList = page.getByTestId(headerComponentElements.languageList);
|
||||
await expect(langList).toBeVisible();
|
||||
|
||||
const langButtons = page.getByTestId(
|
||||
headerComponentElements.languageButton
|
||||
);
|
||||
await expect(langButtons).toHaveCount(locales.length);
|
||||
|
||||
for (let i = 0; i < locales.length; i++) {
|
||||
const btn = langButtons.nth(i);
|
||||
await expect(btn).toContainText(LangNames[locales[i]]);
|
||||
}
|
||||
});
|
||||
|
||||
test('Clicking the menu button should open the menu', async ({ page }) => {
|
||||
const menuButton = page.getByTestId(headerComponentElements.menuButton);
|
||||
const menu = page.getByTestId(headerComponentElements.menu);
|
||||
await expect(menuButton).toBeVisible();
|
||||
await menuButton.click();
|
||||
await expect(menu).toBeVisible();
|
||||
});
|
||||
|
||||
test('The menu should contain links to: donate, curriculum, forum, news, radio, and contribute', async ({
|
||||
page
|
||||
}) => {
|
||||
const menuButton = page.getByTestId(headerComponentElements.menuButton);
|
||||
const menu = page.getByTestId(headerComponentElements.menu);
|
||||
await expect(menuButton).toBeVisible();
|
||||
await menuButton.click();
|
||||
await expect(menu).toBeVisible();
|
||||
|
||||
const menuLinks = [
|
||||
{
|
||||
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.radio,
|
||||
href: process.env.RADIO_LOCATION || 'https://coderadio.freecodecamp.org'
|
||||
},
|
||||
{
|
||||
name: translations.buttons.contribute,
|
||||
href: links.nav.contribute
|
||||
}
|
||||
];
|
||||
|
||||
for (const menuLink of menuLinks) {
|
||||
const link = menu.getByRole('link', { name: menuLink.name });
|
||||
await expect(link).toBeVisible();
|
||||
await expect(link).toHaveAttribute('href', menuLink.href);
|
||||
}
|
||||
});
|
||||
|
||||
test('The Sign In button should redirect to api/signin', async ({
|
||||
browser
|
||||
}) => {
|
||||
// Sign out user in order to test Sign In button
|
||||
const context = await browser.newContext({
|
||||
storageState: { cookies: [], origins: [] }
|
||||
});
|
||||
const page = await context.newPage();
|
||||
await page.goto('/');
|
||||
|
||||
const signInButton = page.getByRole('link', {
|
||||
name: translations.buttons['sign-in']
|
||||
});
|
||||
|
||||
const apiLocation = process.env.API_LOCATION || 'http://localhost:3000';
|
||||
|
||||
await expect(signInButton).toHaveAttribute('href', `${apiLocation}/signin`);
|
||||
});
|
||||
test('Has link for skip content', async ({ page }) => {
|
||||
const skipContent = page.getByTestId(headerComponentElements.skipContent);
|
||||
await expect(skipContent).toBeVisible();
|
||||
await expect(skipContent).toHaveAttribute('href', '#content-start');
|
||||
});
|
||||
|
||||
test('Renders universal nav by default', async ({ page }) => {
|
||||
const universalNavigation = page.getByTestId(
|
||||
headerComponentElements.universalNav
|
||||
);
|
||||
const universalNavigationLogo = page.getByTestId(
|
||||
headerComponentElements.universalNavLogo
|
||||
);
|
||||
await expect(universalNavigation).toBeVisible();
|
||||
await expect(universalNavigationLogo).toBeVisible();
|
||||
await expect(universalNavigationLogo).toHaveAttribute('href', '/learn');
|
||||
});
|
||||
|
||||
test('Renders exam nav for Foundational C# with Microsoft exam', async ({
|
||||
page
|
||||
}) => {
|
||||
await page.goto(examUrl);
|
||||
await page
|
||||
.getByRole('button', {
|
||||
name: translations.buttons['click-start-exam']
|
||||
})
|
||||
.click();
|
||||
await expect(page).toHaveURL(examUrl);
|
||||
await expect(page.getByTestId(headerComponentElements.examNav)).toBeVisible();
|
||||
await expect(
|
||||
page.getByTestId(headerComponentElements.examNavLogo)
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('Should display search in header on desktop and in menu on mobile', async ({
|
||||
page,
|
||||
isMobile
|
||||
}) => {
|
||||
const searchInput = page.getByLabel(translations.search.label);
|
||||
const menuButton = page.getByTestId(headerComponentElements.menuButton);
|
||||
|
||||
if (isMobile) {
|
||||
await expect(searchInput).toBeHidden();
|
||||
await menuButton.click();
|
||||
await expect(searchInput).toBeVisible();
|
||||
} else {
|
||||
await expect(searchInput).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('Clicking the "Change Language" button should open the language list', async ({
|
||||
page
|
||||
}) => {
|
||||
const toggleLangButton = page.getByTestId(
|
||||
headerComponentElements.toggleLangButton
|
||||
);
|
||||
await expect(toggleLangButton).toBeVisible();
|
||||
await toggleLangButton.click();
|
||||
const langList = page.getByTestId(headerComponentElements.languageList);
|
||||
await expect(langList).toBeVisible();
|
||||
});
|
||||
|
||||
test('The language list should contain a button for each available language', async ({
|
||||
page
|
||||
}) => {
|
||||
const locales = availableLangs.client.filter(
|
||||
lang => !hiddenLangs.includes(lang)
|
||||
);
|
||||
|
||||
const toggleLangButton = page.getByTestId(
|
||||
headerComponentElements.toggleLangButton
|
||||
);
|
||||
await expect(toggleLangButton).toBeVisible();
|
||||
await toggleLangButton.click();
|
||||
const langList = page.getByTestId(headerComponentElements.languageList);
|
||||
await expect(langList).toBeVisible();
|
||||
|
||||
const langButtons = page.getByTestId(headerComponentElements.languageButton);
|
||||
await expect(langButtons).toHaveCount(locales.length);
|
||||
|
||||
for (let i = 0; i < locales.length; i++) {
|
||||
const btn = langButtons.nth(i);
|
||||
await expect(btn).toContainText(LangNames[locales[i]]);
|
||||
}
|
||||
});
|
||||
|
||||
test('Clicking the menu button should open the menu', async ({ page }) => {
|
||||
const menuButton = page.getByTestId(headerComponentElements.menuButton);
|
||||
const menu = page.getByTestId(headerComponentElements.menu);
|
||||
await expect(menuButton).toBeVisible();
|
||||
await menuButton.click();
|
||||
await expect(menu).toBeVisible();
|
||||
});
|
||||
|
||||
test('The menu should contain links to: donate, curriculum, forum, news, radio, and contribute', async ({
|
||||
page
|
||||
}) => {
|
||||
const menuButton = page.getByTestId(headerComponentElements.menuButton);
|
||||
const menu = page.getByTestId(headerComponentElements.menu);
|
||||
await expect(menuButton).toBeVisible();
|
||||
await menuButton.click();
|
||||
await expect(menu).toBeVisible();
|
||||
|
||||
const menuLinks = [
|
||||
{
|
||||
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.radio,
|
||||
href: process.env.RADIO_LOCATION || 'https://coderadio.freecodecamp.org'
|
||||
},
|
||||
{
|
||||
name: translations.buttons.contribute,
|
||||
href: links.nav.contribute
|
||||
}
|
||||
];
|
||||
|
||||
for (const menuLink of menuLinks) {
|
||||
const link = menu.getByRole('link', { name: menuLink.name });
|
||||
await expect(link).toBeVisible();
|
||||
await expect(link).toHaveAttribute('href', menuLink.href);
|
||||
}
|
||||
});
|
||||
|
||||
test('The Sign In button should redirect to api/signin', async ({
|
||||
browser
|
||||
}) => {
|
||||
// Sign out user in order to test Sign In button
|
||||
const context = await browser.newContext({
|
||||
storageState: { cookies: [], origins: [] }
|
||||
});
|
||||
const page = await context.newPage();
|
||||
await page.goto('/');
|
||||
|
||||
const signInButton = page.getByRole('link', {
|
||||
name: translations.buttons['sign-in']
|
||||
});
|
||||
|
||||
const apiLocation = process.env.API_LOCATION || 'http://localhost:3000';
|
||||
|
||||
await expect(signInButton).toHaveAttribute('href', `${apiLocation}/signin`);
|
||||
});
|
||||
|
||||
@@ -65,6 +65,30 @@ test('Has 5 brand logos', async () => {
|
||||
}
|
||||
});
|
||||
|
||||
test('The landing-top & testimonial sections should contain call-to-action, and have a descriptive text content', async () => {
|
||||
const ctas = await page
|
||||
.getByRole('link', {
|
||||
name: translations.buttons['logged-in-cta-btn']
|
||||
})
|
||||
.all();
|
||||
|
||||
expect(ctas).toHaveLength(4);
|
||||
|
||||
for (const cta of ctas) {
|
||||
await expect(cta).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test("The landing-top should contain a descriptive text explaining the camper's image", async () => {
|
||||
const campersImage = page.getByAltText(translations.landing['hero-img-alt']);
|
||||
const captionText = page.getByText(
|
||||
translations.landing['hero-img-description']
|
||||
);
|
||||
|
||||
await expect(campersImage).toBeVisible();
|
||||
await expect(captionText).toBeVisible();
|
||||
});
|
||||
|
||||
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({
|
||||
isMobile
|
||||
}) => {
|
||||
|
||||
Reference in New Issue
Block a user