극작가: 효율적인 테스트를 위한 유틸리티의 GraphQL 요청

Playwright와 같은 엔드투엔드 테스트 프레임워크로 작업할 때 GraphQL 요청을 모의하면 테스트 안정성과 속도가 크게 향상될 수 있습니다. Jay Freestone의 훌륭한 블로그 게시물인 Stubbing GraphQL Requests in Playwright에서 영감을 받아 유연한 GraphQL 요청 가로채기와 응답 스텁을 허용하는 재사용 가능한 유틸리티 기능을 구축하기로 결정했습니다.

이 게시물에서는 InterceptGQL 유틸리티 구현 과정을 안내하고 이를 Playwright와 함께 사용하여 GraphQL 쿼리 및 변형에 대한 서버 응답을 모의하는 방법을 보여 드리겠습니다.

interceptGQL 유틸리티: 작동 방식

interceptGQL 유틸리티는 모든 GraphQL 요청에 대한 경로 핸들러를 백엔드에 등록하고 해당 작업의 OperationName을 기반으로 특정 작업을 가로챕니다. 각 작업이 요청에 전달된 변수에 응답하고 유효성을 검사하는 방법을 정의할 수 있습니다.

구현은 다음과 같습니다.

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 {
  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: async ({ browser }, use) => {
    await use(interceptGQL);
  },
});

</string></string>

예: 작업 관리 대시보드 테스트

유틸리티의 실제 작동 모습을 보여주기 위해 이를 사용하여 작업 관리 대시보드를 테스트해 보겠습니다. GraphQL 쿼리(GetTasks)를 가로채서 해당 응답을 모의합니다.

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

여기서 무슨 일이 일어나고 있나요?

1. 요청 가로채기: InterceptGQL 유틸리티는 GetTasks 쿼리를 가로채고 GetTasksMock에 정의된 모의 데이터를 반환합니다.
2. 모의 응답: 실제 백엔드에 도달하는 대신 모의 응답이 제공됩니다.
3. 변수 유효성 검사: 이 유틸리티는 요청과 함께 전송된 GraphQL 변수도 저장하므로 API 호출을 별도로 테스트하는 데 유용할 수 있습니다.

이 접근 방식을 사용하는 이유는 무엇입니까?

1. 향상된 속도: 실제 네트워크 요청을 방지하여 테스트가 더 빠르고 안정적으로 실행됩니다.
2. 단순화된 테스트 데이터: 응답을 제어하여 극단적인 경우와 다양한 애플리케이션 상태를 더 쉽게 테스트할 수 있습니다.
3. API 호출 유효성 검사: 요청과 함께 전송된 변수를 캡처하면 프런트엔드가 올바른 매개변수를 사용하여 백엔드를 호출하는지 확인할 수 있습니다.

이 구현 및 접근 방식은 Jay Freestone의 뛰어난 블로그 게시물인 Stubbing GraphQL Requests in Playwright에서 영감을 받았습니다. 그의 게시물은 InterceptGQL 유틸리티를 구축하기 위한 견고한 기반을 제공했습니다.

이 유틸리티를 Playwright 테스트 모음에 통합하면 GraphQL 쿼리 및 변형을 쉽게 모의할 수 있어 복잡한 시나리오를 단순화하는 동시에 테스트 속도와 안정성이 향상됩니다.

위 내용은 극작가: 효율적인 테스트를 위한 유틸리티의 GraphQL 요청의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!