From 2a204f2ba12381c0cba2a30f27d2a4974f396b0f Mon Sep 17 00:00:00 2001
From: nassimerrahoui <nassim.et@hotmail.fr>
Date: Thu, 6 Aug 2020 17:13:54 +0200
Subject: [PATCH] [Vue] add cypress for vue

Co-authored-by: Adil Abed <aelabedelalaoui@acm.org>
---
 .../client/templates/vue/package.json.ejs      |  7 +++++++
 .../change-password/change-password.vue.ejs    | 10 +++++-----
 .../app/account/login-form/login-form.vue.ejs  |  8 +++++---
 .../app/account/register/register.vue.ejs      | 18 +++++++++++-------
 .../finish/reset-password-finish.vue.ejs       |  8 ++++----
 .../init/reset-password-init.vue.ejs           |  6 +++---
 .../app/account/settings/settings.vue.ejs      | 12 ++++++------
 .../admin/configuration/configuration.vue.ejs  |  4 ++--
 .../webapp/app/admin/health/health.vue.ejs     |  4 ++--
 .../main/webapp/app/admin/logs/logs.vue.ejs    |  4 ++--
 .../webapp/app/admin/metrics/metrics.vue.ejs   |  4 ++--
 .../user-management/user-management.vue.ejs    |  4 ++--
 .../vue/src/main/webapp/app/app.vue.ejs        |  2 +-
 .../app/core/jhi-navbar/jhi-navbar.vue.ejs     | 18 ++++++++++--------
 .../client/templates/vue/tsconfig.json.ejs     |  7 ++-----
 .../account/settings_page_spec.ts.ejs          |  4 ++++
 .../administration/administration_spec.ts.ejs  | 12 ++++++++++++
 .../javascript/cypress/support/commands.ts.ejs |  1 -
 18 files changed, 80 insertions(+), 53 deletions(-)

diff --git a/generators/client/templates/vue/package.json.ejs b/generators/client/templates/vue/package.json.ejs
index 405b47a1ebe8..1802ebcab505 100644
--- a/generators/client/templates/vue/package.json.ejs
+++ b/generators/client/templates/vue/package.json.ejs
@@ -117,6 +117,9 @@ limitations under the License.
 <%_ if (protractorTests) { _%>
     "protractor": "5.4.4",
 <%_ } _%>
+    <%_ if (cypressTests) { _%>
+      "cypress": "4.11.0",
+    <%_ } _%>
     "rimraf": "3.0.2",
     "sass": "1.26.5",
     "sass-loader": "8.0.2",
@@ -162,6 +165,10 @@ limitations under the License.
     "postinstall": "<%= clientPackageManager %> run e2e:update-webdriver",
     "e2e:update-webdriver": "webdriver-manager update --gecko false",
 <%_ } _%>
+    <%_ if (cypressTests) { _%>
+    "cypress": "cypress open",
+    "cypress:run": "cypress run",
+    <%_ } _%>
     "jest": "jest --coverage --logHeapUsage --maxWorkers=2 --no-cache --config src/test/javascript/jest.conf.js",
     "jest:update": "<%= clientPackageManager %> run jest -- --updateSnapshot",
     "webpack:build": "<%= clientPackageManager %> run cleanup && <%= clientPackageManager %> run webpack:build:main",
diff --git a/generators/client/templates/vue/src/main/webapp/app/account/change-password/change-password.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/account/change-password/change-password.vue.ejs
index ac7e64c115a0..8bf4d22c7fff 100644
--- a/generators/client/templates/vue/src/main/webapp/app/account/change-password/change-password.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/account/change-password/change-password.vue.ejs
@@ -26,7 +26,7 @@
                         <input type="password" class="form-control" id="currentPassword" name="currentPassword"
                             :class="{ valid: !$v.resetPassword.currentPassword.$invalid, invalid: $v.resetPassword.currentPassword.$invalid }"
                             v-bind:placeholder="$t('global.form[\'currentpassword.placeholder\']')"
-                            v-model="$v.resetPassword.currentPassword.$model" required />
+                            v-model="$v.resetPassword.currentPassword.$model" required data-cy="currentPassword" />
                         <div
                             v-if="$v.resetPassword.currentPassword.$anyDirty && $v.resetPassword.currentPassword.$invalid">
                             <small class="form-text text-danger" v-if="!$v.resetPassword.currentPassword.required"
