[Testing] E2e tests donation by bank and campaigns (#1228)

* Add campaigns e2e tests and custom value on donations e2e test * e2e-tests - add bank donation e2e tests
podkrepi-bg · Dec 3, 2022 · 9db3a35 · 9db3a35
1 parent 0d4035b
commit 9db3a35
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -70,7 +70,9 @@ Read more at [End-2-End Testing](https://github.com/podkrepi-bg/frontend/blob/ma
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-62-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Please check [contributors guide](https://github.com/podkrepi-bg/frontend/blob/master/CONTRIBUTING.md) for:

diff --git a/e2e/helpers.ts b/e2e/helpers.ts
@@ -0,0 +1,22 @@
+import { expect, Page } from '@playwright/test'
+
+/**
+ * @param page The page to get the clipboard text from.
+ * @param textToCheck The text to check for in the clipboard.
+ * @description This is a workaround for clipboard testing until playwright supports it.
+ * @see
+ * https://github.com/microsoft/playwright/issues/15860
+ * https://github.com/microsoft/playwright/issues/13097
+ * */
+export const expectCopied = async (page: Page, textToCheck: string) => {
+  const isMac = await page.evaluate(() => navigator.platform.toUpperCase().indexOf('MAC') >= 0)
+  const modifier = isMac ? 'Meta' : 'Control'
+  const context = page.context()
+  const newPage = await context.newPage()
+  await newPage.setContent(`<div id="clipboard-tester-div" contenteditable></div>`)
+  await newPage.focus('#clipboard-tester-div')
+  await newPage.keyboard.press(`${modifier}+KeyV`)
+  expect(
+    await newPage.evaluate(() => document.querySelector('#clipboard-tester-div')?.textContent),
+  ).toBe(textToCheck)
+}
diff --git a/e2e/local/campaigns.spec.ts b/e2e/local/campaigns.spec.ts
@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+  await page.locator('button[data-testid="jumbotron-donate-button"]').click()
+  await page.waitForURL('/campaigns')
+})
+
+test.describe('campaigns page', () => {
+  test('test rendering and defaults', async ({ page }) => {
+    expect(page.locator('text=Кампании')).toBeDefined()
+    expect(page.locator('text=Подкрепете кауза днес!')).toBeDefined()
+  })
+  test('click donate button of active campaign', async ({ page }) => {
+    await page.locator('button:has-text("Подкрепете сега"):not([disabled])').first().click()
+    await page.waitForURL((url) => url.pathname.includes('/campaigns/donation'))
+    expect(page.locator('text=Как желаете да дарите?')).toBeDefined()
+    expect(page.locator('text=Карта')).toBeDefined()
+    expect(page.locator('text=5 лв.')).toBeDefined()
+  })
+  test('successful campaign has a disabled donate button', async ({ page }) => {
+    expect(page.locator('button:has-text("Подкрепете сега"):is([disabled])')).toBeDefined()
+  })
+  test('click show more button leads to campaign details', async ({ page }) => {
+    await page.locator('text="Вижте повече"').first().click()
+    await page.waitForURL((url) => url.pathname.includes('/campaigns/'))
+    expect(page.locator('text=Сподели')).toBeDefined()
+  })
+})
diff --git a/e2e/local/donation.spec.ts b/e2e/local/donation.spec.ts
@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test'
+import { expectCopied } from '../helpers'
 
 test.beforeEach(async ({ page }) => {
   await page.goto('http://localhost:3040/', { waitUntil: 'networkidle' })
-  await page.locator('text="Подкрепете сега"').first().click()
+  await page.locator('button:not([disabled]):has-text("Подкрепете сега")').first().click()
   await page.waitForURL((url) => url.pathname.includes('/campaigns/donation'))
 })
 
@@ -19,47 +20,43 @@ test.describe('donation page init', () => {
   })
 })
 
