Tester les props et les émissions d’événements

Tester les props

Les props sont la manière dont les données sont passées d’un composant parent à un composant enfant. Il est important de tester comment votre composant réagit aux différentes valeurs de props.

Passage de props

import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import UserCard from '@/components/UserCard.vue'

describe('UserCard.vue', () => {
  it('renders user information correctly', () => {
    const user = {
      id: 1,
      name: 'Alice Johnson',
      email: '[email protected]',
      isAdmin: true
    }

    const wrapper = mount(UserCard, {
      props: {
        user,
        showEmail: true
      }
    })

    // Vérifier que les informations de l'utilisateur sont correctement affichées
    expect(wrapper.text()).toContain('Alice Johnson')
    expect(wrapper.text()).toContain('[email protected]')
    expect(wrapper.find('.admin-badge').exists()).toBe(true)
  })

  it('does not show email when showEmail prop is false', () => {
    const user = {
      id: 1,
      name: 'Alice Johnson',
      email: '[email protected]'
    }

    const wrapper = mount(UserCard, {
      props: {
        user,
        showEmail: false
      }
    })

    expect(wrapper.text()).toContain('Alice Johnson')
    expect(wrapper.text()).not.toContain('[email protected]')
  })
})

Tester les validations de props

Si votre composant utilise des validations de props, vous pouvez également tester que des avertissements sont émis lorsque des props invalides sont passées:

import { mount } from '@vue/test-utils'
import { describe, it, expect, vi } from 'vitest'
import NumericInput from '@/components/NumericInput.vue'

describe('NumericInput.vue', () => {
  it('warns about invalid props in development mode', () => {
    // Espionner console.warn
    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})

    // Définir NODE_ENV à 'development' pour activer les avertissements
    const originalNodeEnv = process.env.NODE_ENV
    process.env.NODE_ENV = 'development'

    // Monter le composant avec une prop invalide
    mount(NumericInput, {
      props: {
        value: 'not-a-number' // Devrait être un nombre
      }
    })

    // Vérifier qu'un avertissement a été émis
    expect(warnSpy).toHaveBeenCalled()
    expect(warnSpy.mock.calls[0][0]).toContain('Invalid prop')

    // Restaurer l'environnement et console.warn
    process.env.NODE_ENV = originalNodeEnv
    warnSpy.mockRestore()
  })
})

Tester les émissions d’événements (emits)

Les composants Vue peuvent émettre des événements que les composants parents peuvent écouter. Tester ces émissions est essentiel pour vérifier le bon comportement des composants.

Vérifier les événements émis

import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import SearchInput from '@/components/SearchInput.vue'

describe('SearchInput.vue', () => {
  it('emits search event when form is submitted', async () => {
    const wrapper = mount(SearchInput)

    // Simuler la saisie d'un terme de recherche
    const input = wrapper.find('input')
    await input.setValue('test query')

    // Simuler la soumission du formulaire
    await wrapper.find('form').trigger('submit')

    // Vérifier que l'événement a été émis avec la bonne valeur
    expect(wrapper.emitted()).toHaveProperty('search')
    expect(wrapper.emitted().search[0]).toEqual(['test query'])
  })

  it('emits input event when text changes', async () => {
    const wrapper = mount(SearchInput)

    const input = wrapper.find('input')
    await input.setValue('t')
    await input.setValue('te')
    await input.setValue('tes')
    await input.setValue('test')

    // Vérifier que plusieurs événements input ont été émis
    expect(wrapper.emitted()).toHaveProperty('input')
    expect(wrapper.emitted().input.length).toBe(4)
    expect(wrapper.emitted().input[3]).toEqual(['test'])
  })
})

Simuler l’interaction de l’utilisateur

Pour tester les événements qui sont émis en réponse à des interactions utilisateur, vous pouvez utiliser les méthodes trigger et setValue:

import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import RatingComponent from '@/components/RatingComponent.vue'

describe('RatingComponent.vue', () => {
  it('emits rating-changed event when star is clicked', async () => {
    const wrapper = mount(RatingComponent)

    // Simuler un clic sur la troisième étoile
    await wrapper.findAll('.star')[2].trigger('click')

    // Vérifier que l'événement a été émis avec la valeur 3
    expect(wrapper.emitted()).toHaveProperty('rating-changed')
    expect(wrapper.emitted()['rating-changed'][0]).toEqual([3])
  })

  it('does not emit event when disabled', async () => {
    const wrapper = mount(RatingComponent, {
      props: {
        disabled: true
      }
    })

    // Simuler un clic sur une étoile
    await wrapper.find('.star').trigger('click')

    // Vérifier qu'aucun événement n'a été émis
    expect(wrapper.emitted()['rating-changed']).toBeUndefined()
  })
})

Tester les props dynamiques et les événements ensemble

Souvent, les composants utilisent à la fois des props et des émissions d’événements pour communiquer avec leur parent. Voici comment tester ce comportement:

import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import Counter from '@/components/Counter.vue'

describe('Counter.vue', () => {
  it('increments count and emits update event', async () => {
    const wrapper = mount(Counter, {
      props: {
        initialCount: 5
      }
    })

    // Vérifier que la valeur initiale est affichée
    expect(wrapper.text()).toContain('5')

    // Cliquer sur le bouton d'incrémentation
    await wrapper.find('.increment-button').trigger('click')

    // Vérifier que la valeur affichée a changé
    expect(wrapper.text()).toContain('6')

    // Vérifier que l'événement a été émis avec la nouvelle valeur
    expect(wrapper.emitted()).toHaveProperty('update:count')
    expect(wrapper.emitted()['update:count'][0]).toEqual([6])
  })
})