From 5e38dc59cd194cb893f145f7d7cf68df77b82009 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Thu, 21 Sep 2023 12:16:24 +0530
Subject: [PATCH] fix(test): table to div on test

---
 packages/nc-gui/components/account/Token.vue  | 53 +++++++++++--------
 tests/playwright/pages/Account/Token.ts       | 12 ++---
 .../accountTokenManagement.spec.ts            |  2 +-
 3 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/packages/nc-gui/components/account/Token.vue b/packages/nc-gui/components/account/Token.vue
index f3bfbc7e8a..ed4fbc7e11 100644
--- a/packages/nc-gui/components/account/Token.vue
+++ b/packages/nc-gui/components/account/Token.vue
@@ -148,58 +148,69 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
       </div>
       <span>Create personal API tokens to use in automation or external apps.</span>
       <div class="w-[780px] mt-5 border-1 rounded-md">
-        <div class="flex w-full pl-4 bg-gray-50 border-b-1">
-          <span class="px-3 py-3.5 text-gray-500 font-medium text-3.5 w-1/6">Token name</span>
-          <span class="px-3 py-3.5 text-gray-500 font-medium text-3.5 w-1/4 text-center">Creator</span>
-          <span class="px-3 py-3.5 text-gray-500 font-medium text-3.5 w-1/6 ml-12 text-center">Token</span>
-          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/4 ml-15 text-center">Actions</span>
+        <div class="flex w-full pl-5 bg-gray-50 border-b-1">
+          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">Token name</span>
+          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">Creator</span>
+          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">Token</span>
+          <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-center">Actions</span>
         </div>
         <main>
-          <div v-if="showNewTokenModal" class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full">
+          <div
+            v-if="showNewTokenModal"
+            class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate"
+          >
             <a-input
               :ref="descriptionInput"
               v-model:value="selectedTokenData.description"
               type="text"
               class="!rounded-lg !py-2"
               placeholder="Token Name"
-              data-testid="nc-token-modal-description"
+              data-testid="nc-token-input"
             />
-            <div class="flex gap-2 justify-start mr-10">
+            <div class="flex gap-2 justify-start">
               <NcButton v-if="!isLoading" type="secondary" size="small" @click="showNewTokenModal = false"> Cancel </NcButton>
-              <NcButton type="primary" size="sm" :is-loading="isLoading" @click="generateToken"> Save </NcButton>
+              <NcButton type="primary" size="sm" :is-loading="isLoading" data-testid="nc-token-save-btn" @click="generateToken">
+                Save
+              </NcButton>
             </div>
           </div>
-          <div v-for="el of tokens" :key="el.id" class="flex border-b-1 px-7 py-3 justify-between">
-            <span class="text-gray-500 font-medium text-3.5 text-start w-1/8 ml-3">
-              <GeneralTruncateText placement="top" length="15">
+          <div v-for="el of tokens" :key="el.id" data-testid="nc-token-list" class="flex border-b-1 pl-5 py-3 justify-between">
+            <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
+              <GeneralTruncateText placement="top" length="25">
                 {{ el.description }}
               </GeneralTruncateText>
             </span>
-            <span class="text-gray-500 font-medium text-3.5 text-start w-1/4">
+            <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
               <GeneralTruncateText placement="top" length="50">
                 {{ el.created_by }}
               </GeneralTruncateText>
             </span>
-            <span class="text-gray-500 font-medium text-3.5 text-start w-1/4 ml-10">
-              <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="22">
+            <span class="text-gray-500 font-medium text-3.5 text-start w-3/9">
+              <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="32">
                 {{ el.token }}
               </GeneralTruncateText>
-              <span v-else>****************************</span>
+              <span v-else>**********************************</span>
             </span>
             <!-- ACTIONS -->
-            <span class="text-gray-500 font-medium text-3.5 text-start w-1/4">
-              <div class="flex justify-center gap-3 ml-4">
+            <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
+              <div class="flex justify-center gap-3">
                 <component
                   :is="iconMap.eyeSlash"
                   v-if="el.token === selectedToken.id && selectedToken.isShow"
                   class="hover::cursor-pointer"
                   @click="showToken(el.token as string)"
                 />
