Penulis drama: Permintaan GraphQL dalam Utiliti untuk Ujian Cekap

Apabila bekerja dengan rangka kerja ujian hujung ke hujung seperti Penulis Drama, permintaan GraphQL yang mengejek boleh meningkatkan kebolehpercayaan dan kelajuan ujian dengan ketara. Diilhamkan oleh catatan blog Jay Freestone yang sangat baik, Stubbing GraphQL Requests dalam Playwright, saya memutuskan untuk membina fungsi utiliti boleh guna semula yang membolehkan pemintasan permintaan GraphQL yang fleksibel dan stubbing respons.

Dalam siaran ini, saya akan membimbing anda melalui pelaksanaan utiliti interceptGQL saya dan menunjukkan cara ia boleh digunakan dengan Playwright untuk mengejek respons pelayan untuk pertanyaan dan mutasi GraphQL.

Utiliti interceptGQL: Cara Ia Berfungsi

Utiliti interceptGQL mendaftarkan pengendali laluan untuk semua permintaan GraphQL ke bahagian belakang anda, memintas operasi tertentu berdasarkan operationName mereka. Anda boleh menentukan cara setiap operasi harus bertindak balas dan mengesahkan pembolehubah yang diluluskan dalam permintaan.

Inilah pelaksanaannya:

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

Contoh: Menguji Papan Pemuka Pengurusan Tugas

Untuk menunjukkan utiliti dalam tindakan, mari gunakannya untuk menguji Papan Pemuka Pengurusan Tugas. Kami akan memintas pertanyaan GraphQL (GetTasks) dan mengejek responsnya.

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

Apa Yang Berlaku Di Sini?

1. Permintaan Memintas: Utiliti interceptGQL memintas pertanyaan GetTasks dan mengembalikan data olok-olok yang ditakrifkan dalam GetTasksMock.
2. Balasan Mengejek: Balasan yang diejek dihidangkan dan bukannya mengenai bahagian belakang yang sebenar.
3. Mengesahkan Pembolehubah: Utiliti juga menyimpan pembolehubah GraphQL yang dihantar bersama permintaan, yang boleh berguna untuk menguji panggilan API secara berasingan.

Mengapa Gunakan Pendekatan Ini?

1. Kelajuan yang Dipertingkat: Dengan mengelakkan permintaan rangkaian sebenar, ujian berjalan dengan lebih pantas dan lebih dipercayai.
2. Data Ujian Ringkas: Anda mengawal respons, menjadikannya lebih mudah untuk menguji kes tepi dan pelbagai keadaan aplikasi.
3. Pengesahan Panggilan API: Dengan menangkap pembolehubah yang dihantar bersama permintaan, anda boleh memastikan bahagian hadapan memanggil bahagian belakang dengan parameter yang betul.

Pelaksanaan dan pendekatan ini telah diilhamkan oleh catatan blog Jay Freestone yang sangat baik, Stubbing GraphQL Requests in Playwright. Jawatannya menyediakan asas yang kukuh untuk membina utiliti interceptGQL.

Dengan memasukkan utiliti ini ke dalam suite ujian Playwright anda, anda boleh mengejek pertanyaan dan mutasi GraphQL dengan mudah, meningkatkan kelajuan dan kebolehpercayaan ujian sambil memudahkan senario yang rumit.

Atas ialah kandungan terperinci Penulis drama: Permintaan GraphQL dalam Utiliti untuk Ujian Cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!