test: playwright test - WIP

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>

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>

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">

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">

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',
         },

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>

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() {
+  getCategoryCard(key: 'email' | 'storage' = 'email') {
-    // allow time for the checkbox to be rendered
+    return this.get().getByTestId(`nc-setup-${key}`);
-    await this.rootPage.waitForTimeout(1000);
-
-    return this.get().locator(`.nc-invite-only-signup-checkbox`).isChecked({ timeout: 1000 });
   }
 
-  async checkInviteOnlySignupCheckbox(value: boolean) {
+  async isConfigured(key: 'email' | 'storage' = 'email') {
-    return expect(await this.getInviteOnlyCheckboxValue()).toBe(value);
+    return await this.getCategoryCard(key).locator('.nc-configured').isVisible();
   }
 
-  async toggleInviteOnlyCheckbox() {
+  async configure(key: 'email' | 'storage' = 'email') {
-    await this.getInviteOnlyCheckbox().click();
+    await this.getCategoryCard(key).locator('.nc-setup-btn').click();
-    await this.verifyToast({ message: 'Settings saved successfully' });
   }
 }

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();
+  }
+}

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();
+  }
+}

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;