From 6172dc1e9171cd39a97340b59e1d390bc8d3d813 Mon Sep 17 00:00:00 2001 From: Kalina Zhecheva <60223025+kzhecheva@users.noreply.github.com> Date: Tue, 7 Nov 2023 14:56:13 +0200 Subject: [PATCH] Adds tests for Wishes and Donors sections on the top of Campaign page (#1646) * feat: adds campaign summary section tests --- e2e/pages/web-pages/base.page.ts | 2 +- .../web-pages/campaigns/campaigns.page.ts | 22 +++++++ .../campaign-flow/campaign-view.spec.ts | 59 +++++++++++++++++++ .../client/campaigns/DonationWishesInline.tsx | 2 +- .../client/campaigns/DonorsAndDonations.tsx | 2 +- .../client/campaigns/InlineDonation.tsx | 2 + 6 files changed, 86 insertions(+), 3 deletions(-) create mode 100644 e2e/tests/regression/campaign-flow/campaign-view.spec.ts diff --git a/e2e/pages/web-pages/base.page.ts b/e2e/pages/web-pages/base.page.ts index 74737fa15..8fe3dcef3 100644 --- a/e2e/pages/web-pages/base.page.ts +++ b/e2e/pages/web-pages/base.page.ts @@ -3,7 +3,7 @@ import { ClickOptions, LocatorOptions } from '../../utils/types' // Here we define all base methods, which are inherited into the other pages export class BasePage { - protected page: Page + public page: Page constructor(page: Page) { this.page = page diff --git a/e2e/pages/web-pages/campaigns/campaigns.page.ts b/e2e/pages/web-pages/campaigns/campaigns.page.ts index b814f335b..720cef88a 100644 --- a/e2e/pages/web-pages/campaigns/campaigns.page.ts +++ b/e2e/pages/web-pages/campaigns/campaigns.page.ts @@ -23,6 +23,12 @@ export class CampaignsPage extends HomePage { private readonly bgSupportNowActionButtonText = bgLocalizationCampaigns.cta['support'] private readonly enSupportNowActionButtonText = enLocalizationCampaigns.cta['support'] + // Summary donors and wishes sections + private readonly bgDonorsButtonText = bgLocalizationCampaigns.campaign['donors'] + private readonly enDonorsButtonText = enLocalizationCampaigns.campaign['donors'] + private readonly bgWishesButtonText = bgLocalizationCampaigns.campaign['wishes'] + private readonly enWishesButtonText = enLocalizationCampaigns.campaign['wishes'] + async checkPageUrlByRegExp(urlRegExpAsString?: string, timeoutParam = 10000): Promise { await this.page.waitForTimeout(1000) await expect(this.page, 'The URL is not correct!').toHaveURL( @@ -108,4 +114,20 @@ export class CampaignsPage extends HomePage { .locator(this.cardActionButtons, { hasText: supportButtonText }) await this.clickElementByLocator(cardActionButtonElement) } + + /** + * Check if Donors section in campaing summary is visible on the Campaigns page + * @param {LanguagesEnum} language - the default value is BG + */ + async isDonorsSectionVisible(language: LanguagesEnum = LanguagesEnum.BG): Promise { + return this.isDonorsElementVisible(language, this.bgDonorsButtonText, this.enDonorsButtonText) + } + + /** + * Check if Wishes section in campaing summary is visible on the Campaigns page + * @param {LanguagesEnum} language - the default value is BG + */ + async isWishesSectionVisible(language: LanguagesEnum = LanguagesEnum.BG): Promise { + return this.isWishesElementVisible(language, this.bgWishesButtonText, this.enWishesButtonText) + } } diff --git a/e2e/tests/regression/campaign-flow/campaign-view.spec.ts b/e2e/tests/regression/campaign-flow/campaign-view.spec.ts new file mode 100644 index 000000000..dfba13f49 --- /dev/null +++ b/e2e/tests/regression/campaign-flow/campaign-view.spec.ts @@ -0,0 +1,59 @@ +import { test, expect, Page } from '@playwright/test' +import { HeaderPage } from '../../../pages/web-pages/header.page' +import { HomePage } from '../../../pages/web-pages/home.page' +import { CampaignsPage } from '../../../pages/web-pages/campaigns/campaigns.page' +import { DonationPage } from '../../../pages/web-pages/campaigns/donation.page' +import { StripeCheckoutPage } from '../../../pages/web-pages/external/stripe-checkout.page' +import { LanguagesEnum } from '../../../data/enums/languages.enum' + +// This spec contains tests related campaign summary section and +// check summary 'Donors and Wishes' sections appearance and behavior. +test.describe.serial( + 'A contributor is able to see Donors and Wishes in campaign summary section', + async () => { + let page: Page + let homepage: HomePage + let headerPage: HeaderPage + let campaignsPage: CampaignsPage + let donationPage: DonationPage + let stripeCheckoutPage: StripeCheckoutPage + + test.beforeAll(async ({ browser }) => { + page = await browser.newPage() + homepage = new HomePage(page) + headerPage = new HeaderPage(page) + campaignsPage = new CampaignsPage(page) + donationPage = new DonationPage(page) + stripeCheckoutPage = new StripeCheckoutPage(page) + // For local executions use method navigateToLocalhostHomepage(); + // await homepage.navigateToLocalhostHomepage(); + await homepage.navigateToEnvHomepage() + await headerPage.changeLanguageToBe(LanguagesEnum.EN) + }) + + test.afterAll(async () => { + await page.close() + }) + + test('Particular campaign can be opened through the Campaign page', async () => { + await headerPage.clickDonateHeaderNavButton() + await campaignsPage.clickCampaignCardByIndex(0) + + expect( + await campaignsPage.checkPageUrlByRegExp(), + 'The url is not changed after clicking on the campaign card.', + ) + }) + + test('Particular campaign summary contains Donors and Wishes sections', async () => { + expect(campaignsPage.page.getByTestId('summary-donors')).toBeVisible() + expect(campaignsPage.page.getByTestId('summary-wishes')).toBeVisible() + + await campaignsPage.page.getByTestId('summary-donors').click() + expect(campaignsPage.page.getByTestId('summary-donors-wrapper')).toBeVisible() + + await campaignsPage.page.getByTestId('summary-wishes').click() + expect(campaignsPage.page.getByTestId('summary-wishes-wrapper')).toBeVisible() + }) + }, +) diff --git a/src/components/client/campaigns/DonationWishesInline.tsx b/src/components/client/campaigns/DonationWishesInline.tsx index bac420eb4..d423596c0 100644 --- a/src/components/client/campaigns/DonationWishesInline.tsx +++ b/src/components/client/campaigns/DonationWishesInline.tsx @@ -96,7 +96,7 @@ export default function DonationsWishesInline({ return ( - + {wishListToShow && wishListToShow.length !== 0 ? ( wishListToShow.map(({ person, createdAt, message }, key) => ( diff --git a/src/components/client/campaigns/DonorsAndDonations.tsx b/src/components/client/campaigns/DonorsAndDonations.tsx index 118a12574..08158617b 100644 --- a/src/components/client/campaigns/DonorsAndDonations.tsx +++ b/src/components/client/campaigns/DonorsAndDonations.tsx @@ -85,7 +85,7 @@ export default function DonorsAndDonations({ return ( - + {donationsToShow && donationsToShow.length !== 0 ? ( donationsToShow.map(({ person, amount, createdAt, currency }, key) => ( diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index 587ac3063..c982cbf1b 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/src/components/client/campaigns/InlineDonation.tsx @@ -473,6 +473,7 @@ export default function InlineDonation({ campaign }: Props) { classes.donorsWishesTab, selected === 'donors' && classes.selected, ].join(' ')} + data-testid="summary-donors" onClick={() => setSelected('donors')}>{`${t( 'campaign.donors', )} (${donors})`} @@ -481,6 +482,7 @@ export default function InlineDonation({ campaign }: Props) { classes.donorsWishesTab, selected === 'wishes' && classes.selected, ].join(' ')} + data-testid="summary-wishes" onClick={() => setSelected('wishes')}>{`${t('campaign.wishes')} (${ wishList?.totalCount })`}