Merge pull request #55 from nassimerrahoui/add-cypress

Add tests for entity-client part

.github/workflows/angular.yml

@@ -190,7 +190,13 @@ jobs:
               run: npm run e2e:update-webdriver --versions.chrome ${{ steps.chromedriver-version.outputs.version }}
               working-directory: /home/runner/app
             - name: 'TESTS: End-to-End'
+              id: e2e
               run: $JHI_SCRIPTS/24-tests-e2e.sh
+            - uses: actions/upload-artifact@v2
+              if: ${{ always() && steps.e2e.outcome == 'failure'}}
+              with:
+                  name: screenshots-${{ matrix.app-type }}
+                  path: /home/runner/app/target/cypress/screenshots
             - name: 'TESTS: Sonar analysis'
               run: $JHI_SCRIPTS/25-sonar-analyze.sh
               env:

.github/workflows/react.yml

@@ -183,7 +183,13 @@ jobs:
               run: npm run e2e:update-webdriver --versions.chrome ${{ steps.chromedriver-version.outputs.version }}
               working-directory: /home/runner/app
             - name: 'TESTS: End-to-End'
+              id: e2e
               run: $JHI_SCRIPTS/24-tests-e2e.sh
+            - uses: actions/upload-artifact@v2
+              if: ${{ always() && steps.e2e.outcome == 'failure'}}
+              with:
+                  name: screenshots-${{ matrix.app-type }}
+                  path: /home/runner/app/target/cypress/screenshots
             - name: 'TESTS: Sonar analysis'
               run: $JHI_SCRIPTS/25-sonar-analyze.sh
               env:

.github/workflows/vue.yml

@@ -179,4 +179,10 @@ jobs:
               run: npm run e2e:update-webdriver --versions.chrome ${{ steps.chromedriver-version.outputs.version }}
               working-directory: /home/runner/app
             - name: 'TESTS: End-to-End'
+              id: e2e
               run: $JHI_SCRIPTS/24-tests-e2e.sh
+            - uses: actions/upload-artifact@v2
+              if: ${{ always() && steps.e2e.outcome == 'failure'}}
+              with:
+                  name: screenshots-${{ matrix.app-type }}
+                  path: /home/runner/app/target/cypress/screenshots

generators/client/index.js

@@ -153,14 +153,12 @@ module.exports = class extends BaseBlueprintGenerator {
                 this.loadServerConfig();
                 this.loadTranslationConfig();
             },
+            composeCommon() {
+                this.composeWithJHipster('common', true);
+            },
             composeCypress() {
-                if (this.configOptions.skipComposeCypress || !this.cypressTests) return;
-                this.configOptions.skipComposeCypress = true;
-                this.composeWith(require.resolve('../cypress'), {
-                    ...this.options,
-                    configOptions: this.configOptions,
-                    debug: this.isDebugEnabled,
-                });
+                if (!this.cypressTests) return;
+                this.composeWithJHipster('cypress', true);
             },
             composeLanguages() {
                 // We don't expose client/server to cli, composing with languages is used for test purposes.

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

@@ -145,7 +145,7 @@
     "ts-node": "8.10.2",
     <%_ } _%>
     <%_ if (cypressTests) { _%>
-        "cypress": "4.12.1",
+    "cypress": "4.12.1",
     <%_ } _%>
     "tslint": "6.1.2",
     "typescript": "3.9.5",
@@ -174,22 +174,22 @@
     "ngc": "ngc -p tsconfig.app.json",
     "cleanup": "rimraf <%= DIST_DIR %>",
     "clean-www": "rimraf <%= DIST_DIR %>app/{src,<%= BUILD_DIR %>}",
