[flutter] 플러터에서의 http_mock_adapter를 이용한 차트 테스트

05 Dec 2023

flutter

플러터(Flutter)는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크로써, 다양한 기능들을 제공합니다. 그 중에서도 네트워크 통신은 많은 앱에서 필수적인 요소입니다. 이번에는 플러터의 http_mock_adapter를 이용하여 차트 테스트를 진행해보려고 합니다.

http_mock_adapter란?

http_mock_adapter는 http 통신을 모방하여 가짜 응답을 생성하는 유용한 라이브러리입니다. 이를 이용하면 실제 서버와 통신을 하는 것이 아닌 가상으로 응답을 생성하여 테스트할 수 있습니다.

차트 테스트를 위한 준비 작업

우선, 프로젝트의 pubspec.yaml 파일에 http_mock_adapter 패키지를 추가해야 합니다. 이를 위해 아래와 같이 dependencies 섹션에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  http:
  http_mock_adapter:

이제 pubspec.yaml 파일을 저장한 후, 다음 명령을 실행하여 패키지를 가져옵니다.

flutter pub get

테스트 코드 작성하기

테스트 코드를 작성하기 전에, 먼저 http_mock_adapter 패키지를 가져와야 합니다. 아래와 같이 코드의 상단에 import 문을 추가합니다.

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

이제 기존의 API 호출 코드를 수정하여 http_mock_adapter를 이용한 테스트 코드를 작성해보겠습니다. 아래는 예시 코드입니다.

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

class ChartScreen extends StatefulWidget {
  @override
  _ChartScreenState createState() => _ChartScreenState();
}

class _ChartScreenState extends State<ChartScreen> {
  final String apiUrl = "https://api.example.com/chart";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chart"),
      ),
      body: FutureBuilder(
        future: fetchData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          if (snapshot.hasError) {
            return Center(
              child: Text("Error occured"),
            );
          }
          // Display chart using snapshot.data
          return Container();
        },
      ),
    );
  }

  Future<void> fetchData() async {
    final httpClient = HttpClientWithInterceptor.build(
      interceptors: [HttpMockAdapter()],
      requestTimeout: Duration(seconds: 10),
    );

    final String mockData = """
      [
        { "name": "Item 1", "value": 10 },
        { "name": "Item 2", "value": 20 },
        { "name": "Item 3", "value": 30 }
      ]
    """;

    HttpMockAdapter mockAdapter = httpClient.mockAdapter as HttpMockAdapter;
    mockAdapter.onGet(apiUrl).reply(200, mockData);

    final response = await http.get(Uri.parse(apiUrl));
    if (response.statusCode == 200) {
      // Parse response and update UI with chart data
    } else {
      // Handle error
    }
  }
}

위의 예제 코드에서 HttpMockAdapter를 생성하고 onGet 메소드를 이용하여 가상의 응답을 설정하는 부분이 포인트입니다. onGet 메소드는 GET 요청을 감지하고, 해당 URL에 대해 가상의 응답을 설정합니다.

테스트 실행하기

http_mock_adapter를 이용한 차트 테스트를 실행하기 위해서는 앱을 빌드하고 실행해야 합니다. 아래 명령을 실행하여 앱을 실행합니다.

flutter run

앱이 실행되면, ChartScreen 위젯에서 http_mock_adapter가 적용된 차트 데이터가 나타날 것입니다. 이를 통해 가상의 응답을 테스트할 수 있게 됩니다.

마무리

플러터에서 http_mock_adapter를 이용하여 차트 테스트를 진행해보았습니다. http_mock_adapter를 사용하면 실제 서버와 통신하는 것이 아닌 가상의 응답을 생성하여 테스트할 수 있습니다. 이를 통해 앱의 네트워크 동작을 안정적으로 테스트할 수 있고, 개발자의 효율성을 높일 수 있습니다.

더 자세한 내용은 http_mock_adapter GitHub 페이지를 참고하시기 바랍니다.