Merge pull request #2027 from matthieuRioual/addRouterViewDefault

Add homepage component and router view in App main component

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

@@ -22,10 +22,13 @@ public class VueDomainService implements VueService {
   public static final String SOURCE_SECONDARY = getPath(SOURCE, "webapp/app/common/secondary");
   public static final String SOURCE_TEST_PRIMARY = getPath(SOURCE, "test/spec/common/primary");
   public static final String SOURCE_PRIMARY_APP = getPath(SOURCE_PRIMARY, "app");
+  public static final String SOURCE_PRIMARY_HOMEPAGE = getPath(SOURCE_PRIMARY, "homepage");
   public static final String DESTINATION_PRIMARY = "src/main/webapp/app/common/primary";
   public static final String DESTINATION_DOMAIN = "src/main/webapp/app/common/domain";
   public static final String DESTINATION_SECONDARY = "src/main/webapp/app/common/secondary";
   public static final String DESTINATION_PRIMARY_APP = DESTINATION_PRIMARY + "/app";
+  public static final String DESTINATION_PRIMARY_HOMEPAGE = DESTINATION_PRIMARY + "/homepage";
+
   public static final String DESTINATION_PRIMARY_TEST = "src/test/javascript/spec/common/primary";
   public static final String DESTINATION_PRIMARY_ROUTER = DESTINATION_PRIMARY + "/app";
   public static final String DESTINATION_APP = "src/main/webapp/app";
@@ -63,6 +66,7 @@ private void addCommonVue(Project project) {
     addAxios(project);
     addRootFiles(project);
     addAppFiles(project);
+    addHomepageFiles(project);
     addRouter(project);
     addLogger(project);
   }
@@ -260,6 +264,38 @@ public void addAppFiles(Project project) {
     );
   }
 
+  public void addHomepageFiles(Project project) {
+    project.addDefaultConfig(BASE_NAME);
+
+    projectRepository.template(
+      ProjectFile
+        .forProject(project)
+        .withSource(SOURCE_PRIMARY_HOMEPAGE, "Homepage.component.ts")
+        .withDestinationFolder(DESTINATION_PRIMARY_HOMEPAGE)
+    );
+    projectRepository.template(
+      ProjectFile
+        .forProject(project)
+        .withSource(SOURCE_PRIMARY_HOMEPAGE, "Homepage.html")
+        .withDestinationFolder(DESTINATION_PRIMARY_HOMEPAGE)
+    );
+    projectRepository.template(
+      ProjectFile
+        .forProject(project)
+        .withSource(SOURCE_PRIMARY_HOMEPAGE, "Homepage.vue")
+        .withDestinationFolder(DESTINATION_PRIMARY_HOMEPAGE)
+    );
+    projectRepository.template(
+      ProjectFile.forProject(project).withSource(SOURCE_PRIMARY_HOMEPAGE, "index.ts").withDestinationFolder(DESTINATION_PRIMARY_HOMEPAGE)
+    );
+    projectRepository.template(
+      ProjectFile
+        .forProject(project)
+        .withSource(getPath(SOURCE_TEST_PRIMARY, "homepage"), "Homepage.spec.ts")
+        .withDestinationFolder(DESTINATION_PRIMARY_TEST + "/homepage")
+    );
+  }
+
   public void addAppFilesWithCss(Project project) {
     project.addDefaultConfig(BASE_NAME);
 

src/main/resources/generator/client/vue/test/spec/common/domain/Logger.fixture.ts.mustache

@@ -7,4 +7,4 @@ export interface LoggerFixture extends Logger {
 
 export const stubLogger = (): LoggerFixture => ({
   error: sinon.stub(),
-});
+});

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

