feat(FR-636): add delete and delete-forever test case

Author: agatha197

e2e/test-util.ts

@@ -122,6 +122,28 @@ export async function fillOutVaadinGridCellFilter(
   await nameInput.fill(inputValue);
 }
 
+export async function verifyVFolder(
+  page: Page,
+  folderName: string,
+  statusTab: 'Created' | 'Trash' = 'Created',
+) {
+  await navigateTo(page, 'data');
+  await page.getByRole('tab', { name: statusTab }).click();
+  await page.locator('#react-root').getByTitle('Name').click();
+  await page.getByRole('option', { name: 'Name' }).locator('div').click();
+  const searchInput = page.locator('#rc_select_8');
+  await searchInput.click();
+  await searchInput.fill(folderName);
+  await page.getByRole('button', { name: 'search' }).click();
+  await expect(
+    page
+      .getByRole('cell', { name: `VFolder Identicon ${folderName}` })
+      .filter({ hasText: folderName }),
+  ).toBeVisible();
+  // remove searching folder name
+  await page.getByRole('img', { name: 'close' }).locator('svg').click();
+}
+
 export async function createVFolderAndVerify(
   page: Page,
   folderName: string,
@@ -135,69 +157,70 @@ export async function createVFolderAndVerify(
   await page.getByRole('textbox', { name: 'Folder name' }).fill(folderName);
 
   // select parsed parameters in create modal form
+  await page.getByTestId(`${usageMode}-usage-mode`).isVisible({
+    timeout: 1,
+  });
   await page.getByTestId(`${usageMode}-usage-mode`).click();
+  await page.getByTestId(`${usageMode}-type`).isVisible({
+    timeout: 1,
+  });
   await page.getByTestId(`${type}-type`).click();
   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 navigateTo(page, 'data');
   await page.locator('#react-root').getByTitle('Name').click();
   await page.getByRole('option', { name: 'Name' }).locator('div').click();
-  await page.locator('#rc_select_8').click();
-  await page.locator('#rc_select_8').fill(folderName);
+  const searchInput = page.locator('#rc_select_8');
+  await searchInput.click();
+  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();
+  // remove searching folder name
+  await page.getByRole('img', { name: 'close' }).locator('svg').click();
+  await verifyVFolder(page, folderName, 'Trash');
 }
 
-export async function deleteVFolderAndVerify(page: Page, folderName: string) {
+export async function deleteForeverAndVerifyFromTrash(
+  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();
+  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.locator('#react-root').getByTitle('Name').click();
+  await page.getByRole('option', { name: 'Name' }).locator('div').click();
+  await searchInput.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('');
+  // Remove searching folder name
+  await page.getByRole('img', { name: 'close' }).locator('svg').click();
 }
 
 export async function createSession(page: Page, sessionName: string) {

e2e/vfolder.test.ts

@@ -1,21 +1,23 @@
 import {
   createVFolderAndVerify,
-  deleteVFolderAndVerify,
+  deleteForeverAndVerifyFromTrash,
   fillOutVaadinGridCellFilter,
   loginAsUser,
   loginAsUser2,
   logout,
+  moveToTrashAndVerify,
   navigateTo,
   userInfo,
 } from './test-util';
 import { test, expect } from '@playwright/test';
 
 test.describe('VFolder ', () => {
+  const folderName = 'e2e-test-folder-user-creation' + new Date().getTime();
   test('User can create and delete vFolder', async ({ page }) => {
     await loginAsUser(page);
-    const folderName = 'e2e-test-folder-user-creation' + new Date().getTime();
     await createVFolderAndVerify(page, folderName);
-    await deleteVFolderAndVerify(page, folderName);
+    await moveToTrashAndVerify(page, folderName);
+    await deleteForeverAndVerifyFromTrash(page, folderName);
   });
 });
 
@@ -89,7 +91,7 @@ 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 deleteForeverAndVerifyFromTrash(page, sharingFolderName);
     await page.close();
     await page2.close();
   });
@@ -129,7 +131,7 @@ test.describe('VFolder sharing', () => {
         .filter({ hasText: sharingFolderName }),
     ).toBeVisible();
     // Delete folder as User before User2 accept the invitation
-    await deleteVFolderAndVerify(page, sharingFolderName);
+    await deleteForeverAndVerifyFromTrash(page, sharingFolderName);
     // check the invitation is disappeared
     await page2.reload();
     await expect(
@@ -181,7 +183,7 @@ test.describe('VFolder sharing', () => {
         .filter({ hasText: sharingFolderName }),
     ).toBeVisible();
     // User delete the folder when User2 is trying to accept
-    await deleteVFolderAndVerify(page, sharingFolderName);
+    await deleteForeverAndVerifyFromTrash(page, sharingFolderName);
     // User2 accept the invitation
     await page2
       .getByText(`From ${userInfo.user.email}`)