mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-19 18:18:27 -05:00
test: /donate page for signed out users (#61738)
This commit is contained in:
Oliver Eyton-Williams
committed by
GitHub
GitHub
parent
9d441440ac
commit
c27fd68ceb
@@ -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();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user