generator-jhipster 7.4.1 → 7.5.0

package/generators/client/templates/vue/package.json

@@ -7,39 +7,39 @@
     "bootstrap": "4.6.1",
     "bootstrap-vue": "2.21.2",
     "bootswatch": "5.1.3",
-    "swagger-ui-dist": "4.1.2",
+    "swagger-ui-dist": "4.1.3",
     "vue": "2.6.14",
     "vue-class-component": "7.2.6",
     "vue-cookie": "1.1.4",
     "vue-infinite-loading": "2.4.5",
     "vue-router": "3.5.3",
-    "vue-i18n": "8.26.7",
+    "vue-i18n": "8.26.8",
     "vue-property-decorator": "9.1.2",
-    "vuelidate": "0.7.6",
+    "vuelidate": "0.7.7",
     "vuex": "3.6.2",
-    "vue2-filters": "0.13.0"
+    "vue2-filters": "0.14.0"
   },
   "devDependencies": {
-    "@types/jest": "27.0.3",
-    "@types/node": "16.11.11",
+    "@types/jest": "27.4.0",
+    "@types/node": "16.11.17",
     "@types/sinon": "10.0.6",
     "@types/vuelidate": "0.7.15",
-    "@typescript-eslint/eslint-plugin": "5.5.0",
-    "@typescript-eslint/parser": "5.5.0",
+    "@typescript-eslint/eslint-plugin": "5.8.1",
+    "@typescript-eslint/parser": "5.8.1",
     "@vue/eslint-config-prettier": "6.0.0",
     "@vue/eslint-config-typescript": "9.1.0",
     "@vue/vue2-jest": "27.0.0-alpha.3",
     "@vue/test-utils": "1.3.0",
     "axios-mock-adapter": "1.20.0",
-    "autoprefixer": "10.4.0",
+    "autoprefixer": "10.4.1",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "10.0.0",
+    "copy-webpack-plugin": "10.2.0",
     "css-loader": "6.5.1",
-    "css-minimizer-webpack-plugin": "3.2.0",
+    "css-minimizer-webpack-plugin": "3.3.1",
     "folder-hash": "4.0.1",
     "fork-ts-checker-webpack-plugin": "6.5.0",
     "html-webpack-plugin": "5.5.0",
-    "jest": "27.4.3",
+    "jest": "27.4.5",
     "jest-junit": "13.0.0",
     "jest-serializer-vue": "2.0.2",
     "jest-sonar-reporter": "2.0.0",
@@ -51,22 +51,22 @@
     "postcss-loader": "6.2.1",
     "postcss-url": "10.1.3",
     "rimraf": "3.0.2",
-    "sass": "1.44.0",
-    "sass-loader": "12.3.0",
+    "sass": "1.45.2",
+    "sass-loader": "12.4.0",
     "sinon": "12.0.1",
-    "terser-webpack-plugin": "5.2.5",
-    "ts-jest": "27.0.7",
+    "terser-webpack-plugin": "5.3.0",
+    "ts-jest": "27.1.2",
     "ts-loader": "9.2.6",
-    "eslint": "8.3.0",
+    "eslint": "8.5.0",
     "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-vue": "8.1.1",
-    "typescript": "4.5.2",
-    "webpack": "5.64.4",
+    "eslint-plugin-vue": "8.2.0",
+    "typescript": "4.5.4",
+    "webpack": "5.65.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.9.1",
-    "webpack-dev-server": "4.6.0",
+    "webpack-dev-server": "4.7.2",
     "webpack-merge": "5.8.0",
-    "workbox-webpack-plugin": "6.4.1",
+    "workbox-webpack-plugin": "6.4.2",
     "vue-jest": "3.0.7",
     "vue-loader": "15.9.8"
   }

package/generators/client/templates/vue/package.json.ejs

@@ -183,9 +183,9 @@
     "test:watch": "<%= clientPackageManager %> run jest -- --watch",
     "watch": "concurrently npm:start<% if(!skipServer) { %> npm:backend:start<% } %>",
     "webapp:build": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:dev --",
