-
+
{t('footer.our-nonprofit')}
+
+
{t('footer.links.about')}
{t('footer.links.alumni')}
-
+
{t('footer.links.open-source')}
{t('footer.links.shop')}
-
+
{t('footer.links.support')}
-
+
{t('footer.links.sponsors')}
-
+
{t('footer.links.honesty')}
-
+
{t('footer.links.coc')}
-
+
{t('footer.links.privacy')}
-
+
{t('footer.links.tos')}
-
+
{t('footer.links.copyright')}
diff --git a/e2e/footer.spec.ts b/e2e/footer.spec.ts
index a6f6eb53850..074aa305789 100644
--- a/e2e/footer.spec.ts
+++ b/e2e/footer.spec.ts
@@ -6,187 +6,149 @@ test.beforeEach(async ({ page }) => {
await page.goto('/');
});
-const footerComponentElements = {
- descriptions: 'footer-desc-col',
- trendingGuidesHeader: 'trending-guides-col-header',
- trendingGuideArticles: 'trending-guides-articles',
- footerBottomHeader: 'footer-bottom-col-header',
- footerBottomLinks: 'our-nonprofit'
-} as const;
-
-test('Has descriptions', async ({ page }) => {
- const descriptions = page
- .getByTestId(footerComponentElements.descriptions)
- .locator('p');
- await expect(descriptions).toHaveCount(4);
- for (const desc of await descriptions.all()) {
- await expect(desc).toBeVisible();
- }
-});
-
-test('Has header for trending guides', async ({ page }) => {
- const trendingGuidesHeader = page.getByTestId(
- footerComponentElements.trendingGuidesHeader
- );
- await expect(trendingGuidesHeader).toBeVisible();
-});
-
-test('Has 30 trending guide articles', async ({ page }) => {
- const trendingGuideArticles = page
- .getByTestId(footerComponentElements.trendingGuideArticles)
- .locator('a');
- await expect(trendingGuideArticles).toHaveCount(30);
- for (const article of await trendingGuideArticles.all()) {
- await expect(article).toBeVisible();
- }
-});
-
-test('Has header for footer bottom', async ({ isMobile, page }) => {
- const footerBottomHeader = page.getByTestId(
- footerComponentElements.footerBottomHeader
- );
- if (isMobile) {
- await expect(footerBottomHeader).toBeVisible();
- } else {
- await expect(footerBottomHeader).toBeHidden();
- }
-});
-
-test('Has 11 nonprofits', async ({ page }) => {
- const footerBottomLinks = page
- .getByTestId(footerComponentElements.footerBottomLinks)
- .locator('a');
- await expect(footerBottomLinks).toHaveCount(11);
- for (const footerBottomLink of await footerBottomLinks.all()) {
- await expect(footerBottomLink).toBeVisible();
- }
-});
-
test.describe('Footer component left section', () => {
- test('should render footer tax exempt statement text', async ({ page }) => {
- const footerTaxExemptText = page.getByTestId('footer-tax-exempt-status');
- await expect(footerTaxExemptText).toBeVisible();
- await expect(footerTaxExemptText).toContainText(
- translations.footer['tax-exempt-status']
- );
+ test('should render the content properly', async ({ page }) => {
+ await expect(
+ page.getByText(translations.footer['tax-exempt-status'])
+ ).toBeVisible();
+ await expect(
+ page.getByText(translations.footer['mission-statement'])
+ ).toBeVisible();
+ await expect(
+ page.getByText(translations.footer['donation-initiatives'])
+ ).toBeVisible();
+ await expect(
+ page.getByRole('link', { name: 'make a tax-deductible donation here' })
+ ).toHaveAttribute('href', '/donate');
});
+});
- test('should render footer mission statement text', async ({ page }) => {
- const footerMissionStatement = page.getByTestId('footer-mission-statement');
- await expect(footerMissionStatement).toBeVisible();
- await expect(footerMissionStatement).toContainText(
- translations.footer['mission-statement']
- );
- });
+test.describe('Footer Trending Guides section', () => {
+ test('should render the section with a header and 30 articles', async ({
+ page
+ }) => {
+ await expect(
+ page.getByRole('heading', {
+ name: translations.footer['trending-guides']
+ })
+ ).toBeVisible();
- test('should render footer donation initiative text', async ({ page }) => {
- const footerDonationInitiative = page.getByTestId(
- 'footer-donation-initiatives-text'
- );
- await expect(footerDonationInitiative).toBeVisible();
- await expect(footerDonationInitiative).toContainText(
- translations.footer['donation-initiatives']
- );
- });
+ const articles = await page
+ .getByTestId('trending-guides-articles')
+ .getByRole('link')
+ .all();
- test('should correctly link to donations page', async ({ page }) => {
- const donationPageLink = page.getByTestId('footer-donation-page-link');
- await expect(donationPageLink).toHaveAttribute('href', '/donate');
+ expect(articles).toHaveLength(30);
+
+ for (const article of articles) {
+ await expect(article).toBeVisible();
+ }
});
});
test.describe('Footer bottom links', () => {
test('should display correct link to about us page', async ({ page }) => {
- const link = page.getByTestId('footer-about-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links.about
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute('href', links.footer['about-url']);
- await expect(link).toHaveText(translations.footer.links.about);
});
test('should display correct link to alumni page', async ({ page }) => {
- const link = page.getByTestId('footer-alumni-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links.alumni
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute(
'href',
'https://www.linkedin.com/school/free-code-camp/people/'
);
- await expect(link).toHaveText(translations.footer.links.alumni);
});
test('should display correct link to open-source page', async ({ page }) => {
- const link = page.getByTestId('footer-open-source-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links['open-source']
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute(
'href',
'https://github.com/freeCodeCamp/'
);
- await expect(link).toHaveText(translations.footer.links['open-source']);
});
test('should display correct link to shop', async ({ page }) => {
- const link = page.getByTestId('footer-shop-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links.shop
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute('href', links.footer['shop-url']);
- await expect(link).toHaveText(translations.footer.links.shop);
});
test('should display correct link to support page', async ({ page }) => {
- const link = page.getByTestId('footer-support-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links.support
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute('href', links.footer['support-url']);
- await expect(link).toHaveText(translations.footer.links.support);
});
test('should display correct link to sponsors page', async ({ page }) => {
- const link = page.getByTestId('footer-sponsors-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links.sponsors
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute('href', links.footer['sponsors-url']);
- await expect(link).toHaveText(translations.footer.links.sponsors);
});
test('should display correct link to honesty page', async ({ page }) => {
- const link = page.getByTestId('footer-honesty-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links.honesty
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute('href', links.footer['honesty-url']);
- await expect(link).toHaveText(translations.footer.links.honesty);
});
test('should display correct link to coc page', async ({ page }) => {
- const link = page.getByTestId('footer-coc-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links.coc
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute('href', links.footer['coc-url']);
- await expect(link).toHaveText(translations.footer.links.coc);
});
test('should display correct link to privacy page', async ({ page }) => {
- const link = page.getByTestId('footer-privacy-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links.privacy
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute('href', links.footer['privacy-url']);
- await expect(link).toHaveText(translations.footer.links.privacy);
});
test('should display correct link to tos page', async ({ page }) => {
- const link = page.getByTestId('footer-tos-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links.tos
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute('href', links.footer['tos-url']);
- await expect(link).toHaveText(translations.footer.links.tos);
});
test('should display correct link to copyright page', async ({ page }) => {
- const link = page.getByTestId('footer-copyright-url');
+ const link = page.getByRole('link', {
+ name: translations.footer.links.copyright
+ });
- expect(await link.isVisible()).toBe(true);
+ await expect(link).toBeVisible();
await expect(link).toHaveAttribute('href', links.footer['copyright-url']);
- await expect(link).toHaveText(translations.footer.links.copyright);
});
});