From 9db3a35107acbd71042668e9dc4e706065add3a0 Mon Sep 17 00:00:00 2001 From: Dimitar Nizamov Date: Sat, 3 Dec 2022 12:39:41 +0100 Subject: [PATCH] [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 --- README.md | 2 + e2e/helpers.ts | 22 +++++ e2e/local/campaigns.spec.ts | 29 ++++++ e2e/local/donation.spec.ts | 89 +++++++++++-------- playwright.config.ts | 3 + .../index/sections/Jumbotron/Jumbotron.tsx | 6 +- .../one-time-donation/steps/FirstStep.tsx | 4 +- 7 files changed, 118 insertions(+), 37 deletions(-) create mode 100644 e2e/helpers.ts create mode 100644 e2e/local/campaigns.spec.ts diff --git a/README.md b/README.md index d2834e29f..b27583524 100644 --- 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](https://img.shields.io/badge/all_contributors-62-orange.svg?style=flat-square)](#contributors-) + 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 new file mode 100644 index 000000000..6f0faba77 --- /dev/null +++ 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(`
`) + 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 new file mode 100644 index 000000000..203298aa4 --- /dev/null +++ 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 index aea2602c3..6d8098db6 100644 --- 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('anon_e2e_tester@podkrepi.bg') 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 index ac58ae038..a45a0649c 100644 --- 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 index 4d64d3592..ba4caa8d4 100644 --- a/src/components/index/sections/Jumbotron/Jumbotron.tsx +++ b/src/components/index/sections/Jumbotron/Jumbotron.tsx @@ -20,7 +20,11 @@ export default function Jumbotron() {
{t('index:title')} - + {t('common:nav.donatе')} diff --git a/src/components/one-time-donation/steps/FirstStep.tsx b/src/components/one-time-donation/steps/FirstStep.tsx index c353bab26..90d1e7809 100644 --- 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() { - {campaign.paymentReference} + + {campaign.paymentReference} +