-<%_ if (protractorTests && !cypressTests) { _%>
+    <%_ if (protractorTests && !cypressTests) { _%>
     "e2e": "<%= clientPackageManager %> run e2e:protractor",
-<%_ } else if ((cypressTests && !protractorTests) || (protractorTests && cypressTests)) {  _%>
+    <%_ } else if ((cypressTests && !protractorTests) || (protractorTests && cypressTests)) {  _%>
     "e2e": "<%= clientPackageManager %> run e2e:cypress",
-<%_ } _%>
-<%_ if (protractorTests) { _%>
+    <%_ } _%>
+    <%_ if (protractorTests) { _%>
     "e2e:protractor": "protractor <%= TEST_SRC_DIR %>protractor.conf.js",
-<%_ } _%>
-<%_ if (cypressTests) { _%>
+    <%_ } _%>
+    <%_ if (cypressTests) { _%>
     "e2e:cypress": "cypress run --browser chrome --headless",
     "cypress": "cypress open",
-<%_ } _%>
-<%_ if (protractorTests || cypressTests) { _%>
+    <%_ } _%>
+    <%_ if (protractorTests || cypressTests) { _%>
     "postinstall": "<%= clientPackageManager %> run e2e:update-webdriver",
     "e2e:update-webdriver": "webdriver-manager update --gecko false",
-<%_ } _%>
+    <%_ } _%>
     "start": "<%= clientPackageManager %> run webpack:dev",
     <%_ if (skipServer) { _%>
     "sonar": "sonar-scanner",

generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.html.ejs

@@ -36,7 +36,7 @@
             </li>
             <!-- jhipster-needle-add-element-to-menu - JHipster will add new menu items here -->
             <li *ngSwitchCase="true" ngbDropdown class="nav-item dropdown pointer" display="dynamic" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
-                <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu">
+                <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu" data-cy="entity">
                     <span>
                         <fa-icon icon="th-list"></fa-icon>
                         <span jhiTranslate="global.menu.entities.main">

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

@@ -187,22 +187,22 @@ limitations under the License.
     "lint": "eslint . --ext .js,.ts,.jsx,.tsx",
     "lint:fix": "<%= clientPackageManager %> run lint -- --fix",
     "cleanup": "rimraf <%= DIST_DIR %>",
-<%_ if (protractorTests && !cypressTests) { _%>
+    <%_ if (protractorTests && !cypressTests) { _%>
     "e2e": "<%= clientPackageManager %> run e2e:protractor",
-<%_ } else if ((cypressTests && !protractorTests) || (protractorTests && cypressTests)) {  _%>
+    <%_ } else if ((cypressTests && !protractorTests) || (protractorTests && cypressTests)) {  _%>
     "e2e": "<%= clientPackageManager %> run e2e:cypress",
-<%_ } _%>
-<%_ if (protractorTests) { _%>
+    <%_ } _%>
+    <%_ if (protractorTests) { _%>
     "e2e:protractor": "protractor <%= TEST_SRC_DIR %>protractor.conf.js",
-<%_ } _%>
-<%_ if (cypressTests) { _%>
+    <%_ } _%>
+    <%_ if (cypressTests) { _%>
     "e2e:cypress": "cypress run --browser chrome --headless",
     "cypress": "cypress open",
-<%_ } _%>
-<%_ if (protractorTests || cypressTests) { _%>
+    <%_ } _%>
+    <%_ if (protractorTests || cypressTests) { _%>
     "postinstall": "<%= clientPackageManager %> run e2e:update-webdriver",
     "e2e:update-webdriver": "webdriver-manager update --gecko false",
-<%_ } _%>
+    <%_ } _%>
     <%_ if (skipServer) { _%>
     "sonar": "sonar-scanner",
     <%_ } _%>

generators/client/templates/react/src/main/webapp/app/shared/layout/menus/entities.tsx.ejs

@@ -22,7 +22,7 @@ import { Translate, translate } from 'react-jhipster';
 import { NavDropdown } from './menu-components';
 
 export const EntitiesMenu = props => (
-  <NavDropdown icon="th-list" name={translate('global.menu.entities.main')} id="entity-menu" style= {{ maxHeight: '80vh', overflow: 'auto'}}  >
+  <NavDropdown icon="th-list" name={translate('global.menu.entities.main')} id="entity-menu" data-cy="entity" style={{ maxHeight: '80vh', overflow: 'auto'}}  >
     {/* jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here */}
   </NavDropdown>
 );

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

@@ -55,18 +55,18 @@ limitations under the License.
   },
   "devDependencies": {
     "babel-core": "7.0.0-bridge.0",
-<%_ if (protractorTests) { _%>
+    <%_ if (protractorTests) { _%>
     "@types/chai": "4.2.11",
     "@types/chai-string": "1.4.2",
-<%_ } _%>
+    <%_ } _%>
     "@types/jest": "25.2.3",
-<%_ if (protractorTests) { _%>
+    <%_ if (protractorTests) { _%>
     "@types/mocha": "7.0.2",
-<%_ } _%>
+    <%_ } _%>
     "@types/node": "14.0.4",
-<%_ if (protractorTests) { _%>
+    <%_ if (protractorTests) { _%>
     "@types/selenium-webdriver": "4.0.9",
-<%_ } _%>
+    <%_ } _%>
     "@types/sinon": "9.0.3",
     "@types/vuelidate": "0.7.13",
     "@vue/cli-plugin-typescript": "4.3.1",
@@ -75,11 +75,11 @@ limitations under the License.
     "autoprefixer": "9.8.0",
     "browser-sync": "2.26.7",
     "browser-sync-webpack-plugin": "2.2.2",
-<%_ if (protractorTests) { _%>
+    <%_ if (protractorTests) { _%>
     "chai": "4.2.0",
     "chai-as-promised": "7.1.1",
     "chai-string": "1.5.0",
-<%_ } _%>
+    <%_ } _%>
     "copy-webpack-plugin": "6.0.1",
     "css-loader": "3.5.3",
     "file-loader": "6.0.0",
@@ -99,9 +99,9 @@ limitations under the License.
     "lint-staged": "10.2.4",
     <%_ } _%>
     "merge-jsons-webpack-plugin": "1.0.21",
