test(pages): home page should display a counter card

src/components/counter-card.component.vue → src/components/counter-card.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { useCounterStore } from '~/stores/counter'
+import {useCounterStore} from "@/stores/counter.ts";
 
 defineProps<{ msg: string }>()
 

src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import App from '~/App.vue'
-import router from '~/router'
+import App from '@/app.vue'
+import router from '@/router'
 
 const app = createApp(App)
 

src/pages/HomePage.vue → src/pages/home-page.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CounterCard from '@/components/counter-card.component.vue'
+import CounterCard from '@/components/counter-card.vue'
 </script>
 
 <template>

src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomePage from '~/pages/HomePage.vue'
+import HomePage from '@/pages/home-page.vue'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),

tests/components/counter-card.component.spec.ts → tests/components/counter-card.spec.ts

@@ -1,11 +1,11 @@
 import { describe, it, expect } from 'vitest'
 
 import { shallowMount } from '@vue/test-utils'
-import CounterCard from '../../src/components/counter-card.component.vue'
+import CounterCard from '../../src/components/counter-card.vue'
 import { createPinia, setActivePinia } from 'pinia'
 
-describe('CounterCard', () => {
-    it('renders properly', () => {
+describe('Counter card', () => {
+    it('should render properly', () => {
         setActivePinia(createPinia())
         const wrapper = shallowMount(CounterCard, { props: { msg: 'Hello VueJS' } })
 

tests/pages/home.page.spec.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest'
+
+import { shallowMount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import HomePage from '@/pages/home-page.vue'
+import CounterCard from '@/components/counter-card.vue'
+
+describe('Home page', () => {
+    it('should display a counter card', () => {
+        setActivePinia(createPinia())
+        const wrapper = shallowMount(HomePage)
+        const counterCard = wrapper.findComponent(CounterCard)
+
+        expect(counterCard.exists()).toBe(true)
+    })
+})

tsconfig.json

@@ -24,7 +24,6 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
-      "~/*": ["src/*"],
     }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue, tests/**/*.ts"],

vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import type { UserConfig as VitestUserConfigInterface } from "vitest/config"
 import vue from '@vitejs/plugin-vue'
-import path from 'path'
+import {fileURLToPath} from "url";
 
 const vitestConfig: VitestUserConfigInterface = {
   test: {
@@ -14,9 +14,8 @@ export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
-      '~': path.resolve(__dirname, './src')
-    }
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
   },
   test: vitestConfig.test,
 })