# Tests

Pour tester unitairement vos requĂȘtes et vos mutations Vue Apollo, vous pouvez faire des tests simples, ou bien tester avec un schĂ©ma GraphQL mockĂ©. Tous les exemples documentĂ©s utilisent Jest (opens new window) et vue-test-utils (opens new window).

# Tests simples

Pour tester une requĂȘte, vous pouvez simplement assigner de la donnĂ©e au composant et rgarder comment il est rendu grĂące aux snapshots Jest. Imaginons que vous ayez une requĂȘte pour rĂ©cupĂ©rer les hĂ©ros de Vue, vous pouvez ajouter une fausse liste avec un seul hĂ©ros :

test('affiche les hĂ©ros correctement avec la donnĂ©e requĂȘtĂ©e', () => {
  const wrapper = shallowMount(App, { localVue })
  wrapper.setData({
    allHeroes: [
      {
        id: 'un-identifiant',
        name: 'Evan You',
        image: 'https://pbs.twimg.com/profile_images/888432310504370176/mhoGA4uj_400x400.jpg',
        twitter: 'youyuxi',
        github: 'yyx990803',
      },
    ],
  })
  expect(wrapper.element).toMatchSnapshot()
})

Pour un simple test de mutation, vous devez vérifier que la méthode mutate d'$apollo a été appelée dans votre composant. Dans l'exemple qui suit, la mutation a été appelée dans la méthode addHero :

test('appelle la mutation Apollo dans la méthode `addHero`', () => {
  const mutate = jest.fn()
  const wrapper = mount(App, {
    localVue,
    mocks: {
      $apollo: {
        mutate,
      },
    },
  })
  wrapper.vm.addHero()
  expect(mutate).toBeCalled()
})

# Tester l'Ă©tat de chargement en mockant $apollo

Si vous souhaitez tester ce que votre composant affiche lorsque les rĂ©sultats de votre requĂȘte GraphQL sont encore en train de charger, vous pouvez Ă©galement mocker un Ă©tat de chargement dans les requĂȘtes Apollo respctives :

test('s\'affiche correctement lorsque allHeroes sont en train de charger', () => {
  const wrapper = mount(App, {
    mocks: {
      $apollo: {
        queries: {
          allHeroes: {
            loading: true,
          },
        },
      },
    },
  })

  expect(wrapper.element).toMatchSnapshot();
})

# Tester avec un schéma GraphQL mocké

Vous pouvez Ă©galement faire des tests plus complexes et plus en profondeur grĂące Ă  un schĂ©ma GraphQL mockĂ© (opens new window). Cette mĂ©thode n'inclut pas Apollo, mais vous laisse vĂ©rifier qu'une requĂȘte s'exĂ©cute correctement avec un schĂ©ma donnĂ©.

Pour cela, vous avez d'abord besoin d'un schéma :

const sourceSchema = `
  type VueHero {
    id: ID!
    name: String!
    image: String
    github: String
    twitter: String
  }

  input HeroInput {
    name: String!
    image: String
    github: String
    twitter: String
  }


  type Query {
    allHeroes: [VueHero]
  }

  type Mutation {
    addHero(hero: HeroInput!): VueHero!
    deleteHero(name: String!): Boolean
  }
`

Ensuite, il vous faut créer un schéma exécutable avec la méthode graphql-tools :

import { makeExecutableSchema } from 'graphql-tools'

// ...

const schema = makeExecutableSchema({
  typeDefs: sourceSchema,
})

Puis vous devez ajouter les fonctions mockées au schéma :

import { addMockFunctionsToSchema } from 'graphql-tools'

// ...

addMockFunctionsToSchema({
  schema,
})

SpcĂ©fiez la requĂȘte GraphQL :

const query = `
  query {
    allHeroes {
      id
      name
      twitter
      github
      image
    }
  }
`

Appelez la requĂȘte GraphQL dans le test, passez la rĂ©ponse comme donnĂ©e au composant, puis vĂ©rifiez que le rendu du composant correspond au snapshot :

graphql(schema, query).then(result => {
  wrapper.setData(result.data)
  expect(wrapper.element).toMatchSnapshot()
})

Dans ce cas, tous les champs de types string seront Ă©gales Ă  "Hello World" et tous ceux de type number seront nĂ©gatifs. Si vous souhaitez une rĂ©ponse plus rĂ©aliste, vous devez spĂ©cifier les rĂ©solveurs pour chaque requĂȘte :

const resolvers = {
  Query: {
    allHeroes: () => [
      {
        id: '-pBE1JAyz',
        name: 'Evan You',
        image:
          'https://pbs.twimg.com/profile_images/888432310504370176/mhoGA4uj_400x400.jpg',
        twitter: 'youyuxi',
        github: 'yyx990803',
      },
    ],
  },
}

Ensuite, vous devez ajouter des résolveurs à votre schéma exécutable et assigner la propriété preserveResolvers à true lorsque vous ajoutez les fonctions mockées :

const schema = makeExecutableSchema({
  typeDefs: sourceSchema,
  resolvers,
})

addMockFunctionsToSchema({
  schema,
  preserveResolvers: true,
})

Vous pouvez tester les mutations de la mĂȘme façon.


DerniĂšre mise Ă  jour: 11/02/2021 Ă  11:08:30