-<%_ if (protractorTests) { _%>
+    <%_ if (protractorTests) { _%>
     "mocha": "7.1.2",
-<%_ } _%>
+    <%_ } _%>
     "mini-css-extract-plugin": "0.9.0",
     "node-notifier": "7.0.0",
     "numeral": "2.0.6",
@@ -114,11 +114,11 @@ limitations under the License.
     <%_ if (!skipServer) { _%>
     "prettier-plugin-java": "<%= PRETTIER_JAVA_VERSION %>",
     <%_ } _%>
-<%_ if (protractorTests) { _%>
+    <%_ if (protractorTests) { _%>
     "protractor": "5.4.4",
-<%_ } _%>
+    <%_ } _%>
     <%_ if (cypressTests) { _%>
-      "cypress": "4.12.1",
+    "cypress": "4.12.1",
     <%_ } _%>
     "rimraf": "3.0.2",
     "sass": "1.26.5",
@@ -127,9 +127,9 @@ limitations under the License.
     "terser-webpack-plugin": "3.0.1",
     "ts-jest": "26.0.0",
     "ts-loader": "7.0.4",
-<%_ if (protractorTests) { _%>
+    <%_ if (protractorTests) { _%>
     "ts-node": "8.10.1",
-<%_ } _%>
+    <%_ } _%>
     "tslib": "2.0.0",
     "tslint": "6.1.2",
     "tslint-config-prettier": "1.18.0",
@@ -163,22 +163,22 @@ limitations under the License.
     "start-tls": "<%= clientPackageManager %> run webpack:dev -- --env.tls",
     "serve": "<%= clientPackageManager %> run start",
     "build": "<%= clientPackageManager %> run webpack:prod",
-<%_ if (protractorTests && !cypressTests) { _%>
+    <%_ if (protractorTests && !cypressTests) { _%>
     "e2e": "<%= clientPackageManager %> run e2e:protractor",
-<%_ } else if ((cypressTests && !protractorTests) || (protractorTests && cypressTests)) {  _%>
+    <%_ } else if ((cypressTests && !protractorTests) || (protractorTests && cypressTests)) {  _%>
     "e2e": "<%= clientPackageManager %> run e2e:cypress",
-<%_ } _%>
-<%_ if (protractorTests) { _%>
+    <%_ } _%>
+    <%_ if (protractorTests) { _%>
     "e2e:protractor": "protractor <%= TEST_SRC_DIR %>protractor.conf.js",
-<%_ } _%>
-<%_ if (cypressTests) { _%>
+    <%_ } _%>
+    <%_ if (cypressTests) { _%>
     "e2e:cypress": "cypress run --browser chrome --headless",
     "cypress": "cypress open",
-<%_ } _%>
-<%_ if (protractorTests || cypressTests) { _%>
+    <%_ } _%>
+    <%_ if (protractorTests || cypressTests) { _%>
     "postinstall": "<%= clientPackageManager %> run e2e:update-webdriver",
     "e2e:update-webdriver": "webdriver-manager update --gecko false",
-<%_ } _%>
+    <%_ } _%>
     "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/core/jhi-navbar/jhi-navbar.vue.ejs

@@ -27,7 +27,8 @@
           right
           id="entity-menu"
           v-if="authenticated"
-          active-class="active" class="pointer">
+          active-class="active" class="pointer"
+          data-cy="entity">
           <span slot="button-content" class="navbar-dropdown-menu">
             <font-awesome-icon icon="th-list" />
             <span v-text="$t('global.menu.entities.main')">Entities</span>

generators/cypress/files.js

@@ -21,8 +21,13 @@
  * The default is to use a file path string. It implies use of the template method.
  * For any other config an object { file:.., method:.., template:.. } can be used
  */
+
+const faker = require('faker');
+
 const constants = require('../generator-constants');
 
