wbuezas
/
hedera-web-mindshore
forked from verdnatura/hedera-web
0
1
Fork 0
Code Pull Requests Activity

Integrate cypress and login view e2e tests

This commit is contained in:
William Buezas 2024-10-04 08:06:56 -03:00
parent ef3b41e4e2
commit 57e1f66a94
8 changed files with 1683 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
cypress.config.js Normal file
View File

@ -0,0 +1,13 @@
const { defineConfig } = require('cypress');
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:8080/',
supportFile: 'src/test/cypress/support/index.js',
fixturesFolder: 'src/test/cypress/fixtures',
specPattern: 'src/test/cypress/integration/**/*.spec.js',
setupNodeEvents(on, config) {
// implement node event listeners here
}
}
});

1597
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -19,6 +19,7 @@
"babel-loader": "^9.1.0",
"bundle-loader": "^0.5.6",
"css-loader": "^5.2.7",
"cypress": "^13.15.0",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-standard": "^17.0.0",
@ -67,6 +68,7 @@
"scripts": {
"front": "webpack serve --open",
"back": "cd ../vn-database && myvc start && cd ../salix && gulp backOnly",
"cy:open": "cypress open",
"build": "rm -rf build/ ; webpack",
"clean": "rm -rf build/",
"lint": "eslint --ext .js,.vue ./"

14
src/pages/Login/LoginView.vue
View File

@ -45,7 +45,7 @@ onMounted(() => {
const onLogin = async () => {
await userStore.fetchUser();
await userStore.updateUserLang(selectedLocaleValue.value);
await router.push('/');
await router.push({ name: 'home' });
};
const login = async () => {
@ -67,14 +67,21 @@ const loginAsGuest = async () => {
</div>
<QForm @submit="login()" class="q-gutter-y-md">
<div class="q-gutter-y-sm">
<QInput v-model="email" :label="$t('user')" autofocus />
<QInput
v-model="email"
:label="$t('user')"
autofocus
data-testid="loginUserInput"
/>
<QInput
v-model="password"
:label="$t('password')"
:type="!showPwd ? 'password' : 'text'"
data-testid="loginPasswordInput"
>
<template #append>
<QIcon
data-testid="showPasswordIcon"
:name="showPwd ? 'visibility_off' : 'visibility'"
class="cursor-pointer"
@click="showPwd = !showPwd"
@ -83,12 +90,14 @@ const loginAsGuest = async () => {
</QInput>
<div class="row justify-between text-center">
<QCheckbox
data-testid="rememberCheckbox"
v-model="remember"
:label="$t('remindMe')"
dense
class="col"
/>
<QSelect
data-testid="switchLanguage"
v-model="selectedLocaleValue"
:options="userStore.localeOptions"
:label="t('language')"
@ -115,6 +124,7 @@ const loginAsGuest = async () => {
</div>
<div class="justify-center">
<QBtn
data-testid="loginAsGuestButton"
@click="loginAsGuest()"
:label="$t('logInAsGuest')"
class="full-width"

59
src/test/cypress/integration/login/login.spec.js Normal file
View File

@ -0,0 +1,59 @@
describe('Login Tests', () => {
beforeEach(() => {
cy.visit('/#/login');
});
it('should toggle password visibility', () => {
cy.get('[data-testid="showPasswordIcon"]').should('exist');
cy.get('[data-testid="showPasswordIcon"]').click();
cy.get('[data-testid="showPasswordIcon"]').should(
'have.text',
'visibility_off'
);
cy.get('[data-testid="showPasswordIcon"]').click();
cy.get('[data-testid="showPasswordIcon"]').should(
'have.text',
'visibility'
);
});
it('should select a language from the dropdown', () => {
cy.get('[data-testid="switchLanguage"]').should('exist');
cy.get('[data-testid="switchLanguage"]').click();
cy.get('.q-item').contains('English').click();
cy.get('[data-testid="switchLanguage"]').should('contain', 'en');
});
it('should fail to log in using wrong user', () => {
cy.get('[data-testid="loginUserInput"]').type('incorrectUser');
cy.get('[data-testid="loginPasswordInput"]').type('nightmare');
cy.get('button[type="submit"]').click();
cy.get('.q-notification__message:first').should(
'have.text',
'login failed'
);
});
it('should fail to log in using wrong password', () => {
cy.get('[data-testid="loginUserInput"]').type('incorrectUser');
cy.get('[data-testid="loginPasswordInput"]').type('nightmare');
cy.get('button[type="submit"]').click();
cy.get('.q-notification__message:first').should(
'have.text',
'login failed'
);
});
it('should log in', () => {
cy.get('[data-testid="loginUserInput"]').type('employee');
cy.get('[data-testid="loginPasswordInput"]').type('nightmare');
cy.get('button[type="submit"]').click();
cy.url().should('contain', '/#/cms/home');
});
it('should log in as guest', () => {
cy.get('[data-testid="loginAsGuestButton"]').should('exist');
cy.get('[data-testid="loginAsGuestButton"]').click();
cy.url().should('contain', '/#/cms/home');
});
});

25
src/test/cypress/support/commands.js Normal file
View File

@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

20
src/test/cypress/support/e2e.js Normal file
View File

@ -0,0 +1,20 @@
// ***********************************************************
// This example support/e2e.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')

16
src/test/cypress/support/index.js Normal file
View File

@ -0,0 +1,16 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your e2e test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
import './commands';