add Cypress

.github/workflows/vuejs.yml

@@ -158,4 +158,4 @@ jobs:
             - name: 'TESTS: packaging'
               run: $HOME/$JHI_SCRIPTS_PATH/23-package.sh
             - name: 'TESTS: End-to-End'
-              run: $HOME/$JHI_SCRIPTS_PATH/24-tests-e2e.sh
+              run: $VUEJS_JHI_SCRIPTS/26-tests-e2e-cypress.sh

generators/client/files.js

@@ -52,6 +52,10 @@ const vueFiles = {
         {
             condition: generator => generator.protractorTests,
             templates: ['tsconfig.e2e.json']
+        },
+        {
+            condition: generator => generator.e2eTestsFramework.includes('cypress'),
+            templates: ['cypress.json']
         }
     ],
     image: [
@@ -424,6 +428,47 @@ const vueFiles = {
                 'e2e/page-objects/settings-page.ts',
                 'e2e/page-objects/register-page.ts'
             ]
+        },
+        {
+            condition: generator => generator.e2eTestsFramework.includes('cypress'),
+            path: TEST_SRC_DIR,
+            templates: [
+                'cypress/tsconfig.json',
+                'cypress/integration/e2e/modules/account/login.spec.ts',
+                'cypress/integration/e2e/modules/administration/administration.spec.ts',
+                'cypress/integration/e2e/util/utils.ts',
+                'cypress/integration/e2e/page-objects/base-component.ts',
+                'cypress/integration/e2e/page-objects/navbar-page.ts',
+                'cypress/integration/e2e/page-objects/signin-page.ts',
+                'cypress/plugins/index.ts',
+                'cypress/support/index.ts',
+                'cypress/fixtures/integration-test.png'
+            ]
+        },
+        {
+            condition: generator => generator.e2eTestsFramework.includes('cypress') && generator.authenticationType === 'oauth2',
+            path: TEST_SRC_DIR,
+            templates: [
+                'cypress/fixtures/users/user.json',
+                'cypress/support/oauth-keycloak.ts',
+                'cypress/support/oauth-okta.ts'
+            ]
+        },
+        {
+            condition: generator => generator.e2eTestsFramework.includes('cypress') && generator.authenticationType !== 'oauth2',
+            path: TEST_SRC_DIR,
+            templates: [
+                'cypress/integration/e2e/modules/account/password-page.spec.ts',
+                'cypress/integration/e2e/modules/account/register-page.spec.ts',
+                'cypress/integration/e2e/modules/account/settings-page.spec.ts',
+                'cypress/integration/e2e/modules/administration/user-management.spec.ts',
+                'cypress/integration/e2e/page-objects/password-page.ts',
+                'cypress/integration/e2e/page-objects/settings-page.ts',
+                'cypress/integration/e2e/page-objects/register-page.ts',
+                'cypress/integration/e2e/page-objects/user-management-page.ts',
+                'cypress/support/authentication.ts',
+                'cypress/support/users.ts'
+            ]
         }
     ]
 };

generators/client/index.js

@@ -24,6 +24,7 @@ module.exports = class extends ClientGenerator {
         this.blueprintjs = blueprintPackagejs;
         this.clientTheme = this.config.get('clientTheme') || 'none';
         this.clientThemeVariant = this.config.get('clientThemeVariant') || '';
+        this.e2eTestsFramework = this.config.get('e2eTestsFramework') || [];
         // This sets up options for this sub generator and is being reused from JHipster
         jhContext.setupClientOptions(this, jhContext);
     }
@@ -75,11 +76,14 @@ module.exports = class extends ClientGenerator {
             askForClient: prompts.askForClient,
             askForClientTheme: mainPrompts.askForClientTheme,
             askForClientThemeVariant: mainPrompts.askForClientThemeVariant,
+            askForE2eTestsFramework: prompts.askForE2eTestsFramework,
 
             setSharedConfigOptions() {
                 this.configOptions.clientFramework = this.clientFramework;
                 this.configOptions.clientTheme = this.clientTheme;
                 this.configOptions.clientThemeVariant = this.clientThemeVariant;
+                this.configOptions.e2eTestsFramework = this.askForE2eTestsFramework;
+                this.config.set('e2eTestsFramework', this.e2eTestsFramework);
             }
         };
     }

