add feature test for changing the password in user profile

This commit is contained in:
mahula 2022-09-15 10:13:02 +02:00
parent 7e20531f39
commit ce63ffed35
15 changed files with 146 additions and 12 deletions

View File

@ -1,10 +0,0 @@
import { Then } from "@badeball/cypress-cucumber-preprocessor";
import { OverviewPage } from "../models/OverviewPage";
Then("the user is logged in with username {string}", (username: string) => {
const overviewPage = new OverviewPage();
cy.url().should('include', '/overview')
cy.get(overviewPage.navbarNameSelector).should('contain', username);
});

View File

@ -0,0 +1,27 @@
Feature: User profile - change password
As a user
I want the option to change my password on my profile page.
Background:
# TODO for these pre-conditions utilize seeding or API check, if user exists in test system
# Given the following "users" are in the database:
# | email | password | name |
# | bibi@bloxberg.de | Aa12345_ | Bibi Bloxberg | |
# TODO instead of credentials use the name of an user object (see seeds in backend)
Given the user is logged in as "bibi@bloxberg.de" "Aa12345_"
Scenario: Change password successfully
Given the browser navigates to page "/profile"
And the user opens the change password menu
When the user fills the password form with:
| Old password | Aa12345_ |
| New password | 12345Aa_ |
| Repeat new password | 12345Aa_ |
And the user submits the password form
And the user is presented a "success" message
And the user logs out
Then the user submits the credentials "bibi@bloxberg.de" "Aa12345_"
And the user cannot login
But the user submits the credentials "bibi@bloxberg.de" "12345Aa_"
And the user is logged in with username "Bibi Bloxberg"

View File

@ -0,0 +1,11 @@
import { When } from "@badeball/cypress-cucumber-preprocessor";
import { ProfilePage } from "../models/ProfilePage";
When("the user fills the password form with:", table => {
table = table.rowsHash();
const profilePage = new ProfilePage();
profilePage.enterOldPassword(table["Old password"]);
profilePage.enterNewPassword(table["New password"]);
profilePage.enterRepeatPassword(table["Repeat new password"]);
cy.get(profilePage.submitNewPasswordBtn).should('be.enabled');
});

View File

@ -0,0 +1,8 @@
import { When } from "@badeball/cypress-cucumber-preprocessor";
import { Toasts } from "../models/Toasts";
When("the user is presented a {string} message", (type: string) => {
const toast = new Toasts();
cy.get(toast.toastTitle).should('contain.text', 'Success');
cy.get(toast.toastMessage).should('contain.text', 'Your password has been changed.');
});

View File

@ -0,0 +1,9 @@
import { And } from "@badeball/cypress-cucumber-preprocessor";
import { ProfilePage } from "../models/ProfilePage";
And("the user opens the change password menu", () => {
const profilePage = new ProfilePage();
cy.get(profilePage.openChangePassword).click();
cy.get(profilePage.newPasswordRepeatInput).should('be.visible');
cy.get(profilePage.submitNewPasswordBtn).should('be.disabled');
});

View File

@ -0,0 +1,7 @@
import { And } from "@badeball/cypress-cucumber-preprocessor";
import { ProfilePage } from "../models/ProfilePage";
And("the user submits the password form", () => {
const profilePage = new ProfilePage();
profilePage.submitPasswordForm();
});

View File

@ -0,0 +1,35 @@
/// <reference types="cypress" />
export class ProfilePage {
// selectors
openChangePassword = '[data-test=open-password-change-form]';
oldPasswordInput = '#password-input-field';
newPasswordInput = '#Neues-Passwort-input-field';
newPasswordRepeatInput = '#Neues-Passwort-wiederholen-input-field';
submitNewPasswordBtn = '[data-test=submit-new-password-btn]';
goto() {
cy.visit('/profile');
return this;
}
enterOldPassword(password: string) {
cy.get(this.oldPasswordInput).clear().type(password);
return this;
}
enterNewPassword(password: string) {
cy.get(this.newPasswordInput).clear().type(password);
return this;
}
enterRepeatPassword(password: string) {
cy.get(this.newPasswordRepeatInput).clear().type(password);
return this;
}
submitPasswordForm() {
cy.get(this.submitNewPasswordBtn).click();
return this;
}
}

View File

@ -0,0 +1,17 @@
/// <reference types="cypress" />
export class SideNavMenu {
// selectors
profileMenu = '[data-test=profile-menu]';
logoutMenu = '[data-test=logout-menu]';
openUserProfile() {
cy.get(this.profileMenu).click();
return this;
}
logout() {
cy.get(this.logoutMenu).click();
return this;
}
}

View File

@ -0,0 +1,7 @@
/// <reference types="cypress" />
export class Toasts {
// selectors
toastTitle = '.gdd-toaster-title';
toastMessage = '.gdd-toaster-body';
}

View File

@ -0,0 +1,8 @@
import { Then } from "@badeball/cypress-cucumber-preprocessor";
import { Toasts } from "../../e2e/models/Toasts";
Then("the user cannot login", () => {
const toast = new Toasts();
cy.get(toast.toastTitle).should('contain.text', 'Fehler!'); // 'Error!'
cy.get(toast.toastMessage).should('contain.text', 'Kein Benutzer mit diesen Anmeldedaten.'); // 'No user with this credentials.'
});

View File

@ -0,0 +1,5 @@
import { Given } from "@badeball/cypress-cucumber-preprocessor";
Given("the user is logged in as {string} {string}", (email: string, password: string) => {
cy.login(email, password);
});

View File

@ -0,0 +1,7 @@
import { Then } from "@badeball/cypress-cucumber-preprocessor";
import { SideNavMenu } from "../../e2e/models/SideNavMenu";
Then("the user logs out", () => {
const sideNavMenu = new SideNavMenu;
sideNavMenu.logout();
});

View File

@ -12,6 +12,7 @@
atLeastOneSpecialCharater: true,
noWhitespaceCharacters: true,
}"
id="new-password-input-field"
:label="register ? $t('form.password') : $t('form.password_new')"
:showAllErrors="true"
:immediate="true"

View File

@ -24,7 +24,7 @@
<b-icon icon="people" aria-hidden="true"></b-icon>
{{ $t('navigation.community') }}
</b-nav-item>
<b-nav-item to="/profile" class="mb-3">
<b-nav-item to="/profile" class="mb-3" data-test="profile-menu">
<b-icon icon="gear" aria-hidden="true"></b-icon>
{{ $t('navigation.profile') }}
</b-nav-item>
@ -48,7 +48,7 @@
<b-icon icon="shield-check" aria-hidden="true"></b-icon>
{{ $t('navigation.admin_area') }}
</b-nav-item>
<b-nav-item class="mb-3" @click="$emit('logout')">
<b-nav-item class="mb-3" @click="$emit('logout')" data-test="logout-menu">
<b-icon icon="power" aria-hidden="true"></b-icon>
{{ $t('navigation.logout') }}
</b-nav-item>

View File

@ -6,6 +6,7 @@
<a
class="cursor-pointer"
@click="showPassword ? (showPassword = !showPassword) : cancelEdit()"
data-test="open-password-change-form"
>
<span class="pointer mr-3">{{ $t('settings.password.change-password') }}</span>
<b-icon v-if="showPassword" class="pointer ml-3" icon="pencil"></b-icon>
@ -36,6 +37,7 @@
:variant="disabled ? 'light' : 'success'"
class="mt-4"
:disabled="disabled"
data-test="submit-new-password-btn"
>
{{ $t('form.save') }}
</b-button>