From e24f1fa7cdec7fa66c2e1200e0097695091314f3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 27 Aug 2024 07:23:44 +0000
Subject: [PATCH] test: playwright test - WIP

---
 packages/nc-gui/components/account/Setup.vue  |  7 +--
 .../components/account/setup/Config.vue       |  3 +-
 .../nc-gui/components/account/setup/List.vue  |  6 +--
 .../components/nc/form-builder/index.vue      |  1 +
 .../components/smartsheet/details/Api.vue     |  9 +++-
 .../account/index/setup/[[nestedPage]].vue    |  2 +-
 tests/playwright/pages/Account/Setup.ts       | 25 ++++++-----
 tests/playwright/pages/Account/SetupConfig.ts | 45 +++++++++++++++++++
 tests/playwright/pages/Account/SetupList.ts   | 32 +++++++++++++
 .../db/usersAccounts/accounSetup.spec.ts      |  2 +-
 10 files changed, 110 insertions(+), 22 deletions(-)
 create mode 100644 tests/playwright/pages/Account/SetupConfig.ts
 create mode 100644 tests/playwright/pages/Account/SetupList.ts

diff --git a/packages/nc-gui/components/account/Setup.vue b/packages/nc-gui/components/account/Setup.vue
index c88782f42f..302d16dc51 100644
--- a/packages/nc-gui/components/account/Setup.vue
+++ b/packages/nc-gui/components/account/Setup.vue
@@ -55,7 +55,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="flex flex-col" data-test-id="nc-setup">
+  <div class="flex flex-col" data-test-id="nc-setup-main">
     <NcPageHeader>
       <template #icon>
         <div class="flex justify-center items-center h-5 w-5">
