From 264f8cf85f15c6cd0a0ec718d5c983bd574250d1 Mon Sep 17 00:00:00 2001
From: Colum Ferry <cferry09@gmail.com>
Date: Thu, 16 May 2024 16:38:16 +0100
Subject: [PATCH] fix(vue): ootb unit testing should work with --routing #19921
 (#23441)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->
When generating a vue application with routing and testing, the test
setup is incorrect and fails

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
The test setup for vue applications with routing should work OOTB

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #19921

(cherry picked from commit 381e5cd494051f86142b236bef539bc7a3ae16f5)
---
 .../application/__snapshots__/application.spec.ts.snap   | 3 ++-
 .../files/common/src/app/App.spec.ts.template            | 9 +++++++--
 .../files/routing/src/views/HomeView.vue.template        | 2 +-
 3 files changed, 10 insertions(+), 4 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
index 78d7d6ae315ac..789f80bc7f3a7 100644
--- a/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap
+++ b/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -121,8 +121,9 @@ import { mount } from '@vue/test-utils';
 import App from './App.vue';
 
 describe('App', () => {
-  it('renders properly', () => {
+  it('renders properly', async () => {
     const wrapper = mount(App, {});
+
     expect(wrapper.text()).toContain('Welcome test 👋');
   });
 });
diff --git a/packages/vue/src/generators/application/files/common/src/app/App.spec.ts.template b/packages/vue/src/generators/application/files/common/src/app/App.spec.ts.template
index e146c1f6ef254..e8b016b534175 100644
--- a/packages/vue/src/generators/application/files/common/src/app/App.spec.ts.template
+++ b/packages/vue/src/generators/application/files/common/src/app/App.spec.ts.template
@@ -1,12 +1,17 @@
 <% if ( unitTestRunner === 'vitest' ) { %>
 import { describe, it, expect } from 'vitest'
+<% } %><% if( routing ) { %>
+import router from '../router';
 <% } %>
 import { mount } from '@vue/test-utils'
 import App from './App.vue';
 
 describe('App', () => {
-  it('renders properly', () => {
-    const wrapper = mount(App, {})
+  it('renders properly', async () => {
+    const wrapper = mount(App, <% if( routing ) { %>{ global: { plugins: [router] }}<% } else { %>{}<% } %>)
+    <% if( routing ) { %>
+    await router.isReady();
+    <% } %>
     expect(wrapper.text()).toContain('Welcome <%= title %> 👋')
   })
 });
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
index 07cab06db9077..9f9f06545e1ea 100644
--- 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
@@ -4,6 +4,6 @@ import NxWelcome from '../app/NxWelcome.vue'
 
 <template>
   <main>
-    <NxWelcome />
+    <NxWelcome title="<%= title %>" />
   </main>
 </template>