diff --git a/e2e/header.spec.ts b/e2e/header.spec.ts index d03617fa4bb..9cc59cddff8 100644 --- a/e2e/header.spec.ts +++ b/e2e/header.spec.ts @@ -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('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 } - }); - - 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(); + ]; + + 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('/'); - 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); - } + const signInButton = page.getByRole('link', { + name: translations.buttons['sign-in'] }); - - 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'; - const apiLocation = process.env.API_LOCATION || 'http://localhost:3000'; - - await expect(signInButton).toHaveAttribute('href', `${apiLocation}/signin`); - }); + await expect(signInButton).toHaveAttribute('href', `${apiLocation}/signin`); }); diff --git a/e2e/landing.spec.ts b/e2e/landing.spec.ts index bd2dd716d7f..1257c9a15f2 100644 --- a/e2e/landing.spec.ts +++ b/e2e/landing.spec.ts @@ -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 }) => {