FE팀 해방전쟁 - QA 편

Table of Contents

서론

이 한마디에서 시작되었다. QA를 진행할건데 bug bash를 합시다.

방법 불문 출시전 클라이언트단에서 발생할 수 있는 버그를 최대한 테스트하라는 것이었다.

이전 글 FE팀 해방전쟁 - MSW 편을 보면 서버 응답을 간단히 갈아끼우는 것을 가지고 뭐 대단한 복선이 있는 듯 말해둔 부분이 있었다. 이걸 활용하기로 한게, MSW로 모든 네트워크 요청에 대한 응답을 random으로 만들어버리면 한방에 아주 잘 부셔버릴 수 있는게 아닌가하는 생각이 들었다.

Checklist

  • grpahql & graphql codegen을 사용 중이다

위 조건만 채운다면 따라해볼 수 있다.

How to

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: ['grapqhQL 엔드포인트'],
  generates: {
    'pathTo/introspection.json': {
      plugins: ['introspection'],
      config: {
        minify: true,
      },
    },
  }
}

export default config;

codegen plugin 중에서 introspection 이란게 있는게 이걸 이용해서 스키마 확인 시스템에 사용되는 json 파일을 생성해준다.

그리고 그 json을 이용해서 새로운 스키마로 다시 만들어줄건데

이거를 이제 MSW handler에 넣어줄건데

handler.ts
import { faker } from '@faker-js/faker';
import { buildClientSchema } from 'graphql';
import { addMocksToSchema } from '@graphql-tools/mock';

import introspection from '../../src/generated/introspection.json';

const mocks = {
  String: () => faker.string.alpha({ length: { min: 5, max: 10 } }),
  URL: () => faker.internet.avatar(),
  DateTime: () => faker.date.anytime(),
  JSON: () => {},
};

const schema = buildClientSchema(
  introspection as unknown as IntrospectionQuery
);
const mockedSchema = addMocksToSchema({
  schema,
  mocks,
  preserveResolvers: false,
});

const allRandomQuery = .link('grapqhQL 엔드포인트')
    .operation(async (q) => {
      const response = await execute({
        schema: mockedSchema,
        document: gql`
          ${q.query}
        `,
        variableValues: q.variables,
      });

      return HttpResponse.json(response);
    })

export const handlers = [allRandomQuery];

위 장황한 코드들을 설명하자면

  1. introspection을 통해서 만든 schema(물론 개별 스키마를 직접 넣어줄 수도 있지만, 이번엔 모든 요청을 가로채는것이 목적이기에)에 addMocksToSchema을 통해서 mock data resolver 대로 mock data를 반환하는 새로운 스키마를 반환받아서

  2. 엔드포인트에 가는 모든 요청을 가로채고, 1번에서 만든 스키마에 query와 input을 인자로 mock data을 반환하는 response를 받아올 수 있게 되는 것이다.

그리고 이게 언제나 사용하는 dev에 들어가면 곤란하니 random이나 mock이라는 환경만 새로 만들어서 거기서 실행하면 모든 데이터를 랜덤으로 받은 새로운 클라이언트를 볼 수 있게 됐다.

그래서 결론

모든 값을 random으로 받은 클라이언트 상태를 보니 말도 아니었다. 물론 몇개의 state에 의존해서 렌더링될 화면은 resolver 상에서 잘 해결해서 볼 수도 있지만, 컴포넌트 내부에서의 데이터 플로우에 헛점이 있는걸 상당 수 발견할 수 있었다.

그래서 뭐 세팅 비용이 많이 드는 것도 아니니 한번 시도해보면 재밌긴 할 것이다