Merge pull request #1071 from seraphinandrieux/add-router-into-vue-ap…

…p-generated

Add router into vue app generated

src/main/java/tech/jhipster/lite/generator/client/vue/core/domain/Vue.java

@@ -4,12 +4,19 @@
 
 public class Vue {
 
+  public static final String ROUTER_IMPORT = "import router from \'./router/router\';";
+  public static final String ROUTER_PROVIDER = "app.use(router);";
+
   private Vue() {}
 
   public static List<String> dependencies() {
     return List.of("vue");
   }
 
+  public static List<String> routerDependencies() {
+    return List.of("vue-router");
+  }
+
   public static List<String> devDependencies() {
     return List.of(
       "@rushstack/eslint-patch",

src/main/java/tech/jhipster/lite/generator/client/vue/core/domain/VueDomainService.java

@@ -1,11 +1,13 @@
 package tech.jhipster.lite.generator.client.vue.core.domain;
 
-import static tech.jhipster.lite.common.domain.FileUtils.getPath;
-import static tech.jhipster.lite.generator.project.domain.Constants.PACKAGE_JSON;
-import static tech.jhipster.lite.generator.project.domain.DefaultConfig.BASE_NAME;
+import static tech.jhipster.lite.common.domain.FileUtils.*;
+import static tech.jhipster.lite.common.domain.WordUtils.*;
+import static tech.jhipster.lite.generator.project.domain.Constants.*;
+import static tech.jhipster.lite.generator.project.domain.DefaultConfig.*;
 
 import java.util.List;
 import java.util.Map;
+import tech.jhipster.lite.error.domain.Assert;
 import tech.jhipster.lite.error.domain.GeneratorException;
 import tech.jhipster.lite.generator.packagemanager.npm.domain.NpmService;
 import tech.jhipster.lite.generator.project.domain.Project;
@@ -14,8 +16,11 @@
 public class VueDomainService implements VueService {
 
   public static final String SOURCE = "client/vue";
+  public static final String NEEDLE_IMPORT = "// jhipster-needle-main-ts-import";
+  public static final String NEEDLE_PROVIDER = "// jhipster-needle-main-ts-provider";
   public static final String SOURCE_PRIMARY = getPath(SOURCE, "webapp/app/common/primary/app");
   public static final String DESTINATION_PRIMARY = "src/main/webapp/app/common/primary/app";
+  public static final String DESTINATION_APP = "src/main/webapp/app";
 
   private final ProjectRepository projectRepository;
   private final NpmService npmService;
@@ -38,13 +43,15 @@ public void addStyledVue(Project project) {
   }
 
   private void addCommonVue(Project project) {
+    Assert.notNull("project", project);
     addDependencies(project);
     addDevDependencies(project);
     addScripts(project);
     addJestSonar(project);
     addViteConfigFiles(project);
     addRootFiles(project);
     addAppFiles(project);
+    addRouter(project);
   }
 
   public void addDependencies(Project project) {
@@ -55,6 +62,15 @@ public void addDevDependencies(Project project) {
     Vue.devDependencies().forEach(devDependency -> addDevDependency(project, devDependency));
   }
 
+  public void addRouter(Project project) {
+    addRouterDependency(project);
+    addRouterFiles(project);
+  }
+
+  private void addRouterDependency(Project project) {
+    Vue.routerDependencies().forEach(dependency -> addDependency(project, dependency));
+  }
+
   private void addDependency(Project project, String dependency) {
     npmService
       .getVersion("vue", dependency)
@@ -100,8 +116,28 @@ public void addViteConfigFiles(Project project) {
 
   public void addRootFiles(Project project) {
     projectRepository.template(project, getPath(SOURCE, "webapp"), "index.html", "src/main/webapp");
-    projectRepository.template(project, getPath(SOURCE, "webapp/app"), "env.d.ts", "src/main/webapp/app");
-    projectRepository.template(project, getPath(SOURCE, "webapp/app"), "main.ts", "src/main/webapp/app");
+    projectRepository.template(project, getPath(SOURCE, "webapp/app"), "env.d.ts", DESTINATION_APP);
+    projectRepository.template(project, getPath(SOURCE, "webapp/app"), MAIN_TYPESCRIPT, DESTINATION_APP);
+  }
+
+  private void addRouterFiles(Project project) {
+    addRouterConfigAndTestFiles(project);
+    addRouterMainConfiguration(project);
+  }
+
+  private void addRouterConfigAndTestFiles(Project project) {
+    projectRepository.template(project, getPath(SOURCE, "webapp/app/router"), "router.ts", "src/main/webapp/app/router");
+    projectRepository.template(project, getPath(SOURCE, "test/spec/router"), "Router.spec.ts", "src/test/javascript/spec/router");
+  }
+
+  private void addRouterMainConfiguration(Project project) {
+    addNewNeedleLineToFile(project, Vue.ROUTER_IMPORT, DESTINATION_APP, MAIN_TYPESCRIPT, NEEDLE_IMPORT);
+    addNewNeedleLineToFile(project, Vue.ROUTER_PROVIDER, DESTINATION_APP, MAIN_TYPESCRIPT, NEEDLE_PROVIDER);
+  }
+
+  private void addNewNeedleLineToFile(Project project, String importLine, String folder, String file, String needle) {
+    String importWithNeedle = importLine + LF + needle;
+    projectRepository.replaceText(project, getPath(folder), file, needle, importWithNeedle);
   }
 
   public void addAppFiles(Project project) {

src/main/java/tech/jhipster/lite/generator/project/domain/Constants.java

@@ -1,6 +1,6 @@
 package tech.jhipster.lite.generator.project.domain;
 
-import static tech.jhipster.lite.common.domain.FileUtils.getPath;
+import static tech.jhipster.lite.common.domain.FileUtils.*;
 
 public class Constants {
 
@@ -16,13 +16,15 @@ private Constants() {}
 
   public static final String TEST_JAVA = getPath("src/test/java");
   public static final String TEST_RESOURCES = getPath("src/test/resources");
+  public static final String TEST_JAVASCRIPT = getPath("src/test/javascript/spec");
   public static final String TEST_TEMPLATE_RESOURCES = getPath(TEST_RESOURCES, TEMPLATE_FOLDER);
 
   public static final String POM_XML = "pom.xml";
   public static final String LIQUIBASE_MASTER_XML = "master.xml";
   public static final String PACKAGE_JSON = "package.json";
   public static final String DOCKERFILE = "Dockerfile";
   public static final String INTEGRATION_TEST = "IntegrationTest.java";
+  public static final String MAIN_TYPESCRIPT = "main.ts";
 
   public static final String COMMENT_PROPERTIES_PREFIX = "#";
   public static final String KEY_VALUE_PROPERTIES_SEPARATOR = "=";

src/main/resources/generator/client/vue/test/spec/common/primary/app/App.spec.ts.mustache

@@ -11,6 +11,6 @@ describe('App', () => {
   it('should exist', () => {
     wrap();
 
-    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.exists()).toBeTruthy();
   });
 });

src/main/resources/generator/client/vue/test/spec/router/Router.spec.ts.mustache

@@ -0,0 +1,30 @@
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import { AppVue } from '@/common/primary/app';
+
+import router from '@/router/router';
+
+let wrapper: VueWrapper;
+
+const wrap = () => {
+  wrapper = shallowMount(AppVue,{
+    router
+  });
+};
+
+describe('Router', () => {
+  it('Should redirect to App by default', async () => {
+    wrap();
+    await router.push('/')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.findComponent(AppVue)).toBeTruthy()
+  })
+
+  it('Should go to AppVue', async () => {
+    wrap();
+    await router.push('/app')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.findComponent(AppVue)).toBeTruthy()
+  })
+})

src/main/resources/generator/client/vue/vite.config.ts

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src/main/webapp/app'),
+    },
+  },
   plugins: [
     vue({
       template: {

src/main/resources/generator/client/vue/webapp/app/main.ts.mustache

@@ -1,4 +1,7 @@
 import { createApp } from 'vue';
 import App from './common/primary/app/App.vue';
+// jhipster-needle-main-ts-import
 
-createApp(App).mount('#app');
+const app = createApp(App);
+// jhipster-needle-main-ts-provider
+app.mount('#app');

src/main/resources/generator/client/vue/webapp/app/router/router.ts.mustache

@@ -0,0 +1,21 @@
+import { AppVue } from '@/common/primary/app';
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/',
+    redirect: { name: 'App' },
+  },
+  {
+    path: '/app',
+    name: 'App',
+    component: AppVue,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

src/main/resources/generator/dependencies/vue/package.json

@@ -4,7 +4,8 @@
   "description": "JHipster Lite : used for Vite+Vue3 dependencies",
   "license": "Apache-2.0",
   "dependencies": {
-    "vue": "3.2.31"
+    "vue": "3.2.31",
+    "vue-router": "4.0.14"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "1.1.1",

src/test/java/tech/jhipster/lite/generator/client/vue/core/application/VueApplicationServiceIT.java

@@ -1,6 +1,6 @@
 package tech.jhipster.lite.generator.client.vue.core.application;
 
-import static tech.jhipster.lite.TestUtils.tmpProjectWithPackageJson;
+import static tech.jhipster.lite.TestUtils.*;
 
 import org.junit.jupiter.api.Test;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -25,6 +25,7 @@ void shouldAddVue() {
     VueAssert.assertViteConfigFiles(project);
     VueAssert.assertRootFiles(project);
     VueAssert.assertAppFiles(project);
+    VueAssert.assertRouterFiles(project);
     VueAssert.assertAppWithoutCss(project);
 
     VueAssert.assertJestSonar(project);
@@ -41,6 +42,7 @@ void shouldAddStyledVue() {
 
     VueAssert.assertViteConfigFiles(project);
     VueAssert.assertRootFiles(project);
+    VueAssert.assertRouterFiles(project);
     VueAssert.assertAppFiles(project);
     VueAssert.assertAppWithCss(project);
     VueAssert.assertLogos(project);

src/test/java/tech/jhipster/lite/generator/client/vue/core/application/VueAssert.java

@@ -1,8 +1,8 @@
 package tech.jhipster.lite.generator.client.vue.core.application;
 
 import static tech.jhipster.lite.TestUtils.*;
-import static tech.jhipster.lite.common.domain.WordUtils.DQ;
-import static tech.jhipster.lite.generator.project.domain.Constants.PACKAGE_JSON;
+import static tech.jhipster.lite.common.domain.WordUtils.*;
+import static tech.jhipster.lite.generator.project.domain.Constants.*;
 
 import java.util.List;
 import tech.jhipster.lite.generator.client.vue.core.domain.Vue;
@@ -14,6 +14,7 @@ private VueAssert() {}
 
   public static void assertDependency(Project project) {
     Vue.dependencies().forEach(dependency -> assertFileContent(project, PACKAGE_JSON, DQ + dependency + DQ));
+    Vue.routerDependencies().forEach(dependency -> assertFileContent(project, PACKAGE_JSON, DQ + dependency + DQ));
     Vue.devDependencies().forEach(devDependency -> assertFileContent(project, PACKAGE_JSON, DQ + devDependency + DQ));
   }
 
@@ -41,6 +42,11 @@ public static void assertRootFiles(Project project) {
     assertFileExist(project, "src/main/webapp/app/main.ts");
   }
 
+  public static void assertRouterFiles(Project project) {
+    assertFileExist(project, MAIN_WEBAPP, "/app/router/router.ts");
+    assertFileExist(project, TEST_JAVASCRIPT, "/router/Router.spec.ts");
+  }
+
   public static void assertAppFiles(Project project) {
     assertFileExist(project, "src/main/webapp/app/common/primary/app/App.component.ts");
     assertFileExist(project, "src/main/webapp/app/common/primary/app/App.html");

src/test/java/tech/jhipster/lite/generator/client/vue/core/domain/VueDomainServiceTest.java

@@ -1,20 +1,21 @@
 package tech.jhipster.lite.generator.client.vue.core.domain;
 
 import static org.assertj.core.api.Assertions.*;
-import static org.mockito.ArgumentMatchers.any;
-import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.ArgumentMatchers.*;
 import static org.mockito.Mockito.*;
-import static tech.jhipster.lite.TestUtils.tmpProject;
-import static tech.jhipster.lite.TestUtils.tmpProjectWithPackageJson;
+import static tech.jhipster.lite.TestUtils.*;
 
+import java.util.List;
 import java.util.Optional;
 import org.junit.jupiter.api.Test;
 import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.ArgumentCaptor;
 import org.mockito.InjectMocks;
 import org.mockito.Mock;
 import org.mockito.junit.jupiter.MockitoExtension;
 import tech.jhipster.lite.UnitTest;
 import tech.jhipster.lite.error.domain.GeneratorException;
+import tech.jhipster.lite.error.domain.MissingMandatoryValueException;
 import tech.jhipster.lite.generator.packagemanager.npm.domain.NpmService;
 import tech.jhipster.lite.generator.project.domain.Project;
 import tech.jhipster.lite.generator.project.domain.ProjectRepository;
@@ -47,6 +48,13 @@ void shouldNotAddVue() {
     assertThatThrownBy(() -> vueDomainService.addVue(project)).isExactlyInstanceOf(GeneratorException.class);
   }
 
+  @Test
+  void shouldNotAddVueWhenNoProject() {
+    assertThatThrownBy(() -> vueDomainService.addVue(null))
+      .isExactlyInstanceOf(MissingMandatoryValueException.class)
+      .hasMessageContaining("project");
+  }
+
   @Test
   void shouldAddStyledVue() {
     Project project = tmpProjectWithPackageJson();
@@ -69,7 +77,32 @@ void shouldAddDependencies() {
 
     vueDomainService.addDependencies(project);
 
-    verify(npmService, times(1)).addDependency(any(Project.class), anyString(), anyString());
+    verify(npmService).addDependency(any(Project.class), anyString(), anyString());
+  }
+
+  @Test
+  void shouldAddRouterDependencies() {
+    Project project = tmpProjectWithPackageJson();
+    final String version = "0.0.0";
+    when(npmService.getVersion(anyString(), anyString())).thenReturn(Optional.of(version));
+
+    vueDomainService.addRouter(project);
+
+    verify(npmService).addDependency(project, "vue-router", version);
+  }
+
+  @Test
+  void shouldAddRouterFiles() {
+    Project project = tmpProjectWithPackageJson();
+    final String version = "0.0.0";
+    when(npmService.getVersion(anyString(), anyString())).thenReturn(Optional.of(version));
+
+    vueDomainService.addRouter(project);
+    ArgumentCaptor<String> filesCaptor = ArgumentCaptor.forClass(String.class);
+    verify(projectRepository, times(2)).template(eq(project), any(String.class), filesCaptor.capture(), anyString());
+    verify(projectRepository, times(2)).replaceText(eq(project), anyString(), anyString(), anyString(), anyString());
+
+    assertThat(filesCaptor.getAllValues().containsAll(List.of("router.ts", "Router.spec.ts"))).isTrue();
   }
 
   @Test