Dramatiker: GraphQL-Anfragen in einem Dienstprogramm für effizientes Testen

Bei der Arbeit mit End-to-End-Test-Frameworks wie Playwright kann das Verspotten von GraphQL-Anfragen die Testzuverlässigkeit und -geschwindigkeit erheblich verbessern. Inspiriert von Jay Freestones hervorragendem Blogbeitrag Stubbing GraphQL Requests in Playwright habe ich beschlossen, eine wiederverwendbare Dienstprogrammfunktion zu entwickeln, die ein flexibles Abfangen von GraphQL-Anfragen und Stubbing von Antworten ermöglicht.

In diesem Beitrag führe ich Sie durch meine Implementierung des Dienstprogramms interceptGQL und zeige, wie es mit Playwright verwendet werden kann, um Serverantworten für GraphQL-Abfragen und -Mutationen zu simulieren.

Das interceptGQL-Dienstprogramm: So funktioniert es

Das Dienstprogramm interceptGQL registriert einen Routenhandler für alle GraphQL-Anfragen an Ihr Backend und fängt bestimmte Vorgänge basierend auf ihrem Operationsnamen ab. Sie können definieren, wie jede Operation reagieren und die in der Anfrage übergebenen Variablen validieren soll.

Hier ist die Implementierung:

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);
  },
});

Beispiel: Testen eines Aufgabenverwaltungs-Dashboards

Um das Dienstprogramm in Aktion zu demonstrieren, testen wir damit ein Task-Management-Dashboard. Wir fangen eine GraphQL-Abfrage (GetTasks) ab und verspotten ihre Antwort.

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');
  });
});

Was passiert hier?

1. Anfragen abfangen: Das Dienstprogramm interceptGQL fängt die GetTasks-Abfrage ab und gibt die in GetTasksMock definierten Scheindaten zurück.
2. Verspottete Antworten: Die simulierte Antwort wird bereitgestellt, anstatt das eigentliche Backend zu erreichen.
3. Variablen validieren: Das Dienstprogramm speichert auch die mit der Anfrage gesendeten GraphQL-Variablen, was zum isolierten Testen von API-Aufrufen nützlich sein kann.

Warum diesen Ansatz verwenden?

1. Verbesserte Geschwindigkeit: Durch die Vermeidung tatsächlicher Netzwerkanfragen werden Tests schneller und zuverlässiger ausgeführt.
2. Vereinfachte Testdaten:Sie steuern die Antworten und erleichtern so das Testen von Randfällen und verschiedenen Anwendungszuständen.
3. Validierung von API-Aufrufen: Durch die Erfassung der mit der Anfrage gesendeten Variablen können Sie sicherstellen, dass das Frontend das Backend mit den richtigen Parametern aufruft.

Diese Implementierung und dieser Ansatz wurden von Jay Freestones ausgezeichnetem Blogbeitrag Stubbing GraphQL Requests in Playwright inspiriert. Sein Beitrag lieferte eine solide Grundlage für den Aufbau des Dienstprogramms interceptGQL.

Durch die Integration dieses Dienstprogramms in Ihre Playwright-Testsuite können Sie GraphQL-Abfragen und -Mutationen ganz einfach nachahmen, wodurch die Testgeschwindigkeit und -zuverlässigkeit verbessert und gleichzeitig komplexe Szenarien vereinfacht werden.

Das obige ist der detaillierte Inhalt vonDramatiker: GraphQL-Anfragen in einem Dienstprogramm für effizientes Testen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!