From 12a7a2aff2c77b88d4e339184bcefe3307a9b02f Mon Sep 17 00:00:00 2001 From: Georgi Parlakov Date: Sun, 20 Oct 2024 22:27:45 +0300 Subject: [PATCH 1/3] chore: e2e test for organizer edit and delete a file --- .../campaign-application-giver.spec.ts | 74 +++++++++++++++++++ .../CampaignApplicationsGrid.tsx | 3 +- 2 files changed, 76 insertions(+), 1 deletion(-) diff --git a/e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts b/e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts index 1a916af60..558a0ab83 100644 --- a/e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts +++ b/e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts @@ -169,6 +169,41 @@ test.describe('Campaign application giver', () => { await expect(page.getByText(t.steps.application['campaign-end'].options.funds)).toBeVisible() await expect(page.getByText('goal')).toBeVisible() }) + + test('should see the edit campaign application and be able to delete a selected file ', async ({ + page, + baseURL, + }) => { + // arrange + await setupMeAndCampaignTypes(page) + await setupCampaignApplicationForEdit(page) + await page.goto(`${baseURL}/campaigns/application/1234`) + const t = await textLocalized().campaign.bg() + await page.getByRole('button', { name: t.cta.next }).click() + await page.getByRole('button', { name: t.cta.next }).click() + + // expect to see 2 files + await expect(page.getByText('1234.txt')).toBeVisible() + await expect(page.getByText('document.pdf')).toBeVisible() + + // act + // hit the delete button ... + await page.locator('li').filter({ hasText: '1234.txt' }).getByLabel('delete').click() + const [editCamAppReq, fileDeleteReq] = await Promise.all([ + // the edit request to edit the CamApp entity + page.waitForRequest((r) => r.method() === 'PATCH'), + // the delete request to remove one of the files + page.waitForRequest((r) => r.method() === 'DELETE'), + // ... and when submit + page.getByRole('button', { name: t.cta.submit }).click(), + ]) + + await expect(editCamAppReq.postDataJSON()).toBeDefined() + + const fileDelRes = await fileDeleteReq.response() + + await expect(fileDelRes?.json()).resolves.toEqual({ id: 'ok' }) + }) }) function defaultCampaignApplication() { @@ -232,3 +267,42 @@ async function setupMeAndCampaignTypes(page: Page) { }), ) } + +async function setupCampaignApplicationForEdit( + page: Page, + application: Partial> = {}, +) { + await page.route('*/**/api/v1/campaign-application/byId/*', (req) => + req.fulfill({ + json: { + ...defaultCampaignApplication(), + id: 'forEdit', + documents: [ + { filename: '1234.txt', id: '1234' }, + { filename: 'document.pdf', id: 'doc-id-123123' }, + ], + ...application, + }, + }), + ) + + // on submit at the end of edit this patch request needs to be sent + await page.route('*/**/api/v1/campaign-application/forEdit', (req) => + req.fulfill({ + json: { + ...defaultCampaignApplication(), + id: 'forEdit', + ...application, + }, + }), + ) + + // delete file successful + await page.route('*/**/api/v1/campaign-application/fileById/*', (req) => + req.fulfill({ + json: { + id: 'ok', + }, + }), + ) +} diff --git a/src/components/admin/campaign-applications/CampaignApplicationsGrid.tsx b/src/components/admin/campaign-applications/CampaignApplicationsGrid.tsx index 4d230a824..d6d3b3f78 100644 --- a/src/components/admin/campaign-applications/CampaignApplicationsGrid.tsx +++ b/src/components/admin/campaign-applications/CampaignApplicationsGrid.tsx @@ -115,7 +115,8 @@ export const useCampaignsList = () => { const { data, isLoading } = fetchMutation() return { - list: data?.sort((a, b) => b?.updatedAt?.localeCompare(a?.updatedAt ?? '') ?? 0), + // the data array is strict mode (sometimes) it throws a Readonly array error on the sort so create a shallow copy + list: [...(data ?? [])].sort((a, b) => b?.updatedAt?.localeCompare(a?.updatedAt ?? '') ?? 0), isLoading, } } From 0112db6aa6951fe630708d428eee5c1f46535506 Mon Sep 17 00:00:00 2001 From: Georgi Parlakov Date: Sun, 20 Oct 2024 22:40:31 +0300 Subject: [PATCH 2/3] chore: add auth e2e test readme section --- README.md | 2 ++ e2e/README.md | 19 +++++++++++++++++++ .../campaign-application-giver.spec.ts | 5 ----- e2e/utils/fixtures.ts | 4 ++++ 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 67bd26945..cd0668bdf 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,9 @@ Watch releases of this repository to be notified about future updates: ## Contributors ✨ + [![All Contributors](https://img.shields.io/badge/all_contributors-84-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/README.md b/e2e/README.md index 0f3b4bde9..f270dd84e 100644 --- a/e2e/README.md +++ b/e2e/README.md @@ -52,3 +52,22 @@ Options: ```shell yarn test:e2e --headed --debug -x -g support ``` + +### Tests with Authenticated user + +### Writing + +To auth a user we rely on the Storage where the session is stored. And the storage is filled in and accessed via a `test.extend` [fixture](https://playwright.dev/docs/auth#authenticate-with-api-request). It takes care to login and store the session and then use it in the tests. See the `e2e/utils/fixtures.ts` file + +This is the process for writing tests for auth user. + +- import the desired user `test` from the fixture + + ```import { expect, giverTest as test } from '../../../utils/fixtures'``` for the `giver` user +- write your e2e tests ... + +>[Examples] `e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts` and `e2e/tests/regression/campaign-application/campaign-application-admin.spec.ts` +### Running + +- [Locally] run the 'docker compose -d keycloak pg-db', the api (`yarn dev` in the api repo folder), the app (`yarn dev` in the frontend repo folder), +- in the `frontend/e2e` folder run `yarn e2e:tests --ui` to start the playwright visual testing tool diff --git a/e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts b/e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts index 558a0ab83..d657221b6 100644 --- a/e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts +++ b/e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts @@ -1,8 +1,3 @@ -import { - CampaignApplicationResponse, - CampaignApplicationExisting, - CampaignApplicationAdminResponse, -} from '../../../../src/gql/campaign-applications' import { Page } from 'playwright/test' import { expect, giverTest as test } from '../../../utils/fixtures' import { textLocalized } from '../../../utils/texts-localized' diff --git a/e2e/utils/fixtures.ts b/e2e/utils/fixtures.ts index ea13fef30..a51ad18a1 100644 --- a/e2e/utils/fixtures.ts +++ b/e2e/utils/fixtures.ts @@ -1,3 +1,7 @@ +/** + * This is logic for authenticating and storing the session to be used in the tests. See the e2e/Readme.md - the section about Authenticated user + */ + import { test, test as base } from '@playwright/test' import dotenv from 'dotenv' import fs from 'fs' From 23b3bbe91b56246f249cda5f0582a3bfcfc9a693 Mon Sep 17 00:00:00 2001 From: Georgi Parlakov Date: Sun, 20 Oct 2024 22:41:13 +0300 Subject: [PATCH 3/3] chore: linting --- e2e/README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/e2e/README.md b/e2e/README.md index f270dd84e..ba43be251 100644 --- a/e2e/README.md +++ b/e2e/README.md @@ -61,13 +61,15 @@ To auth a user we rely on the Storage where the session is stored. And the stora This is the process for writing tests for auth user. -- import the desired user `test` from the fixture +- import the desired user `test` from the fixture + + `import { expect, giverTest as test } from '../../../utils/fixtures'` for the `giver` user - ```import { expect, giverTest as test } from '../../../utils/fixtures'``` for the `giver` user - write your e2e tests ... ->[Examples] `e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts` and `e2e/tests/regression/campaign-application/campaign-application-admin.spec.ts` +> [Examples] `e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts` and `e2e/tests/regression/campaign-application/campaign-application-admin.spec.ts` + ### Running - [Locally] run the 'docker compose -d keycloak pg-db', the api (`yarn dev` in the api repo folder), the app (`yarn dev` in the frontend repo folder), -- in the `frontend/e2e` folder run `yarn e2e:tests --ui` to start the playwright visual testing tool +- in the `frontend/e2e` folder run `yarn e2e:tests --ui` to start the playwright visual testing tool