@@ -41,7 +41,7 @@
                         <input type="password" class="form-control" id="newPassword" name="newPassword"
                             v-bind:placeholder="$t('global.form[\'newpassword.placeholder\']')"
                             :class="{ valid: !$v.resetPassword.newPassword.$invalid, invalid: $v.resetPassword.newPassword.$invalid }"
-                            v-model="$v.resetPassword.newPassword.$model" minlength="4" maxlength="50" required />
+                            v-model="$v.resetPassword.newPassword.$model" minlength="4" maxlength="50" required data-cy="newPassword" />
                         <div v-if="$v.resetPassword.newPassword.$anyDirty && $v.resetPassword.newPassword.$invalid">
                             <small class="form-text text-danger" v-if="!$v.resetPassword.newPassword.required"
                                 v-text="$t('global.messages.validate.newpassword.required')">
@@ -63,7 +63,7 @@
                         <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
                             :class="{ valid: !$v.resetPassword.confirmPassword.$invalid, invalid: $v.resetPassword.confirmPassword.$invalid }"
                             v-bind:placeholder="$t('global.form[\'confirmpassword.placeholder\']')"
-                            v-model="$v.resetPassword.confirmPassword.$model" minlength="4" maxlength="50" required />
+                            v-model="$v.resetPassword.confirmPassword.$model" minlength="4" maxlength="50" required data-cy="confirmPassword" />
                         <div
                             v-if="$v.resetPassword.confirmPassword.$anyDirty && $v.resetPassword.confirmPassword.$invalid">
                             <small class="form-text text-danger" v-if="!$v.resetAccount.confirmPassword.sameAsPassword"
@@ -74,7 +74,7 @@
                     </div>
 
                     <button type="submit" :disabled="$v.resetPassword.$invalid" class="btn btn-primary"
-                        v-text="$t('password.form.button')">
+                        v-text="$t('password.form.button')" data-cy="submit">
                         Save
                     </button>
                 </form>
@@ -83,4 +83,4 @@
     </div>
 </template>
 
-<script lang="ts" src="./change-password.component.ts"></script>
\ No newline at end of file
+<script lang="ts" src="./change-password.component.ts"></script>
diff --git a/generators/client/templates/vue/src/main/webapp/app/account/login-form/login-form.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/account/login-form/login-form.vue.ejs
index c9ca57f12896..b8ab023066af 100644
--- a/generators/client/templates/vue/src/main/webapp/app/account/login-form/login-form.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/account/login-form/login-form.vue.ejs
@@ -2,7 +2,7 @@
   <div class="modal-body">
     <div class="row justify-content-center">
       <div class="col-md-8">
-        <b-alert show variant="danger" v-if="authenticationError" v-html="$t('login.messages.error.authentication')">
+        <b-alert show data-cy="login-error" variant="danger" v-if="authenticationError" v-html="$t('login.messages.error.authentication')">
           <strong>Failed to sign in!</strong> Please check your credentials and try again.
         </b-alert>
       </div>
@@ -17,6 +17,7 @@
               v-bind:placeholder="$t('global.form[\'username.placeholder\']')"
               <% if (!enableTranslation) { %>placeholder="Your username" <% } %>
               v-model="login"
+              data-cy="username"
             >
             </b-form-input>
           </b-form-group>
@@ -29,6 +30,7 @@
               v-bind:placeholder="$t('login.form[\'password.placeholder\']')"
               <% if (!enableTranslation) { %>placeholder="Your password" <% } %>
               v-model="password"
+              data-cy="password"
             >
             </b-form-input>
           </b-form-group>
@@ -36,7 +38,7 @@
             <span v-text="$t('login.form.rememberme')">Remember me</span>
           </b-form-checkbox>
           <div>
-            <b-button type="submit" variant="primary" v-text="$t('login.form.button')">Sign in</b-button>
+            <b-button data-cy="submit" type="submit" variant="primary" v-text="$t('login.form.button')">Sign in</b-button>
           </div>
         </b-form>
         <p></p>
@@ -44,7 +46,7 @@
         <div>
           <b-alert show variant="warning">
             <b-link :to="'/account/reset/request'" class="alert-link" v-text="$t('login.password.forgot')"
-              >Did you forget your password?</b-link
+            data-cy="forgetYourPasswordSelector" >Did you forget your password?</b-link
             >
           </b-alert>
         </div>
