From c27fd68ceb6afb6029b1d9a6f5e3ba877fe587e1 Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Fri, 8 Aug 2025 11:20:25 +0200 Subject: [PATCH] test: /donate page for signed out users (#61738) --- e2e/donate-page-default.spec.ts | 171 ++++++++++++++++---------------- 1 file changed, 86 insertions(+), 85 deletions(-) diff --git a/e2e/donate-page-default.spec.ts b/e2e/donate-page-default.spec.ts index 8db0315860a..bc24b37c271 100644 --- a/e2e/donate-page-default.spec.ts +++ b/e2e/donate-page-default.spec.ts @@ -1,4 +1,4 @@ -import { test, expect, type Page } from '@playwright/test'; +import { test, expect } from '@playwright/test'; import translations from '../client/i18n/locales/english/translations.json'; const pageElements = { @@ -34,110 +34,29 @@ const donationFormStrings = { donate: translations.buttons.donate }; -let page: Page; -test.beforeAll(async ({ browser }) => { - page = await browser.newPage(); - await page.goto('/donate'); -}); - -test.describe('Donate Page', () => { - test('should display the correct title', async () => { +function donatePageTests() { + test('should render correctly', async ({ page }) => { await expect(page).toHaveTitle( `${translations.donate.title} | freeCodeCamp.org` ); - }); - test('should select $20 tier by default', async () => { - await expect( - page.getByText(donationFormStrings.conformTwentyDollar) - ).toBeVisible(); - - const tabs = await page.$$('[role="tab"]'); - expect(tabs.length).toBe(4); - - for (const tab of tabs) { - const tabText = await tab.innerText(); - expect(['$5', '$10', '$20', '$40']).toContain(tabText); - - if (tabText === '$20') { - const isActive = await tab.getAttribute('data-state'); - expect(isActive).toBe('active'); - } else { - const isActive = await tab.getAttribute('data-state'); - expect(isActive).not.toBe('active'); - } - } - await expect( - page.getByText(donationFormStrings.twentyDollarsLearningContribution) - ).toBeVisible(); - }); - - test('should make $5 tier selectable', async () => { - await page.click('[role="tab"]:has-text("$5")'); - - await expect( - page.getByText(donationFormStrings.confirmFiveDollars) - ).toBeVisible(); - - await expect( - page.getByText(donationFormStrings.fiveDollarsLearningContribution) - ).toBeVisible(); - }); - - test('should switch between tier selection and payment options', async () => { - // Tier selection - await page.click('[role="tab"]:has-text("$5")'); - await expect( - page.getByText(donationFormStrings.confirmFiveDollars) - ).toBeVisible(); - await expect( - page.getByText(donationFormStrings.fiveDollarsLearningContribution) - ).toBeVisible(); - await page.click(`button:has-text("${donationFormStrings.donate}")`); - - // Donation form - const isEditButtonVisible = await page.isVisible( - `button:has-text("${donationFormStrings.editAmount}")` - ); - expect(isEditButtonVisible).toBeTruthy(); - await expect(page.getByTestId('donation-form')).toBeVisible(); - await page.click(`button:has-text("${donationFormStrings.editAmount}")`); - - // Tier selection - await expect( - page.getByText(donationFormStrings.confirmFiveDollars) - ).toBeVisible(); - await expect( - page.getByText(donationFormStrings.fiveDollarsLearningContribution) - ).toBeVisible(); - }); - - test('should display the main heading', async () => { const mainHeading = page.getByTestId(pageElements.mainHeading); await expect(mainHeading).toHaveText(translations.donate['help-more']); - }); - test('should display donation page upper text 1', async () => { const donateText1 = page.getByTestId(pageElements.donateText1); await expect(donateText1).toHaveText(translations.donate.efficiency); - }); - test('should display donation page benefit 2', async () => { const donateText2 = page.getByTestId(pageElements.donateText2); await expect(donateText2).toHaveText(translations.donate['why-donate-1']); - }); - test('should display donation page benefit 3', async () => { const donateText3 = page.getByTestId(pageElements.donateText3); await expect(donateText3).toHaveText(translations.donate['why-donate-2']); - }); - test('should display the faq heading', async () => { const faqHead = page.getByTestId(pageElements.faqHeading); await expect(faqHead).toHaveText(translations.donate.faq); }); - test('should display the faq list with buttons', async () => { + test('should display the faq list with buttons', async ({ page }) => { const faq1 = page.getByRole('button', { name: translations.donate['get-help'] }); @@ -293,4 +212,86 @@ test.describe('Donate Page', () => { ).toBeVisible(); await faq12.click(); }); + + test('should select $20 tier by default', async ({ page }) => { + await expect( + page.getByText(donationFormStrings.conformTwentyDollar) + ).toBeVisible(); + + const tabs = await page.$$('[role="tab"]'); + expect(tabs.length).toBe(4); + + for (const tab of tabs) { + const tabText = await tab.innerText(); + expect(['$5', '$10', '$20', '$40']).toContain(tabText); + + if (tabText === '$20') { + const isActive = await tab.getAttribute('data-state'); + expect(isActive).toBe('active'); + } else { + const isActive = await tab.getAttribute('data-state'); + expect(isActive).not.toBe('active'); + } + } + await expect( + page.getByText(donationFormStrings.twentyDollarsLearningContribution) + ).toBeVisible(); + }); + + test('should make $5 tier selectable', async ({ page }) => { + await page.click('[role="tab"]:has-text("$5")'); + + await expect( + page.getByText(donationFormStrings.confirmFiveDollars) + ).toBeVisible(); + + await expect( + page.getByText(donationFormStrings.fiveDollarsLearningContribution) + ).toBeVisible(); + }); + + test('should switch between tier selection and payment options', async ({ + page + }) => { + // Tier selection + await page.click('[role="tab"]:has-text("$5")'); + await expect( + page.getByText(donationFormStrings.confirmFiveDollars) + ).toBeVisible(); + await expect( + page.getByText(donationFormStrings.fiveDollarsLearningContribution) + ).toBeVisible(); + await page.click(`button:has-text("${donationFormStrings.donate}")`); + + // Donation form + const isEditButtonVisible = await page.isVisible( + `button:has-text("${donationFormStrings.editAmount}")` + ); + expect(isEditButtonVisible).toBeTruthy(); + await expect(page.getByTestId('donation-form')).toBeVisible(); + await page.click(`button:has-text("${donationFormStrings.editAmount}")`); + + // Tier selection + await expect( + page.getByText(donationFormStrings.confirmFiveDollars) + ).toBeVisible(); + await expect( + page.getByText(donationFormStrings.fiveDollarsLearningContribution) + ).toBeVisible(); + }); +} + +test.describe('Authenticated User', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/donate'); + }); + donatePageTests(); +}); + +test.describe('Unauthenticated User', () => { + test.use({ storageState: { cookies: [], origins: [] } }); + test.beforeEach(async ({ page }) => { + await page.goto('/donate'); + }); + donatePageTests(); });