Mais à quoi servent les tests ?

Imaginez que vous préparez un gâteau au chocolat et que ce n'est qu'une fois prêt que vous réalisez que vous avez oublié d'ajouter du sucre à la pâte, et maintenant ?! Pensez à votre application comme à cette pâte à gâteau, sans la tester, elle peut même bien fonctionner au début, mais à un moment donné, pendant l'essai, quelque chose peut ne pas se passer comme prévu. Et qui garantit que ces problèmes n'arriveront pas ?!

Sur la base de cet exemple, les tests sont la preuve de la masse de votre code, ils garantissent que tout est au bon endroit, même lorsque vous décidez d'ajouter de nouvelles couches ou une couverture de fonctionnalités.

En général, les tests automatisés sont essentiellement des codes conçus pour tester d'autres codes, garantissant ainsi que l'application fonctionne avec qualité.
La qualité étant le maître mot, il est important qu'au sein d'une équipe d'ingénierie et de produit chacun soit conscient de l'importance et de la valeur que génèrent les tests, afin qu'ils puissent être intégrés de manière naturelle dans les livraisons.

Pourquoi devrais-je tester ?

J'apporte ici quelques raisons pour vous convaincre de commencer à implémenter des tests dans votre code dès maintenant :

Code de sécurité : Les tests permettent de garantir que votre code fonctionnera sans bugs, même après avoir ajouté de nouvelles fonctionnalités ou apporté des modifications.

Modifications sans crainte : La maintenance des applications sera beaucoup plus sûre car vous pourrez refactoriser ou mettre à jour votre code sans vous soucier de casser quelque chose car les tests vous avertissent si quelque chose ne va pas.

Corrections plus rapides : Grâce aux tests automatisés, vous pourrez corriger les problèmes plus facilement, ce qui vous fera gagner beaucoup plus de temps

Moins de surprises lors du déploiement : Pouvez-vous imaginer avoir juste effectué le déploiement et déjà recevoir un appel d'utilisateurs avec une erreur sur quelque chose qui aurait pu être prédit ?! Les tests viennent justement aider à cette prévention

Vous aider, vous et votre collègue QA : Savez-vous quand vous avez terminé cette fonctionnalité et que vous la transmettez au QA pour test et il vous rend un rapport avec 357 choses à corriger ? Ce problème sera également réduit puisque vous aurez prédit la plupart des erreurs qu'il rencontrerait probablement

Quels sont les types de tests ?

Il existe de nombreux types de tests à développer dans le front-end, mais aujourd'hui je vais me concentrer sur trois d'entre eux : les tests d'interface utilisateur (UI), les tests fonctionnels (de bout en bout) et les tests de validation et pour Pour illustrer chacun d'eux, je vais créer des tests pour un simple écran de connexion dans une application React.js à l'aide de Testing Library.

Tests d'interface utilisateur (UI)

Les tests d'interface utilisateur (UI) vérifient si les composants sont rendus comme prévu et, en plus d'être basés sur le rendu, ils vérifient l'existence d'éléments importants, tels que les champs de formulaire, les boutons et les étiquettes.

it('should render login form', () => {
  render();
  expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
  expect(screen.getByLabelText(/senha/i)).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
});

Ce qui est testé : Ce test garantit que le composant LoginForm restitue les éléments essentiels de l'interface : les champs e-mail et mot de passe et le bouton de connexion. screen.getByLabelText recherche les éléments par leurs étiquettes associées et screen.getByRole recherche le bouton par son texte et sa fonction.

Tests fonctionnels (de bout en bout)

Tests fonctionnels ou tests de bout en bout (E2E), vérifient l'ensemble du fonctionnement de l'application du point de vue de l'utilisateur, simulant des interactions réelles avec l'interface, comme remplir des formulaires et cliquer sur des boutons, et évaluer si le l'application répond aux interactions comme prévu.

it('should call onLogin with the username and password when submitted', async () => {
  const handleLogin = jest.fn();
  render();

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: '[email protected]' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123456' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledWith({
      email: '[email protected]',
      password: '123456'
    })
  })

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledTimes(1)
  })

});

Ce qui est testé : Ici, l'interaction de l'utilisateur avec le formulaire de connexion est simulée en remplissant les champs d'e-mail et de mot de passe, puis en cliquant sur le bouton de connexion. Le test vérifie également que la fonction onLogin est appelée avec les données correctes et qu'elle a été appelée exactement une fois.

Tests de validation

Les tests de validation garantissent que l'application valide les entrées non valides et affiche les messages d'erreur appropriés. Ces tests sont importants pour vérifier que le formulaire gère efficacement les données incorrectes et fournit un retour d'information adéquat à l'utilisateur.

test('should show error messages for invalid inputs', async () => {
  render();

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: 'invalid-email' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  expect(await screen.findByText(/Email inválido/i)).toBeInTheDocument();
  expect(await screen.findByText(/A senha deve ter pelo menos 6 caracteres/i)).toBeInTheDocument();
});

Ce qui est testé : Ici, nous vérifions si le formulaire affiche des messages d'erreur appropriés lorsque les champs e-mail et mot de passe sont remplis avec des données invalides. Nous simulons la saisie de valeurs incorrectes en vérifiant si les messages d'erreur attendus sont affichés.

Comprenez-vous pourquoi vous devriez tester ?

Dans un monde où l'expérience utilisateur et la qualité des logiciels sont une priorité, les tests front-end jouent un rôle clé pour garantir que nos applications fonctionnent non seulement correctement, mais offrent également une expérience fluide et sans bug.

En intégrant ces tests dans votre flux de développement, vous évitez non seulement les problèmes avant qu'ils ne deviennent des maux de tête majeurs, mais vous construisez également une base de code plus fiable et plus résiliente. Chaque type de test comporte une couche de vérification différente et, ensemble, ils forment une vaste couche de sécurité qui permet de garantir la qualité et la fonctionnalité de votre application.

N'oubliez pas que tout comme dans une recette de gâteau où chaque ingrédient a son rôle crucial, chaque type de test a sa fonction spécifique dans le processus d'élaboration et développer une combinaison équilibrée de tests va au-delà d'une pratique recommandée, c'est une nécessité pour tout équipe qui s'efforce de fournir des logiciels de haute qualité.

Ainsi, la prochaine fois que vous développerez une nouvelle fonctionnalité ou corrigerez un bug, considérez les tests comme vos alliés indispensables. Ils sont la clé d’une application plus robuste, fiable et surtout plus satisfaisante pour ses utilisateurs.