diff --git a/generators/client/templates/vue/src/main/webapp/app/account/register/register.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/account/register/register.vue.ejs
index 9a8a13d89592..b2b6568171a1 100644
--- a/generators/client/templates/vue/src/main/webapp/app/account/register/register.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/account/register/register.vue.ejs
@@ -2,7 +2,7 @@
     <div>
         <div class="row justify-content-center">
             <div class="col-md-8 toastify-container">
-                <h1 v-text="$t('register.title')" id="register-title">Registration</h1>
+                <h1 v-text="$t('register.title')" id="register-title" data-cy="register-title">Registration</h1>
 
                 <div class="alert alert-success" role="alert" v-if="success" v-html="$t('register.messages.success')">
                     <strong>Registration saved!</strong> Please check your email for confirmation.
@@ -35,7 +35,8 @@
                             :class="{ valid: !$v.registerAccount.login.$invalid, invalid: $v.registerAccount.login.$invalid }"
                             required minlength="1" maxlength="50"
                             pattern="^[a-zA-Z0-9!#$&'*+=?^_`{|}~.-]+@?[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
-                            v-bind:placeholder="$t('global.form[\'username.placeholder\']')" />
+                            v-bind:placeholder="$t('global.form[\'username.placeholder\']')"
+                            data-cy="username" />
                         <div v-if="$v.registerAccount.login.$anyDirty && $v.registerAccount.login.$invalid">
                             <small class="form-text text-danger" v-if="!$v.registerAccount.login.required"
                                 v-text="$t('register.messages.validate.login.required')">
@@ -61,7 +62,8 @@
                         <input type="email" class="form-control" id="email" name="email"
                             :class="{ valid: !$v.registerAccount.email.$invalid, invalid: $v.registerAccount.email.$invalid }"
                             v-model="$v.registerAccount.email.$model" minlength="5" maxlength="254" email required
-                            v-bind:placeholder="$t('global.form[\'email.placeholder\']')" />
+                            v-bind:placeholder="$t('global.form[\'email.placeholder\']')"
+                            data-cy="email" />
                         <div v-if="$v.registerAccount.email.$anyDirty && $v.registerAccount.email.$invalid">
                             <small class="form-text text-danger" v-if="!$v.registerAccount.email.required"
                                 v-text="$t('global.messages.validate.email.required')">
@@ -87,7 +89,8 @@
                         <input type="password" class="form-control" id="firstPassword" name="password"
                             :class="{ valid: !$v.registerAccount.password.$invalid, invalid: $v.registerAccount.password.$invalid }"
                             v-model="$v.registerAccount.password.$model" minlength="4" maxlength="50" required
-                            v-bind:placeholder="$t('global.form[\'newpassword.placeholder\']')" />
+                            v-bind:placeholder="$t('global.form[\'newpassword.placeholder\']')"
+                            data-cy="firstPassword" />
                         <div v-if="$v.registerAccount.password.$anyDirty && $v.registerAccount.password.$invalid">
                             <small class="form-text text-danger" v-if="!$v.registerAccount.password.required"
                                 v-text="$t('global.messages.validate.newpassword.required')">
@@ -109,7 +112,8 @@
                         <input type="password" class="form-control" id="secondPassword" name="confirmPasswordInput"
                             :class="{ valid: !$v.confirmPassword.$invalid, invalid: $v.confirmPassword.$invalid }"
                             v-model="$v.confirmPassword.$model" minlength="4" maxlength="50" required
-                            v-bind:placeholder="$t('global.form[\'confirmpassword.placeholder\']')" />
+                            v-bind:placeholder="$t('global.form[\'confirmpassword.placeholder\']')"
+                            data-cy="secondPassword" />
                         <div v-if="$v.confirmPassword.$dirty && $v.confirmPassword.$invalid">
                             <small class="form-text text-danger" v-if="!$v.confirmPassword.required"
                                 v-text="$t('global.messages.validate.confirmpassword.required')">
@@ -131,7 +135,7 @@
                     </div>
 
                     <button type="submit" :disabled="$v.$invalid" class="btn btn-primary"
-                        v-text="$t('register.form.button')">Register</button>
+                        v-text="$t('register.form.button')" data-cy="submit">Register</button>
                 </form>
                 <p></p>
                 <div class="alert alert-warning">
@@ -148,4 +152,4 @@
     </div>
 </template>
 
