Vue3 for tests (#3479)

* add dummy test * migrate tests to vue3
usdigitalresponse · Sep 13, 2024 · e6befba · e6befba
1 parent c2624be
commit e6befba
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 11 deletions.
diff --git a/packages/client/src/arpa_reporter/views/HomeView.spec.js b/packages/client/src/arpa_reporter/views/HomeView.spec.js
@@ -93,7 +93,7 @@ describe('HomeView.vue', () => {
         expect(sendTreasuryReportButton.text()).toContain('Send Treasury Report by Email');
       });
       it('should show the DownloadTemplateBtn', () => {
-        const sendAuditReportButton = wrapper.find('downloadtemplatebtn');
+        const sendAuditReportButton = wrapper.findComponent({ name: 'download-template-btn' });
         expect(sendAuditReportButton.exists()).toBe(true);
       });
     });

diff --git a/packages/client/src/arpa_reporter/views/NewUploadView.spec.js b/packages/client/src/arpa_reporter/views/NewUploadView.spec.js
@@ -1,9 +1,14 @@
 import NewUploadView from '@/arpa_reporter/views/NewUploadView.vue';
 
-import { describe, it, expect } from 'vitest';
+import {
+  describe, it, expect, vi,
+} from 'vitest';
 import { shallowMount } from '@vue/test-utils';
 import { createStore } from 'vuex';
 
+// Use compat version to support VueFormulate
+vi.mock('vue', async () => vi.importActual('@vue/compat'));
+
 describe('NewUploadView component', () => {
   const store = createStore({
     getters: {

diff --git a/packages/client/src/arpa_reporter/views/UserView.spec.js b/packages/client/src/arpa_reporter/views/UserView.spec.js
@@ -41,7 +41,7 @@ describe('UserView.vue', () => {
     expect(loading.text()).toContain('Loading');
 
     await wrapper.setData({ user: {} });
-    const form = wrapper.find('standardform');
+    const form = wrapper.findComponent({ name: 'standard-form' });
     expect(form.exists()).toBe(true);
   });
 });

diff --git a/packages/client/src/components/BaseLayout.spec.js b/packages/client/src/components/BaseLayout.spec.js
@@ -86,7 +86,9 @@ describe('BaseLayout.vue', () => {
       });
     });
     it('should have a dropdown', () => {
-      wrapper.get('b-nav-item-dropdown');
+      const dropdown = wrapper.findComponent({ name: 'b-nav-item-dropdown' });
+
+      expect(dropdown.exists()).toEqual(true);
     });
     it('should have the correct options', () => {
       const options = wrapper.findAll('.dropdown-item-text');

diff --git a/packages/client/vite.config.js b/packages/client/vite.config.js
@@ -14,15 +14,15 @@ export default defineConfig({
       name: 'arpa_reporter_url_rewriter',
       configureServer(serve) {
         serve.middlewares.use((req, res, next) => {
-          const isInitialPageLoad = req.headers.referer === undefined ||
-            new URL(req.headers.referer).pathname === new URL(req.url, `http://${req.headers.host}`).pathname
-          const isArpaUrl = req.url.startsWith('/arpa_reporter')
+          const isInitialPageLoad = req.headers.referer === undefined
+            || new URL(req.headers.referer).pathname === new URL(req.url, `http://${req.headers.host}`).pathname;
+          const isArpaUrl = req.url.startsWith('/arpa_reporter');
           if (isInitialPageLoad && isArpaUrl) {
-            req.url = '/arpa_reporter/'
+            req.url = '/arpa_reporter/';
           }
-          next()
-        })
-      }
+          next();
+        });
+      },
     },
     vue({
       template: {
@@ -57,6 +57,10 @@ export default defineConfig({
     sourcemap: true,
   },
   test: {
+    setupFiles: ['vitest.setup.ts'],
+    alias: {
+      vue: 'vue',
+    },
     environment: 'jsdom',
     coverage: {
       provider: 'istanbul',

diff --git a/packages/client/vitest.setup.ts b/packages/client/vitest.setup.ts
@@ -0,0 +1,48 @@
+import { config } from '@vue/test-utils';
+
+const stubs = [
+  'v-select',
+  'b-modal',
+  'b-form-input',
+  'b-avatar',
+  'b-overlay',
+  'b-link',
+  'b-icon',
+  'b-row',
+  'b-button',
+  'b-form-group',
+  'b-form-radio-group',
+  'b-form',
+  'b-form-radio',
+  'b-form-select',
+  'b-tab',
+  'b-img',
+  'b-nav',
+  'b-navbar-brand',
+  'b-dropdown-item',
+  'b-dropdown-item-button',
+  'b-nav-item-dropdown',
+  'b-navbar-nav',
+  'b-collapse',
+  'b-navbar',
+  'b-nav-item',
+  'b-col',
+  'b-breadcrumb',
+  'b-form-checkbox',
+  'b-card',
+  'b-pagination-nav',
+  'b-button-close',
+  'b-form-checkbox-group',
+  'b-dropdown',
+  'b-table',
+  'b-pagination',
+  'b-sidebar',
+  'b-spinner',
+  'b-container',
+  'b-card-img',
+  'b-card-text',
+  'b-tabs',
+];
+
+config.global.renderStubDefaultSlot = true;
+config.global.stubs = stubs;