-    "webapp:build:dev": "<%= clientPackageManager %> run webpack -- --mode development --progress=profile --env stats=minimal",
-    "webapp:build:prod": "<%= clientPackageManager %> run webpack -- --mode production --progress=profile --env stats=minimal",
-    "webapp:dev": "<%= clientPackageManager %> run webpack-dev-server -- --mode development --progress=profile --env stats=normal",
+    "webapp:build:dev": "<%= clientPackageManager %> run webpack -- --mode development --env stats=minimal",
+    "webapp:build:prod": "<%= clientPackageManager %> run webpack -- --mode production --env stats=minimal",
+    "webapp:dev": "<%= clientPackageManager %> run webpack-dev-server -- --mode development --env stats=normal",
     "webapp:prod": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:prod --",
     "webapp:test": "<%= clientPackageManager %> run test --",
     "webpack-dev-server": "webpack serve --config webpack/webpack.common.js",

package/generators/client/templates/vue/src/main/webapp/app/account/account.service.ts.ejs

@@ -89,18 +89,17 @@ export default class AccountService {
     if (!this.authenticated || !this.userAuthorities) {
       const token = <%_ if (authenticationTypeJwt) { _%> localStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken') || sessionStorage.getItem('<%=jhiPrefixDashed %>-authenticationToken'); <%_ } else { _%> this.cookie.get('JSESSIONID') || this.cookie.get('XSRF-TOKEN'); <%_ } _%>
       if (!this.store.getters.account && !this.store.getters.logon && token) {
-        return this.retrieveAccount();
+        return this.retrieveAccount().then(resp => {
+          if (resp) {
+            return this.checkAuthorities(authorities);
+          }
+          return Promise.resolve(false);
+        });
       }
       return Promise.resolve(false);
     }
 
-    for (const authority of authorities) {
-      if (this.userAuthorities.includes(authority)) {
-        return Promise.resolve(true);
-      }
-    }
-
-    return Promise.resolve(false);
+    return this.checkAuthorities(authorities);
   }
 
   public get authenticated(): boolean {
@@ -108,6 +107,17 @@ export default class AccountService {
   }
 
   public get userAuthorities(): any {
-    return this.store.getters.account.authorities;
+    return this.store.getters.account?.authorities;
+  }
+
+  private checkAuthorities(authorities: any): Promise<boolean> {
+    if (this.userAuthorities) {
+      for (const authority of authorities) {
+        if (this.userAuthorities.includes(authority)) {
+          return Promise.resolve(true);
+        }
+      }
+    }
+    return Promise.resolve(false);
   }
 }

package/generators/client/templates/vue/src/main/webapp/app/entities/entities.component.ts.ejs

@@ -1,5 +1,8 @@
 import { Component, Provide, Vue } from 'vue-property-decorator';
 
+<%_ if (!skipUserManagement || authenticationTypeOauth2) { %>
+import UserService from '@/entities/user/user.service';
+<%_ } _%>
 <%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
 import <%= entity.entityAngularName %>Service from './<%= entity.entityFolderName %>/<%= entity.entityFileName %>.service';
 <%_ } _%>
@@ -7,6 +10,9 @@ import <%= entity.entityAngularName %>Service from './<%= entity.entityFolderNam
 
 @Component
 export default class Entities extends Vue {
+<%_ if (!skipUserManagement || authenticationTypeOauth2) { %>
+  @Provide('userService') private userService = () => new UserService();
+<%_ } _%>
 <%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
   @Provide('<%= entity.entityInstance %>Service') private <%= entity.entityInstance %>Service = () => new <%= entity.entityAngularName %>Service();
 <%_ } _%>

package/generators/client/templates/vue/src/main/webapp/app/entities/user/{user.oauth2.service.ts.ejs → user.service.ts.ejs}

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 const baseApiUrl = 'api/users';
 
