[flutter] RxDart를 활용한 UI 테스트

05 Dec 2023

flutter

소개

UI 테스트는 앱의 사용자 인터페이스를 테스트하여 앱이 예상대로 작동하는지 확인하는 중요한 단계입니다. Flutter에서 RxDart를 사용하면 UI 테스트 작성이 더욱 효과적이고 간단해질 수 있습니다. RxDart는 리액티브 프로그래밍을 위한 다양한 옵저버블 클래스와 연산자를 제공합니다.

이 블로그 포스트에서는 RxDart를 사용하여 Flutter 앱의 UI 테스트를 작성하는 방법에 대해 알아보겠습니다.

RxDart 설치

먼저, RxDart를 사용하기 위해 pubspec.yaml 파일에 다음 의존성을 추가해야 합니다:

dependencies:
  rxdart: ^0.27.0

의존성을 추가한 후, 터미널에서 flutter pub get 명령어를 실행하여 의존성을 다운로드 받습니다.

예제

이제 UI 테스트를 작성하기 위한 예제 코드를 살펴보겠습니다.

import 'package:rxdart/rxdart.dart';

class UserData {
  BehaviorSubject<String> _nameController = BehaviorSubject<String>();

  Stream<String> get nameStream => _nameController.stream;

  void dispose() {
    _nameController.close();
  }

  void updateUser(String name) {
    _nameController.add(name);
  }
}

void main() {
  // UserData 인스턴스 생성
  var userData = UserData();
  
  // nameStream을 감시하는 리액트 함수 생성
  var subscription = userData.nameStream.listen((name) {
    print("이름이 업데이트 되었습니다: $name");
  });
  
  // 사용자 데이터 업데이트
  userData.updateUser("John Doe");
  
  // 몇 초 뒤에 사용자 데이터 업데이트
  Future.delayed(Duration(seconds: 2), () {
    userData.updateUser("Jane Smith");
  });
  
  // 테스트용으로 앱 실행 후 일정 시간 대기
  Future.delayed(Duration(seconds: 5), () {
    // subscription 해제
    subscription.cancel();
    
    // UserData 인스턴스 해제
    userData.dispose();
  });
}

위 예제에서는 UserData 클래스가 리액티브 스트림을 사용하여 사용자 이름 데이터를 처리하는 것을 보여줍니다. nameStream은 BehaviorSubject를 사용하여 생성되며, nameStream을 감시하는 listen 함수를 이용하여 데이터를 구독합니다.

userData.updateUser 함수를 호출하여 사용자 데이터를 업데이트하고, 일정 시간이 지난 후 데이터가 업데이트되는 것을 확인합니다. 테스트가 완료되면 subscription을 취소하고 userData 인스턴스를 해제합니다.

결론

이렇게 RxDart를 사용하여 Flutter 앱의 UI 테스트를 작성할 수 있습니다. RxDart는 우수한 리액티브 프로그래밍 도구로서, UI 테스트 작성을 보다 쉽고 간편하게 만들어 줍니다.

추가 참고 자료: