test(playwright): improve invite only signup settings test

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/pages/signup/[[token]].vue

@@ -99,7 +99,7 @@ function resetError() {
 
         <a-form ref="formValidator" :model="form" layout="vertical" no-style @finish="signUp">
           <Transition name="layout">
-            <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
+            <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1" data-testid="nc-signup-error">
               <div class="flex items-center gap-2 justify-center">
                 <MaterialSymbolsWarning />
                 <div class="break-words">{{ error }}</div>

tests/playwright/pages/Account/Settings.ts

@@ -11,7 +11,7 @@ export class AccountSettingsPage extends BasePage {
   }
 
   async goto() {
-    await this.rootPage.goto('/?dummy=settings#/account/users/settings');
+    await this.rootPage.goto('/#/account/users/settings', { waitUntil: 'networkidle' });
   }
 
   get() {
@@ -22,8 +22,12 @@ export class AccountSettingsPage extends BasePage {
     return this.get().locator(`.nc-invite-only-signup-checkbox`);
   }
 
+  async getInviteOnlyCheckboxValue() {
+    return this.get().locator(`.nc-invite-only-signup-checkbox`).isChecked();
+  }
+
   async checkInviteOnlySignupCheckbox(value: boolean) {
-    return expect(await this.get().locator(`.nc-invite-only-signup-checkbox`).isChecked()).toBe(value);
+    return expect(await this.getInviteOnlyCheckboxValue()).toBe(value);
   }
 
   async toggleInviteOnlyCheckbox() {

tests/playwright/pages/Account/Token.ts

@@ -15,7 +15,7 @@ export class AccountTokenPage extends BasePage {
   }
 
   async goto() {
-    await this.rootPage.goto('/?dummy=users#/account/tokens');
+    await this.rootPage.goto('/#/account/tokens', { waitUntil: 'networkidle' });
   }
 
   get() {

tests/playwright/pages/Account/Users.ts

@@ -15,7 +15,7 @@ export class AccountUsersPage extends BasePage {
   }
 
   async goto() {
-    await this.rootPage.goto('/?dummy=users#/account/users/list');
+    await this.rootPage.goto('/#/account/users/list', { waitUntil: 'networkidle' });
   }
 
   get() {

tests/playwright/pages/Account/index.ts

@@ -9,4 +9,14 @@ export class AccountPage extends BasePage {
   get() {
     return this.rootPage.locator('body');
   }
+
+  async openAppMenu() {
+    await this.rootPage.locator('.nc-menu-accounts').click();
+  }
+
+  async signOut() {
+    await this.openAppMenu();
+    await this.rootPage.locator('div.nc-project-menu-item:has-text("Sign Out"):visible').click();
+    await this.rootPage.locator('[data-testid="nc-form-signin"]:visible').waitFor();
+  }
 }

tests/playwright/pages/SigninPage/index.ts

@@ -0,0 +1,52 @@
+import { Page } from '@playwright/test';
+import BasePage from '../Base';
+import { ProjectsPage } from '../ProjectsPage';
+import { expect } from '@playwright/test';
+
+export class SigninPage extends BasePage {
+  readonly projectsPage: ProjectsPage;
+
+  constructor(rootPage: Page) {
+    super(rootPage);
+    this.projectsPage = new ProjectsPage(rootPage);
+  }
+
+  prefixEmail(email: string) {
+    const parallelId = process.env.TEST_PARALLEL_INDEX ?? '0';
+    return `nc_test_${parallelId}_${email}`;
+  }
+
+  goto() {
+    return this.rootPage.goto('/#/signin/', { waitUntil: 'networkidle' });
+  }
+
+  get() {
+    return this.rootPage.locator('html');
+  }
+
+  async signIn({
+    email,
+    password,
+    withoutPrefix,
+    expectedError,
+  }: {
+    email: string;
+    password: string;
+    withoutPrefix?: boolean;
+    expectedError?: string;
+  }) {
+    if (!withoutPrefix) email = this.prefixEmail(email);
+
+    const signUp = this.get();
+    await signUp.locator('button:has-text("SIGN IN")').waitFor();
+
+    await signUp.locator(`input[placeholder="Enter your work email"]`).fill(email);
+    await signUp.locator(`input[placeholder="Enter your password"]`).fill(password);
+    await signUp.locator(`button:has-text("SIGN IN")`).click();
+    if (expectedError) {
+      await expect(signUp.getByTestId('nc-signin-error')).toHaveText(expectedError);
+    } else {
+      await this.projectsPage.waitToBeRendered();
+    }
+  }
+}

tests/playwright/pages/SignupPage/index.ts

@@ -1,6 +1,7 @@
 import { Page } from '@playwright/test';
 import BasePage from '../Base';
 import { ProjectsPage } from '../ProjectsPage';
+import { expect } from '@playwright/test';
 
 export class SignupPage extends BasePage {
   readonly projectsPage: ProjectsPage;
@@ -16,22 +17,36 @@ export class SignupPage extends BasePage {
   }
 
   goto() {
-    return this.rootPage.goto('/#/signup/');
+    return this.rootPage.goto('/#/signup/', { waitUntil: 'networkidle' });
   }
 
   get() {
     return this.rootPage.locator('html');
   }
 
-  async signUp({ email, password, withoutPrefix }: { email: string; password: string; withoutPrefix?: boolean }) {
+  async signUp({
+    email,
+    password,
+    withoutPrefix,
+    expectedError,
+  }: {
+    email: string;
+    password: string;
+    withoutPrefix?: boolean;
+    expectedError?: string;
+  }) {
     if (!withoutPrefix) email = this.prefixEmail(email);
 
-    const signUp = this.rootPage;
+    const signUp = this.get();
     await signUp.locator('button:has-text("SIGN UP")').waitFor();
 
     await signUp.locator(`input[placeholder="Enter your work email"]`).fill(email);
     await signUp.locator(`input[placeholder="Enter your password"]`).fill(password);
     await signUp.locator(`button:has-text("SIGN UP")`).click();
-    await this.projectsPage.waitToBeRendered();
+    if (expectedError) {
+      await expect(signUp.getByTestId('nc-signup-error')).toHaveText(expectedError);
+    } else {
+      await this.projectsPage.waitToBeRendered();
+    }
   }
 }

tests/playwright/setup/index.ts

@@ -57,7 +57,7 @@ const setup = async ({ page, isEmptyProject }: { page: Page; isEmptyProject?: bo
 
   const project = response.data.project;
 
-  await page.goto(`/#/nc/${project.id}/auth`);
+  await page.goto(`/#/nc/${project.id}/auth`, { waitUntil: 'networkidle' });
 
   return { project, token, dbType } as NcContext;
 };

tests/playwright/tests/accountUserManagement.spec.ts

@@ -4,8 +4,8 @@ import { AccountUsersPage } from '../pages/Account/Users';
 import setup from '../setup';
 
 const roleDb = [
-  { email: 'creator@nocodb.com', role: 'Organization level creator', url: '' },
-  { email: 'viewer@nocodb.com', role: 'Organization level viewer', url: '' },
+  { email: 'creator@nocodb.com', role: 'Organization Level Creator', url: '' },
+  { email: 'viewer@nocodb.com', role: 'Organization Level Viewer', url: '' },
 ];
 
 test.describe('User roles', () => {
@@ -38,7 +38,7 @@ test.describe('User roles', () => {
     for (let i = 0; i < roleDb.length; i++) {
       await accountUsersPage.updateRole({
         email: roleDb[i].email,
-        role: 'Organization level viewer',
+        role: 'Organization Level Viewer',
       });
     }
 

tests/playwright/tests/accountUserSettings.spec.ts

@@ -1,6 +1,7 @@
 import { test } from '@playwright/test';
 import { AccountPage } from '../pages/Account';
 import { AccountSettingsPage } from '../pages/Account/Settings';
+import { SignupPage } from '../pages/SignupPage';
 import setup from '../setup';
 
 test.describe('App settings', () => {
@@ -19,10 +20,37 @@ test.describe('App settings', () => {
     test.slow();
 
     await accountSettingsPage.goto();
-    await accountSettingsPage.checkInviteOnlySignupCheckbox(false);
-    await accountSettingsPage.toggleInviteOnlyCheckbox();
+
+    // enable invite only signup
+    if (!(await accountSettingsPage.getInviteOnlyCheckboxValue())) {
+      await accountSettingsPage.toggleInviteOnlyCheckbox();
+      await accountSettingsPage.checkInviteOnlySignupCheckbox(true);
+    }
+
+    await accountPage.signOut();
+
+    const signupPage = new SignupPage(accountPage.rootPage);
+    await signupPage.goto();
+
+    await signupPage.signUp({
+      email: 'test-user-1@nocodb.com',
+      password: 'Password123.',
+      expectedError: 'Not allowed to signup, contact super admin.',
+    });
+
+    await signupPage.rootPage.reload({ waitUntil: 'networkidle' });
+
+    await accountSettingsPage.goto();
+
     await accountSettingsPage.checkInviteOnlySignupCheckbox(true);
     await accountSettingsPage.toggleInviteOnlyCheckbox();
     await accountSettingsPage.checkInviteOnlySignupCheckbox(false);
+
+    await signupPage.goto();
+
+    await signupPage.signUp({
+      email: 'test-user-1@nocodb.com',
+      password: 'Password123.'
+    });
   });
 });