Dramaturge : Requêtes GraphQL dans un utilitaire pour des tests efficaces

Lorsque vous travaillez avec des frameworks de tests de bout en bout comme Playwright, se moquer des requêtes GraphQL peut améliorer considérablement la fiabilité et la vitesse des tests. Inspiré par l'excellent article de blog de Jay Freestone, Stubbing GraphQL Requests in Playwright, j'ai décidé de créer une fonction utilitaire réutilisable qui permet une interception flexible des requêtes GraphQL et un stubbing des réponses.

Dans cet article, je vais vous expliquer mon implémentation de l'utilitaire interceptGQL et vous montrer comment il peut être utilisé avec Playwright pour simuler les réponses du serveur pour les requêtes et les mutations GraphQL.

L'utilitaire interceptGQL : comment ça marche

L'utilitaire interceptGQL enregistre un gestionnaire de route pour toutes les requêtes GraphQL adressées à votre backend, interceptant des opérations spécifiques en fonction de leur nom d'opération. Vous pouvez définir comment chaque opération doit répondre et valider les variables transmises dans la requête.

Voici la mise en œuvre :

import { test as baseTest, Page, Route } from '@playwright/test';
import { namedOperations } from '../../src/graphql/autogenerate/operations';

type CalledWith = Record<string, unknown>;

type Operations = keyof (typeof namedOperations)['Query'] | keyof (typeof namedOperations)['Mutation'];

type InterceptConfig = {
  operationName: Operations | string;
  res: Record<string, unknown>;
};

type InterceptedPayloads = {
  [operationName: string]: CalledWith[];
};

export async function interceptGQL(
  page: Page,
  interceptConfigs: InterceptConfig[]
): Promise<{ reqs: InterceptedPayloads }> {
  const reqs: InterceptedPayloads = {};

  interceptConfigs.forEach(config => {
    reqs[config.operationName] = [];
  });

  await page.route('**/graphql', (route: Route) => {
    const req = route.request().postDataJSON();
    const operationConfig = interceptConfigs.find(config => config.operationName === req.operationName);

    if (!operationConfig) {
      return route.continue();
    }

    reqs[req.operationName].push(req.variables);

    return route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ data: operationConfig.res }),
    });
  });

  return { reqs };
}

export const test = baseTest.extend<{ interceptGQL: typeof interceptGQL }>({
  interceptGQL: async ({ browser }, use) => {
    await use(interceptGQL);
  },
});

Exemple : tester un tableau de bord de gestion des tâches

Pour démontrer l’utilitaire en action, utilisons-le pour tester un tableau de bord de gestion des tâches. Nous allons intercepter une requête GraphQL (GetTasks) et nous moquer de sa réponse.

import { expect } from '@playwright/test';
import { namedOperations } from '../../../src/graphql/autogenerate/operations';
import { test } from '../../fixtures';
import { GetTasksMock } from './mocks/GetTasks.mock';

test.describe('Task Management Dashboard', () => {
  test.beforeEach(async ({ page, interceptGQL }) => {
    await page.goto('/tasks');

    await interceptGQL(page, [
      {
        operationName: namedOperations.Query['GetTasks'],
        res: GetTasksMock,
      },
    ]);
  });

  test('Should render a list of tasks', async ({ page }) => {
    const taskDashboardTitle = page.getByTestId('task-dashboard-title');
    await expect(taskDashboardTitle).toHaveText('Task Dashboard');

    const firstTaskTitle = page.getByTestId('0-task-title');
    await expect(firstTaskTitle).toHaveText('Implement authentication flow');

    const firstTaskStatus = page.getByTestId('0-task-status');
    await expect(firstTaskStatus).toHaveText('In Progress');
  });

  test('Should navigate to task details page when a task is clicked', async ({ page }) => {
    await page.getByTestId('0-task-title').click();

    await expect(page.getByTestId('task-details-header')).toHaveText('Task Details');
    await expect(page.getByTestId('task-details-title')).toHaveText('Implement authentication flow');
  });
});

Que se passe-t-il ici ?

1. Interception des requêtes : L'utilitaire interceptGQL intercepte la requête GetTasks et renvoie les données fictives définies dans GetTasksMock.
2. Réponses moqueuses : La réponse simulée est servie au lieu d'atteindre le backend réel.
3. Validation des variables : L'utilitaire stocke également les variables GraphQL envoyées avec la requête, ce qui peut être utile pour tester les appels d'API de manière isolée.

Pourquoi utiliser cette approche ?

1. Vitesse améliorée : En évitant les requêtes réseau réelles, les tests s'exécutent plus rapidement et de manière plus fiable.
2. Données de test simplifiées : Vous contrôlez les réponses, ce qui facilite le test des cas extrêmes et des différents états d'application.
3. Validation des appels API : En capturant les variables envoyées avec la requête, vous pouvez vous assurer que le frontend appelle le backend avec les paramètres corrects.

Cette implémentation et cette approche ont été inspirées par l'excellent article de blog de Jay Freestone, Stubbing GraphQL Requests in Playwright. Son message a fourni une base solide pour créer l'utilitaire interceptGQL.

En incorporant cet utilitaire dans votre suite de tests Playwright, vous pouvez facilement simuler les requêtes et les mutations GraphQL, améliorant ainsi la vitesse et la fiabilité des tests tout en simplifiant les scénarios complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!