플러터(Flutter)는 구글에서 개발한 크로스 플랫폼 앱 개발 프레임워크로서, 싱글 코드베이스에서 안드로이드 및 iOS 앱을 동시에 개발할 수 있습니다. 플러터는 다양한 기능과 라이브러리를 제공하여 효과적인 앱 개발을 지원하고 있습니다. 이번 글에서는 플러터에서 http mock adapter를 이용하여 스크린샷 테스트를 어떻게 수행하는지 알아보겠습니다.

http mock adapter란?

http mock adapter는 네트워크 요청을 가로채서 정의한 응답을 반환하는 라이브러리입니다. 이를 통해 앱의 네트워크 요청을 모의할 수 있어 테스트 시나리오를 구성하는 데 도움이 됩니다. 플러터에서는 http package를 사용하여 네트워크 요청을 처리하는데, http mock adapter는 이 package와 함께 사용될 수 있습니다.

스크린샷 테스트와의 연동

스크린샷 테스트는 앱의 UI를 정적 이미지로 캡처하여 비교하는 테스트 방법입니다. 이를 통해 UI 변경 사항을 쉽게 확인하고 검증할 수 있습니다. 스크린샷 테스트를 수행할 때 네트워크 요청을 모의해야 하는 경우, http mock adapter를 사용하여 실제 서버 응답을 모의 응답으로 대체할 수 있습니다.

예제 코드

import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_app/http_client.dart';
import 'package:http_mock_adapter/http_mock_adapter.dart';

void main() {
  group('MyApp', () {
    HttpMockAdapter httpMockAdapter;

    setUp(() {
      // http mock adapter 초기화
      httpMockAdapter = HttpMockAdapter();
      // 특정 URL에 대한 응답 정의
      httpMockAdapter.onGet('/api/data').reply(200, {'message': 'Mocked response'});
    });

    testWidgets('스크린샷 테스트', (WidgetTester tester) async {
      // 플러터 앱 시작
      await tester.pumpWidget(MyApp(httpClient: HttpClient(httpAdapter: httpMockAdapter)));

      // 스크린샷 캡처
      await tester.pumpAndSettle();

      // 캡처한 스크린샷 저장
      await tester.takeScreenshot('screenshot.png');
    });

    tearDown(() {
      // http mock adapter 종료
      httpMockAdapter.close();
    });
  });
}

위의 예제 코드에서는 http_mock_adapter 패키지를 사용하여 http 요청을 모의하고 있습니다. http_mock_adapter를 초기화하고 특정 URL에 대한 응답을 정의한 다음, 위젯 테스트 시나리오에서 HttpClient에 httpAdapter로 httpMockAdapter를 사용하도록 설정합니다. 이렇게 설정된 테스트에서 pumpAndSettle()을 통해 앱이 완전히 렌더링되기를 기다린 후 takeScreenshot()을 통해 스크린샷을 캡처하여 저장할 수 있습니다.

참고 자료

• http_mock_adapter 패키지: https://pub.dev/packages/http_mock_adapter
• 플러터 공식 문서: https://flutter.dev/
• 플러터 테스트 공식 문서: https://flutter.dev/docs/testing
• http 패키지: https://pub.dev/packages/http

이번 포스트에서는 플러터에서 http mock adapter를 이용하여 스크린샷 테스트를 수행하는 방법에 대해 알아보았습니다. 스크린샷 테스트는 앱의 UI 변경 사항을 캡처하여 검증하는 중요한 테스트 방법 중 하나입니다. http mock adapter를 사용하면 네트워크 요청을 모의하여 테스트 시나리오를 더욱 다양하게 구성할 수 있습니다. 테스트 코드 작성 시 참고하여 유지보수 가능하고 견고한 앱을 개발하는 데 도움이 되기를 바랍니다.