Admin campaign applications e2e tests part 3 file download or delete

README.md

@@ -100,7 +100,9 @@ Watch releases of this repository to be notified about future updates:
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-84-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:

e2e/README.md

@@ -52,3 +52,24 @@ 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

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'
@@ -169,6 +164,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 +262,42 @@ async function setupMeAndCampaignTypes(page: Page) {
     }),
   )
 }
+
+async function setupCampaignApplicationForEdit(
+  page: Page,
+  application: Partial<ReturnType<typeof defaultCampaignApplication>> = {},
+) {
+  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',
+      },
+    }),
+  )
+}

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'

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,
   }
 }