테스트 코드 작성

1. 생소한 단어

• 헬퍼 함수 (Helper Functions)란?
  • 테스트에서 자주 반복되는 작업들을 함수로 만들어서 재사용하는 것

//  헬퍼 함수 없이 테스트 작성
test('기체 등록 테스트', async ({ page }) => {
  // 매번 이렇게 길게 써야 함
  await page.goto('/vehicles/manufacture');
  await page.click('.manufacture-box.preneu');
  await page.fill('[data-testid="vehicle-name-input"]', '테스트 드론');
  await page.fill('[data-testid="serial-number-input"]', 'TEST001');
  await page.fill('[data-testid="product-name-input"]', 'Test Product');
  // ... 계속 반복
});

//  헬퍼 함수 사용
test('기체 등록 테스트', async ({ page }) => {
  await helper.goToVehicleForm();           // 헬퍼 함수
  await helper.fillVehicleBasicInfo(vehicle); // 헬퍼 함수
  await helper.submitForm();                // 헬퍼 함수
});

• 모킹 (Mocking)이란?
  • 실제 서버 대신 가짜 데이터로 테스트하는 것

//  실제 서버를 사용하면 문제가 생김
test('기체 목록 테스트', async ({ page }) => {
  await page.goto('/vehicles');

  // 문제점들:
  // 1. 서버가 다운되어 있으면 테스트 실패
  // 2. 네트워크가 느리면 테스트 오래 걸림
  // 3. 실제 데이터가 변경되면 테스트 결과 달라짐
  // 4. 데이터베이스에 실제 데이터가 들어감
});

//  모킹으로 해결
test('기체 목록 테스트', async ({ page }) => {
  // 가짜 API 응답 설정
  await page.route('**/api/v1/vehicle-management/teams/vehicles*', async route => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        data: [
          {
            vehicleId: 1,
            name: '테스트 드론',
            serialNumber: 'TEST001'
          }
        ]
      })
    });
  });

  await page.goto('/vehicles');
  // 항상 동일한 결과로 테스트 가능!
});

2. 테스트 코드 작성