-                <component :is="iconMap.eye" v-else class="hover::cursor-pointer" @click="showToken(el.token as string)" />
+                <component
+                  :is="iconMap.eye"
+                  v-else
+                  class="nc-toggle-token-visibility hover::cursor-pointer"
+                  @click="showToken(el.token as string)"
+                />
                 <component :is="iconMap.copy" class="hover::cursor-pointer" @click="copyToken(el.token)" />
                 <component
                   :is="iconMap.delete"
-                  class="hover::cursor-pointer"
+                  data-testid="nc-token-row-action-icon"
+                  class="nc-delete-icon hover::cursor-pointer"
                   @click="triggerDeleteModal(el.token as string, el.description as string)"
                 />
               </div>
@@ -207,7 +218,7 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
           </div>
         </main>
       </div>
-      <div class="flex items-center justify-center mt-4">
+      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-4">
         <a-pagination
           v-model:current="currentPage"
           :total="pagination.total"
diff --git a/tests/playwright/pages/Account/Token.ts b/tests/playwright/pages/Account/Token.ts
index 11d7bab44d..3f674e8755 100644
--- a/tests/playwright/pages/Account/Token.ts
+++ b/tests/playwright/pages/Account/Token.ts
@@ -4,14 +4,14 @@ import { AccountPage } from './index';
 
 export class AccountTokenPage extends BasePage {
   readonly createBtn: Locator;
-  readonly createModal: Locator;
+  readonly createInputDiv: Locator;
   private accountPage: AccountPage;
 
   constructor(accountPage: AccountPage) {
     super(accountPage.rootPage);
     this.accountPage = accountPage;
     this.createBtn = this.get().locator(`[data-testid="nc-token-create"]`);
-    this.createModal = accountPage.rootPage.locator(`.nc-modal-generate-token`);
+    this.createInputDiv = accountPage.rootPage.locator(`.nc-token-generate`);
   }
 
   async goto() {
@@ -28,13 +28,12 @@ export class AccountTokenPage extends BasePage {
 
   async createToken({ description }: { description: string }) {
     await this.createBtn.click();
-    await this.createModal.locator(`input[placeholder="Description"]`).fill(description);
-    await this.createModal.locator(`[data-testid="nc-token-modal-save"]`).click();
-    await this.verifyToast({ message: 'Token generated successfully' });
+    await this.createInputDiv.locator(`[data-testid="nc-token-input"]`).fill(description);
+    await this.createInputDiv.locator(`[data-testid="nc-token-save-btn"]`).click();
   }
 
   getTokenRow({ idx = 0 }) {
-    return this.get().locator(`tr:nth-child(${idx})`);
+    return this.get().locator(`span:nth-child(${idx})`);
   }
 
   async toggleVisibility({ idx = 0 }) {
@@ -51,7 +50,6 @@ export class AccountTokenPage extends BasePage {
     await this.openRowActionMenu({ description });
     await this.rootPage.locator('[data-testid="nc-token-row-action-icon"] .nc-delete-token').click();
     await this.rootPage.locator('.ant-modal.active button:has-text("Delete Token")').click();
-    await this.verifyToast({ message: 'Token deleted successfully' });
 
     expect(await this.get().locator(`tr:has-text("${description}:visible")`).count()).toBe(0);
   }
diff --git a/tests/playwright/tests/db/usersAccounts/accountTokenManagement.spec.ts b/tests/playwright/tests/db/usersAccounts/accountTokenManagement.spec.ts
index 60df62fc30..dca2104925 100644
--- a/tests/playwright/tests/db/usersAccounts/accountTokenManagement.spec.ts
+++ b/tests/playwright/tests/db/usersAccounts/accountTokenManagement.spec.ts
@@ -19,7 +19,7 @@ test.describe('User roles', () => {
     await unsetup(context);
   });
 
-  test('Create and Delete token', async () => {
+  test.only('Create and Delete token', async () => {
     test.slow();
     const parallelId = process.env.TEST_PARALLEL_INDEX ?? '0';
     await accountTokenPage.goto();