-<script lang="ts" src="./register.component.ts"></script>
\ No newline at end of file
+<script lang="ts" src="./register.component.ts"></script>
diff --git a/generators/client/templates/vue/src/main/webapp/app/account/reset-password/finish/reset-password-finish.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/account/reset-password/finish/reset-password-finish.vue.ejs
index 43581a8d1859..bb0a895f4a98 100644
--- a/generators/client/templates/vue/src/main/webapp/app/account/reset-password/finish/reset-password-finish.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/account/reset-password/finish/reset-password-finish.vue.ejs
@@ -37,7 +37,7 @@
                             <input type="password" class="form-control" id="newPassword" name="newPassword"
                                 v-bind:placeholder="$t('global.form[\'newpassword.placeholder\']')"
                                 :class="{ valid: !$v.resetAccount.newPassword.$invalid, invalid: $v.resetAccount.newPassword.$invalid }"
-                                v-model="$v.resetAccount.newPassword.$model" minlength="4" maxlength="50" required />
+                                v-model="$v.resetAccount.newPassword.$model" minlength="4" maxlength="50" required data-cy="newResetPassword" />
                             <div v-if="$v.resetAccount.newPassword.$anyDirty && $v.resetAccount.newPassword.$invalid">
                                 <small class="form-text text-danger" v-if="!$v.resetAccount.newPassword.required"
                                     v-text="$t('global.messages.validate.newpassword.required')">
@@ -60,7 +60,7 @@
                                 :class="{ valid: !$v.resetAccount.confirmPassword.$invalid, invalid: $v.resetAccount.confirmPassword.$invalid }"
                                 v-bind:placeholder="$t('global.form[\'confirmpassword.placeholder\']')"
                                 v-model="$v.resetAccount.confirmPassword.$model" minlength="4" maxlength="50"
-                                required />
+                                required data-cy="confirmResetPassword" />
                             <div
                                 v-if="$v.resetAccount.confirmPassword.$anyDirty && $v.resetAccount.confirmPassword.$invalid">
                                 <small class="form-text text-danger"
@@ -71,7 +71,7 @@
                             </div>
                         </div>
                         <button type="submit" :disabled="$v.resetAccount.$invalid" class="btn btn-primary"
-                            v-text="$t('password.form.button')">
+                            v-text="$t('password.form.button')" data-cy="submit">
                             Save
                         </button>
                     </form>
@@ -81,4 +81,4 @@
     </div>
 </template>
 
-<script lang="ts" src="./reset-password-finish.component.ts"></script>
\ No newline at end of file
+<script lang="ts" src="./reset-password-finish.component.ts"></script>
diff --git a/generators/client/templates/vue/src/main/webapp/app/account/reset-password/init/reset-password-init.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/account/reset-password/init/reset-password-init.vue.ejs
index a6e50a2bb542..a2d953bed9c7 100644
--- a/generators/client/templates/vue/src/main/webapp/app/account/reset-password/init/reset-password-init.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/account/reset-password/init/reset-password-init.vue.ejs
@@ -20,7 +20,7 @@
                         <input type="email" class="form-control" id="email" name="email"
                             v-bind:placeholder="$t('global.form[\'email.placeholder\']')"
                             :class="{ valid: !$v.resetAccount.email.$invalid, invalid: $v.resetAccount.email.$invalid }"
-                            v-model="$v.resetAccount.email.$model" minlength="5" maxlength="254" email required />
+                            v-model="$v.resetAccount.email.$model" minlength="5" maxlength="254" email required data-cy="emailResetPassword" />
                         <div v-if="$v.resetAccount.email.$anyDirty && $v.resetAccount.email.$invalid">
                             <small class="form-text text-danger" v-if="!$v.resetAccount.email.required"
                                 v-text="$t('global.messages.validate.email.required')">
@@ -41,7 +41,7 @@
                         </div>
                     </div>
                     <button type="submit" :disabled="$v.resetAccount.$invalid" class="btn btn-primary"
-                        v-text="$t('reset.request.form.button')">
+                        v-text="$t('reset.request.form.button')" data-cy="submit">
                         Reset
                     </button>
                 </form>
@@ -50,4 +50,4 @@
     </div>
 </template>
 
-<script lang="ts" src="./reset-password-init.component.ts"></script>
\ No newline at end of file
+<script lang="ts" src="./reset-password-init.component.ts"></script>
diff --git a/generators/client/templates/vue/src/main/webapp/app/account/settings/settings.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/account/settings/settings.vue.ejs
index aa6245ee3184..db754ff5bd2a 100644
--- a/generators/client/templates/vue/src/main/webapp/app/account/settings/settings.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/account/settings/settings.vue.ejs
@@ -21,7 +21,7 @@
             <input type="text" class="form-control" id="firstName" name="firstName"
               v-bind:placeholder="$t('settings.form[\'firstname.placeholder\']')"
               :class="{ valid: !$v.settingsAccount.firstName.$invalid, invalid: $v.settingsAccount.firstName.$invalid }"
