From d9f6245c39577eae121b0be19800a4104de6c77a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 27 Sep 2023 19:22:30 +0530
Subject: [PATCH] fix: Fixed issues with Expanded form and its tests

---
 .../smartsheet/expanded-form/index.vue        | 51 +++++++++++++------
 .../pages/Dashboard/ExpandedForm/index.ts     | 32 ++++++------
 tests/playwright/pages/Dashboard/index.ts     |  3 --
 .../tests/db/features/expandedFormUrl.spec.ts |  2 +-
 4 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 12895306fe..b229f7d66d 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -325,13 +325,14 @@ const onConfirmDeleteRowClick = async () => {
   showDeleteRowModal.value = false
   await deleteRowById(primaryKey.value)
   message.success('Row deleted')
-  if (!props.lastRow) {
-    await onNext()
-  } else if (!props.firstRow) {
-    emits('prev')
-  } else {
-    onClose()
-  }
+  // if (!props.lastRow) {
+  //   await onNext()
+  // } else if (!props.firstRow) {
+  //   emits('prev')
+  // } else {
+  // }
+  reloadTrigger.trigger()
+  onClose()
 }
 
 watch(
@@ -398,7 +399,7 @@ export default {
               <template #overlay>
                 <NcMenu>
                   <NcMenuItem v-if="!isNew" class="text-gray-700" @click="_loadRow()">
-                    <div v-e="['c:row-expand:reload']" class="flex gap-2 items-center">
+                    <div v-e="['c:row-expand:reload']" class="flex gap-2 items-center" data-testid="nc-expanded-form-reload">
                       <component :is="iconMap.reload" class="cursor-pointer" />
                       {{ $t('general.reload') }}
                     </div>
@@ -408,25 +409,34 @@ export default {
                     class="text-gray-700"
                     @click="!isNew ? onDuplicateRow() : () => {}"
                   >
-                    <div v-e="['c:row-expand:duplicate']" class="flex gap-2 items-center">
+                    <div
+                      v-e="['c:row-expand:duplicate']"
+                      data-testid="nc-expanded-form-duplicate"
+                      class="flex gap-2 items-center"
+                    >
                       <component :is="iconMap.copy" class="cursor-pointer nc-duplicate-row" />
                       Duplicate record
                     </div>
                   </NcMenuItem>
-                  <NcDivider />
+                  <NcDivider v-if="isUIAllowed('dataEdit') && !isNew" />
                   <NcMenuItem
                     v-if="isUIAllowed('dataEdit') && !isNew"
                     v-e="['c:row-expand:delete']"
                     class="!text-red-500"
                     @click="!isNew && onDeleteRowClick()"
                   >
-                    <component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
+                    <component :is="iconMap.delete" data-testid="nc-expanded-form-delete" class="cursor-pointer nc-delete-row" />
                     Delete record
                   </NcMenuItem>
                 </NcMenu>
               </template>
             </NcDropdown>
-            <NcButton type="secondary" class="nc-expand-form-close-btn w-10" @click="onClose">
+            <NcButton
+              type="secondary"
+              class="nc-expand-form-close-btn w-10"
+              data-testid="nc-expanded-form-close"
+              @click="onClose"
+            >
               <GeneralIcon icon="close" class="text-md text-gray-700" />
             </NcButton>
           </div>
@@ -542,7 +552,7 @@ export default {
               <template #overlay>
                 <NcMenu>
                   <NcMenuItem v-if="!isNew" class="text-gray-700" @click="_loadRow()">
-                    <div v-e="['c:row-expand:reload']" class="flex gap-2 items-center">
+                    <div v-e="['c:row-expand:reload']" class="flex gap-2 items-center" data-testid="nc-expanded-form-reload">
                       <component :is="iconMap.reload" class="cursor-pointer" />
                       {{ $t('general.reload') }}
                     </div>
@@ -554,8 +564,10 @@ export default {
                     class="!text-red-500"
                     @click="!isNew && onDeleteRowClick()"
                   >
-                    <component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
-                    Delete record
+                    <div data-testid="nc-expanded-form-delete">
+                      <component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
+                      Delete record
+                    </div>
                   </NcMenuItem>
                 </NcMenu>
               </template>
@@ -566,12 +578,19 @@ export default {
                 v-if="isMobileMode"
                 type="secondary"
                 size="medium"
+                data-testid="nc-expanded-form-save"
                 class="nc-expand-form-save-btn !xs:(text-base)"
                 @click="onClose"
               >
                 <div class="px-1">Close</div>
               </NcButton>
-              <NcButton type="primary" size="medium" class="nc-expand-form-save-btn !xs:(text-base)" @click="save">
+              <NcButton
+                data-testid="nc-expanded-form-save"
+                type="primary"
+                size="medium"
+                class="nc-expand-form-save-btn !xs:(text-base)"
+                @click="save"
+              >
                 <div class="xs:px-1">Save</div>
               </NcButton>
             </div>
diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index ec88f08dc0..9efc1ff517 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -141,6 +141,10 @@ export class ExpandedFormPage extends BasePage {
   async escape() {
     await this.rootPage.keyboard.press('Escape');
     await this.get().locator('.nc-drawer-expanded-form').waitFor({ state: 'hidden' });
+
+    await this.rootPage.waitForLoadState('networkidle');
+    await this.rootPage.waitForLoadState('domcontentloaded');
+    await this.rootPage.waitForTimeout(500);
   }
 
   async close() {
@@ -165,29 +169,27 @@ export class ExpandedFormPage extends BasePage {
 
     // expect(await this.btn_moreActions.count()).toBe(1);
     await this.btn_moreActions.click();
-    const menu = this.rootPage.locator('.ant-dropdown:visible');
-    await menu.waitFor({ state: 'visible' });
-    const menuItems = menu.locator('.ant-dropdown-menu-item');
-    for (let i = 0; i < (await menuItems.count()); i++) {
-      if (role === 'owner' || role === 'editor' || role === 'creator') {
-        const menuText = ['Reload', 'Duplicate record', 'Delete record'];
-        expect(await getTextExcludeIconText(menuItems.nth(i))).toBe(menuText[i]);
-      } else {
-        const menuText = ['Reload', 'Close'];
-        expect(await menuItems.nth(i).innerText()).toBe(menuText[i]);
-      }
+
+    if (role === 'owner' || role === 'editor' || role === 'creator') {
+      await expect(this.rootPage.getByTestId('nc-expanded-form-reload')).toBeVisible();
+      await expect(this.rootPage.getByTestId('nc-expanded-form-duplicate')).toBeVisible();
+      await expect(this.rootPage.getByTestId('nc-expanded-form-delete')).toBeVisible();
+    } else {
+      await expect(this.rootPage.getByTestId('nc-expanded-form-reload')).toBeVisible();
+      await expect(this.rootPage.getByTestId('nc-expanded-form-duplicate')).toHaveCount(0);
+      await expect(this.rootPage.getByTestId('nc-expanded-form-delete')).toHaveCount(0);
     }
 
     if (role === 'owner' || role === 'editor' || role === 'creator') {
-      expect(await this.btn_save.count()).toBe(1);
+      await expect(this.rootPage.getByTestId('nc-expanded-form-save')).toHaveCount(1);
     } else {
-      expect(await this.btn_save.count()).toBe(0);
+      await expect(this.rootPage.getByTestId('nc-expanded-form-save')).toHaveCount(0);
     }
 
     if (role === 'viewer') {
-      expect(await this.get().locator('.nc-comments-drawer').count()).toBe(0);
+      await expect(this.get().locator('.nc-comments-drawer')).toHaveCount(0);
     } else {
-      expect(await this.get().locator('.nc-comments-drawer').count()).toBe(1);
+      await expect(this.get().locator('.nc-comments-drawer')).toHaveCount(1);
     }
 
     // press escape to close the expanded form
diff --git a/tests/playwright/pages/Dashboard/index.ts b/tests/playwright/pages/Dashboard/index.ts
index 9a2aa2fce6..0231ca05cb 100644
--- a/tests/playwright/pages/Dashboard/index.ts
+++ b/tests/playwright/pages/Dashboard/index.ts
@@ -192,9 +192,6 @@ export class DashboardPage extends BasePage {
     await this.rootPage.getByTestId('nc-sidebar-user-logout').waitFor({ state: 'visible' });
     await this.sidebar.userMenu.clickLogout();
 
-    // TODO: Remove this
-    await this.rootPage.reload();
-
     await this.rootPage.locator('[data-testid="nc-form-signin"]:visible').waitFor();
     await new Promise(resolve => setTimeout(resolve, 150));
   }
diff --git a/tests/playwright/tests/db/features/expandedFormUrl.spec.ts b/tests/playwright/tests/db/features/expandedFormUrl.spec.ts
index 7a5606bce5..7ec1412f8c 100644
--- a/tests/playwright/tests/db/features/expandedFormUrl.spec.ts
+++ b/tests/playwright/tests/db/features/expandedFormUrl.spec.ts
@@ -42,7 +42,7 @@ test.describe('Expanded form URL', () => {
 
     // expand row & verify URL
     // New Expanded Modal don't have functionality to copy URL. Hence gettting URL from root page
-    
+
     await viewObj.openExpandedRow({ index: 0 });
     const url = await dashboard.rootPage.url();
     await dashboard.expandedForm.escape();