[flutter] 플러터에서 http_mock_adapter를 이용한 애니메이션 테스트

05 Dec 2023

flutter

안녕하세요! 이번에는 Flutter에서 http_mock_adapter를 이용하여 애니메이션 테스트를 하는 방법에 대해 알아보겠습니다.

`http_mock_adapter`란?

http_mock_adapter는 Flutter 앱에서 HTTP 요청을 가로채고 가짜 응답을 제공하는 라이브러리입니다. 이를 통해 테스트 중에 네트워크 요청을 시뮬레이션하여 앱 내에서 통신하는 동작을 확인할 수 있습니다.

애니메이션 테스트를 위한 설정

http_mock_adapter 패키지를 추가하려면 pubspec.yaml 파일에서 dev_dependencies 섹션에 다음과 같이 추가합니다.

dev_dependencies:
  flutter_test:
    sdk: flutter
  http_mock_adapter: ^1.0.3

http 패키지의 기본 클라이언트를 MockHttpClient로 대체하도록 설정합니다.

import 'package:http/http.dart' as http;
import 'package:http_mock_adapter/http_mock_adapter.dart';

void main() {
  final httpClient = HttpClientWithMockAdapter.build();
  http.Client = httpClient;
}

테스트 케이스를 작성하기 전에 가짜 응답을 설정해야 합니다. 예를 들어, /api/animation 엔드포인트에 대한 응답을 시뮬레이션하려면 다음과 같이 설정합니다.

test('Animation test', () async {
  final mockClient = MockAdapter();
  const responseStr = '{
    "status": "success",
    "data": "Animation completed"
  }';
  mockClient
    .onGet('/api/animation')
    .reply(200, responseStr);
    
  // 테스트 코드 작성
});

테스트 코드 안에서는 기존에 사용하던 http 패키지의 메서드 대신 http.Client를 사용합니다. 예를 들어, GET 요청을 보내고 응답을 확인하는 테스트 코드는 다음과 같습니다.

test('Animation test', () async {
  final mockClient = MockAdapter();
  const responseStr = '{
    "status": "success",
    "data": "Animation completed"
  }';
  mockClient
    .onGet('/api/animation')
    .reply(200, responseStr);

  final response = await http.Client().get(Uri.parse('/api/animation'));
  expect(response.statusCode, 200);
  expect(json.decode(response.body)['status'], 'success');
  expect(json.decode(response.body)['data'], 'Animation completed');
});

마무리

이렇게 http_mock_adapter를 이용하여 Flutter 앱에서 애니메이션 테스트를 할 수 있습니다. 이를 통해 네트워크 통신 기능을 테스트하는 동시에 애니메이션의 동작을 쉽게 확인할 수 있습니다.

더 자세한 내용은 http_mock_adapter GitHub 페이지에서 확인할 수 있습니다.

http_mock_adapter란?

애니메이션 테스트를 위한 설정

마무리

`http_mock_adapter`란?