@@ -80,6 +80,7 @@ onMounted(async () => {
             'cursor-pointer': config.itemClick,
           }"
           @click="config.itemClick"
+          :data-testid="`nc-setup-${config.key}`"
         >
           <div class="flex gap-3 items-center" data-rec="true">
             <NcTooltip v-if="!config.configured || config.isPending">
@@ -88,9 +89,9 @@ onMounted(async () => {
                   {{ $t('activity.pending') }}
                 </span>
               </template>
-              <GeneralIcon icon="ncAlertCircle" class="text-orange-500 -mt-1 w-6 h-6" />
+              <GeneralIcon icon="ncAlertCircle" class="text-orange-500 -mt-1 w-6 h-6 nc-pending" />
             </NcTooltip>
-            <GeneralIcon v-else icon="circleCheckSolid" class="text-success w-6 h-6 bg-white-500" />
+            <GeneralIcon v-else icon="circleCheckSolid" class="text-success w-6 h-6 bg-white-500 nc-configured" />
 
             <span class="font-bold text-base"> {{ config.title }}</span>
           </div>
diff --git a/packages/nc-gui/components/account/setup/Config.vue b/packages/nc-gui/components/account/setup/Config.vue
index b4aa6cf08a..d9371ca7fb 100644
--- a/packages/nc-gui/components/account/setup/Config.vue
+++ b/packages/nc-gui/components/account/setup/Config.vue
@@ -84,7 +84,7 @@ const isValid = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full h-[calc(100vh_-_40px)]" data-test-id="nc-setup">
+  <div class="flex flex-col h-full h-[calc(100vh_-_40px)]" data-test-id="nc-setup-config">
     <NcPageHeader>
       <template #title>
         <div class="flex gap-3 items-center">
@@ -112,6 +112,7 @@ const isValid = computed(() => {
               size="small"
               :disabled="!!loadingAction || !isValid"
               @click="doAction(action.key)"
+              :data-testid="`nc-setup-config-action-${action.key?.toLowerCase()}`"
             >
               {{ action.label }}
             </NcButton>
diff --git a/packages/nc-gui/components/account/setup/List.vue b/packages/nc-gui/components/account/setup/List.vue
index 4638e4d712..3bb8868dc0 100644
--- a/packages/nc-gui/components/account/setup/List.vue
+++ b/packages/nc-gui/components/account/setup/List.vue
@@ -43,7 +43,7 @@ const closeResetModal = () => {
 </script>
 
 <template>
-  <div class="flex flex-col" data-test-id="nc-setup">
+  <div class="flex flex-col" data-test-id="nc-setup-list">
     <NcPageHeader>
       <template #title>
         <span data-rec="true">
@@ -65,10 +65,10 @@ const closeResetModal = () => {
               icon="delete"
               class="text-error min-w-6 h-6 bg-white-500 !hidden !group-hover:!inline cursor-pointer"
             />
-            <GeneralIcon v-if="app.active" icon="circleCheckSolid" class="text-success min-w-5 h-5 bg-white-500" />
+            <GeneralIcon v-if="app.active" icon="circleCheckSolid" class="text-success min-w-5 h-5 bg-white-500 nc-configured" />
 
             <NcDropdown :trigger="['click']" overlay-class-name="!rounded-md" @click.stop>
-              <GeneralIcon v-if="app.active" icon="threeDotVertical" class="min-w-5 h-5 bg-white-500" />
+              <GeneralIcon v-if="app.active" icon="threeDotVertical" class="min-w-5 h-5 bg-white-500 nc-setup-plugin-menu" />
 
               <template #overlay>
                 <NcMenu class="min-w-20">
diff --git a/packages/nc-gui/components/nc/form-builder/index.vue b/packages/nc-gui/components/nc/form-builder/index.vue
index e17f73ba22..76e0a93338 100644
--- a/packages/nc-gui/components/nc/form-builder/index.vue
+++ b/packages/nc-gui/components/nc/form-builder/index.vue
@@ -42,6 +42,7 @@ const setFormState = (path: string, value: any) => {
                   class="nc-form-item"
                   :style="`width:${+field.width || 100}%`"
                   :required="false"
+                  :data-test-id="`nc-form-input-${field.model}`"
                 >
                   <template v-if="![FormBuilderInputType.Switch].includes(field.type)" #label>
                     <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet/details/Api.vue b/packages/nc-gui/components/smartsheet/details/Api.vue
index 6c440a50be..51ea2f70e1 100644
--- a/packages/nc-gui/components/smartsheet/details/Api.vue
+++ b/packages/nc-gui/components/smartsheet/details/Api.vue
@@ -86,7 +86,14 @@ const snippet = computed(
       method: 'GET',
       headers: [
         {
-          name: 'xc-token',
+          name: '' +
+            '' +
+            '' +
+            '' +
+            '' +
+            '' +
+            '' +
+            'xc-token',
           value: `CREATE_YOUR_API_TOKEN_FROM ${location.origin + location.pathname}#/account/tokens`,
           comment: 'API token',
         },
diff --git a/packages/nc-gui/pages/account/index/setup/[[nestedPage]].vue b/packages/nc-gui/pages/account/index/setup/[[nestedPage]].vue
index 646c2041ee..f40f5c5277 100644
--- a/packages/nc-gui/pages/account/index/setup/[[nestedPage]].vue
+++ b/packages/nc-gui/pages/account/index/setup/[[nestedPage]].vue
@@ -15,7 +15,7 @@ const activeAppId = computed(
 </script>
 
 <template>
-  <div class="h-full">
+  <div class="h-full" data-test-id="nc-setup">
     <template v-if="$route.params.app">
       <LazyAccountSetupConfig v-if="activeAppId" :id="activeAppId" />
     </template>
diff --git a/tests/playwright/pages/Account/Setup.ts b/tests/playwright/pages/Account/Setup.ts
index b33358e64f..5a17c1ca76 100644
--- a/tests/playwright/pages/Account/Setup.ts
+++ b/tests/playwright/pages/Account/Setup.ts
@@ -1,13 +1,18 @@
-import { expect } from '@playwright/test';
 import BasePage from '../Base';
 import { AccountPage } from './index';
+import { AccountSetupConfigPage } from './SetupConfig';
+import { AccountSetupListPage } from './SetupList';
 
-export class AccountSettingsPage extends BasePage {
+export class AccountSetupPage extends BasePage {
   private accountPage: AccountPage;
+  private setupConfigPage: AccountSetupConfigPage;
+  private setupListPage: AccountSetupListPage;
 
   constructor(accountPage: AccountPage) {
     super(accountPage.rootPage);
     this.accountPage = accountPage;
+    this.setupConfigPage = new AccountSetupConfigPage(this);
+    this.setupListPage = new AccountSetupListPage(this);
   }
 
   async goto() {
@@ -21,19 +26,15 @@ export class AccountSettingsPage extends BasePage {
 
   openEmailSettings() {}
 
-  async getInviteOnlyCheckboxValue() {
-    // allow time for the checkbox to be rendered
-    await this.rootPage.waitForTimeout(1000);
-
-    return this.get().locator(`.nc-invite-only-signup-checkbox`).isChecked({ timeout: 1000 });
+  getCategoryCard(key: 'email' | 'storage' = 'email') {
+    return this.get().getByTestId(`nc-setup-${key}`);
   }
 
-  async checkInviteOnlySignupCheckbox(value: boolean) {
-    return expect(await this.getInviteOnlyCheckboxValue()).toBe(value);
+  async isConfigured(key: 'email' | 'storage' = 'email') {
+    return await this.getCategoryCard(key).locator('.nc-configured').isVisible();
   }
 
-  async toggleInviteOnlyCheckbox() {
-    await this.getInviteOnlyCheckbox().click();
-    await this.verifyToast({ message: 'Settings saved successfully' });
+  async configure(key: 'email' | 'storage' = 'email') {
+    await this.getCategoryCard(key).locator('.nc-setup-btn').click();
   }
 }
diff --git a/tests/playwright/pages/Account/SetupConfig.ts b/tests/playwright/pages/Account/SetupConfig.ts
new file mode 100644
index 0000000000..7170a47a6e
--- /dev/null
+++ b/tests/playwright/pages/Account/SetupConfig.ts
@@ -0,0 +1,45 @@
+import BasePage from '../Base';
+import { AccountSetupPage } from './Setup';
+
+export class AccountSetupConfigPage extends BasePage {
+  private setupPage: AccountSetupPage;
+
+  constructor(setupPage: AccountSetupPage) {
+    super(setupPage.rootPage);
+    this.setupPage = setupPage;
+  }
+
+  async goto(category: 'email' | 'storage', plugin: string) {
+    await this.rootPage.goto(`/#/account/setup/${category}/${plugin}`);
+  }
+
+  get() {
+    return this.setupPage.get().locator(`[data-test-id="nc-setup-config"]`);
+  }
+
+  async fillForm(data: any) {
+    for (const key in data) {
+      const fieldWrapper = this.get().locator(`[data-test-id="nc-form-input-${key}"]`);
+      // if switch then toggle
+      if (await fieldWrapper.locator('.ant-switch').isVisible()) {
+        if (data[key]) {
+          await fieldWrapper.locator('.ant-switch').click();
+        }
+      } else if (await fieldWrapper.locator('.ant-select').isVisible()) {
+        await fieldWrapper.locator('.ant-select').click();
+        await this.rootPage
+          .locator(`[data-test-id="nc-form-input-${key}"] .ant-select-item:has-text("${data[key]}")`)
+          .click();
+      } else {
+        await fieldWrapper.locator('input').fill(data[key]);
+      }
+    }
+  }
+  async test() {
+    await this.get().getByTestId('nc-setup-config-action-test').click();
+  }
+
+  async Save() {
+    await this.get().getByTestId('nc-setup-config-action-save').click();
+  }
+}
diff --git a/tests/playwright/pages/Account/SetupList.ts b/tests/playwright/pages/Account/SetupList.ts
new file mode 100644
index 0000000000..d0efb2ffd3
--- /dev/null
+++ b/tests/playwright/pages/Account/SetupList.ts
@@ -0,0 +1,32 @@
+import BasePage from '../Base';
+import { AccountSetupPage } from './Setup';
+
+export class AccountSetupListPage extends BasePage {
+  private setupPage: AccountSetupPage;
+
+  constructor(setupPage: AccountSetupPage) {
+    super(setupPage.rootPage);
+    this.setupPage = setupPage;
+  }
+
+  async goto(category: 'email' | 'storage') {
+    await this.rootPage.goto(`/#/account/setup/${category}`);
+  }
+
+  get() {
+    return this.setupPage.get().locator(`[data-test-id="nc-setup-list"]`);
+  }
+
+  getPluginItem(plugin: string) {
+    return this.get().locator(`[data-test-id="nc-setup-list-item-${plugin}"]`);
+  }
+
+  async isConfigured(plugin: string) {
+    return await this.getPluginItem(plugin).locator('.nc-configured').isVisible();
+  }
+
+  async reset(plugin: string) {
+    await this.getPluginItem(plugin).locator('.nc-setup-plugin-menu').click();
+    await this.rootPage.locator('.ant-dropdown').locator('[data-test-id="nc-config-reset"].nc-menu-item').click();
+  }
+}
diff --git a/tests/playwright/tests/db/usersAccounts/accounSetup.spec.ts b/tests/playwright/tests/db/usersAccounts/accounSetup.spec.ts
index 3fc34ee6af..a56747c7c2 100644
--- a/tests/playwright/tests/db/usersAccounts/accounSetup.spec.ts
+++ b/tests/playwright/tests/db/usersAccounts/accounSetup.spec.ts
@@ -5,7 +5,7 @@ import { SignupPage } from '../../../pages/SignupPage';
 import setup, { unsetup } from '../../../setup';
 import { getDefaultPwd } from '../../../tests/utils/general';
 
-test.describe.skip('App setup', () => {
+test.describe.only('App setup', () => {
   // hub will not have this feature
 
   let accountSettingsPage: AccountSettingsPage;