Pinia

Pinia est une bibliothèque de gestion d'état pour Vue.js 3. La gestion d'état consiste à partager des données entre plusieurs composants de manière centralisée.

Store

Pinia, pour gérer les états, utilise un store. Si un composant modifie une donnée du store, tous les autres composants qui utilisent cette donnée seront mis à jour. C'est comme si les composants étaient des "observateurs" du store.

Un store est composé de trois parties : l'état, les accesseurs et les actions.

• L'état (state) contient les données du store. C'est l'équivalent des data dans un composant.
• Les accesseurs (getters) sont similaires aux propriétés calculées d'un composant. Ils peuvent être utilisés, par exemple, dans les composants pour accéder aux données du store.
• Les actions sont similaires aux méthodes d'un composant. Elles peuvent modifier l'état du store (state).

Il peut y avoir plusieurs stores dans une application. Chaque store est défini dans un fichier séparé.

Théorie

• La théorie concernant Pinia se trouve dans le code exemple-pinia.
• Le site officiel de Pinia est aussi une bonne source d'information.

Les tests unitaires

• Voir les exemples et les explications dans le code exemple-pinia.
• La section Pinia : Testing stores du site officiel de Pinia est aussi une bonne source d'information.

Ci-dessous un résumé.

Installer la libraire pour les tests

npm i -D @pinia/testing

Créer l'instance de Pinia 🍍

import { useAuthStore } from '../../stores/authStore.js'
    ...
    const pinia = createTestingPinia({
        stubActions: false,
        createSpy: vi.fn
    })
        ...

Faut-il créer une instance de Pinia pour chacun des tests ?
Oui, car sinon les tests ne seront pas indépendants.

Utiliser l'instance de Pinia

Pour les composants qui utilisent un store, il faut utiliser l'instance pinia créée ci-dessus dans plugins. Exemple :

const { findByText } = render(NavigationBar, {
    global: {
        plugins: [pinia]
    }
})

Accès au store

L'accès au store se fait de la même manière que dans un composant. Exemple :

const authStore = useAuthStore()

Ajouter des données au store

On peut ajouter des données dans le store en utilisant la propriété initialState lors de la création de l'instance de Pinia. Exemple d'ajout de données dans l'état todos d'un store dont le id est todoStoreId :

const todos = [
    { id: 1, text: 'Imaginer des licornes volantes', done: false },
    { id: 2, text: 'Compter les moutons dans Minecraft', done: false },
    { id: 3, text: 'Chanter sous la douche en allemand', done: true }
]
const pinia = createTestingPinia({
    stubActions: false,
    createSpy: vi.fn,
    initialState: {
        todoStoreId: {
            todos: [...todos]
        }
    }
})

On peut aussi modifier les données dans le store directement en utilisant son instance. Exemple :

const authStore = useAuthStore()
authStore.user = { id: 1, name: 'John Doe' }

Attention
Si le composant exécute des actions asynchrones, il faut attendre que ces actions soient terminées avant de vérifier les résultats.