@@ -4,7 +4,11 @@ import { AppVue } from '@/common/primary/app';
 let wrapper: VueWrapper;
 
 const wrap = () => {
-  wrapper = shallowMount(AppVue);
+  wrapper = shallowMount(AppVue, {
+    global: {
+      stubs: ['router-link', 'router-view'],
+    },
+  });
 };
 
 describe('App', () => {

src/main/resources/generator/client/vue/test/spec/common/primary/homepage/Homepage.spec.ts.mustache

@@ -0,0 +1,16 @@
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import { HomepageVue } from '@/common/primary/homepage';
+
+let wrapper: VueWrapper;
+
+const wrap = () => {
+  wrapper = shallowMount(HomepageVue);
+};
+
+describe('App', () => {
+  it('should exist', () => {
+    wrap();
+
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});

src/main/resources/generator/client/vue/test/spec/common/secondary/ConsoleLogger.spec.ts.mustache

@@ -17,4 +17,4 @@ describe('ConsoleLogger', () => {
     expect(errorPassed).toBeInstanceOf(Error);
     expect(errorPassed.message).toBe('Error message');
   });
-});
+});

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

@@ -6,25 +6,28 @@ import router from '@/router/router';
 let wrapper: VueWrapper;
 
 const wrap = () => {
-  wrapper = shallowMount(AppVue,{
-    router
+  wrapper = shallowMount(AppVue, {
+    global: {
+      stubs: ['router-link', 'router-view'],
+    },
+    router,
   });
 };
 
 describe('Router', () => {
   it('Should redirect to App by default', async () => {
     wrap();
-    await router.push('/')
-    await wrapper.vm.$nextTick()
+    await router.push('/');
+    await wrapper.vm.$nextTick();
 
-    expect(wrapper.findComponent(AppVue)).toBeTruthy()
-  })
+    expect(wrapper.findComponent(AppVue)).toBeTruthy();
+  });
 
   it('Should go to AppVue', async () => {
     wrap();
-    await router.push('/app')
-    await wrapper.vm.$nextTick()
+    await router.push('/app');
+    await wrapper.vm.$nextTick();
 
-    expect(wrapper.findComponent(AppVue)).toBeTruthy()
-  })
-})
+    expect(wrapper.findComponent(AppVue)).toBeTruthy();
+  });
+});

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

@@ -2,4 +2,4 @@ import { Message } from '@/common/domain/Message';
 
 export interface Logger {
   error(message: Message, error: Error): void;
-}
+}

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

@@ -1 +1 @@
-export type Message = string;
+export type Message = string;

src/main/resources/generator/client/vue/webapp/app/common/primary/app/App.component.ts.mustache

@@ -1,8 +1,3 @@
 export default {
   name: 'App',
-  data: () => {
-    return {
-      appName: '{{baseName}}',
-    };
-  },
 };

src/main/resources/generator/client/vue/webapp/app/common/primary/app/App.html.mustache

@@ -1,25 +1 @@
-<div id="app">
-  <img alt="Vue logo" src="/content/images/VueLogo.png" />
-  <br>
-  <img alt="JHipster logo" src="../../../../content/images/JHipster-Lite-neon-green.png" />
-  <h1>{{=<% %>=}}{{ appName }}<%={{ }}=%>: Vue 3 + TypeScript + Vite</h1>
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>
-  </p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">
-      Vite Documentation
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank" rel="noopener">Vue 3 Documentation</a>
-  </p>
-
-  <p>
-    Edit
-    <code>src/main/webapp/app/common/primary/app/App.vue</code> to test hot module replacement.
-  </p>
-</div>
+<router-view></router-view>

src/main/resources/generator/client/vue/webapp/app/common/primary/app/App.vue.mustache

@@ -1,29 +1,3 @@
 <template src="./App.html"></template>
 
 <script lang="ts" src="./App.component.ts"></script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>

src/main/resources/generator/client/vue/webapp/app/common/primary/homepage/Homepage.component.ts.mustache

@@ -0,0 +1,8 @@
+export default {
+  name: 'Homepage',
+  data: () => {
+    return {
+      appName: 'jhipster',
+    };
+  },
+};