generators/client/prompts.js

@@ -1,6 +1,7 @@
 
 module.exports = {
-    askForClient
+    askForClient,
+    askForE2eTestsFramework
 };
 
 function askForClient(meta) {
@@ -33,3 +34,31 @@ function askForClient(meta) {
         done();
     });
 }
+
+function askForE2eTestsFramework(meta) {
+    if (!meta && this.existingProject) return;
+
+    const choices = [
+        {
+            value: 'cypress',
+            name: 'Cypress'
+        }
+    ];
+
+    const PROMPT = {
+        type: 'checkbox',
+        name: 'e2eTestsFramework',
+        message: () => 'Which *Framework* would you like to use for e2e testing?',
+        choices,
+        default: []
+    };
+
+    if (meta) return PROMPT; // eslint-disable-line consistent-return
+
+    const done = this.async();
+
+    this.prompt(PROMPT).then((prompt) => {
+        this.e2eTestsFramework = prompt.e2eTestsFramework;
+        done();
+    });
+}

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

@@ -0,0 +1,30 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "testFiles": "**/*.spec.ts",
+  "supportFile": "src/test/javascript/cypress/support/index.ts",
+  "video": false,
+  "integrationFolder": "src/test/javascript/cypress/integration",
+  "fixturesFolder": "src/test/javascript/cypress/fixtures",
+  "pluginsFile": "src/test/javascript/cypress/plugins/index.ts",
+  "screenshotsFolder": "src/test/javascript/cypress/screenshots"<%_ if (authenticationType === 'oauth2') { _%>,
+  "chromeWebSecurity": false,
+  "env": {
+    "auth_base_url": "http://localhost:9080/auth",
+    "auth_realm": "jhipster",
+    "auth_client_id": "web_app",
+
+    "_comment": "Next fields are for Okta.",
+
+    "issuer": "to complete",
+    "authorization_endpoint": "to complete",
+    "token_endpoint": "to complete",
+    "username": "to complete",
+    "password": "to complete",
+    "client_id": "to complete",
+    "client_secret": "to complete",
+    "redirect_uri": "http://localhost:8080/",
+    "end_session_endpoint": "to complete",
+    "state": "to complete"
+  },
+  <%_ } _%>
+}

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

@@ -82,6 +82,9 @@ limitations under the License.
 <%_ } _%>
     "copy-webpack-plugin": "6.0.1",
     "css-loader": "3.5.3",
+<%_ if (e2eTestsFramework.includes('cypress')) { _%>
+    "cypress": "4.9.0",
+<%_ } _%>
     "file-loader": "6.0.0",
     "fork-ts-checker-webpack-plugin": "4.1.4",
     "friendly-errors-webpack-plugin": "1.7.0",
@@ -166,8 +169,12 @@ limitations under the License.
     "serve": "<%= clientPackageManager %> run start",
     "build": "<%= clientPackageManager %> run webpack:prod",
 <%_ if (protractorTests) { _%>
-    "e2e": "protractor src/test/javascript/protractor.conf.js",
+    "e2e:protractor": "protractor src/test/javascript/protractor.conf.js",
     "postinstall": "webdriver-manager update --gecko false",
+<%_ } else if (e2eTestsFramework.includes('cypress')) { _%>
+    "cypress": "cypress open",
+    "cypress:headed": "cypress run --headed",
+    "cypress:headless": "cypress run --headless",
 <%_ } _%>
     "jest": "jest --coverage --logHeapUsage --maxWorkers=2 --no-cache --config src/test/javascript/jest.conf.js",
     "jest:update": "<%= clientPackageManager %> run jest <%= optionsForwarder %>--updateSnapshot",

