test(editor): Add e2e tests for personal settings page (#5451)

✅ Added tests for personal user settings

cypress/e2e/18-user-management.cy.ts

@@ -1,6 +1,7 @@
 import { MainSidebar } from './../pages/sidebar/main-sidebar';
 import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD } from '../constants';
 import { SettingsSidebar, SettingsUsersPage, WorkflowPage, WorkflowsPage } from '../pages';
+import { PersonalSettingsPage } from '../pages/settings-personal';
 
 /**
  * User A - Instance owner
@@ -36,8 +37,17 @@ const users = [
 	},
 ];
 
+const updatedPersonalData = {
+	newFirstName: 'Something',
+	newLastName: 'Else',
+	newEmail: 'something_else@acme.corp',
+	newPassword: 'Keybo4rd',
+	invalidPasswords: ['abc', 'longEnough', 'longenough123']
+}
+
 const usersSettingsPage = new SettingsUsersPage();
 const workflowPage = new WorkflowPage();
+const personalSettingsPage = new PersonalSettingsPage();
 
 describe('User Management', () => {
 	before(() => {
@@ -93,4 +103,46 @@ describe('User Management', () => {
 		usersSettingsPage.getters.deleteUserButton().realClick();
 		workflowPage.getters.successToast().should('contain', 'User deleted');
 	});
+
+	it(`should allow user to change their personal data`, () => {
+		personalSettingsPage.actions.loginAndVisit(instanceOwner.email, instanceOwner.password);
+		personalSettingsPage.actions.updateFirstAndLastName(updatedPersonalData.newFirstName, updatedPersonalData.newLastName);
+		personalSettingsPage.getters.currentUserName().should('contain', `${updatedPersonalData.newFirstName} ${updatedPersonalData.newLastName}`);
+		workflowPage.getters.successToast().should('contain', 'Personal details updated');
+	});
+
+	it(`shouldn't allow user to set weak password`, () => {
+		personalSettingsPage.actions.loginAndVisit(instanceOwner.email, instanceOwner.password);
+		for (let weakPass of updatedPersonalData.invalidPasswords) {
+			personalSettingsPage.actions.tryToSetWeakPassword(instanceOwner.password, weakPass);
+		}
+	});
+
+	it(`shouldn't allow user to change password if old password is wrong`, () => {
+		personalSettingsPage.actions.loginAndVisit(instanceOwner.email, instanceOwner.password);
+		personalSettingsPage.actions.updatePassword('iCannotRemember', updatedPersonalData.newPassword);
+		workflowPage.getters.errorToast().closest('div').should('contain', 'Provided current password is incorrect.');
+	});
+
+	it(`should change current user password`, () => {
+		personalSettingsPage.actions.loginAndVisit(instanceOwner.email, instanceOwner.password);
+		personalSettingsPage.actions.updatePassword(instanceOwner.password, updatedPersonalData.newPassword);
+		workflowPage.getters.successToast().should('contain', 'Password updated');
+		personalSettingsPage.actions.loginWithNewData(instanceOwner.email, updatedPersonalData.newPassword);
+	});
+
+	it(`shouldn't allow users to set invalid email`, () => {
+		personalSettingsPage.actions.loginAndVisit(instanceOwner.email, updatedPersonalData.newPassword);
+		// try without @ part
+		personalSettingsPage.actions.tryToSetInvalidEmail(updatedPersonalData.newEmail.split('@')[0]);
+		// try without domain
+		personalSettingsPage.actions.tryToSetInvalidEmail(updatedPersonalData.newEmail.split('.')[0]);
+	});
+
+	it(`should change user email`, () => {
+		personalSettingsPage.actions.loginAndVisit(instanceOwner.email, updatedPersonalData.newPassword);
+		personalSettingsPage.actions.updateEmail(updatedPersonalData.newEmail);
+		workflowPage.getters.successToast().should('contain', 'Personal details updated');
+		personalSettingsPage.actions.loginWithNewData(updatedPersonalData.newEmail, updatedPersonalData.newPassword);
+	});
 });

cypress/pages/modals/change-password-modal.ts

@@ -0,0 +1,12 @@
+import { BasePage } from './../base';
+
+export class ChangePasswordModal extends BasePage {
+	getters = {
+		modalContainer: () => cy.getByTestId('changePassword-modal').last(),
+		currentPasswordInput: () => cy.getByTestId('currentPassword').find('input').first(),
+		newPasswordInputContainer: () => cy.getByTestId('password'),
+		newPasswordInput: () => cy.getByTestId('password').find('input').first(),
+		repeatPasswordInput: () => cy.getByTestId('password2').find('input').first(),
+		changePasswordButton: () => cy.getByTestId('change-password-button'),
+	};
+}

cypress/pages/settings-personal.ts

@@ -0,0 +1,52 @@
+import { ChangePasswordModal } from './modals/change-password-modal';
+import { BasePage } from './base';
+
+const changePasswordModal = new ChangePasswordModal();
+
+export class PersonalSettingsPage extends BasePage {
+	url = '/settings/personal';
+	getters = {
+		currentUserName: () => cy.getByTestId('current-user-name'),
+		firstNameInput: () => cy.getByTestId('firstName').find('input').first(),
+		lastNameInput: () => cy.getByTestId('lastName').find('input').first(),
+		emailInputContainer: () => cy.getByTestId('email'),
+		emailInput: () => cy.getByTestId('email').find('input').first(),
+		changePasswordLink: () => cy.getByTestId('change-password-link').find('a').first(),
+		saveSettingsButton: () => cy.getByTestId('save-settings-button'),
+	};
+	actions = {
+		loginAndVisit: (email: string, password: string) => {
+			cy.signin({ email, password });
+			cy.visit(this.url);
+		},
+		updateFirstAndLastName: (newFirstName: string, newLastName: string) => {
+			this.getters.firstNameInput().type('{selectall}').type(newFirstName);
+			this.getters.lastNameInput().type('{selectall}').type(newLastName);
+			this.getters.saveSettingsButton().realClick();
+		},
+		updatePassword: (oldPassword: string, newPassword: string) => {
+			this.getters.changePasswordLink().realClick();
+			changePasswordModal.getters.modalContainer().should('be.visible');
+			changePasswordModal.getters.currentPasswordInput().type('{selectall}').type(oldPassword);
+			changePasswordModal.getters.newPasswordInput().type('{selectall}').type(newPassword);
+			changePasswordModal.getters.repeatPasswordInput().type('{selectall}').type(newPassword);
+			changePasswordModal.getters.changePasswordButton().click();
+		},
+		tryToSetWeakPassword: (oldPassword: string, newPassword: string) => {
+			this.actions.updatePassword(oldPassword, newPassword);
+			changePasswordModal.getters.newPasswordInputContainer().find('div[class^="_errorInput"]').should('exist');
+		},
+		updateEmail: (newEmail: string) => {
+			this.getters.emailInput().type('{selectall}').type(newEmail).type('{enter}');
+		},
+		tryToSetInvalidEmail: (newEmail: string) => {
+			this.actions.updateEmail(newEmail);
+			this.getters.emailInputContainer().find('div[class^="_errorInput"]').should('exist');
+		},
+		loginWithNewData: (email: string, password: string) => {
+			cy.signout();
+			this.actions.loginAndVisit(email, password);
+			cy.url().should('match', new RegExp(this.url));
+		},
+	};
+}

packages/editor-ui/src/components/ChangePasswordModal.vue

@@ -22,6 +22,7 @@
 				:label="$locale.baseText('auth.changePassword')"
 				@click="onSubmitClick"
 				float="right"
+				data-test-id="change-password-button"
 			/>
 		</template>
 	</Modal>

packages/editor-ui/src/views/SettingsPersonalView.vue

@@ -1,11 +1,11 @@
 <template>
-	<div :class="$style.container">
+	<div :class="$style.container" data-test-id="personal-settings-container">
 		<div :class="$style.header">
 			<n8n-heading size="2xlarge">{{
 				$locale.baseText('settings.personal.personalSettings')
 			}}</n8n-heading>
 			<div class="ph-no-capture" :class="$style.user">
-				<span :class="$style.username">
+				<span :class="$style.username" data-test-id="current-user-name">
 					<n8n-text color="text-light">{{ currentUser.fullName }}</n8n-text>
 				</span>
 				<n8n-avatar
@@ -21,7 +21,7 @@
 					$locale.baseText('settings.personal.basicInformation')
 				}}</n8n-heading>
 			</div>
-			<div>
+			<div data-test-id="personal-data-form">
 				<n8n-form-inputs
 					v-if="formInputs"
 					:inputs="formInputs"
@@ -38,7 +38,7 @@
 			</div>
 			<div>
 				<n8n-input-label :label="$locale.baseText('auth.password')">
-					<n8n-link @click="openPasswordModal">{{
+					<n8n-link @click="openPasswordModal" data-test-id="change-password-link">{{
 						$locale.baseText('auth.changePassword')
 					}}</n8n-link>
 				</n8n-input-label>
@@ -50,6 +50,7 @@
 				:label="$locale.baseText('settings.personal.save')"
 				size="large"
 				:disabled="!hasAnyChanges || !readyToSubmit"
+				data-test-id="save-settings-button"
 				@click="onSaveClick"
 			/>
 		</div>