Configure vitest and add test for Header component

.env.example

@@ -0,0 +1,4 @@
+VITE_FIREBASE_API_KEY=
+VITE_FIREBASE_APP_ID=
+VITE_FIREBASE_MESSAGING_SENDER_ID=
+VITE_FIREBASE_PROJECT_ID=

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+coverage
 
 # Editor directories and files
 .vscode/*

package.json

@@ -5,6 +5,10 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:cov": "vitest --coverage.enabled=true",
+    "coverage": "vitest run --coverage",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
@@ -17,11 +21,15 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-istanbul": "^1.4.0",
+    "@vue/test-utils": "^2.4.5",
     "autoprefixer": "^10.4.17",
+    "jsdom": "^24.0.0",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
+    "vitest": "^1.4.0",
     "vue-tsc": "^1.8.27"
   }
 }

src/components/Header.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import Header from './Header.vue';
+import * as logoutService from '../services/logout';
+
+
+describe('<Header />', () => {
+  const render = () => shallowMount(Header);
+  const doLogout = vi.spyOn(logoutService, 'doLogout');
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  });
+
+  it('should render component correctly', () => {
+    const wrapper = render();
+    const links = wrapper.findAll('router-link');
+
+    expect(wrapper.exists()).toBeTruthy();
+    expect(links.length).toBe(2);
+    expect(links.at(0)?.text()).toContain('Links4Later');
+    expect(links.at(1)?.text()).toContain('Sign out');
+  });
+
+  it('should do logout when sign out buttons is clicked', () => {
+    const wrapper = render();
+    const signOutButton = wrapper.findAll('router-link').at(1);
+
+    signOutButton?.trigger('click')
+
+    expect(doLogout).toHaveBeenCalledTimes(1);
+  })
+})

src/components/Header.vue

@@ -13,7 +13,7 @@ const onLogout = () => {
         <router-link to="/" class="text-2xl text-white">Links4Later</router-link>
         <router-link @click="onLogout" to="/login" replace class="text-md flex items-center gap-2 text-zinc-600 py-2 px-3 rounded-lg bg-zinc-50 hover:bg-zinc-100 transition text-sm">
           <LogOut :size="16" />
-          Sign out
+          Sign outs
         </router-link>
     </header>
 </template>

vitest.config.ts

@@ -0,0 +1,19 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    Vue(),
+  ],
+  test: {
+    globals: false,
+    watch: false,
+    environment: 'jsdom',
+    coverage: {
+      provider: 'istanbul', // or 'v8'
+      reporter: ['clover', 'html'],
+    },
+  },
+})