Bienvenue dans ce workshop dédié à Cypress! Nous espérons qu'il vous plaira!

Ce que vous allez apprendre

Pendant le workshop

N'hésitez pas à:

Pré-requis

Télécharger le repo

git clone  https://github.com/rbung/CypressWorkshop.git

Installer le projet

cd CypressWorkshop
npm install

VĂ©rifier que le tout fonctionne

npm start

npx cypress open

interface accueil cypress

premier test

Vous ĂȘtes maintenant prĂȘt! đŸ’Ș

Dans ce test, nous allons tester les principales fonctionnalités proposées par le site. L'objectif est de balayer l'ensemble des pages et de vérifier qu'elles sont correctement affichées. Nous allons aussi valider que les comportements de base fonctionnent correctement. A l'issue de cet exercice, vous serez familier avec les commandes de bases de Cypress: cy.visit, cy.get, cy.title, should, click, etc.

Dans ce test, nous allons tester la fonctionnalité d'authentification de maniÚre exhaustive.

Dans la premiĂšre partie du test (celle concernant la partie non authentifiĂ©), on peut constater que les assertions sont trĂšs fines. Lorsqu'on lance le test, celui-ci Ă©choue: l'article n'existe pas cĂŽtĂ© serveur (il a pu ĂȘtre modifiĂ©/supprimĂ©).

Pour s'afficher, la page article lance 2 requĂȘtes vers le serveur : une pour rĂ©cupĂ©rer les informations relatives Ă  l'article et une autre pour rĂ©cupĂ©rer les commentaires liĂ©s Ă  cet article.

Nous allons utiliser les commandes cy.server et cy.route pour contrÎler les appels réseaux qui nous intéressent!

Une fois le premier test passé. Nous allons utilisé la commande cy.route en mode "pro" dans les autres tests pour simuler des erreurs (404, 500) ou avoir des temps de réponses différents et ainsi pouvoir facilement voir comment réagit notre site sur des cas limites.

Dans la deuxiĂšme partie du test, nous devons ĂȘtre authentifiĂ©. La fonctionnalitĂ© de login est importante dans notre site. Elle peut ĂȘtre aussi utilisĂ©e pour afficher la page de settings par exemple. Pour mutualiser du code Ă  travers les diffĂ©rents tests, nous allons dĂ©velopper une custom command qui nous permettra de nous authentifier facilement dans nos tests.

Si reprendre le code que l'on a vu lors dans notre test de la page login peut ĂȘtre tentant, ce n'est cependant pas la mĂ©thode la plus efficace! PlutĂŽt que d'utiliser l'interface pour s'authentifier, nous allons le faire de maniĂšre programmatique! đŸ‘šâ€đŸ’»

Dans le fichier cypress/support/commands.js, la commande login est dĂ©jĂ  dĂ©clarĂ©e pour vous. Utiliser la commande cy.request pour faire une requĂȘte POST sur le endpoint d'authentification https://docs.cypress.io/api/commands/request.html puis utiliser la rĂ©ponse pour rĂ©cupĂ©rer le token et le positionner dans le local storage pour ĂȘtre authentifiĂ© applicativement!

window.localStorage.setItem("jwt", token);

Vous ĂȘtes arrivĂ©s jusque lĂ  dans le temps imparti, bravo! 🎉

Si vous avez encore du temps, nous pouvons voir les sujets suivants:

  1. La CICD
  2. Test unitaire de composant

Utiliser Cypress en local avec une interface graphique, c'est bien. Utiliser nos tests dans le cadre d'une intégration continue, c'est mieux! Nous allons découvrir comment exécuter nos tests en mode headless, utiliser le dashboard service de Cypress et une intégration continue sur le cloud: CircleCI.

Le mode headless

La commande run de Cypress permet de lancer tout nos tests en mode headless (c'est-Ă -dire, sans avoir besoin d'interface graphique).

npx cypress run

Enregistrer vos exécutions de tests

Avec l'option record, nous allons pouvoir enregistrer différentes exécutions:

Un projectId sera dĂ©fini et sera automatiquement ajoutĂ© Ă  votre fichier de configuration Cypress cypress.json 👌. Pensez Ă  commitĂ© ce fichier.

Une ligne de commande cypress run sera affichĂ© avec le paramĂštre key positionnĂ©. Prenez cette ligne de commande et exĂ©cutez-la dans votre terminal: votre test est en train d'ĂȘtre enregistrĂ©!

CICD sur le cloud

Dans cette partie, nous allons utiliser CircleCI. Cypress peut Ă©videmment s'interfacer avec de nombreuses solutions de CI (voir les exemples). Cependant, la tĂąche est plus facile avec CircleCI grĂące Ă  l'orbe Cypress !

  1. Créez un compte sur CircleCI
  2. Pushez le code du projet sur un repository de votre compte Github
  3. Dans CircleCI, déclarez votre projet fraichement créé (dans la partie Add projects)
  4. Pensez à positionner la variable d'environnement CYPRESS_RECORD_KEY avec la clé qui a été généré en 1Úre partie
  5. Lancer un build (via CircleCI ou en poussant du code votre repository)
  6. Une fois le build achevé, allez dans le dashboard service et regardez les différents résultats des tests ainsi que leur temps d'exécution.

Comment ça marche ?

Dans ce test, nous allons tester un composant de maniÚre isolé. Pour notre exemple nous allons tester le composant Banner.

import React from "react";

const Banner = ({ appName, token }) => {
  if (token) {
    return null;
  }
  return (
    <div className="banner">
      <div className="container">
        <h1 className="logo-font">{appName.toLowerCase()}</h1>
        <p>A place to share your knowledge.</p>
      </div>
    </div>
  );
};

export default Banner;

L'application Ă©tant en React, nous allons utiliser le plugin cypress-react-unit-test

Nous espérons que vous avez apprécié ce workshop et que vous allez trÚs vite utiliser Cypress!

Feedback

feedback bdxio

https://openfeedback.io/3BQH3sLpx0EfLHHC7Wng/2019-11-15/33

Gagnez un tshirt Cypress!

Remplissez le questionnaire: https://link.cypress.io/rodolphe-f

Nous contacter

Sur Twitter