Flutter에서 스크롤 테스트하기: 위젯 테스트의 핵심 가이드

Flutter 애플리케이션 개발 시, 스크롤 기능은 사용자 경험에 큰 영향을 미칩니다. 따라서 스크롤 동작이 의도한 대로 작동하는지 확인하는 것은 매우 중요합니다. 이번 블로그에서는 Flutter에서 스크롤을 테스트하는 방법과 주요 기능에 대해 자세히 알아보겠습니다.

참고. Handle scrolling

스크롤 테스트의 중요성

사용자는 리스트나 페이지를 스크롤하여 콘텐츠를 탐색합니다. 스크롤이 원활하지 않거나 예상치 못한 동작을 한다면, 사용자 만족도가 크게 저하될 수 있습니다. 따라서 스크롤 기능을 철저히 테스트하여 앱의 품질을 높이는 것이 중요합니다.

Flutter에서 스크롤 테스트 설정하기

Flutter에서는 flutter_test 패키지를 활용하여 스크롤 동작을 테스트할 수 있습니다. 이를 위해 pubspec.yaml 파일에 해당 패키지를 추가해야 합니다:

dev_dependencies:
  flutter_test:
    sdk: flutter

스크롤 테스트를 위한 주요 메서드

Flutter의 WidgetTester 클래스는 스크롤 테스트를 지원하는 다양한 메서드를 제공합니다. 그 중 주요 메서드는 다음과 같습니다:

• drag: 특정 위치에서 드래그 동작을 시뮬레이션합니다.
• fling: 빠른 스와이프 동작을 시뮬레이션합니다.
• scrollUntilVisible: 특정 위젯이 보일 때까지 스크롤합니다.

스크롤 테스트 예제

아래는 ListView 위젯의 스크롤 동작을 테스트하는 예제입니다:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('ListView 스크롤 테스트', (WidgetTester tester) async {
    // 테스트용 앱 위젯 생성
    await tester.pumpWidget(MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) {
            return ListTile(
              key: Key('item_$index'),
              title: Text('아이템 $index'),
            );
          },
        ),
      ),
    ));

    // 'item_50' 키를 가진 위젯이 존재하지 않음을 확인
    expect(find.byKey(Key('item_50')), findsNothing);

    // 스크롤하여 'item_50'을 화면에 표시
    await tester.scrollUntilVisible(
      find.byKey(Key('item_50')),
      500.0,
    );
    await tester.pumpAndSettle();

    // 'item_50' 키를 가진 위젯이 화면에 표시되었음을 확인
    expect(find.byKey(Key('item_50')), findsOneWidget);
  });
}

위 코드에서는 ListView를 생성하고, scrollUntilVisible 메서드를 사용하여 특정 아이템이 화면에 나타날 때까지 스크롤합니다. 그런 다음 해당 아이템이 실제로 화면에 표시되었는지 확인합니다.

스크롤 테스트 시 주의사항

• 적절한 키 사용: 각 아이템에 고유한 키를 부여하여 정확한 식별이 가능하도록 합니다.
• 애니메이션 처리: 스크롤 후 pumpAndSettle()을 호출하여 모든 애니메이션이 완료될 때까지 기다립니다.
• 화면 크기 고려: 다양한 디바이스 크기에서 테스트하여 스크롤 동작이 일관되게 작동하는지 확인합니다.

결론

Flutter에서 스크롤 기능을 테스트하는 것은 사용자 경험을 향상시키는 데 필수적입니다. flutter_test 패키지와 WidgetTester의 다양한 메서드를 활용하여 스크롤 동작을 철저히 검증하고, 앱의 품질을 높이세요.

 

// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility that Flutter provides. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:scrolling/main.dart';

void main() {
  testWidgets('finds a deep item in a long list', (tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(MyApp(
      items: List<String>.generate(10000, (i) => 'Item $i'),
    ));

    final listFinder = find.byType(Scrollable);
    final itemFinder = find.byKey(const ValueKey('item_50_text'));

    // Scroll until the item to be found appears.
    await tester.scrollUntilVisible(
      itemFinder,
      500.0,
      scrollable: listFinder,
    );

    // Verify that the item contains the correct text.
    expect(itemFinder, findsOneWidget);
  });
}