Introduction

En ce qui concerne les tests de bout en bout, le contrôle des dépendances externes peut améliorer considérablement la fiabilité et la rapidité de vos tests. Cypress, un framework de test Web moderne, offre de puissantes fonctionnalités de simulation et de stubbing des requêtes HTTP, vous permettant de simuler différents scénarios sans recourir aux services backend réels. Dans cet article, nous explorerons comment tirer parti de cy.intercept() de Cypress pour moquer et stubbing les appels d'API afin de rendre vos tests plus robustes et efficaces.

Pourquoi se moquer et stubbing ?

Les requêtes HTTP moqueuses et stubbing dans Cypress offrent plusieurs avantages :

1. Isolement : Testez le frontend indépendamment du backend, en vous assurant que vos tests ne sont pas affectés par des modifications ou des pannes du backend.
2. Vitesse : Réduisez le temps d'exécution des tests en évitant les appels réseau réels.
3. Fiabilité : Créez des conditions de test prévisibles et cohérentes en simulant diverses réponses et cas extrêmes.
4. Flexibilité : Testez différents scénarios tels que des erreurs, des réponses lentes et différentes charges utiles de données sans avoir besoin de modifications du backend.

Configuration de Cyprès

Si vous n'avez pas encore installé Cypress, vous pouvez le configurer avec les commandes suivantes :

npm install cypress --save-dev
npx cypress open

Assurez-vous que la structure de base du projet Cypress est prête avant de continuer.

Utiliser cy.intercept()

La commande cy.intercept() dans Cypress vous permet d'intercepter et de modifier les requêtes et réponses réseau. Elle remplace la commande obsolète cy.route() et offre plus de flexibilité et de puissance.

Exemple de base
Commençons par un exemple de base dans lequel nous nous moquons d'une réponse API :

// cypress/integration/mock_basic.spec.js
describe('Mocking API Responses', () => {
  it('should display mocked data', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 200,
      body: [
        { id: 1, title: 'Mocked Todo 1', completed: false },
        { id: 2, title: 'Mocked Todo 2', completed: true }
      ]
    }).as('getTodos');

    cy.visit('/todos');
    cy.wait('@getTodos');

    cy.get('.todo').should('have.length', 2);
    cy.get('.todo').first().should('contain.text', 'Mocked Todo 1');
  });
});

Dans cet exemple, nous interceptons une requête GET vers /api/todos et fournissons une réponse simulée. as('getTodos') attribue un alias à la requête interceptée, ce qui facilite la référence dans vos tests.

Scénarios moqueurs avancés

Simulation d'erreurs
Vous pouvez simuler différents statuts d'erreur HTTP pour tester la façon dont votre application les gère :

// cypress/integration/mock_errors.spec.js
describe('Simulating API Errors', () => {
  it('should display error message on 500 response', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 500,
      body: { error: 'Internal Server Error' }
    }).as('getTodosError');

    cy.visit('/todos');
    cy.wait('@getTodosError');

    cy.get('.error-message').should('contain.text', 'Failed to load todos');
  });
});

Retarder les réponses
Pour tester la manière dont votre application gère les réponses réseau lentes, vous pouvez introduire un délai :

// cypress/integration/mock_delays.spec.js
describe('Simulating Slow Responses', () => {
  it('should display loading indicator during slow response', () => {
    cy.intercept('GET', '/api/todos', (req) => {
      req.reply((res) => {
        res.delay(2000); // 2-second delay
        res.send({ body: [] });
      });
    }).as('getTodosSlow');

    cy.visit('/todos');
    cy.get('.loading').should('be.visible');
    cy.wait('@getTodosSlow');
    cy.get('.loading').should('not.exist');
  });
});

Scénarios spécifiques moqueurs

Moquerie conditionnelle
Vous pouvez simuler les réponses de manière conditionnelle en fonction du corps ou des en-têtes de la demande :

// cypress/integration/mock_conditional.spec.js
describe('Conditional Mocking', () => {
  it('should mock response based on request body', () => {
    cy.intercept('POST', '/api/todos', (req) => {
      if (req.body.title === 'Special Todo') {
        req.reply({
          statusCode: 201,
          body: { id: 999, title: 'Special Todo', completed: false }
        });
      }
    }).as('createTodo');

    cy.visit('/todos');
    cy.get('input[name="title"]').type('Special Todo');
    cy.get('button[type="submit"]').click();

    cy.wait('@createTodo');
    cy.get('.todo').should('contain.text', 'Special Todo');
  });
});

Meilleures pratiques en matière de moquerie et de stubbing

1. Utiliser des alias : Attribuez toujours des alias aux requêtes interceptées à l'aide de .as(). Cela rend vos tests plus lisibles et plus faciles à déboguer.
2. Combiner avec des appareils : Stockez des données fictives volumineuses dans des fichiers d'appareils pour une meilleure maintenabilité et une meilleure lisibilité. Utilisez cy.fixture() pour charger les appareils.
3. Évitez les moqueries excessives : Moquez-vous uniquement de ce qui est nécessaire pour le test. Les moqueries excessives peuvent conduire à des tests qui ne reflètent pas les scénarios du monde réel.
4. Testez les appels d'API réels : Testez périodiquement le backend réel pour vous assurer que votre application fonctionne correctement avec les données réelles.

Conclusion

La moquerie et le stubbing dans Cypress sont des techniques puissantes qui peuvent rendre vos tests plus rapides, plus fiables et plus faciles à maintenir. En interceptant les requêtes HTTP et en fournissant des réponses personnalisées, vous pouvez créer un large éventail de scénarios de test sans recourir à des services externes. Suivez les meilleures pratiques et les exemples fournis dans ce guide pour maîtriser le mocking et le stubbing dans vos tests Cypress.

Bon test !