generator-jhipster 7.3.0 → 7.5.0

package/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.ts.ejs

@@ -1,12 +1,22 @@
 import { Component, Inject, Vue } from 'vue-property-decorator';
-import { VERSION } from '@/constants';
 import LoginService from '@/account/login.service';
 import AccountService from '@/account/account.service';
 <%_ if (enableTranslation) { _%>
 import TranslationService from '@/locale/translation.service';
 <%_ } %>
 
-@Component
+import EntitiesMenu from '@/entities/entities-menu.vue';
+
+@Component({
+  components: {
+    'entities-menu': EntitiesMenu,
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of remotes) { _%>
+    '<%= remote.lowercaseBaseName %>-menu': () => import('@<%= remote.lowercaseBaseName %>/entities-menu'),
+  <%_ } _%>
+<%_ } _%>
+  },
+})
 export default class JhiNavbar extends Vue {
   @Inject('loginService')
   private loginService: () => LoginService;
@@ -14,7 +24,7 @@ export default class JhiNavbar extends Vue {
   @Inject('translationService') private translationService: () => TranslationService;
 <%_ } %>
   @Inject('accountService') private accountService: () => AccountService;
-  public version = VERSION ? 'v' + VERSION : '';
+  public version = 'v' + VERSION;
   private currentLanguage = this.$store.getters.currentLanguage;
   private languages: any = this.$store.getters.languages;
   private hasAnyAuthorityValue = false;
@@ -43,21 +53,30 @@ export default class JhiNavbar extends Vue {
   }
 <%_ } _%>
 
-  public logout() : void {
+  public logout() : Promise<any> {
 <%_ if (!authenticationTypeJwt) { _%>
-    this.loginService().logout().then(response => {
+    return this.loginService().logout().then(response => {
       this.$store.commit('logout');
-      this.$router.push('/');
   <%_ if (authenticationTypeOauth2) { _%>
-      window.location.href = response.data.logoutUrl;
+      const next = response.data?.logoutUrl ?? '/';
+      if (this.$route.path !== next) {
+        return this.$router.push(next);
+      }
+  <%_ } else { _%>
+      if (this.$route.path !== '/') {
+        return this.$router.push('/');
+      }
   <%_ } _%>
     });
 <%_ } else { _%>
     localStorage.removeItem('<%=jhiPrefixDashed %>-authenticationToken');
     sessionStorage.removeItem('<%=jhiPrefixDashed %>-authenticationToken');
     this.$store.commit('logout');
-    this.$router.push('/');
+    if (this.$route.path !== '/') {
+      return this.$router.push('/');
+    }
 <%_ } _%>
+    return Promise.resolve(this.$router.currentRoute);
   }
 
   public openLogin() : void {

package/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue.ejs

@@ -33,6 +33,12 @@
             <font-awesome-icon icon="th-list" />
             <span class="no-bold" v-text="$t('global.menu.entities.main')">Entities</span>
           </span>
+          <entities-menu></entities-menu>
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of remotes) { _%>
+          <<%= remote.lowercaseBaseName %>-menu></<%= remote.lowercaseBaseName %>-menu>
+  <%_ } _%>
+<%_ } _%>
           <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
         </b-nav-item-dropdown>
         <b-nav-item-dropdown

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

@@ -0,0 +1,41 @@
+<%#
+ Copyright 2013-2021 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+// These constants are injected via webpack environment variables.
+// You can add more variables in webpack.common.js or in profile specific webpack.<dev|prod>.js files.
+// If you change the values in the webpack config files, you need to re run webpack to update the application
+
+declare const SERVER_API_URL: string;
+declare const VERSION: string;
+<%_ if (enableTranslation) { _%>
+declare const I18N_HASH: string;
+<%_ } _%>
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of microfrontends) { _%>
+
+declare module '@<%= remote.lowercaseBaseName %>/entities-router' {
+  const _default: unknown;
+  export default _default;
+}
+
+declare module '@<%= remote.lowercaseBaseName %>/entities-menu' {
+  const _default: unknown;
+  export default _default;
+}
+  <%_ } _%>
+<%_ } _%>

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