src/main/resources/generator/client/vue/webapp/app/common/primary/homepage/Homepage.html.mustache

@@ -0,0 +1,23 @@
+<div id="app">
+  <img alt="Vue logo" src="/content/images/VueLogo.png" />
+  <br />
+  <img alt="JHipster logo" src="../../../../content/images/JHipster-Lite-neon-green.png" />
+  <h1>: Vue 3 + TypeScript + Vite</h1>
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener"> Vite Documentation </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank" rel="noopener">Vue 3 Documentation</a>
+  </p>
+
+  <p>
+    Edit
+    <code>src/main/webapp/app/common/primary/app/App.vue</code> to test hot module replacement.
+  </p>
+</div>

src/main/resources/generator/client/vue/webapp/app/common/primary/homepage/Homepage.vue.mustache

@@ -0,0 +1,29 @@
+<template src="./Homepage.html"></template>
+
+<script lang="ts" src="./Homepage.component.ts"></script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

src/main/resources/generator/client/vue/webapp/app/common/primary/homepage/index.ts.mustache

@@ -0,0 +1,4 @@
+import HomepageComponent from './Homepage.component';
+import HomepageVue from './Homepage.vue';
+
+export { HomepageComponent, HomepageVue };

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

@@ -1,15 +1,15 @@
-import { AppVue } from '@/common/primary/app';
+import { HomepageVue } from '@/common/primary/homepage';
 import { createRouter, createWebHistory } from 'vue-router';
 
 const routes = [
   {
     path: '/',
-    redirect: { name: 'App' },
+    redirect: { name: 'Homepage' },
   },
   {
-    path: '/app',
-    name: 'App',
-    component: AppVue,
+    path: '/home',
+    name: 'Homepage',
+    component: HomepageVue,
   },
 ];
 

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

@@ -26,7 +26,8 @@ void shouldAddVue() {
     VueAssert.assertRootFiles(project);
     VueAssert.assertRouterFiles(project);
     VueAssert.assertAppFiles(project);
-    VueAssert.assertAppWithCss(project);
+    VueAssert.assertHomepageFiles(project);
+    VueAssert.assertCss(project);
     VueAssert.assertLogos(project);
     VueAssert.assertLogger(project);
     VueAssert.assertAxiosFile(project);

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

@@ -63,8 +63,16 @@ public static void assertAppFiles(Project project) {
     assertFileExist(project, "src/test/javascript/spec/common/primary/app/App.spec.ts");
   }
 
-  public static void assertAppWithCss(Project project) {
-    assertFileContent(project, "src/main/webapp/app/common/primary/app/App.vue", "<style>");
+  public static void assertHomepageFiles(Project project) {
+    assertFileExist(project, "src/main/webapp/app/common/primary/homepage/Homepage.component.ts");
+    assertFileExist(project, "src/main/webapp/app/common/primary/homepage/Homepage.html");
+    assertFileExist(project, "src/main/webapp/app/common/primary/homepage/Homepage.vue");
+    assertFileExist(project, "src/main/webapp/app/common/primary/homepage/index.ts");
+    assertFileExist(project, "src/test/javascript/spec/common/primary/homepage/Homepage.spec.ts");
+  }
+
+  public static void assertCss(Project project) {
+    assertFileContent(project, "src/main/webapp/app/common/primary/homepage/Homepage.vue", "<style>");
   }
 
   public static void assertLogos(Project project) {

src/test/java/tech/jhipster/lite/generator/client/vue/core/infrastructure/primary/rest/VueResourceIT.java

@@ -43,7 +43,8 @@ void shouldAddVue() throws Exception {
     VueAssert.assertViteConfigFiles(project);
     VueAssert.assertRootFiles(project);
     VueAssert.assertAppFiles(project);
-    VueAssert.assertAppWithCss(project);
+    VueAssert.assertHomepageFiles(project);
+    VueAssert.assertCss(project);
 
     VueAssert.assertJestSonar(project);
   }