Adds tests for Wishes and Donors sections on the top of Campaign page

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

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<void> {
     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<boolean> {
+    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<boolean> {
+    return this.isWishesElementVisible(language, this.bgWishesButtonText, this.enWishesButtonText)
+  }
 }

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()
+    })
+  },
+)

src/components/client/campaigns/DonationWishesInline.tsx

@@ -96,7 +96,7 @@ export default function DonationsWishesInline({
 
   return (
     <Root>
-      <Grid item className={classes.donationsWrapper}>
+      <Grid item className={classes.donationsWrapper} data-testid="summary-wishes-wrapper">
         {wishListToShow && wishListToShow.length !== 0 ? (
           wishListToShow.map(({ person, createdAt, message }, key) => (
             <Grid key={key} className={classes.donationItemWrapper}>

src/components/client/campaigns/DonorsAndDonations.tsx

@@ -85,7 +85,7 @@ export default function DonorsAndDonations({
 
   return (
     <Root>
-      <Grid item className={classes.donationsWrapper}>
+      <Grid item className={classes.donationsWrapper} data-testid="summary-donors-wrapper">
         {donationsToShow && donationsToShow.length !== 0 ? (
           donationsToShow.map(({ person, amount, createdAt, currency }, key) => (
             <Grid key={key} className={classes.donationItemWrapper}>

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})`}</Typography>
@@ -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
               })`}</Typography>