@@ -0,0 +1,34 @@
+import {
+  Component,
+  Inject,
+  Vue,
+<%_ if (enableTranslation && applicationTypeMicroservice) { _%>
+  Watch,
+<%_ } _%>
+} from 'vue-property-decorator';
+<%_ if (enableTranslation && applicationTypeMicroservice) { _%>
+import TranslationService from '@/locale/translation.service';
+<%_ } _%>
+
+@Component
+export default class EntitiesMenu extends Vue {
+<%_ if (enableTranslation && applicationTypeMicroservice) { _%>
+  @Inject({ default: true }) private readonly microfrontendI18n!: boolean;
+  @Inject('translationService') private translationService: () => TranslationService;
+
+  @Watch('$i18n.locale')
+  onLocaleChanged() {
+    this.loadLanguage();
+  }
+
+  created(): void {
+    this.loadLanguage();
+  }
+
+  private loadLanguage() {
+    if (this.microfrontendI18n) {
+      this.translationService().loadTranslations('<%= frontendAppName %>', '<%= endpointPrefix %>/', I18N_HASH);
+    }
+  }
+<%_ } _%>
+}

package/generators/client/templates/vue/src/main/webapp/app/entities/entities-menu.vue.ejs

@@ -0,0 +1,13 @@
+<template>
+  <div>
+<%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
+    <b-dropdown-item to="/<%= entity.entityPage %>">
+      <font-awesome-icon icon="asterisk" />
+      <span v-text="$t('global.menu.entities.<%= entity.entityTranslationKeyMenu %>')"><%= entity.entityClassHumanized %></span>
+    </b-dropdown-item>
+<%_ } _%>
+    <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
+  </div>
+</template>
+
+<script lang="ts" src="./entities-menu.component.ts"></script>

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

@@ -0,0 +1,20 @@
+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';
+<%_ } _%>
+// jhipster-needle-add-entity-service-to-entities-component-import - JHipster will import entities services here
+
+@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();
+<%_ } _%>
+  // jhipster-needle-add-entity-service-to-entities-component - JHipster will import entities services here
+}

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

@@ -0,0 +1,5 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script lang="ts" src="./entities.component.ts"></script>

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/{webpack/utils.js.ejs → src/main/webapp/app/index.ts.ejs}

@@ -16,15 +16,4 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-const path = require('path');
-
-module.exports = {
-  root
-};
-
-const _root = path.resolve(__dirname, '..');
-
-function root(args) {
-  args = Array.prototype.slice.call(arguments, 0);
-  return path.join.apply(path, [_root].concat(args));
-}
+import('./main');

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

@@ -11,31 +11,48 @@ export default class TranslationService {
     this.store = store;
     this.i18n = i18n;
   }