-              v-model="$v.settingsAccount.firstName.$model" minlength="1" maxlength="50" required />
+              v-model="$v.settingsAccount.firstName.$model" minlength="1" maxlength="50" required data-cy="firstname" />
             <div v-if="$v.settingsAccount.firstName.$anyDirty && $v.settingsAccount.firstName.$invalid">
               <small class="form-text text-danger" v-if="!$v.settingsAccount.firstName.required"
                 v-text="$t('settings.messages.validate.firstname.required')">
@@ -42,7 +42,7 @@
             <input type="text" class="form-control" id="lastName" name="lastName"
               v-bind:placeholder="$t('settings.form[\'lastname.placeholder\']')"
               :class="{ valid: !$v.settingsAccount.lastName.$invalid, invalid: $v.settingsAccount.lastName.$invalid }"
-              v-model="$v.settingsAccount.lastName.$model" minlength="1" maxlength="50" required />
+              v-model="$v.settingsAccount.lastName.$model" minlength="1" maxlength="50" required data-cy="lastname" />
             <div v-if="$v.settingsAccount.lastName.$anyDirty && $v.settingsAccount.lastName.$invalid">
               <small class="form-text text-danger" v-if="!$v.settingsAccount.lastName.required"
                 v-text="$t('settings.messages.validate.lastname.required')">
@@ -63,7 +63,7 @@
             <input type="email" class="form-control" id="email" name="email"
               v-bind:placeholder="$t('global.form[\'email.placeholder\']')"
               :class="{ valid: !$v.settingsAccount.email.$invalid, invalid: $v.settingsAccount.email.$invalid }"
-              v-model="$v.settingsAccount.email.$model" minlength="5" maxlength="254" email required />
+              v-model="$v.settingsAccount.email.$model" minlength="5" maxlength="254" email required data-cy="email"/>
             <div v-if="$v.settingsAccount.email.$anyDirty && $v.settingsAccount.email.$invalid">
               <small class="form-text text-danger" v-if="!$v.settingsAccount.email.required"
                 v-text="$t('global.messages.validate.email.required')">
@@ -85,13 +85,13 @@
           </div>
           <div class="form-group" v-if="languages && Object.keys(languages).length > 1">
             <label for="langKey" v-text="$t('settings.form.language')">Language</label>
-            <select class="form-control" id="langKey" name="langKey" v-model="settingsAccount.langKey">
+            <select class="form-control" id="langKey" name="langKey" v-model="settingsAccount.langKey" data-cy="langkey">
               <option v-for="(language, key) in languages" :value="key" :key="`lang-${key}`">{{ language.name }}
               </option>
             </select>
           </div>
           <button type="submit" :disabled="$v.settingsAccount.$invalid" class="btn btn-primary"
-            v-text="$t('settings.form.button')">
+            v-text="$t('settings.form.button')" data-cy="submit">
             Save
           </button>
         </form>
@@ -100,4 +100,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./settings.component.ts"></script>
\ No newline at end of file
+<script lang="ts" src="./settings.component.ts"></script>
diff --git a/generators/client/templates/vue/src/main/webapp/app/admin/configuration/configuration.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/admin/configuration/configuration.vue.ejs
index 0f4422f3d8ee..4bc532358d2a 100644
--- a/generators/client/templates/vue/src/main/webapp/app/admin/configuration/configuration.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/admin/configuration/configuration.vue.ejs
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 id="configuration-page-heading" v-text="$t('configuration.title')">Configuration</h2>
+    <h2 id="configuration-page-heading" v-text="$t('configuration.title')" data-cy="configuration-page-heading">Configuration</h2>
 
     <div v-if="allConfiguration && configuration">
       <span v-text="$t('configuration.filter')">Filter (by prefix)</span> <input type="text" v-model="filtered"
@@ -60,4 +60,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./configuration.component.ts"></script>
\ No newline at end of file
+<script lang="ts" src="./configuration.component.ts"></script>
diff --git a/generators/client/templates/vue/src/main/webapp/app/admin/health/health.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/admin/health/health.vue.ejs
index b3534168c8a2..01b86ec56dda 100644
--- a/generators/client/templates/vue/src/main/webapp/app/admin/health/health.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/admin/health/health.vue.ejs
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h2>
-      <span id="health-page-heading" v-text="$t('health.title')">Health Checks</span>
+      <span id="health-page-heading" v-text="$t('health.title')" data-cy="health-page-heading">Health Checks</span>
       <button class="btn btn-primary float-right" v-on:click="refresh()" :disabled="updatingHealth">
         <font-awesome-icon icon="sync"></font-awesome-icon> <span
           v-text="$t('health[\'refresh.button\']')">Refresh</span>
