e2e(FR-759): add delete and delete-forever test case (#3445)

resolves #3450 (FR-759)

# Refactor VFolder E2E Tests with Improved Test Utilities

This PR adds new utility functions for VFolder operations in E2E tests:

1. Added `verifyVFolder` utility function to check folder visibility in the data view
2. Replaced `deleteVFolderAndVerify` with two more specific functions:
   - `moveToTrashAndVerify`: Moves a folder to trash and verifies it appears there
   - `deleteForeverAndVerifyFromTrash`: Permanently deletes a folder from trash and verifies it's gone

The new functions better reflect the actual user workflow of first moving items to trash before permanent deletion, and use the new UI components rather than the old Vaadin grid elements.

All existing test cases have been updated to use these new utility functions, making the tests more maintainable and accurate.

**Checklist:**
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

Author: agatha197

e2e/test-util.ts

@@ -122,14 +122,44 @@ export async function fillOutVaadinGridCellFilter(
   await nameInput.fill(inputValue);
 }
 
+async function removeSearchButton(page: Page, folderName: string) {
+  await page
+    .getByTestId('vfolder-filter')
+    .locator('div')
+    .filter({ hasText: `Name: ${folderName}` })
+    .locator('svg')
+    .first()
+    .click();
+}
+
+export async function verifyVFolder(
+  page: Page,
+  folderName: string,
+  statusTab: 'Created' | 'Trash' = 'Created',
+) {
+  await page.getByRole('link', { name: 'Data' }).click();
+  await page.getByRole('tab', { name: statusTab }).click();
+  await page.getByTestId('vfolder-filter').locator('div').nth(2).click();
+  await page.getByRole('option', { name: 'Name' }).locator('div').click();
+  const searchInput = page.locator('#rc_select_8');
+  await searchInput.fill(folderName);
+  await page.getByRole('button', { name: 'search' }).click();
+  await expect(
+    page
+      .getByRole('cell', { name: `VFolder Identicon ${folderName}` })
+      .filter({ hasText: folderName }),
+  ).toBeVisible();
+  await removeSearchButton(page, folderName);
+}
+
 export async function createVFolderAndVerify(
   page: Page,
   folderName: string,
   usageMode: 'general' | 'model' = 'general',
   type: 'user' | 'project' = 'user',
   permission: 'rw' | 'ro' = 'rw',
 ) {
-  await navigateTo(page, 'data');
+  await page.getByRole('link', { name: 'Data' }).click();
 
   await page.getByRole('button', { name: 'Create Folder' }).nth(1).click();
   await page.getByRole('textbox', { name: 'Folder name' }).fill(folderName);
@@ -140,63 +170,55 @@ export async function createVFolderAndVerify(
   await page.getByTestId(`${permission}-permission`).click();
 
   await page.getByRole('button', { name: 'Create', exact: true }).click();
-  await page.reload();
+  await verifyVFolder(page, folderName);
+}
+
+export async function moveToTrashAndVerify(page: Page, folderName: string) {
+  await page.getByRole('link', { name: 'Data' }).click();
   await page.getByTestId('vfolder-filter').locator('div').nth(2).click();
   await page.getByRole('option', { name: 'Name' }).locator('div').click();
-  await page.locator('#rc_select_8').fill(folderName);
+  const searchInput = page.locator('#rc_select_8');
+  await searchInput.fill(folderName);
   await page.getByRole('button', { name: 'search' }).click();
-  await page.getByRole('link', { name: folderName }).click();
-  await expect(
-    page
-      .getByRole('cell', { name: `VFolder Identicon ${folderName}` })
-      .filter({ hasText: folderName }),
-  ).toBeVisible();
+  await page
+    .getByRole('row', { name: 'VFolder Identicon e2e-test-' })
+    .getByRole('button')
+    .nth(1)
+    .click();
+  await page.getByRole('button', { name: 'Move' }).click();
+  await removeSearchButton(page, folderName);
+  await verifyVFolder(page, folderName, 'Trash');
 }
 
-export async function deleteVFolderAndVerify(page: Page, folderName: string) {
-  await navigateTo(page, 'data');
-  const nameInput = page
-    .locator('#general-folder-storage vaadin-grid-cell-content')
-    .filter({ hasText: 'Name' })
-    .locator('vaadin-text-field')
-    .nth(1)
-    .locator('input');
-  await nameInput.click();
-  await nameInput.fill(folderName);
-  await page.waitForTimeout(1000);
-  await page.getByRole('button', { name: 'delete' }).first().click();
+export async function deleteForeverAndVerifyFromTrash(
+  page: Page,
+  folderName: string,
+) {
+  await page.getByRole('link', { name: 'Data' }).click();
+  await page.getByRole('tab', { name: 'Trash' }).click();
+  const searchInput = page.locator('#rc_select_8');
+  await searchInput.fill(folderName);
+  await page.getByRole('button', { name: 'search' }).click();
+  // Delete forever
   await page
-    .locator('#delete-without-confirm-button')
-    .getByLabel('delete')
-    .click();
-  await page.waitForLoadState('networkidle');
-  await page.getByRole('tab', { name: 'delete' }).click();
-  const nameInputInTrash = page
-    .locator('#trash-bin-folder-storage vaadin-grid-cell-content')
-    .filter({ hasText: 'Name' })
-    .locator('vaadin-text-field')
+    .getByRole('row', { name: 'VFolder Identicon e2e-test-' })
+    .getByRole('button')
     .nth(1)
-    .locator('input');
-  await nameInputInTrash.fill(folderName);
-  // after filling the input, the vaadin-grid will be updated asynchronously. So we need to wait for the grid to be updated.
-  await page.waitForTimeout(1000);
-  await page
-    .locator('vaadin-grid-cell-content')
-    .filter({ hasText: folderName })
-    .locator('//following-sibling::*[7]')
-    .getByRole('button', { name: 'delete_forever' })
     .click();
-  await page
-    .getByRole('textbox', { name: 'Type folder name to delete' })
-    .fill(folderName);
+  await page.locator('#confirmText').click();
+  await page.locator('#confirmText').fill(folderName);
   await page.getByRole('button', { name: 'Delete forever' }).click();
+  // Verify
+  await page.getByTestId('vfolder-filter').locator('div').nth(2).click();
+  await page.getByRole('option', { name: 'Name' }).locator('div').click();
+  await searchInput.fill(folderName);
+  await page.getByRole('button', { name: 'search' }).click();
   await expect(
     page
-      .locator('vaadin-grid-cell-content')
-      .filter({ hasText: folderName })
-      .locator(':visible'),
+      .getByRole('cell', { name: `VFolder Identicon ${folderName}` })
+      .filter({ hasText: folderName }),
   ).toHaveCount(0);
-  await nameInputInTrash.fill('');
+  await removeSearchButton(page, folderName);
 }
 
 export async function createSession(page: Page, sessionName: string) {

e2e/vfolder.test.ts

@@ -1,21 +1,27 @@
 import {
   createVFolderAndVerify,
-  deleteVFolderAndVerify,
+  deleteForeverAndVerifyFromTrash,
   fillOutVaadinGridCellFilter,
   loginAsUser,
   loginAsUser2,
   logout,
+  moveToTrashAndVerify,
   navigateTo,
   userInfo,
 } from './test-util';
 import { test, expect } from '@playwright/test';
 
 test.describe('VFolder ', () => {
-  test('User can create and delete vFolder', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await loginAsUser(page);
-    const folderName = 'e2e-test-folder-user-creation' + new Date().getTime();
+  });
+  const folderName = 'e2e-test-folder-user-creation' + new Date().getTime();
+  test('User can create and delete, delete forever vFolder', async ({
+    page,
+  }) => {
     await createVFolderAndVerify(page, folderName);
-    await deleteVFolderAndVerify(page, folderName);
+    await moveToTrashAndVerify(page, folderName);
+    await deleteForeverAndVerifyFromTrash(page, folderName);
   });
 });
 
@@ -89,7 +95,8 @@ test.describe('VFolder sharing', () => {
     await page2.getByLabel('Type folder name to leave').fill(sharingFolderName);
     await page2.getByRole('button', { name: 'Leave' }).click();
     // delete folder
-    await deleteVFolderAndVerify(page, sharingFolderName);
+    await moveToTrashAndVerify(page, sharingFolderName);
+    await deleteForeverAndVerifyFromTrash(page, sharingFolderName);
     await page.close();
     await page2.close();
   });
@@ -129,7 +136,8 @@ test.describe('VFolder sharing', () => {
         .filter({ hasText: sharingFolderName }),
     ).toBeVisible();
     // Delete folder as User before User2 accept the invitation
-    await deleteVFolderAndVerify(page, sharingFolderName);
+    await moveToTrashAndVerify(page, sharingFolderName);
+    await deleteForeverAndVerifyFromTrash(page, sharingFolderName);
     // check the invitation is disappeared
     await page2.reload();
     await expect(
@@ -181,7 +189,8 @@ test.describe('VFolder sharing', () => {
         .filter({ hasText: sharingFolderName }),
     ).toBeVisible();
     // User delete the folder when User2 is trying to accept
-    await deleteVFolderAndVerify(page, sharingFolderName);
+    await moveToTrashAndVerify(page, sharingFolderName);
+    await deleteForeverAndVerifyFromTrash(page, sharingFolderName);
     // User2 accept the invitation
     await page2
       .getByText(`From ${userInfo.user.email}`)