-//This test will not pass since the keycloak is not yet working in the e2e tests
-
-// test.describe('logged in user donation flow', () => {
-//   test('choosing a predefined value and donate', async ({ page }) => {
-//     // Choose a predefined value from the radio buttons
-//     await page.locator('input[value="card"]').check()
-//     await page.locator('input[value="500"]').check()
-
-//     // Click checkbox to cover the tax by stripe
-//     await page.locator('input[name="cardIncludeFees"]').check()
-//     await page.locator('button:has-text("Напред")').click()
+test.describe('anonymous user card donation flow', () => {
+  test('choosing a predefined value and donating', async ({ page }) => {
+    // Choose a predefined value from the radio buttons
+    await page.locator('input[value="card"]').check()
+    await page.locator('input[value="500"]').check()
 
-//     await expect(page.locator('text=Вече сте влезли във Вашия профил')).toBeDefined()
-//     await page.locator('button:has-text("Напред")').click()
+    // Click checkbox to cover the tax by stripe
+    await page.locator('input[name="cardIncludeFees"]').check()
+    await page.locator('button:has-text("Напред")').click()
 
-//     await page.fill('textarea', 'Test message')
-//     await page.locator('button:has-text("Премини към плащане")').click()
+    page.locator('text=Дарете анонимно').click()
+    await page.locator('button:has-text("Напред")').click()
 
-//     await page.waitForURL((url) => url.host === 'checkout.stripe.com')
+    await page.fill('textarea', 'е2е_tester')
+    await page.locator('button:has-text("Премини към плащане")').click()
 
-//     await expect(page.locator('text=BGN 5.00')).toBeDefined()
-//     await page.locator('input[name="email"]').fill('admin@podkrepi.bg')
-//     await page.locator('input[name="cardNumber"]').fill('4242424242424242')
-//     await page.locator('input[name="cardExpiry"]').fill('0424')
-//     await page.locator('input[name="cardCvc"]').fill('123')
-//     await page.locator('input[name="billingName"]').fill('John Doe')
-//     await page.locator('select[name="billingCountry"]').selectOption('BG')
+    await expect(page.locator('text=BGN 5.00')).toBeDefined()
+    await page.locator('input[name="email"]').fill('anon_e2e_tester@podkrepi.bg')
+    await page.locator('input[name="cardNumber"]').fill('4242424242424242')
+    await page.locator('input[name="cardExpiry"]').fill('0424')
+    await page.locator('input[name="cardCvc"]').fill('123')
+    await page.locator('input[name="billingName"]').fill('John Doe')
+    await page.locator('select[name="billingCountry"]').selectOption('BG')
 
-//     await page.locator('button[data-testid="hosted-payment-submit-button"]').click()
+    await page.locator('button[data-testid="hosted-payment-submit-button"]').click()
 
-//     await page.waitForURL((url) => url.searchParams.get('success') === 'true')
+    await page.waitForURL((url) => url.pathname.includes('/campaigns/donation'))
 
-//     await expect(page.locator('text=Благодарим за доверието и подкрепата!')).toBeDefined()
-//   })
-// })
+    expect(page.locator('text=Благодарим за доверието и подкрепата!')).toBeDefined()
+  })
 
-test.describe('anonymous user donation flow', () => {
-  test('choosing a custom value and continuing', async ({ page }) => {
+  test('choosing a custom value and donating', async ({ page }) => {
     // Choose a predefined value from the radio buttons
     await page.locator('input[value="card"]').check()
-    await page.locator('input[value="500"]').check()
+    await page.locator('input[value="other"]').check()
+    // Need to take the first here because MUICollapse animations creates a copy
+    await page.locator('input[name="otherAmount"]').first().type('6')
 
     // Click checkbox to cover the tax by stripe
     await page.locator('input[name="cardIncludeFees"]').check()
@@ -71,7 +68,7 @@ test.describe('anonymous user donation flow', () => {
     await page.fill('textarea', 'е2е_tester')
     await page.locator('button:has-text("Премини към плащане")').click()
 
-    await expect(page.locator('text=BGN 5.00')).toBeDefined()
+    await expect(page.locator('text=BGN 6.58')).toBeDefined()
     await page.locator('input[name="email"]').fill('[email protected]')
     await page.locator('input[name="cardNumber"]').fill('4242424242424242')
     await page.locator('input[name="cardExpiry"]').fill('0424')
@@ -81,8 +78,30 @@ test.describe('anonymous user donation flow', () => {
 
     await page.locator('button[data-testid="hosted-payment-submit-button"]').click()
 
-    await page.waitForURL((url) => url.searchParams.get('success') === 'true')
+    await page.waitForURL((url) => url.pathname.includes('/campaigns/donation'))
+    expect(page.url().search('success=true')).not.toBe(-1)
+
+    expect(page.locator('text=Благодарим за доверието и подкрепата!')).toBeDefined()
+  })
+})
 
-    await expect(page.locator('text=Благодарим за доверието и подкрепата!')).toBeDefined()
+test.describe('user bank transfer donation flow', () => {
+  test('check copied values', async ({ page }) => {
+    // Choose a predefined value from the radio buttons
+    await page.locator('input[value="bank"]').check()
+    expect(await page.locator('text="Копирай"').count()).toBe(4)
+
+    if (page.context().browser()?.browserType().name() === 'chromium') {
+      await page.context().grantPermissions(['clipboard-read', 'clipboard-write'])
+      await page.locator('text="Копирай"').nth(0).click()
+      await expectCopied(page, 'Сдружение Подкрепи БГ')
+      await page.locator('text="Копирай"').nth(1).click()
+      await expectCopied(page, 'Уникредит Булбанк')
+      await page.locator('text="Копирай"').nth(2).click()
+      await expectCopied(page, 'BG66UNCR70001524349032')
+      await page.locator('text="Копирай"').nth(3).click()
+      const reference = await page.locator('p[data-testid="payment-reference-field"]').innerText()
+      await expectCopied(page, reference)
+    }
   })
 })
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -48,6 +48,9 @@ const config: PlaywrightTestConfig = {
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
+        contextOptions: {
+          permissions: ['clipboard-read'],
+        },
       },
     },
 

diff --git a/src/components/index/sections/Jumbotron/Jumbotron.tsx b/src/components/index/sections/Jumbotron/Jumbotron.tsx
@@ -20,7 +20,11 @@ export default function Jumbotron() {
             <br />
             {t('index:title')}
           </MainTitle>
-          <DonateButton size="large" variant="contained" href={routes.campaigns.index}>
+          <DonateButton
+            data-testid="jumbotron-donate-button"
+            size="large"
+            variant="contained"
+            href={routes.campaigns.index}>
             {t('common:nav.donatе')}
           </DonateButton>
         </JumbotronWrapper>

diff --git a/src/components/one-time-donation/steps/FirstStep.tsx b/src/components/one-time-donation/steps/FirstStep.tsx
@@ -152,7 +152,9 @@ export default function FirstStep() {
           <Divider className={classes.divider} />
           <Grid container justifyContent="center">
             <Grid my={2} item display="flex" justifyContent="space-between" xs={9}>
-              <Typography fontWeight="bold">{campaign.paymentReference}</Typography>
+              <Typography data-testid="payment-reference-field" fontWeight="bold">
+                {campaign.paymentReference}
+              </Typography>
               <CopyTextButton
                 text={campaign.paymentReference}
                 variant="contained"