Merge pull request #31 from nassimerrahoui/add-cypress

[Vue] add cypress for vue

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",

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>
+<script lang="ts" src="./change-password.component.ts"></script>

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,22 +30,23 @@
               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>
           <b-form-checkbox id="rememberMe" name="rememberMe" v-model="rememberMe" checked <% if (authenticationType === 'session' && databaseType === 'no') { %> hidden<% } %>>
             <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>
         <%_ if (!skipUserManagement) { _%>
         <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>

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>
+<script lang="ts" src="./register.component.ts"></script>

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>
+<script lang="ts" src="./reset-password-finish.component.ts"></script>

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>
+<script lang="ts" src="./reset-password-init.component.ts"></script>

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>
+<script lang="ts" src="./settings.component.ts"></script>

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>
+<script lang="ts" src="./configuration.component.ts"></script>

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>
+<script lang="ts" src="./health.component.ts"></script>

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>
+<script lang="ts" src="./logs.component.ts"></script>