feat(nc-gui,tests): add user settings tests and cy selectors

packages/nc-gui/layouts/base.vue

@@ -77,11 +77,15 @@ hooks.hook('page:finish', () => {
 
         <template v-if="signedIn">
           <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-user-accounts-menu">
-            <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white" @click.prevent />
+            <MdiDotsVertical
+              data-cy="nc-menu-accounts"
+              class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white"
+              @click.prevent
+            />
 
             <template #overlay>
               <a-menu class="!py-0 leading-8 !rounded">
-                <a-menu-item key="0" class="!rounded-t">
+                <a-menu-item key="0" data-cy="nc-menu-accounts__user-settings" class="!rounded-t">
                   <nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
                     <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
 

packages/nc-gui/pages/index/index/user.vue

@@ -81,6 +81,7 @@ const resetError = () => {
 
     <a-form
       ref="formValidator"
+      data-cy="nc-user-settings-form"
       layout="vertical"
       class="change-password lg:max-w-3/4 w-full !mx-auto"
       no-style
@@ -88,8 +89,8 @@ const resetError = () => {
       @finish="passwordChange"
     >
       <Transition name="layout">
-        <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
-          <div class="flex items-center gap-2 justify-center">
+        <div v-if="error" class="mx-auto mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
+          <div data-cy="nc-user-settings-form__error" class="flex items-center gap-2 justify-center">
             <MaterialSymbolsWarning />
             {{ error }}
           </div>
@@ -99,6 +100,7 @@ const resetError = () => {
       <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword">
         <a-input-password
           v-model:value="form.currentPassword"
+          data-cy="nc-user-settings-form__current-password"
           size="large"
           class="password"
           :placeholder="$t('placeholder.password.current')"
@@ -109,6 +111,7 @@ const resetError = () => {
       <a-form-item :label="$t('placeholder.password.new')" name="password" :rules="formRules.password">
         <a-input-password
           v-model:value="form.password"
+          data-cy="nc-user-settings-form__new-password"
           size="large"
           class="password"
           :placeholder="$t('placeholder.password.new')"
@@ -119,6 +122,7 @@ const resetError = () => {
       <a-form-item :label="$t('placeholder.password.confirm')" name="passwordRepeat" :rules="formRules.passwordRepeat">
         <a-input-password
           v-model:value="form.passwordRepeat"
+          data-cy="nc-user-settings-form__new-password-repeat"
           size="large"
           class="password"
           :placeholder="$t('placeholder.password.confirm')"
@@ -127,7 +131,7 @@ const resetError = () => {
       </a-form-item>
 
       <div class="text-center">
-        <button class="scaling-btn bg-opacity-100" type="submit">
+        <button data-cy="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit">
           <span class="flex items-center gap-2">
             <MdiKeyChange />
             {{ $t('activity.changePwd') }}

packages/nc-gui/pages/signin.vue

@@ -63,7 +63,10 @@ function resetError() {
 
 <template>
   <NuxtLayout>
-    <div class="md:bg-primary bg-opacity-5 signin h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
+    <div
+      data-cy="nc-form-signin"
+      class="md:bg-primary bg-opacity-5 signin h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin"
+    >
       <div
         class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
@@ -82,12 +85,19 @@ function resetError() {
           </Transition>
 
           <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
-            <a-input v-model:value="form.email" size="large" :placeholder="$t('msg.info.signUp.workEmail')" @focus="resetError" />
+            <a-input
+              v-model:value="form.email"
+              data-cy="nc-form-signin__email"
+              size="large"
+              :placeholder="$t('msg.info.signUp.workEmail')"
+              @focus="resetError"
+            />
           </a-form-item>
 
           <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
             <a-input-password
               v-model:value="form.password"
+              data-cy="nc-form-signin__password"
               size="large"
               class="password"
               :placeholder="$t('msg.info.signUp.enterPassword')"
@@ -102,7 +112,7 @@ function resetError() {
           </div>
 
           <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
-            <button class="scaling-btn bg-opacity-100" type="submit">
+            <button data-cy="nc-form-signin__submit" class="scaling-btn bg-opacity-100" type="submit">
               <span class="flex items-center gap-2">
                 <MdiLogin />
                 {{ $t('general.signIn') }}

scripts/cypress/integration/common/6h_change_password.js

@@ -0,0 +1,54 @@
+import { isTestSuiteActive, roles } from "../../support/page_objects/projectConstants";
+
+
+const newPassword = `${roles.owner.credentials.password}1`;
+
+export const genTest = (apiType, dbType) => {
+    if (!isTestSuiteActive(apiType, dbType)) return;
+
+    describe('User settings test', () => {
+        it('Visit user settings', () => {
+            cy.get("[data-cy='nc-menu-accounts']").click();
+            cy.get("[data-cy='nc-menu-accounts__user-settings']").click();
+
+            cy.get("[data-cy='nc-user-settings-form']").should("exist");
+        });
+
+        describe('Change password', () => {
+            beforeEach(() => {
+                cy.get("[data-cy='nc-user-settings-form__current-password']").clear();
+                cy.get("[data-cy='nc-user-settings-form__new-password']").clear();
+                cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").clear();
+            })
+
+            it('Verifies current password', () => {
+                cy.get("[data-cy='nc-user-settings-form__current-password']").type('WrongPassword');
+                cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword);
+                cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword);
+                cy.get("[data-cy='nc-user-settings-form__submit']").click();
+                cy.get("[data-cy='nc-user-settings-form__error']").should("exist").should("contain", "Current password is wrong");
+            });
+
+            it('Verifies matching passwords', () => {
+                cy.get("[data-cy='nc-user-settings-form__current-password']").type(roles.owner.credentials.password);
+                cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword);
+                cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword + 'NotMatching');
+                cy.get("[data-cy='nc-user-settings-form__submit']").click();
+                cy.get(".ant-form-item-explain-error").should("exist").should("contain", "Passwords do not match");
+            });
+
+            it('Change user password using valid password', () => {
+                cy.get("[data-cy='nc-user-settings-form__current-password']").type(roles.owner.credentials.password);
+                cy.get("[data-cy='nc-user-settings-form__new-password']").type(newPassword);
+                cy.get("[data-cy='nc-user-settings-form__new-password-repeat']").type(newPassword);
+                cy.get("[data-cy='nc-user-settings-form__submit']").click();
+                cy.get("[data-cy='nc-user-settings-form__submit']").should("not.exist");
+                cy.get("[data-cy='nc-form-signin']").should("exist");
+                cy.get("[data-cy='nc-form-signin__email']").type(roles.owner.credentials.username);
+                cy.get("[data-cy='nc-form-signin__password']").type(newPassword);
+                cy.get("[data-cy='nc-form-signin__submit']").click();
+                cy.get("[data-cy='nc-menu-accounts']").should("exist");
+            });
+        })
+    });
+};

scripts/cypress/integration/test/restMisc.js

@@ -5,6 +5,7 @@ let t6c = require("../common/6c_swagger_api");
 let t6e = require("../common/6e_project_operations");
 let t6f = require("../common/6f_attachments");
 let t6g = require("../common/6g_base_share");
+let t6h = require("../common/6h_change_password");
 let t7a = require("../common/7a_create_project_from_excel");
 let t8a = require("../common/8a_webhook");
 let t9b = require("../common/9b_ERD");
@@ -44,6 +45,9 @@ const nocoTestSuite = (apiType, dbType) => {
 
   // Create project from Excel
   t7a.genTest(apiType, dbType);
+
+  // Change password
+  t6h.genTest(apiType, dbType);
 };
 
 nocoTestSuite("rest", "mysql");

scripts/cypress/integration/test/xcdb-restMisc.js

@@ -6,6 +6,7 @@ let t6d = require("../common/6d_language_validation");
 let t6e = require("../common/6e_project_operations");
 let t6f = require("../common/6f_attachments");
 let t6g = require("../common/6g_base_share");
+let t6h = require("../common/6h_change_password");
 let t7a = require("../common/7a_create_project_from_excel");
 let t8a = require("../common/8a_webhook");
 const t9b = require("../common/9b_ERD");
@@ -46,6 +47,9 @@ const nocoTestSuite = (apiType, dbType) => {
 
   // Create project from Excel
   t7a.genTest(apiType, dbType);
+
+  // Change password
+  t6h.genTest(apiType, dbType);
 };
 
 nocoTestSuite("rest", "xcdb");