-export default class UserOAuth2Service {
+export default class UserService {
   public retrieve(): Promise<any> {
     return new Promise<any>((resolve, reject) => {
       axios

package/generators/client/templates/vue/src/main/webapp/app/main.ts.ejs

@@ -20,7 +20,6 @@ import ConfigurationService from '@/admin/configuration/configuration.service';
 <%_ if (!skipUserManagement) { _%>
 import ActivateService from './account/activate/activate.service';
 import RegisterService from './account/register/register.service';
-import UserManagementService from '@/admin/user-management/user-management.service';
 <%_ } _%>
 import LoginService from './account/login.service';
 import AccountService from './account/account.service';
@@ -37,9 +36,6 @@ import GatewayService from '@/admin/gateway/gateway.service';
 <%_ if (communicationSpringWebsocket) { _%>
 import TrackerService from './admin/tracker/tracker.service';
 <%_ } _%>
-<%_ if (!skipUserManagement || authenticationTypeOauth2) { %>
-import UserOAuth2Service from '@/entities/user/user.oauth2.service';
-<%_ } _%>
 /* tslint:disable */
 
 // jhipster-needle-add-entity-service-to-main-import - JHipster will import entities services here
@@ -106,7 +102,6 @@ new Vue({
 <%_ if (!skipUserManagement) { _%>
     activateService: () => new ActivateService(),
     registerService: () => new RegisterService(),
-    userService: () => new UserManagementService(),
 <%_ } _%>
 <%_ if (applicationTypeGateway && serviceDiscoveryType) { %>
     gatewayService: () => new GatewayService(),
@@ -120,9 +115,6 @@ new Vue({
 <%_ if (communicationSpringWebsocket) { _%>
     trackerService: () => trackerService,
 <%_ } %>
-<%_ if (!skipUserManagement || authenticationTypeOauth2) { %>
-    userOAuth2Service: () => new UserOAuth2Service(),
-<%_ } _%>
 <%_ if (enableTranslation) { _%>
     translationService: () => translationService,
 <%_ } _%>

package/generators/client/templates/vue/src/test/javascript/spec/app/admin/user-management/user-management-edit.component.spec.ts.ejs

@@ -87,8 +87,8 @@ describe('UserManagementEdit Component', () => {
       // GIVEN
       axiosStub.put.resolves({
         headers: {
-          'x-jhipsterapp-alert': '',
-          'x-jhipsterapp-params': '',
+          'x-<%= frontendAppName.toLowerCase() %>-alert': '',
+          'x-<%= frontendAppName.toLowerCase() %>-params': '',
         },
       });
       userManagementEdit.userAccount = { id: <%- tsKeyId %>, authorities: [] };
@@ -106,8 +106,8 @@ describe('UserManagementEdit Component', () => {
       // GIVEN
       axiosStub.post.resolves({
         headers: {
-          'x-jhipsterapp-alert': '',
-          'x-jhipsterapp-params': '',
+          'x-<%= frontendAppName.toLowerCase() %>-alert': '',
+          'x-<%= frontendAppName.toLowerCase() %>-params': '',
         },
       });
       userManagementEdit.userAccount = { authorities: [] };

package/generators/client/templates/vue/src/test/javascript/spec/app/admin/user-management/user-management.component.spec.ts.ejs

@@ -98,8 +98,8 @@ describe('UserManagement Component', () => {
       // GIVEN
       axiosStub.delete.resolves({
         headers: {
-          'x-jhipsterapp-alert': '',
-          'x-jhipsterapp-params': '',
+          'x-<%= frontendAppName.toLowerCase() %>-alert': '',
+          'x-<%= frontendAppName.toLowerCase() %>-params': '',
         },
       });
 

package/generators/client/templates/vue/webpack/webpack.common.js.ejs

@@ -63,8 +63,6 @@ module.exports = async (env, options) => {
               '/api',
               '/services',
               '/management',
-              '/swagger-resources',
-              '/v2/api-docs',
               '/v3/api-docs',
               '/h2-console',
 <%_ if (authenticationTypeOauth2) { _%>

package/generators/common/templates/README.md.jhi.ejs

@@ -61,10 +61,8 @@ JHipster configuration is stored in this file at `generator-jhipster` key. You m
 - `.yo-resolve` (optional) - Yeoman conflict resolver
 Allows to use a specific action when conflicts are found skipping prompts for files that matches a pattern. Each line should match `[pattern] [action]` with pattern been a [Minimatch](https://github.com/isaacs/minimatch#minimatch) pattern and action been one of skip (default if ommited) or force. Lines starting with `#` are considered comments and are ignored.
 - `.jhipster/*.json` - JHipster entity configuration files
-<%_ if (buildToolMaven) { _%>
 - `npmw` - wrapper to use locally installed npm.
-JHipster installs Node and npm locally using the build tool by default. This wrapper makes sure npm is installed locally and uses it avoiding some differences different versions can cause. By using `./npmw` instead of the traditional `npm` you can configure a Node-less environment to develop your application.
-<%_ } _%>
+JHipster installs Node and npm locally using the build tool by default. This wrapper makes sure npm is installed locally and uses it avoiding some differences different versions can cause. By using `./npmw` instead of the traditional `npm` you can configure a Node-less environment to develop or test your application.
 - `/src/main/docker` - Docker configurations for the application and services that the application depends on
 
 ## Development

package/generators/common/templates/package.json

@@ -1,9 +1,9 @@
 {
   "devDependencies": {
-    "concurrently": "6.4.0",
+    "concurrently": "6.5.1",
     "husky": "7.0.4",
-    "lint-staged": "12.1.2",
-    "npm": "8.1.4",
+    "lint-staged": "12.1.4",
+    "npm": "8.3.0",
     "wait-on": "6.0.0"
   }
 }

package/generators/cypress/templates/cypress.json.ejs

@@ -31,9 +31,16 @@
 <%_ } _%>
   "viewportWidth": 1200,
   "viewportHeight": 720,
-  "retries": 2<%_ if (authenticationTypeJwt) { _%>,
+  "retries": 2,
+<%_ if (authenticationTypeJwt) { _%>
   "env": {
+    "authenticationUrl": "/api/authenticate",
     "jwtStorageName": "<%= jhiPrefixDashed %>-authenticationToken"
-  }
+  },
+<%_ } else if (authenticationTypeSession) { _%>
+  "env": {
+    "authenticationUrl": "/api/authentication"
+  },
 <%_ } _%>
+  "experimentalSessionSupport": true,
 }

package/generators/cypress/templates/src/test/javascript/cypress/integration/account/login-page.spec.ts.ejs

@@ -25,17 +25,10 @@ import {
 } from '../../support/commands';
 
 describe('login modal', () => {
-  const username = Cypress.env('E2E_USERNAME') ?? 'admin';
-  const password = Cypress.env('E2E_PASSWORD') ?? 'admin';
+  const username = Cypress.env('E2E_USERNAME') ?? 'user';
+  const password = Cypress.env('E2E_PASSWORD') ?? 'user';
 
-  before(() => {
-    cy.window().then(win => {
-      win.sessionStorage.clear();
-    });
-<%_ if (authenticationTypeSession) { _%>
-    cy.clearCookie('SESSION');
-<%_ } _%>
-    cy.clearCookies();
+  beforeEach(() => {
     cy.visit('');
     cy.clickOnLoginItem();
   });
@@ -56,7 +49,6 @@ describe('login modal', () => {
     <%_ } _%>
     // login page should stay open when login fails
     cy.get(titleLoginSelector).should('be.visible');
-    cy.get(passwordLoginSelector).clear();
   });
 
   it('requires password', () => {
@@ -69,7 +61,6 @@ describe('login modal', () => {
     // login page should stay open when login fails
     cy.get(titleLoginSelector).should('be.visible');
     <%_ } _%>
-    cy.get(usernameLoginSelector).clear();
   });
 
   it('errors when password is incorrect', () => {
@@ -78,8 +69,6 @@ describe('login modal', () => {
     cy.get(submitLoginSelector).click();
     cy.wait('@authenticate').then(({ response }) => expect(response.statusCode).to.equal(401));
     cy.get(errorLoginSelector).should('be.visible');
-    cy.get(usernameLoginSelector).clear();
-    cy.get(passwordLoginSelector).clear();
   });
 
   it('go to login page when successfully logs in', () => {

package/generators/cypress/templates/src/test/javascript/cypress/integration/account/password-page.spec.ts.ejs

@@ -26,77 +26,71 @@ import {
 } from '../../support/commands';
 
 describe('/account/password', () => {
-  before(() => {
-    cy.window().then((win) => {
-      win.sessionStorage.clear()
-    });
-<%_ if (authenticationTypeSession) { _%>
-    cy.clearCookie('SESSION');
-<%_ } _%>
-    cy.clearCookies();
-    cy.visit('');
-    cy.login('user', 'user');
-    cy.clickOnPasswordItem();
+  const username = Cypress.env('E2E_USERNAME') ?? 'user';
+  const password = Cypress.env('E2E_PASSWORD') ?? 'user';
+
+  beforeEach(() => {
+    cy.login(username, password);
+    cy.visit('/account/password');
   });
 
   beforeEach(() => {
     cy.intercept('POST', '/api/account/change-password').as('passwordSave');
   });
 
+  it('should be accessible through menu', () => {
+    cy.visit('');
+    cy.clickOnPasswordItem();
+    cy.url().should('match', /\/account\/password$/);
+  });
+
   it("requires current password", () => {
     <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitPasswordSelector).click({ force: true });
+    cy.get(submitPasswordSelector).click();
     <%_ } _%>
     cy.get(currentPasswordSelector)
       .should('have.class', classInvalid)
-      .type('wrong-current-password');
-    <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitPasswordSelector).click({ force: true });
-    <%_ } _%>
-    cy.get(currentPasswordSelector).should('have.class', classValid);
-    cy.get(currentPasswordSelector).clear();
+      .type('wrong-current-password')
+      .blur()
+      .should('have.class', classValid);
   });
 
   it("requires new password", () => {
-    cy.get(newPasswordSelector)
-      .should('have.class', classInvalid)
-      .type('jhipster');
     <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitPasswordSelector).click({ force: true });
+    cy.get(submitPasswordSelector).click();
     <%_ } _%>
-    cy.get(newPasswordSelector).should('have.class', classValid);
-    cy.get(newPasswordSelector).clear();
+    cy.get(newPasswordSelector)
+      .should('have.class', classInvalid)
+      .type('jhipster')
+      .blur()
+      .should('have.class', classValid);
   });
 
   it("requires confirm new password", () => {
+    <%_ if (clientFrameworkReact) { _%>
+    cy.get(submitPasswordSelector).click();
+    <%_ } _%>
     cy.get(newPasswordSelector).type('jhipster');
     cy.get(confirmPasswordSelector)
       .should('have.class', classInvalid)
-      .type('jhipster');
-    <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitPasswordSelector).click({ force: true });
-    <%_ } _%>
-    cy.get(confirmPasswordSelector).should('have.class', classValid);
-    cy.get(newPasswordSelector).clear();
-    cy.get(confirmPasswordSelector).clear();
+      .type('jhipster')
+      .blur()
+      .should('have.class', classValid);
   });
 
   it("should fail to update password when using incorrect current password", () => {
     cy.get(currentPasswordSelector).type('wrong-current-password');
     cy.get(newPasswordSelector).type('jhipster');
     cy.get(confirmPasswordSelector).type('jhipster');
-    cy.get(submitPasswordSelector).click({force: true});
+    cy.get(submitPasswordSelector).click();
     cy.wait('@passwordSave').then(({ response }) => expect(response.statusCode).to.equal(400));
-    cy.get(currentPasswordSelector).clear();
-    cy.get(newPasswordSelector).clear();
-    cy.get(confirmPasswordSelector).clear();
   });
 
   it("should be able to update password", () => {
-    cy.get(currentPasswordSelector).type('user');
-    cy.get(newPasswordSelector).type('user');
-    cy.get(confirmPasswordSelector).type('user');
-    cy.get(submitPasswordSelector).click({force: true});
+    cy.get(currentPasswordSelector).type(password);
+    cy.get(newPasswordSelector).type(password);
+    cy.get(confirmPasswordSelector).type(password);
+    cy.get(submitPasswordSelector).click();
     cy.wait('@passwordSave').then(({ response }) => expect(response.statusCode).to.equal(200));
   });
 });

package/generators/cypress/templates/src/test/javascript/cypress/integration/account/register-page.spec.ts.ejs

@@ -26,101 +26,95 @@ import {
   classValid,
 } from '../../support/commands';
 
-describe('/account/register', () => {
-  before(() => {
-    cy.window().then((win) => {
-      win.sessionStorage.clear()
-    });
-<%_ if (authenticationTypeSession) { _%>
-    cy.clearCookie('SESSION');
-<%_ } _%>
-    cy.clearCookies();
-    cy.visit('');
-    cy.clickOnRegisterItem();
+<% const registerPage = clientFrameworkVue ? '/register' : '/account/register'; _%>
+describe('<%= registerPage %>', () => {
+  beforeEach(() => {
+    cy.visit('<%= registerPage %>');
   });
 
   beforeEach(() => {
     cy.intercept('POST', '/api/register').as('registerSave');
   });
 
+  it('should be accessible through menu', () => {
+    cy.visit('');
+    cy.clickOnRegisterItem();
+    cy.url().should('match', /<%= registerPage.replaceAll('/', '\\/') %>$/);
+  });
+
   it('should load the register page', () => {
     cy.get(submitRegisterSelector).should('be.visible');
   });
 
   it('requires username', () => {
     <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitRegisterSelector).click({ force: true });
+    cy.get(submitRegisterSelector).click();
     <%_ } _%>
     cy.get(usernameRegisterSelector)
       .should('have.class', classInvalid)
-      .type('test');
-    <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitRegisterSelector).click({ force: true });
-    <%_ } _%>
-    cy.get(usernameRegisterSelector).should('have.class', classValid)
-      .clear();
+      .type('test')
+      .blur()
+      .should('have.class', classValid);
   });
 
-  it('requires email', () => {
-    cy.get(emailRegisterSelector)
-      .should('have.class', classInvalid)
-      .type('testtest.fr');
+  it('should not accept invalid email', () => {
     <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitRegisterSelector).click({ force: true });
+    cy.get(submitRegisterSelector).click();
     <%_ } _%>
-    cy.get(emailRegisterSelector).should('have.class', classInvalid)
-      .clear();
+    cy.get(emailRegisterSelector)
+      .should('have.class', classInvalid)
+      .type('testtest.fr')
+      .blur()
+      .should('have.class', classInvalid);
   });
 
   it('requires email in correct format', () => {
-    cy.get(emailRegisterSelector)
-      .should('have.class', classInvalid)
-      .type('test@test.fr');
     <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitRegisterSelector).click({ force: true });
+    cy.get(submitRegisterSelector).click();
     <%_ } _%>
-    cy.get(emailRegisterSelector).should('have.class', classValid)
-      .clear();
+    cy.get(emailRegisterSelector)
+      .should('have.class', classInvalid)
+      .type('test@test.fr')
+      .blur()
+      .should('have.class', classValid);
   });
 
   it('requires first password', () => {
-    cy.get(firstPasswordRegisterSelector)
-      .should('have.class', classInvalid)
-      .type('test@test.fr');
     <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitRegisterSelector).click({ force: true });
+    cy.get(submitRegisterSelector).click();
     <%_ } _%>
-    cy.get(firstPasswordRegisterSelector).should('have.class', classValid)
-      .clear();
+    cy.get(firstPasswordRegisterSelector)
+      .should('have.class', classInvalid)
+      .type('test@test.fr')
+      .blur()
+      .should('have.class', classValid);
   });
 
   it('requires password and confirm password to be same', () => {
-    cy.get(firstPasswordRegisterSelector)
-      .should('have.class', classInvalid)
-      .type('test');
     <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitRegisterSelector).click({ force: true });
+    cy.get(submitRegisterSelector).click();
     <%_ } _%>
-    cy.get(firstPasswordRegisterSelector).should('have.class', classValid);
+    cy.get(firstPasswordRegisterSelector)
+      .should('have.class', classInvalid)
+      .type('test')
+      .blur()
+      .should('have.class', classValid);
     cy.get(secondPasswordRegisterSelector)
       .should('have.class', classInvalid)
-      .type('test');
-    <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitRegisterSelector).click({ force: true });
-    <%_ } _%>
-    cy.get(secondPasswordRegisterSelector).should('have.class', classValid);
-    cy.get(firstPasswordRegisterSelector).clear();
-    cy.get(secondPasswordRegisterSelector).clear();
+      .type('test')
+      .blur()
+      .should('have.class', classValid);
   });
 
   it('requires password and confirm password have not the same value', () => {
-    cy.get(firstPasswordRegisterSelector)
-      .should('have.class', classInvalid)
-      .type('test');
     <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitRegisterSelector).click({ force: true });
+    cy.get(submitRegisterSelector).click();
     <%_ } _%>
-    cy.get(firstPasswordRegisterSelector).should('have.class', classValid);
+    cy.get(firstPasswordRegisterSelector)
+      .should('have.class', classInvalid)
+      .type('test')
+      .blur()
+      .should('have.class', classValid);
 <%_ if (clientFrameworkAngular) { _%>
     cy.get(secondPasswordRegisterSelector)
       .should('have.class', classInvalid)
@@ -129,14 +123,10 @@ describe('/account/register', () => {
 <%_ } else { _%>
     cy.get(secondPasswordRegisterSelector)
       .should('have.class', classInvalid)
-      .type('otherPassword');
-    <%_ if (clientFrameworkReact) { _%>
-    cy.get(submitRegisterSelector).click({ force: true });
-    <%_ } _%>
-    cy.get(secondPasswordRegisterSelector).should('have.class', classInvalid);
+      .type('otherPassword')
+      .blur()
+      .should('have.class', classInvalid);
 <%_ } _%>
-    cy.get(firstPasswordRegisterSelector).clear();
-    cy.get(secondPasswordRegisterSelector).clear();
   });
 
   it('register a valid user', () => {
@@ -146,7 +136,7 @@ describe('/account/register', () => {
     cy.get(emailRegisterSelector).type(randomEmail);
     cy.get(firstPasswordRegisterSelector).type('jondoe');
     cy.get(secondPasswordRegisterSelector).type('jondoe');
-    cy.get(submitRegisterSelector).click({force: true});
+    cy.get(submitRegisterSelector).click();
     cy.wait('@registerSave').then(({ response }) => expect(response.statusCode).to.equal(201));
   });
 });