+const { stringHashCode } = require('../utils');
+
 const TEST_SRC_DIR = constants.CLIENT_TEST_SRC_DIR;
 
 const cypressFiles = {
@@ -38,11 +43,13 @@ const cypressFiles = {
             path: TEST_SRC_DIR,
             templates: [
                 'cypress/fixtures/users/user.json',
+                'cypress/fixtures/integration-test.png',
                 'cypress/plugins/index.ts',
                 'cypress/integration/administration/administration.spec.ts',
                 'cypress/support/commands.ts',
                 'cypress/support/navbar.ts',
                 'cypress/support/index.ts',
+                'cypress/support/entity.ts',
                 'cypress/tsconfig.json',
             ],
         },
@@ -75,6 +82,8 @@ module.exports = {
 function writeFiles() {
     return {
         writeFiles() {
+            faker.seed(stringHashCode(this.jhipsterConfig.baseName || 'jhipsterSample'));
+            this.faker = faker;
             this.writeFilesToDisk(cypressFiles, this, false, this.fetchFromInstalledJHipster('cypress/templates'));
         },
     };

generators/cypress/templates/cypress.json.ejs

@@ -6,7 +6,7 @@
   "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",
+  "screenshotsFolder": "target/cypress/screenshots",
   "chromeWebSecurity": <% if(authenticationType === 'oauth2') { %>false<% } else { %>true<% } %>,
   "viewportWidth": 1200,
   "viewportHeight": 720,

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

@@ -94,8 +94,10 @@ describe('/account/register', () => {
   });
 
   it('register a valid user', () => {
-    cy.get(usernameRegisterSelector).type('jon_doe');
-    cy.get(emailRegisterSelector).type('[email protected]');
+    const randomEmail = '<%= faker.internet.email() %>';
+    const randomUsername = '<%= faker.internet.userName() %>';
+    cy.get(usernameRegisterSelector).type(randomUsername);
+    cy.get(emailRegisterSelector).type(randomEmail);
     cy.get(firstPasswordRegisterSelector).type('jondoe');
     cy.get(secondPasswordRegisterSelector).type('jondoe');
     cy.get(submitRegisterSelector).click({force: true});

generators/cypress/templates/src/test/javascript/cypress/support/commands.ts.ejs

@@ -26,7 +26,9 @@ export const settingsItemSelector = '[data-cy="settings"]';
 export const passwordItemSelector = '[data-cy="passwordItem"]';
 export const loginItemSelector = '[data-cy="login"]';
 export const logoutItemSelector = '[data-cy="logout"]';
+export const entityItemSelector = '[data-cy="entity"]';
 
+<%_ if (authenticationType !== 'oauth2') { _%>
 // Login
 export const titleLoginSelector = '[data-cy="loginTitle"]';
 export const errorLoginSelector = '[data-cy="loginError"]';
@@ -43,13 +45,6 @@ export const firstPasswordRegisterSelector = '[data-cy="firstPassword"]';
 export const secondPasswordRegisterSelector = '[data-cy="secondPassword"]';
 export const submitRegisterSelector = '[data-cy="submit"]';
 
-// Administration
-export const userManagementPageHeadingSelector = '[data-cy="userManagementPageHeading"]';
-export const metricsPageHeadingSelector = '[data-cy="metricsPageHeading"]';
-export const healthPageHeadingSelector = '[data-cy="healthPageHeading"]';
-export const logsPageHeadingSelector = '[data-cy="logsPageHeading"]';
-export const configurationPageHeadingSelector = '[data-cy="configurationPageHeading"]';
-
 // Settings
 export const firstNameSettingsSelector = '[data-cy="firstname"]';
 export const lastNameSettingsSelector = '[data-cy="lastname"]';
@@ -66,6 +61,14 @@ export const submitPasswordSelector = '[data-cy="submit"]';
 // Reset Password
 export const emailResetPasswordSelector = '[data-cy="emailResetPassword"]';
 export const submitInitResetPasswordSelector = '[data-cy="submit"]';
+<%_ } _%>
+
+// Administration
+export const userManagementPageHeadingSelector = '[data-cy="userManagementPageHeading"]';
+export const metricsPageHeadingSelector = '[data-cy="metricsPageHeading"]';
+export const healthPageHeadingSelector = '[data-cy="healthPageHeading"]';
+export const logsPageHeadingSelector = '[data-cy="logsPageHeading"]';
+export const configurationPageHeadingSelector = '[data-cy="configurationPageHeading"]';
 
 // ***********************************************
 // End Specific Selector Attributes for Cypress
@@ -79,7 +82,7 @@ export const classValid = <%_ if (clientFramework === 'angularX') { _%>'ng-valid
 <%_ } else if (clientFramework === 'react') { _%>'av-valid';
 <%_ } else { _%>'valid';<%_ } _%>
 
-
+<%_ if (authenticationType !== 'oauth2') { _%>
 Cypress.Commands.add('login', (username: string, password: string) => {
   cy.clickOnLoginItem();
   cy.get(usernameLoginSelector).type(username);
@@ -94,6 +97,7 @@ declare global {
     }
   }
 }
+<%_ } _%>
 
 // Convert this to a module instead of script (allows import/export)
 export {};