@@ -45,4 +45,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./health.component.ts"></script>
\ No newline at end of file
+<script lang="ts" src="./health.component.ts"></script>
diff --git a/generators/client/templates/vue/src/main/webapp/app/admin/logs/logs.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/admin/logs/logs.vue.ejs
index 8cac70973ee1..6fc7ad879b07 100644
--- a/generators/client/templates/vue/src/main/webapp/app/admin/logs/logs.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/admin/logs/logs.vue.ejs
@@ -1,6 +1,6 @@
 <template>
   <div class="table-responsive">
-    <h2 id="logs-page-heading" v-text="$t('logs.title')">Logs</h2>
+    <h2 id="logs-page-heading" v-text="$t('logs.title')" data-cy="logs-page-heading">Logs</h2>
 
     <div v-if="loggers">
       <p v-text="$t('logs.nbloggers', { total: loggers.length })">There are {{ loggers.length }} loggers.</p>
@@ -53,4 +53,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./logs.component.ts"></script>
\ No newline at end of file
+<script lang="ts" src="./logs.component.ts"></script>
diff --git a/generators/client/templates/vue/src/main/webapp/app/admin/metrics/metrics.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/admin/metrics/metrics.vue.ejs
index 50ddb7f10c2f..2204ee2c1f94 100644
--- a/generators/client/templates/vue/src/main/webapp/app/admin/metrics/metrics.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/admin/metrics/metrics.vue.ejs
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h2>
-      <span id="metrics-page-heading" v-text="$t('metrics.title')">Application Metrics</span>
+      <span id="metrics-page-heading" v-text="$t('metrics.title')" data-cy="metrics-page-heading">Application Metrics</span>
       <button class="btn btn-primary float-right" v-on:click="refresh()">
         <font-awesome-icon icon="sync"></font-awesome-icon> <span
           v-text="$t('metrics[\'refresh.button\']')">Refresh</span>
@@ -354,4 +354,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./metrics.component.ts"></script>
\ No newline at end of file
+<script lang="ts" src="./metrics.component.ts"></script>
diff --git a/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management.vue.ejs
index 579d96513761..8d69efef8f80 100644
--- a/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management.vue.ejs
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h2>
-      <span id="user-management-page-heading" v-text="$t('userManagement.home.title')">Users</span>
+      <span id="user-management-page-heading" v-text="$t('userManagement.home.title')" data-cy="user-management-page-heading">Users</span>
       <router-link tag="button" class="btn btn-primary float-right jh-create-entity" :to="{name: '<%= jhiPrefixCapitalized %>UserCreate'}">
         <font-awesome-icon icon="plus"></font-awesome-icon> <span v-text="$t('userManagement.home.createLabel')">Create a new User</span>
       </router-link>
@@ -107,4 +107,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./user-management.component.ts"></script>
\ No newline at end of file
+<script lang="ts" src="./user-management.component.ts"></script>
diff --git a/generators/client/templates/vue/src/main/webapp/app/app.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/app.vue.ejs
index 396a7e4581a0..6a59114442cb 100644
--- a/generators/client/templates/vue/src/main/webapp/app/app.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/app.vue.ejs
@@ -10,7 +10,7 @@
       </div>
       <%_ if (authenticationType !== 'oauth2') { _%>
       <b-modal id="login-page" hide-footer lazy>
-        <span slot="modal-title" id="login-title" v-text="$t('login.title')">Sign in</span>
+        <span data-cy="login-title" slot="modal-title" id="login-title" v-text="$t('login.title')">Sign in</span>
         <login-form></login-form>
       </b-modal>
       <%_ } %>
diff --git a/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue.ejs b/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue.ejs
index 5dc3e7eafa54..adebf3b608d1 100644
--- a/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue.ejs
+++ b/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue.ejs
@@ -1,5 +1,5 @@
 <template>
