Testing & Debugging

We are currently in the process of implementing the testing workflow for this project. This document provides a general overview of the testing strategy and debugging tools that will be used.

This project includes unit and integration testing using Vitest, along with debugging tools integrated into the development workflow. Testing ensures the stability of components, API integrations, and state management.

Technology Stack

• Vitest – Unit and integration testing framework for Vue 3.
• Vue Test Utils – Provides utilities for testing Vue components.
• Pinia Testing Utilities – Mocking and testing state management.
• Vue DevTools – Debugging Vue components and Pinia state.

Testing Structure

Test files are located alongside the respective components or inside a tests/ directory.

📂 tests
 ┣ 📜 components.test.ts   # Unit tests for Vue components
 ┣ 📜 store.test.ts        # Pinia store tests
 ┣ 📜 api.test.ts          # API integration tests

1. Component Testing

Example: Testing a Vue Component

import { mount } from '@vue/test-utils';
import BaseSidebarComponent from '@/components/Base/BaseSidebarComponent.vue';

describe('BaseSidebarComponent', () => {
  it('renders the sidebar correctly', () => {
    const wrapper = mount(BaseSidebarComponent);
    expect(wrapper.exists()).toBe(true);
  });
});

---

2. Store Testing

Example: Testing Pinia Store

import { setActivePinia, createPinia } from 'pinia';
import { useMapStore } from '@/store/map';

describe('Map Store', () => {
  beforeEach(() => {
    setActivePinia(createPinia());
  });

  it('updates the zoom level', () => {
    const mapStore = useMapStore();
    mapStore.setZoom(12);
    expect(mapStore.zoom).toBe(12);
  });
});

---

3. API Testing

Example: Mocking API Calls

import { vi } from 'vitest';
import { getActiveCampaigns } from '@/store/participation';

global.fetch = vi.fn(() => Promise.resolve({
  json: () => Promise.resolve([{ id: 1, name: 'Campaign 1' }])
}));

describe('API Calls', () => {
  it('fetches active campaigns', async () => {
    const campaigns = await getActiveCampaigns();
    expect(campaigns.length).toBe(1);
  });
});

---

4. Debugging Tools

Using Vue DevTools

• Inspect Vue components and their state.
• View and modify Pinia store data in real-time.

Logging API Responses

To debug API responses, log data in the console before processing:

async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log('API Response:', data);
}

Common Debugging Issues

• Blank Component Output? Ensure props are passed correctly.
• State Not Updating? Check if mutations are triggering properly.
• API Errors? Log responses and verify request payloads.

For detailed testing strategies, refer to Vitest and Vue Test Utils documentation.