generators/client/templates/vue/src/main/webapp/app/account/change-password/change-password.vue.ejs

@@ -2,7 +2,7 @@
     <div>
         <div class="row justify-content-center">
             <div class="col-md-8 toastify-container">
-                <h2 v-if="account" id="password-title"><span v-html="$t('password.title', { 'username': username})">Password for [<b>{{username}}</b>]</span></h2>
+                <h2 v-if="account" id="password-title" data-cy=password-title ><span v-html="$t('password.title', { 'username': username})">Password for [<b>{{username}}</b>]</span></h2>
 
                 <div class="alert alert-success" role="alert" v-if="success" v-html="$t('password.messages.success')">
                     <strong>Password changed!</strong>
@@ -15,14 +15,15 @@
                     The password and its confirmation do not match!
                 </div>
 
-                <form name="form" role="form" id="password-form" v-on:submit.prevent="changePassword()">
+                <form name="form" role="form" id="password-form" v-on:submit.prevent="changePassword()" data-cy=password-form >
 
                     <div class="form-group">
                         <label class="form-control-label" for="currentPassword" v-text="$t('global.form[\'currentpassword.label\']')">Current password</label>
                         <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"
+                               data-cy=currentPassword required>
                         <div v-if="$v.resetPassword.currentPassword.$anyDirty && $v.resetPassword.currentPassword.$invalid">
                             <small class="form-text text-danger"
                                    v-if="!$v.resetPassword.currentPassword.required" v-text="$t('global.messages.validate.newpassword.required')">
@@ -35,7 +36,8 @@
                         <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
+                               data-cy=newPassword required>
                         <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')">
@@ -57,7 +59,8 @@
                         <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
+                               data-cy=confirmPassword required>
                         <div v-if="$v.resetPassword.confirmPassword.$anyDirty && $v.resetPassword.confirmPassword.$invalid">
                             <small class="form-text text-danger"
                                    v-if="!$v.resetPassword.confirmPassword.required" v-text="$t('global.messages.validate.confirmpassword.required')">

generators/client/templates/vue/src/main/webapp/app/account/login-form/login-form.vue.ejs

@@ -2,25 +2,25 @@
     <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 variant="danger" v-if="authenticationError" v-html="$t('login.messages.error.authentication')" data-cy=login-alert>
                     <strong>Failed to sign in!</strong> Please check your credentials and try again.
                 </b-alert>
             </div>
             <div class="col-md-8">
                 <b-form role="form" v-on:submit.prevent="doLogin()">
                     <b-form-group <% if (!enableTranslation) { %>label="Username" <% } %>v-bind:label="$t('global.form[\'username.label\']')" label-for="username">
-                        <b-form-input id="username" type="text" name="username" autofocus v-bind:placeholder="$t('global.form[\'username.placeholder\']')" <% if (!enableTranslation) { %>placeholder="Your username" <% } %>v-model="login">
+                        <b-form-input id="username" type="text" name="username" autofocus v-bind:placeholder="$t('global.form[\'username.placeholder\']')" <% if (!enableTranslation) { %>placeholder="Your username" <% } %>v-model="login" data-cy=login-username >
                         </b-form-input>
                     </b-form-group>
                     <b-form-group <% if (!enableTranslation) { %>label="Password" <% } %>v-bind:label="$t('login.form.password')" label-for="password">
-                        <b-form-input id="password" type="password" name="password" v-model.trim="name" v-bind:placeholder="$t('login.form[\'password.placeholder\']')" <% if (!enableTranslation) { %>placeholder="Your password" <% } %>v-model="password">
+                        <b-form-input id="password" type="password" name="password" v-model.trim="name" v-bind:placeholder="$t('login.form[\'password.placeholder\']')" <% if (!enableTranslation) { %>placeholder="Your password" <% } %>v-model="password" data-cy=login-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 type="submit" variant="primary" v-text="$t('login.form.button')" data-cy=login-submit>Sign in</b-button>
                     </div>
                 </b-form>
                 <p></p>