-  <b-navbar toggleable="md" type="<%_ if (clientTheme === 'none' || clientThemeVariant !== 'light') { _%>dark<%_ } else { _%>light<%_ } _%>" class="<%_ if (clientTheme === 'none') { _%>jh-navbar<%_ } else { _%>bg-<%= clientThemeVariant %><%_ } _%>">
+  <b-navbar data-cy="navbar" toggleable="md" type="<%_ if (clientTheme === 'none' || clientThemeVariant !== 'light') { _%>dark<%_ } else { _%>light<%_ } _%>" class="<%_ if (clientTheme === 'none') { _%>jh-navbar<%_ } else { _%>bg-<%= clientThemeVariant %><%_ } _%>">
     <b-navbar-brand class="logo" b-link to="/">
         <span class="logo-img"></span>
         <span v-text="$t('global.title')" class="navbar-title"><%= baseName %></span> <span class="navbar-version">{{version}}</span>
@@ -40,7 +40,8 @@
           v-if="hasAnyAuthority('ROLE_ADMIN') && authenticated"
           :class="{'router-link-active': subIsActive('/admin')}"
           active-class="active"
-          class="pointer">
+          class="pointer"
+          data-cy="admin-menu">
           <span slot="button-content" class="navbar-dropdown-menu">
             <font-awesome-icon icon="cogs" />
             <span v-text="$t('global.menu.admin.main')">Administration</span>
@@ -108,7 +109,8 @@
           id="account-menu"
           :class="{'router-link-active': subIsActive('/account')}"
           active-class="active"
-          class="pointer">
+          class="pointer"
+          data-cy="account-menu">
           <span slot="button-content" class="navbar-dropdown-menu">
             <font-awesome-icon icon="user" />
             <span v-text="$t('global.menu.account.main')">
@@ -116,11 +118,11 @@
             </span>
           </span>
           <%_ if (!skipUserManagement) { _%>
-          <b-dropdown-item to="/account/settings" tag="b-dropdown-item" v-if="authenticated" active-class="active">
+          <b-dropdown-item data-cy="settings" to="/account/settings" tag="b-dropdown-item" v-if="authenticated" active-class="active">
             <font-awesome-icon icon="wrench" />
             <span v-text="$t('global.menu.account.settings')">Settings</span>
           </b-dropdown-item>
-          <b-dropdown-item to="/account/password" tag="b-dropdown-item" v-if="authenticated" active-class="active">
+          <b-dropdown-item data-cy="password-item" to="/account/password" tag="b-dropdown-item" v-if="authenticated" active-class="active">
             <font-awesome-icon icon="lock" />
             <span v-text="$t('global.menu.account.password')">Password</span>
           </b-dropdown-item>
@@ -131,16 +133,16 @@
             <span v-text="$t('global.menu.account.sessions')">Sessions</span>
           </b-dropdown-item>
           <%_ } _%>
-          <b-dropdown-item v-if="authenticated"  v-on:click="logout()" id="logout" active-class="active">
+          <b-dropdown-item data-cy="logout" v-if="authenticated"  v-on:click="logout()" id="logout" active-class="active">
             <font-awesome-icon icon="sign-out-alt" />
             <span v-text="$t('global.menu.account.logout')">Sign out</span>
           </b-dropdown-item>
-          <b-dropdown-item v-if="!authenticated"  v-on:click="openLogin()" id="login" active-class="active">
+          <b-dropdown-item data-cy="login" v-if="!authenticated"  v-on:click="openLogin()" id="login" active-class="active">
             <font-awesome-icon icon="sign-in-alt" />
             <span v-text="$t('global.menu.account.login')">Sign in</span>
           </b-dropdown-item>
           <%_ if (!skipUserManagement) { _%>
-          <b-dropdown-item to="/register" tag="b-dropdown-item" id="register" v-if="!authenticated" active-class="active">
+          <b-dropdown-item data-cy="register" to="/register" tag="b-dropdown-item" id="register" v-if="!authenticated" active-class="active">
             <font-awesome-icon icon="user-plus" />
             <span v-text="$t('global.menu.account.register')">Register</span>
           </b-dropdown-item>
diff --git a/generators/client/templates/vue/tsconfig.json.ejs b/generators/client/templates/vue/tsconfig.json.ejs
index 1c18d25912a7..54b3708e3838 100644
--- a/generators/client/templates/vue/tsconfig.json.ejs
+++ b/generators/client/templates/vue/tsconfig.json.ejs
@@ -21,14 +21,11 @@
         "paths": {
             "@/*": ["src/main/webapp/app/*"]
         },
-        "importHelpers": true,
-        "allowJs": true
+        "importHelpers": true
     },
     "include": [
         "src/main/webapp/app",
         "src/test/javascript/spec"
     ],
