299 lines
9.5 KiB
TypeScript
299 lines
9.5 KiB
TypeScript
import { test, expect, type Page } from '@playwright/test';
|
|
import translations from '../client/i18n/locales/english/translations.json';
|
|
|
|
test.use({ storageState: 'playwright/.auth/certified-user.json' });
|
|
|
|
const pageElements = {
|
|
mainHeading: 'main-head',
|
|
donateText1: 'donate-text-1',
|
|
donateText2: 'donate-text-2',
|
|
donateText3: 'donate-text-3',
|
|
faqHeading: 'faq-head',
|
|
campersImage: 'landing-page-figure'
|
|
};
|
|
|
|
const donationStringReplacements = {
|
|
usdPlaceHolder: '{{usd}}',
|
|
hoursPlaceHolder: '{{hours}}'
|
|
};
|
|
|
|
const donationFormStrings = {
|
|
conformTwentyDollar: translations.donate['confirm-monthly'].replace(
|
|
donationStringReplacements.usdPlaceHolder,
|
|
'20'
|
|
),
|
|
confirmFiveDollars: translations.donate['confirm-monthly'].replace(
|
|
donationStringReplacements.usdPlaceHolder,
|
|
'5'
|
|
),
|
|
twentyDollarsLearningContribution: translations.donate['your-donation-2']
|
|
.replace(donationStringReplacements.usdPlaceHolder, '20')
|
|
.replace(donationStringReplacements.hoursPlaceHolder, '1,000'),
|
|
fiveDollarsLearningContribution: translations.donate['your-donation-2']
|
|
.replace(donationStringReplacements.usdPlaceHolder, '5')
|
|
.replace(donationStringReplacements.hoursPlaceHolder, '250'),
|
|
editAmount: translations.donate['edit-amount'],
|
|
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 () => {
|
|
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 () => {
|
|
const faq1 = page.getByRole('button', {
|
|
name: translations.donate['get-help']
|
|
});
|
|
await expect(faq1).toBeVisible();
|
|
await faq1.click();
|
|
await expect(
|
|
page.getByText(translations.donate['forward-receipt'])
|
|
).toBeVisible();
|
|
await faq1.click();
|
|
|
|
const faq2 = page.getByRole('button', {
|
|
name: translations.donate['how-transparent']
|
|
});
|
|
await expect(faq2).toBeVisible();
|
|
await faq2.click();
|
|
await expect(
|
|
page.getByText(translations.donate['very-transparent'])
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByText('You can download our IRS Determination Letter here.')
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByText(
|
|
'You can download our most recent 990 (annual tax report) here.'
|
|
)
|
|
).toBeVisible();
|
|
await faq2.click();
|
|
|
|
const faq3 = page.getByRole('button', {
|
|
name: translations.donate['how-efficient']
|
|
});
|
|
await expect(faq3).toBeVisible();
|
|
await faq3.click();
|
|
await expect(
|
|
page.getByText(translations.donate['fcc-budget'])
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByText(translations.donate['help-millions'])
|
|
).toBeVisible();
|
|
await faq3.click();
|
|
|
|
const faq4 = page.getByRole('button', {
|
|
name: translations.donate['how-one-time']
|
|
});
|
|
await expect(faq4).toBeVisible();
|
|
await faq4.click();
|
|
await expect(
|
|
page.getByText(
|
|
"If you'd prefer to make one-time donations, you can support freeCodeCamp's mission whenever you have cash to spare. You can use this link to donate whatever amount feels right through PayPal."
|
|
)
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByText(translations.donate['wire-transfer'])
|
|
).toBeVisible();
|
|
await faq4.click();
|
|
|
|
const faq5 = page.getByRole('button', {
|
|
name: translations.donate['does-crypto']
|
|
});
|
|
await expect(faq5).toBeVisible();
|
|
await faq5.click();
|
|
await expect(
|
|
page.getByText(translations.donate['yes-cryptocurrency'])
|
|
).toBeVisible();
|
|
await faq5.click();
|
|
|
|
const faq6 = page.getByRole('button', {
|
|
name: translations.donate['can-check']
|
|
});
|
|
await expect(faq6).toBeVisible();
|
|
await faq6.click();
|
|
await expect(
|
|
page.getByText(translations.donate['yes-check'])
|
|
).toBeVisible();
|
|
await expect(page.getByText('Free Code Camp, Inc.')).toBeVisible();
|
|
await expect(page.getByText('3905 Hedgcoxe Rd')).toBeVisible();
|
|
await expect(page.getByText('PO Box 250352')).toBeVisible();
|
|
await expect(page.getByText('Plano, TX 75025')).toBeVisible();
|
|
await faq6.click();
|
|
|
|
const faq7 = page.getByRole('button', {
|
|
name: translations.donate['how-matching-gift']
|
|
});
|
|
await expect(faq7).toBeVisible();
|
|
await faq7.click();
|
|
await expect(
|
|
page.getByText(translations.donate['employers-vary'])
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByText(translations.donate['some-volunteer'])
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByText(translations.donate['help-matching-gift'])
|
|
).toBeVisible();
|
|
await faq7.click();
|
|
|
|
const faq8 = page.getByRole('button', {
|
|
name: translations.donate['how-endowment']
|
|
});
|
|
await expect(faq8).toBeVisible();
|
|
await faq8.click();
|
|
await expect(
|
|
page.getByText(translations.donate['endowment'])
|
|
).toBeVisible();
|
|
await faq8.click();
|
|
|
|
const faq9 = page.getByRole('button', {
|
|
name: translations.donate['how-legacy']
|
|
});
|
|
await expect(faq9).toBeVisible();
|
|
await faq9.click();
|
|
await expect(
|
|
page.getByText(translations.donate['we-honored'])
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByText(translations.donate['legacy-gift-message'])
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByText(translations.donate['thank-wikimedia'])
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByText(translations.donate['legacy-gift-questions'])
|
|
).toBeVisible();
|
|
await faq9.click();
|
|
|
|
const faq10 = page.getByRole('button', {
|
|
name: translations.donate['how-stock']
|
|
});
|
|
await expect(faq10).toBeVisible();
|
|
await faq10.click();
|
|
await expect(
|
|
page.getByText(translations.donate['welcome-stock'])
|
|
).toBeVisible();
|
|
await faq10.click();
|
|
|
|
const faq11 = page.getByRole('button', {
|
|
name: translations.donate['how-update']
|
|
});
|
|
await expect(faq11).toBeVisible();
|
|
await faq11.click();
|
|
await expect(
|
|
page.getByText(translations.donate['forward-receipt'])
|
|
).toBeVisible();
|
|
await faq11.click();
|
|
|
|
const faq12 = page.getByRole('button', {
|
|
name: translations.donate['anything-else']
|
|
});
|
|
await expect(faq12).toBeVisible();
|
|
await faq12.click();
|
|
await expect(
|
|
page.getByText(translations.donate['other-support'])
|
|
).toBeVisible();
|
|
await faq12.click();
|
|
});
|
|
});
|