From 1f3305309f00dee5135a6c80e57acf943c73e8d5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH] fix(test): pagination pw test fail issue

---
 packages/nc-gui/components/nc/Pagination.vue     |  2 +-
 .../nc-gui/components/smartsheet/Pagination.vue  |  2 +-
 tests/playwright/pages/Dashboard/Grid/index.ts   | 16 ++++++++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/nc/Pagination.vue b/packages/nc-gui/components/nc/Pagination.vue
index 32cc5a0abf..fde01c4879 100644
--- a/packages/nc-gui/components/nc/Pagination.vue
+++ b/packages/nc-gui/components/nc/Pagination.vue
@@ -56,7 +56,7 @@ const pagesList = computed(() => {
 </script>
 
 <template>
-  <div v-show="totalPages > 1" class="nc-pagination flex flex-row items-center gap-x-2">
+  <div v-if="totalPages > 1" class="nc-pagination flex flex-row items-center gap-x-2">
     <component :is="props.firstPageTooltip && mode === 'full' ? NcTooltip : 'div'" v-if="mode === 'full'">
       <template v-if="props.firstPageTooltip" #title>
         {{ props.firstPageTooltip }}
diff --git a/packages/nc-gui/components/smartsheet/Pagination.vue b/packages/nc-gui/components/smartsheet/Pagination.vue
index 5f248727d5..773b32762d 100644
--- a/packages/nc-gui/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui/components/smartsheet/Pagination.vue
@@ -100,7 +100,7 @@ const renderAltOrOptlKey = () => {
         'ml-8': alignLeft,
       }"
     >
-      <div v-if="isViewDataLoading" class="flex flex-row justify-center item-center min-h-10 min-w-42">
+      <div v-if="isViewDataLoading" class="nc-pagination-skeleton flex flex-row justify-center item-center min-h-10 min-w-42">
         <a-skeleton :active="true" :title="true" :paragraph="false" class="-mt-1 max-w-60" />
       </div>
       <NcPagination
diff --git a/tests/playwright/pages/Dashboard/Grid/index.ts b/tests/playwright/pages/Dashboard/Grid/index.ts
index 35e00af4f2..b1d9bd9887 100644
--- a/tests/playwright/pages/Dashboard/Grid/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/index.ts
@@ -302,12 +302,12 @@ export class GridPage extends BasePage {
   async verifyTotalRowCount({ count }: { count: number }) {
     // wait for 100 ms and try again : 5 times
     let i = 0;
-    await this.get().locator(`.nc-pagination`).waitFor();
+    await this.get().locator(`.nc-pagination-skeleton`).waitFor({ state: 'hidden' });
     let records = await this.get().locator(`[data-testid="grid-pagination"]`).allInnerTexts();
     let recordCnt = records[0].split(' ')[0];
 
     while (parseInt(recordCnt) !== count && i < 5) {
-      await this.get().locator(`.nc-pagination`).waitFor();
+      await this.get().locator(`.nc-pagination-skeleton`).waitFor({ state: 'hidden' });
       records = await this.get().locator(`[data-testid="grid-pagination"]`).allInnerTexts();
       recordCnt = records[0].split(' ')[0];
 
@@ -319,6 +319,11 @@ export class GridPage extends BasePage {
   }
 
   async verifyPaginationCount({ count }: { count: string }) {
+    if (await this.get().locator('.nc-pagination').isHidden()) {
+      expect(1).toBe(+count);
+      return;
+    }
+
     await expect(this.get().locator(`.nc-pagination .total`)).toHaveText(count);
   }
 
@@ -329,6 +334,8 @@ export class GridPage extends BasePage {
     type: 'first-page' | 'last-page' | 'next-page' | 'prev-page';
     skipWait?: boolean;
   }) {
+    if (await this.get().locator('.nc-pagination').isHidden()) return;
+
     if (!skipWait) {
       await this.get().locator(`.nc-pagination .${type}`).click();
       await this.waitLoading();
@@ -345,6 +352,11 @@ export class GridPage extends BasePage {
   }
 
   async verifyActivePage({ pageNumber }: { pageNumber: string }) {
+    if (await this.get().locator('.nc-pagination').isHidden()) {
+      expect(1).toBe(+pageNumber);
+      return;
+    }
+
     await expect(this.get().locator(`.nc-pagination .ant-select-selection-item`)).toHaveText(pageNumber);
   }