+<%_ if (microfrontend) { _%>
+
+  public loadTranslations(appKey: string, urlPrefix: string, hash: string) {
+    const currentLanguage = this.store.getters.currentLanguage;
+    if (!this.i18n) return;
+
+    axios.get(`${urlPrefix}i18n/${currentLanguage}.json?_=${hash}`).then((res: any) => {
+      if (res.data) {
+        this.i18n.mergeLocaleMessage(currentLanguage, res.data);
+      }
+    });
+  }
+<%_ } _%>
 
   public refreshTranslation(newLanguage: string) {
     let currentLanguage = this.store.getters.currentLanguage;
     currentLanguage = newLanguage ? newLanguage : '<%= nativeLanguage %>';
     if (this.i18n && !this.i18n.messages[currentLanguage]) {
       this.i18n.setLocaleMessage(currentLanguage, {});
-      axios.get(`i18n/${currentLanguage}.json?_=${I18N_HASH}`).then((res) => {
+      axios.get(`i18n/${currentLanguage}.json?_=${I18N_HASH}`).then((res: any) => {
         if (res.data) {
-          dayjs.locale(currentLanguage);
           this.i18n.setLocaleMessage(currentLanguage, res.data);
-          this.i18n.locale = currentLanguage;
-          this.store.commit('currentLanguage', currentLanguage);
+          this.setLocale(currentLanguage);
         }
       });
     } else if (this.i18n) {
-      dayjs.locale(currentLanguage);
-      this.i18n.locale = currentLanguage;
-      this.store.commit('currentLanguage', currentLanguage);
+      this.setLocale(currentLanguage);
     }
+  }
+
+  private setLocale(lang: string) {
+    dayjs.locale(lang);
+    this.i18n.locale = lang;
+    this.store.commit('currentLanguage', lang);
+    axios.defaults.headers.common['Accept-Language'] = lang;
+    document.querySelector('html').setAttribute('lang', lang);
 <%_ if (enableI18nRTL) { _%>
-      this.updatePageDirection(currentLanguage);
+    this.updatePageDirection(lang);
 <%_ } _%>
   }
-
 <%_ if (enableI18nRTL) { _%>
+
     private isRTL(lang: string): boolean {
       const languages = this.store.getters.languages;
       return languages[lang] && languages[lang].rtl;

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

@@ -5,7 +5,7 @@ import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 import App from './app.vue';
 import Vue2Filters from 'vue2-filters';
 import { ToastPlugin } from 'bootstrap-vue';
-import router from './router';
+import router<% if (applicationTypeGateway && microfrontend) { %>, { lazyRoutes }<% } %> from './router';
 import * as config from './shared/config/config';
 import * as bootstrapVueConfig from './shared/config/config-bootstrap-vue';
 import JhiItemCountComponent from './shared/jhi-item-count.vue';
@@ -20,12 +20,12 @@ 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';
 import AlertService from './shared/alert/alert.service';
 
+import '../content/scss/global.scss';
 import '../content/scss/vendor.scss';
 <%_ if (enableTranslation) { _%>
 import TranslationService from '@/locale/translation.service';
@@ -36,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
@@ -68,13 +65,18 @@ const translationService = new TranslationService(store, i18n);
 const loginService = new LoginService();
 const accountService = new AccountService(store, <%_ if (enableTranslation) { _%>translationService, <%_ } _%><%_ if (authenticationTypeSession || authenticationTypeOauth2) { _%>(<any>Vue).cookie, <%_ } _%><%_ if (communicationSpringWebsocket) { _%>trackerService, <%_ } _%>router);
 
-router.beforeEach((to, from, next) => {
-
+router.beforeEach(async (to, from, next) => {
   if (!to.matched.length) {
-    next('/not-found');
-  }
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+    await lazyRoutes;
+    if (router.match(to.fullPath).matched.length > 0) {
+      next(to.fullPath);
+      return;
+    }
 
-  if (to.meta && to.meta.authorities && to.meta.authorities.length > 0) {
+<%_ } _%>
+    next('/not-found');
+  } else if (to.meta && to.meta.authorities && to.meta.authorities.length > 0) {
     accountService.hasAnyAuthorityAndCheckAuth(to.meta.authorities).then(value => {
       if (!value) {
         sessionStorage.setItem('requested-url', to.fullPath);
@@ -100,7 +102,6 @@ new Vue({
 <%_ if (!skipUserManagement) { _%>
     activateService: () => new ActivateService(),
     registerService: () => new RegisterService(),
-    userService: () => new UserManagementService(),
 <%_ } _%>
 <%_ if (applicationTypeGateway && serviceDiscoveryType) { %>
     gatewayService: () => new GatewayService(),
@@ -114,17 +115,18 @@ new Vue({
 <%_ if (communicationSpringWebsocket) { _%>
     trackerService: () => trackerService,
 <%_ } %>
-<%_ if (!skipUserManagement || authenticationTypeOauth2) { %>
-    userOAuth2Service: () => new UserOAuth2Service(),
-<%_ } _%>
 <%_ if (enableTranslation) { _%>
     translationService: () => translationService,
 <%_ } _%>
     // jhipster-needle-add-entity-service-to-main - JHipster will import entities services here
     accountService: () => accountService,
-    alertService: () => new AlertService()
-
+    alertService: () => new AlertService(),
+<%_ if (applicationTypeMicroservice && microfrontend) { _%>
+    microfrontendI18n: false,
+<%_ } _%>
   },
-<%_ if (enableTranslation) { _%>    i18n,<%_ } _%>
-  store
+<%_ if (enableTranslation) { _%>
+  i18n,
+<%_ } _%>
+  store,
 });

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

@@ -1,9 +1,51 @@
 import {Authority} from "@/shared/security/authority";
 /* tslint:disable */
 // prettier-ignore
+const Entities = () => import('@/entities/entities.vue');
 
+<%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
+const <%= entity.entityAngularName %> = () => import('@/entities/<%= entity.entityFolderName %>/<%= entity.entityFileName %>.vue');
+  <%_ if (!entity.readOnly) { _%>
+const <%= entity.entityAngularName %>Update = () => import('@/entities/<%= entity.entityFolderName %>/<%= entity.entityFileName %>-update.vue');
+  <%_ } _%>
+const <%= entity.entityAngularName %>Details = () => import('@/entities/<%= entity.entityFolderName %>/<%= entity.entityFileName %>-details.vue');
+
+<%_ } _%>
 // jhipster-needle-add-entity-to-router-import - JHipster will import entities to the router here
 
-export default [
-  // jhipster-needle-add-entity-to-router - JHipster will add entities to the router here
-];
+export default
+  {
+    path: '/<%= applicationTypeMicroservice ? baseName.toLowerCase() : '' %>',
+    component: Entities,
+    children: [
+<%_ for (entity of this.localEntities.filter(entity => !entity.embedded)) { _%>
+      {
+        path: '<%= entity.entityFileName %>',
+        name: '<%= entity.entityAngularName %>',
+        component: <%= entity.entityAngularName %>,
+        meta: { authorities: [Authority.USER] },
+      },
+  <%_ if (!entity.readOnly) { _%>
+      {
+        path: '<%= entity.entityFileName %>/new',
+        name: '<%= entity.entityAngularName %>Create',
+        component: <%= entity.entityAngularName %>Update,
+        meta: { authorities: [Authority.USER] },
+      },
+      {
+        path: '<%= entity.entityFileName %>/:<%= entity.entityInstance %>Id/edit',
+        name: '<%= entity.entityAngularName %>Edit',
+        component: <%= entity.entityAngularName %>Update,
+        meta: { authorities: [Authority.USER] },
+      },
+  <%_ } _%>
+      {
+        path: '<%= entity.entityFileName %>/:<%= entity.entityInstance %>Id/view',
+        name: '<%= entity.entityAngularName %>View',
+        component: <%= entity.entityAngularName %>Details,
+        meta: { authorities: [Authority.USER] },
+      },
+<%_ } _%>
+      // jhipster-needle-add-entity-to-router - JHipster will add entities to the router here
+    ],
+  };

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

@@ -5,7 +5,7 @@ Component.registerHooks([
   'beforeRouteLeave',
   'beforeRouteUpdate' // for vue-router 2.2+
 ])
-import Router from 'vue-router';
+import Router, { RouteConfig } from 'vue-router';
 
 const Home = () => import('@/core/home/home.vue');
 const Error = () => import('@/core/error/error.vue');
@@ -19,7 +19,7 @@ import pages from "@/router/pages";
 Vue.use(Router);
 
 // prettier-ignore
-export default new Router({
+const router = new Router({
   mode: 'history',
   routes: [
     {
@@ -43,7 +43,23 @@ export default new Router({
     ...account,
 <%_ } _%>
     ...admin,
-    ...entities,
+    entities,
     ...pages
   ]
 });
+
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+export const lazyRoutes = Promise.all([
+  <%_ for (const remote of microfrontends) { _%>
+  import('@<%= remote.lowercaseBaseName %>/entities-router')
+    .then(<%= remote.lowercaseBaseName %>Router => {
+      router.addRoute(<%= remote.lowercaseBaseName %>Router.default as RouteConfig);
+      return <%= remote.lowercaseBaseName %>Router.default;
+    }).catch(() => {
+      console.log("Error loading <%= remote.lowercaseBaseName %> menus. Make sure it's up.");
+    }),
+  <%_ } _%>
+]);
+
+<%_ } _%>
+export default router;

package/generators/client/templates/vue/src/main/webapp/app/shared/config/axios-interceptor.ts.ejs

@@ -18,8 +18,6 @@
 -%>
 import axios from 'axios';
 
-import {SERVER_API_URL} from "@/constants";
-
 const TIMEOUT = 1000000;
 const onRequestSuccess = config => {
 <%_ if (authenticationTypeJwt) { _%>

package/generators/client/templates/vue/src/main/webapp/app/shared/data/data-utils.service.ts.ejs

@@ -55,7 +55,9 @@ export default class JhiDataUtils extends Vue {
     });
     const objectURL = URL.createObjectURL(blob);
     const win = window.open(objectURL);
-    win!.onload = () => URL.revokeObjectURL(objectURL);
+    if (win) {
+      win.onload = () => URL.revokeObjectURL(objectURL);
+    }
   }
 
   /**

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

@@ -1,7 +1,21 @@
-<%_ if (enableTranslation) { _%>
-declare const I18N_HASH: string;
+<%#
+ Copyright 2013-2021 the original author or authors from the JHipster project.
 
-<%_ } _%>
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
 declare module '*.vue' {
   import Vue from 'vue';
   export default Vue;

package/generators/client/templates/vue/src/test/javascript/jest.conf.js.ejs

@@ -1,34 +1,49 @@
+const { pathsToModuleNameMapper } = require('ts-jest/utils');
+const config = require('../../../webpack/config');
+const { compilerOptions: { paths = {}, baseUrl = './' } } = require('../../../tsconfig.json');
+
 module.exports = {
+  rootDir: '../../../',
+  roots: ['<rootDir>', `<rootDir>/${baseUrl}`, `<rootDir>/<%= CLIENT_TEST_SRC_DIR %>spec/app/`],
+  preset: 'ts-jest',
   testEnvironment: 'jsdom',
   coverageDirectory: '<rootDir>/<%= BUILD_DIR %>test-results/',
   coveragePathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/<%= CLIENT_TEST_SRC_DIR %>', '<rootDir>/<%= CLIENT_MAIN_SRC_DIR %>app/router', '.*.json'],
   moduleFileExtensions: ['js', 'json', 'ts', 'vue'],
   transform: {
-    '.*\\.(vue)$': 'vue-jest',
-    '^.+\\.tsx?$': 'ts-jest'
+    '.*\\.(vue)$': '<%= microfrontend ? '@vue/vue2-jest' : 'vue-jest' %>',
+    '^.+\\.tsx?$': 'ts-jest',
   },
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/<%= CLIENT_MAIN_SRC_DIR %>app/$1'
+    '^@/(.*)$': '<rootDir>/<%= CLIENT_MAIN_SRC_DIR %>app/$1',
+    ...pathsToModuleNameMapper(paths, { prefix: `<rootDir>/${baseUrl}/` }),
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+    '^@(<%= microfrontends.map(remote => remote.lowercaseBaseName).join('|') %>)/(.*)$': '<rootDir>/<%= CLIENT_TEST_SRC_DIR %>spec/app/microfrontends/$2',
+<%_ } _%>
   },
   reporters: [
     'default',
-    [ 'jest-junit', { outputDirectory: './<%= BUILD_DIR %>test-results/', outputName: 'TESTS-results-jest.xml' } ]
+    [ 'jest-junit', { outputDirectory: './<%= BUILD_DIR %>test-results/', outputName: 'TESTS-results-jest.xml' } ],
   ],
   testResultsProcessor: 'jest-sonar-reporter',
   testMatch: ['<rootDir>/<%= CLIENT_TEST_SRC_DIR %>spec/**/@(*.)@(spec.ts)'],
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
-  rootDir: '../../../',
-<%_ if (enableTranslation) { _%>
   globals: {
+<%_ if (enableTranslation) { _%>
     I18N_HASH: 'generated_hash',
-  },
 <%_ } _%>
+    SERVER_API_URL: config.serverApiUrl,
+    VERSION: config.version,
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
   coverageThreshold: {
     global: {
       statements: 80,
       branches: 60,
       functions: 70,
-      lines: 80
-    }
-  }
+      lines: 80,
+    },
+  },
 };

package/generators/client/templates/vue/src/test/javascript/spec/app/account/login-form/login-form.component.spec.ts.ejs

@@ -2,7 +2,7 @@ import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils';
 import axios from 'axios';
 import sinon from 'sinon';
 import AccountService from '@/account/account.service';
-import router from '@/router';
+import VueRouter from 'vue-router';
 <%_ if (enableTranslation) { _%>
 import TranslationService from '@/locale/translation.service';
 <%_ } _%>
@@ -50,7 +50,7 @@ describe('LoginForm Component', () => {
         <%_ } _%>
         localVue,
         provide: {
-          accountService: () => new AccountService(store, <% if (enableTranslation) { %>new TranslationService(store, i18n), <% } %><% if (authenticationTypeSession) { %> { get: () => {} }, <% } %><% if (communicationSpringWebsocket) { %>new TrackerService(router<%_ if (authenticationTypeSession) { _%>,{ get: jest.fn()}<%_ } %>), <% } %>router)
+          accountService: () => new AccountService(store, <% if (enableTranslation) { %>new TranslationService(store, i18n), <% } %><% if (authenticationTypeSession) { %> { get: () => {} }, <% } %><% if (communicationSpringWebsocket) { %>new TrackerService(new VueRouter()<%_ if (authenticationTypeSession) { _%>,{ get: jest.fn()}<%_ } %>), <% } %>new VueRouter())
         }
       });
     loginForm = wrapper.vm;

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

@@ -11,10 +11,12 @@ import UserManagementEdit from '@/admin/user-management/user-management-edit.vue
 import UserManagementEditClass from '@/admin/user-management/user-management-edit.component';
 import UserManagementService from '@/admin/user-management/user-management.service';
 import VueRouter from 'vue-router';
+import { ToastPlugin } from 'bootstrap-vue';
 import AlertService from '@/shared/alert/alert.service';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
+localVue.use(ToastPlugin);
 
 config.initVueApp(localVue);
 <%_ if (enableTranslation) { _%>
@@ -85,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: [] };
@@ -104,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: [] };