feat(vue): update generated file setup for apps (#19428)

nrwl · Oct 4, 2023 · 601b74d · 601b74d
1 parent dd50756
commit 601b74d
Show file tree

Hide file tree

Showing 16 changed files with 61 additions and 121 deletions.
diff --git a/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -177,20 +177,7 @@ exports[`application generator should set up project correctly with given option
 "
 `;
 
-exports[`application generator should set up project correctly with given options 5`] = `
-"import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import App from '../App.vue';
-
-describe('App', () => {
-  it('renders properly', () => {
-    const wrapper = mount(App, {});
-    expect(wrapper.text()).toContain('Welcome test 👋');
-  });
-});
-"
-`;
+exports[`application generator should set up project correctly with given options 5`] = `null`;
 
 exports[`application generator should set up project correctly with given options 6`] = `
 [
@@ -212,9 +199,9 @@ exports[`application generator should set up project correctly with given option
   "test/.eslintrc.json",
   "test/index.html",
   "test/project.json",
-  "test/src/__tests__/App.spec.ts",
-  "test/src/App.vue",
-  "test/src/components/NxWelcome.vue",
+  "test/src/app/App.spec.ts",
+  "test/src/app/App.vue",
+  "test/src/app/NxWelcome.vue",
   "test/src/main.ts",
   "test/src/styles.css",
   "test/tsconfig.app.json",

diff --git a/...common/src/__tests__/App.spec.ts.template → ...files/common/src/app/App.spec.ts.template b/...common/src/__tests__/App.spec.ts.template → ...files/common/src/app/App.spec.ts.template
@@ -2,7 +2,7 @@
 import { describe, it, expect } from 'vitest'
 <% } %>
 import { mount } from '@vue/test-utils'
-import App from '../App.vue';
+import App from './App.vue';
 
 describe('App', () => {
   it('renders properly', () => {

diff --git a/...ication/files/common/src/App.vue.template → ...ion/files/common/src/app/App.vue.template b/...ication/files/common/src/App.vue.template → ...ion/files/common/src/app/App.vue.template
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 <% if (routing) { %>
 import { RouterLink, RouterView } from 'vue-router';
+<% } else { %>
+import NxWelcome from './NxWelcome.vue';
 <% } %>
-import NxWelcome from './components/NxWelcome.vue';
 </script>
 
 <template>

diff --git a/...mon/src/components/NxWelcome.vue.template → ...les/common/src/app/NxWelcome.vue.template b/...mon/src/components/NxWelcome.vue.template → ...les/common/src/app/NxWelcome.vue.template
diff --git a/packages/vue/src/generators/application/files/common/src/main.ts.template b/packages/vue/src/generators/application/files/common/src/main.ts.template
@@ -6,7 +6,7 @@ import router from './router';
 <% } %>
 
 import { createApp } from 'vue';
-import App from './App.vue';
+import App from './app/App.vue';
 
 const app = createApp(App);
 <% if (routing) { %>

diff --git a/packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template b/packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NxWelcome from '../components/NxWelcome.vue'
+import NxWelcome from '../app/NxWelcome.vue'
 </script>
 
 <template>

diff --git a/packages/vue/src/generators/component/__snapshots__/component.spec.ts.snap b/packages/vue/src/generators/component/__snapshots__/component.spec.ts.snap
@@ -11,22 +11,16 @@ defineProps<{}>();
 </script>
 
 <template>
-  <div>
-    <p>Welcome to Hello!</p>
-  </div>
+  <p>Welcome to Hello!</p>
 </template>
 
-<style scoped>
-div {
-  color: pink;
-}
-</style>
+<style scoped></style>
 "
 `;
 
 exports[`component should generate files with jest 2`] = `
 "import { mount } from '@vue/test-utils';
-import Hello from '../hello.vue';
+import Hello from './hello.vue';
 
 describe('Hello', () => {
   it('renders properly', () => {
@@ -43,24 +37,18 @@ defineProps<{}>();
 </script>
 
 <template>
-  <div>
-    <p>Welcome to Hello!</p>
-  </div>
+  <p>Welcome to Hello!</p>
 </template>
 
-<style scoped>
-div {
-  color: pink;
-}
-</style>
+<style scoped></style>
 "
 `;
 
 exports[`component should generate files with vitest 2`] = `
 "import { describe, it, expect } from 'vitest';
 
 import { mount } from '@vue/test-utils';
-import Hello from '../hello.vue';
+import Hello from './hello.vue';
 
 describe('Hello', () => {
   it('renders properly', () => {

diff --git a/packages/vue/src/generators/component/component.spec.ts b/packages/vue/src/generators/component/component.spec.ts
@@ -1,4 +1,4 @@
-import { logger, readJson, Tree } from '@nx/devkit';
+import { logger, Tree } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { componentGenerator } from './component';
 import { createLib } from '../../utils/test-utils';
@@ -30,17 +30,14 @@ describe('component', () => {
       appTree.exists('my-lib/src/components/hello/hello.vue')
     ).toBeTruthy();
     expect(
-      appTree.exists('my-lib/src/components/hello/__tests__/hello.spec.ts')
+      appTree.exists('my-lib/src/components/hello/hello.spec.ts')
     ).toBeTruthy();
 
     expect(
       appTree.read('my-lib/src/components/hello/hello.vue', 'utf-8')
     ).toMatchSnapshot();
     expect(
-      appTree.read(
-        'my-lib/src/components/hello/__tests__/hello.spec.ts',
-        'utf-8'
-      )
+      appTree.read('my-lib/src/components/hello/hello.spec.ts', 'utf-8')
     ).toMatchSnapshot();
   });
 
@@ -55,10 +52,7 @@ describe('component', () => {
       appTree.read('my-lib/src/components/hello/hello.vue', 'utf-8')
     ).toMatchSnapshot();
     expect(
-      appTree.read(
-        'my-lib/src/components/hello/__tests__/hello.spec.ts',
-        'utf-8'
-      )
+      appTree.read('my-lib/src/components/hello/hello.spec.ts', 'utf-8')
     ).toMatchSnapshot();
   });
 
@@ -114,7 +108,7 @@ describe('component', () => {
         appTree.exists('my-lib/src/components/hello/Hello.vue')
       ).toBeTruthy();
       expect(
-        appTree.exists('my-lib/src/components/hello/__tests__/Hello.spec.ts')
+        appTree.exists('my-lib/src/components/hello/Hello.spec.ts')
       ).toBeTruthy();
     });
   });
@@ -131,9 +125,7 @@ describe('component', () => {
         appTree.exists('my-lib/src/components/HelloWorld/HelloWorld.vue')
       ).toBeTruthy();
       expect(
-        appTree.exists(
-          'my-lib/src/components/HelloWorld/__tests__/HelloWorld.spec.ts'
-        )
+        appTree.exists('my-lib/src/components/HelloWorld/HelloWorld.spec.ts')
       ).toBeTruthy();
     });
   });

diff --git a/...es/__tests__/__fileName__.spec.ts__tmpl__ → ...ponent/files/__fileName__.spec.ts__tmpl__ b/...es/__tests__/__fileName__.spec.ts__tmpl__ → ...ponent/files/__fileName__.spec.ts__tmpl__
@@ -3,7 +3,7 @@ import { describe, it, expect } from 'vitest'
 <% } %>
 
 import { mount } from '@vue/test-utils'
-import <%= className %> from '../<%= fileName %>.vue';
+import <%= className %> from './<%= fileName %>.vue';
 
 describe('<%= className %>', () => {
   it('renders properly', () => {

diff --git a/packages/vue/src/generators/component/files/__fileName__.vue__tmpl__ b/packages/vue/src/generators/component/files/__fileName__.vue__tmpl__
@@ -3,13 +3,8 @@ defineProps<{}>()
 </script>
 
 <template>
-  <div>
-    <p>Welcome to <%= className %>!</p>
-  </div>
+  <p>Welcome to <%= className %>!</p>
 </template>
 
 <style scoped>
-div { 
-  color: pink; 
-}
-</style>
+</style>
diff --git a/packages/vue/src/generators/library/library.spec.ts b/packages/vue/src/generators/library/library.spec.ts
@@ -163,9 +163,7 @@ describe('lib', () => {
     expect(tree.exists('my-lib/package.json')).toBeFalsy();
     expect(tree.exists('my-lib/src/index.ts')).toBeTruthy();
     expect(tree.exists('my-lib/src/components/my-lib.vue')).toBeTruthy();
-    expect(
-      tree.exists('my-lib/src/components/__tests__/my-lib.spec.ts')
-    ).toBeTruthy();
+    expect(tree.exists('my-lib/src/components/my-lib.spec.ts')).toBeTruthy();
     const eslintJson = readJson(tree, 'my-lib/.eslintrc.json');
     expect(eslintJson).toMatchSnapshot();
   });
@@ -206,9 +204,7 @@ describe('lib', () => {
         tree.exists('my-dir/my-lib/src/components/my-dir-my-lib.vue')
       ).toBeTruthy();
       expect(
-        tree.exists(
-          'my-dir/my-lib/src/components/__tests__/my-dir-my-lib.spec.ts'
-        )
+        tree.exists('my-dir/my-lib/src/components/my-dir-my-lib.spec.ts')
       ).toBeTruthy();
     });
 

diff --git a/packages/vue/src/generators/stories/lib/component-story.spec.ts b/packages/vue/src/generators/stories/lib/component-story.spec.ts
@@ -44,15 +44,10 @@ describe('vue:component-story', () => {
           </script>
           
           <template>
-            <div>
-              <p>Welcome to Vlv!</p>
-            </div>
+            <p>Welcome to Vlv!</p>
           </template>
           
           <style scoped>
-          div {
-            color: pink;
-          }
           </style>
           `
         );
@@ -88,15 +83,10 @@ describe('vue:component-story', () => {
             </script>
           
           <template>
-            <div>
-              <p>Welcome to Vlv!</p>
-            </div>
+            <p>Welcome to Vlv!</p>
           </template>
           
           <style scoped>
-          div {
-            color: pink;
-          }
           </style>
           `
         );

diff --git a/packages/vue/src/generators/stories/stories.app.spec.ts b/packages/vue/src/generators/stories/stories.app.spec.ts
@@ -13,15 +13,10 @@ defineProps<{
 </script>
 
 <template>
-  <div>
-    <p>Welcome to Vlv!</p>
-  </div>
+  <p>Welcome to Vlv!</p>
 </template>
 
 <style scoped>
-div {
-  color: pink;
-}
 </style>
 `;
 
@@ -44,7 +39,7 @@ describe('vue:stories for applications', () => {
     });
 
     expect(
-      appTree.read('test-ui-app/src/components/NxWelcome.stories.ts', 'utf-8')
+      appTree.read('test-ui-app/src/app/NxWelcome.stories.ts', 'utf-8')
     ).toMatchSnapshot();
     expect(
       appTree.read(
@@ -61,7 +56,7 @@ describe('vue:stories for applications', () => {
     });
 
     expect(
-      appTree.read('test-ui-app/src/components/NxWelcome.stories.ts', 'utf-8')
+      appTree.read('test-ui-app/src/app/NxWelcome.stories.ts', 'utf-8')
     ).toMatchSnapshot();
     expect(
       appTree.read(
@@ -73,7 +68,7 @@ describe('vue:stories for applications', () => {
 
   it('should not update existing stories', async () => {
     appTree.write(
-      'test-ui-app/src/components/NxWelcome.stories.ts',
+      'test-ui-app/src/app/NxWelcome.stories.ts',
       `import { ComponentStory, ComponentMeta } from '@storybook/vue3'`
     );
 
@@ -82,7 +77,7 @@ describe('vue:stories for applications', () => {
     });
 
     expect(
-      appTree.read('test-ui-app/src/components/NxWelcome.stories.ts', 'utf-8')
+      appTree.read('test-ui-app/src/app/NxWelcome.stories.ts', 'utf-8')
     ).toMatchSnapshot();
   });
 
@@ -104,7 +99,7 @@ describe('vue:stories for applications', () => {
       });
 
       expect(
-        appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
+        appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
       ).toBeTruthy();
       expect(
         appTree.exists(
@@ -135,7 +130,7 @@ describe('vue:stories for applications', () => {
       });
 
       expect(
-        appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
+        appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
       ).toBeTruthy();
       expect(
         appTree.exists(
@@ -166,7 +161,7 @@ describe('vue:stories for applications', () => {
       });
 
       expect(
-        appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
+        appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
       ).toBeTruthy();
       expect(
         appTree.exists(
@@ -194,7 +189,7 @@ describe('vue:stories for applications', () => {
       });
 
       expect(
-        appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
+        appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
       ).toBeTruthy();
       expect(
         appTree.exists(
@@ -229,7 +224,7 @@ describe('vue:stories for applications', () => {
       });
 
       expect(
-        appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
+        appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
       ).toBeTruthy();
       expect(
         appTree.exists(

diff --git a/packages/vue/src/generators/stories/stories.lib.spec.ts b/packages/vue/src/generators/stories/stories.lib.spec.ts
@@ -13,15 +13,10 @@ defineProps<{
 </script>
 
 <template>
-  <div>
-    <p>Welcome to Vlv!</p>
-  </div>
+  <p>Welcome to Vlv!</p>
 </template>
 
 <style scoped>
-div {
-  color: pink;
-}
 </style>
 `;