Add frontend coverage

Co-authored-by: Copilot <copilot@github.com>

Author: lcharette

.github/workflows/Build.yml

@@ -39,10 +39,10 @@ jobs:
       
       - name: Upload coverage to Codecov
         if: github.event_name != 'schedule'
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          file: ./_meta/coverage.xml
+          files: ./_meta/coverage.xml
           fail_ci_if_error: true
 
       - name: Upload test results to Codecov
@@ -99,6 +99,37 @@ jobs:
       - name: Test
         run: npm run vite:build
 
+  Vitest:
+
+    strategy:
+      fail-fast: false
+      matrix:
+        node_versions: [24]
+
+    runs-on: ubuntu-latest
+    name: Vitest - Node ${{ matrix.node_versions }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node_versions }}
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Run Tests with Coverage
+        run: npm run coverage
+
+      - name: Upload coverage to Codecov
+        if: github.event_name != 'schedule'
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./_meta/frontend-coverage/lcov.info
+          fail_ci_if_error: true
+
   Prettier:
     strategy:
       fail-fast: false
@@ -142,7 +173,7 @@ jobs:
   Deploy:
     name: Deploy code to prod
     runs-on: ubuntu-latest
-    needs: [PHPUnit, PHPStan, Vite, Prettier, PHP-CS-Fixer]
+    needs: [PHPUnit, PHPStan, Vite, Vitest, Prettier, PHP-CS-Fixer]
     if: github.event_name == 'push'
 
     steps:

app/assets/SearchComponent.spec.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import axios from 'axios'
+import SearchComponent from './SearchComponent.vue'
+
+vi.mock('axios')
+
+describe('SearchComponent', () => {
+    beforeEach(() => {
+        vi.resetAllMocks()
+    })
+
+    it('renders the search trigger input', () => {
+        const wrapper = mount(SearchComponent)
+        const inputs = wrapper.findAll('input[type="text"]')
+        expect(inputs.length).toBeGreaterThan(0)
+    })
+
+    it('does not show results or error on initial render', () => {
+        const wrapper = mount(SearchComponent)
+        expect(wrapper.find('[uk-spinner]').exists()).toBe(false)
+        expect(wrapper.find('.uk-alert-danger').exists()).toBe(false)
+        expect(wrapper.find('.uk-list').exists()).toBe(false)
+    })
+
+    it('does not fetch when query is shorter than minimum length', async () => {
+        const axiosGet = vi.mocked(axios.get)
+        const wrapper = mount(SearchComponent)
+
+        const searchInput = wrapper.find('input[autofocus]')
+        await searchInput.setValue('ab')
+        await wrapper.vm.$nextTick()
+
+        expect(axiosGet).not.toHaveBeenCalled()
+    })
+
+    it('fetches results when query meets minimum length', async () => {
+        const mockData = {
+            count: 1,
+            size: 10,
+            page: 1,
+            rows: [
+                {
+                    title: 'Test Page',
+                    slug: 'test-page',
+                    route: '/6.0/test-page',
+                    snippet: 'A test snippet',
+                    score: 1.0,
+                    version: '6.0'
+                }
+            ]
+        }
+        vi.mocked(axios.get).mockResolvedValue({ data: mockData })
+
+        const wrapper = mount(SearchComponent)
+        const searchInput = wrapper.find('input[autofocus]')
+        await searchInput.setValue('test')
+
+        // Flush the watcher and async call
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await wrapper.vm.$nextTick()
+
+        expect(axios.get).toHaveBeenCalledWith('/api/search', { params: { q: 'test' } })
+    })
+
+    it('shows no results message when query is long enough but no results returned', async () => {
+        const mockData = { count: 0, size: 10, page: 1, rows: [] }
+        vi.mocked(axios.get).mockResolvedValue({ data: mockData })
+
+        const wrapper = mount(SearchComponent)
+        const searchInput = wrapper.find('input[autofocus]')
+        await searchInput.setValue('xyz')
+
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.text()).toContain('No results found')
+    })
+
+    it('shows results list when results are returned', async () => {
+        const mockData = {
+            count: 2,
+            size: 10,
+            page: 1,
+            rows: [
+                {
+                    title: 'Getting Started',
+                    slug: 'getting-started',
+                    route: '/6.0/getting-started',
+                    snippet: 'Learn how to get started',
+                    score: 0.9,
+                    version: '6.0'
+                },
+                {
+                    title: 'Installation',
+                    slug: 'installation',
+                    route: '/6.0/installation',
+                    snippet: 'Install UserFrosting',
+                    score: 0.8,
+                    version: '6.0'
+                }
+            ]
+        }
+        vi.mocked(axios.get).mockResolvedValue({ data: mockData })
+
+        const wrapper = mount(SearchComponent)
+        const searchInput = wrapper.find('input[autofocus]')
+        await searchInput.setValue('start')
+
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await wrapper.vm.$nextTick()
+
+        const listItems = wrapper.findAll('li')
+        expect(listItems.length).toBe(2)
+        expect(wrapper.text()).toContain('Getting Started')
+        expect(wrapper.text()).toContain('Installation')
+    })
+})

vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
 
 // Get vite port from env, default to 3000
@@ -45,5 +45,13 @@ export default defineConfig({
     // not to prebundle them.
     optimizeDeps: {
         include: ['uikit', 'uikit/dist/js/uikit-icons']
+    },
+    test: {
+        environment: 'happy-dom',
+        coverage: {
+            provider: 'v8',
+            reporter: ['text', 'json', 'html', 'lcov'],
+            reportsDirectory: '../../_meta/frontend-coverage'
+        }
     }
 })