-    "exclude": [
-        "node_modules"
-    ]
+    "exclude": ["node_modules", "src/test/javascript/cypress"]
 }
diff --git a/generators/e2e/templates/src/test/javascript/cypress/integration/account/settings_page_spec.ts.ejs b/generators/e2e/templates/src/test/javascript/cypress/integration/account/settings_page_spec.ts.ejs
index 814cdb647f51..e8072d3a145d 100644
--- a/generators/e2e/templates/src/test/javascript/cypress/integration/account/settings_page_spec.ts.ejs
+++ b/generators/e2e/templates/src/test/javascript/cypress/integration/account/settings_page_spec.ts.ejs
@@ -19,12 +19,16 @@ import {
 
     it("should be able to change 'user' firstname settings", () => {
       cy.get(firstNameSettingsSelector).clear().type('jhipster');
+      // need to modify email because default email does not match regex in vue
+      cy.get(emailSettingsSelector).clear().type('user@localhost.fr');
       cy.get(submitSettingsSelector).click();
       cy.wait('@settingsSave').its('status').should('equal', 200);
     });
 
     it("should be able to change 'user' lastname settings", () => {
       cy.get(lastNameSettingsSelector).clear().type('retspihj');
+      // need to modify email because default email does not match regex in vue
+      cy.get(emailSettingsSelector).clear().type('user@localhost.fr');
       cy.get(submitSettingsSelector).click();
       cy.wait('@settingsSave').its('status').should('equal', 200);
     });
diff --git a/generators/e2e/templates/src/test/javascript/cypress/integration/administration/administration_spec.ts.ejs b/generators/e2e/templates/src/test/javascript/cypress/integration/administration/administration_spec.ts.ejs
index 262d3e88ed47..88539a1328ab 100644
--- a/generators/e2e/templates/src/test/javascript/cypress/integration/administration/administration_spec.ts.ejs
+++ b/generators/e2e/templates/src/test/javascript/cypress/integration/administration/administration_spec.ts.ejs
@@ -44,14 +44,22 @@ describe('/admin', () => {
 
     describe('/metrics', () => {
         it('should load the page', () => {
+        <%_ if (clientFramework === "vue") { _%>
+        cy.clickOnAdminMenuItem('jhi-metrics');
+        <%_ } else { _%>
         cy.clickOnAdminMenuItem('metrics');
+        <%_ } _%>
         cy.get(metricsPageHeadingSelector).should('be.visible');
         });
     });
 
     describe('/health', () => {
         it('should load the page', () => {
+        <%_ if (clientFramework === "vue") { _%>
+        cy.clickOnAdminMenuItem('jhi-health');
+        <%_ } else { _%>
         cy.clickOnAdminMenuItem('health');
+        <%_ } _%>
         cy.get(healthPageHeadingSelector).should('be.visible');
         });
     });
@@ -65,7 +73,11 @@ describe('/admin', () => {
 
     describe('/configuration', () => {
         it('should load the page', () => {
+        <%_ if (clientFramework === "vue") { _%>
+        cy.clickOnAdminMenuItem('jhi-configuration');
+        <%_ } else { _%>
         cy.clickOnAdminMenuItem('configuration');
+        <%_ } _%>
         cy.get(configurationPageHeadingSelector).should('be.visible');
         });
     });
diff --git a/generators/e2e/templates/src/test/javascript/cypress/support/commands.ts.ejs b/generators/e2e/templates/src/test/javascript/cypress/support/commands.ts.ejs
index a3f27260a40b..abdc2a4dfdf6 100644
--- a/generators/e2e/templates/src/test/javascript/cypress/support/commands.ts.ejs
+++ b/generators/e2e/templates/src/test/javascript/cypress/support/commands.ts.ejs
@@ -47,7 +47,6 @@ export const submitRegisterSelector = '[data-cy="submit"]';
 export const userManagementPageHeadingSelector = '[data-cy="user-management-page-heading"]';
 export const metricsPageHeadingSelector = '[data-cy="metrics-page-heading"]';
 export const healthPageHeadingSelector = '[data-cy="health-page-heading"]';
-export const auditsPageHeadingSelector = '[data-cy="audits-page-heading"]';
 export const logsPageHeadingSelector = '[data-cy="logs-page-heading"]';
 export const configurationPageHeadingSelector = '[data-cy="configuration-page-heading"]';