플러터 위젯 테스트 _ 3. 스크롤 처리하기

많은 앱들은 이메일 클라이언트나 음악 앱 등처럼 콘텐츠 목록을 보여줍니다. 위젯 테스트를 통해 목록에 예상된 콘텐츠가 포함되어 있는지 확인하려면, 특정 항목을 찾기 위해 목록을 스크롤할 수 있어야 합니다.

 

통합 테스트(integration test)에서 목록을 스크롤하려면, flutter_test 패키지에 포함된 WidgetTester 클래스가 제공하는 메서드를 사용하세요.

 

이 레시피에서는 목록 항목을 스크롤하여 특정 위젯이 표시되는지 확인하는 방법과 다양한 접근 방식의 장단점을 알아봅니다.

 

이 레시피는 다음과 같은 단계로 구성됩니다:

1. 항목 목록이 있는 앱 만들기

2. 목록을 스크롤하는 테스트 작성하기

3. 테스트 실행하기

---

 

1. 항목 목록이 있는 앱 만들기

이 레시피는 많은 항목이 있는 긴 목록을 보여주는 앱을 만듭니다. 테스트에 집중하기 위해, [긴 목록 다루기(Work with long lists)] 레시피에서 만든 앱을 사용합니다. 긴 목록을 다루는 방법이 익숙하지 않다면 해당 레시피를 참고하세요.

 

통합 테스트에서 상호작용할 위젯에는 Key를 추가하세요.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(items: List<String>.generate(10000, (i) => 'Item $i')));
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({super.key, required this.items});

  @override
  Widget build(BuildContext context) {
    const title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(title: const Text(title)),
        body: ListView.builder(
          // ListView에 Key를 추가합니다. 이렇게 하면 테스트에서
          // 해당 리스트를 찾아 스크롤할 수 있게 됩니다.
          key: const Key('long_list'),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(
                items[index],
                // 각 항목의 Text 위젯에 Key를 추가합니다. 이렇게 하면
                // 목록에서 특정 항목을 찾아 해당 텍스트가 정확한지 확인할 수 있습니다.
                key: Key('item_${index}_text'),
              ),
            );
          },
        ),
      ),
    );
  }
}

---

 

2. 목록을 스크롤하는 테스트 작성하기

이제 테스트를 작성할 수 있습니다. 이 예제에서는 항목 목록을 스크롤하면서 특정 항목이 존재하는지 확인합니다. WidgetTester 클래스는 scrollUntilVisible() 메서드를 제공하는데, 이 메서드는 특정 위젯이 보일 때까지 목록을 스크롤합니다.

 

이는 목록 항목의 높이가 기기에 따라 달라질 수 있기 때문에 유용합니다.

 

모든 항목의 높이를 알고 있다고 가정하거나, 특정 위젯이 모든 기기에서 렌더링된다고 가정하기보다는, scrollUntilVisible() 메서드를 사용해 원하는 항목을 찾을 때까지 목록을 반복적으로 스크롤하는 것이 좋습니다.

 

아래 코드는 scrollUntilVisible() 메서드를 사용하여 특정 항목을 찾는 방법을 보여줍니다. 이 코드는 test/widget_test.dart 파일에 작성됩니다.

// 기본적인 Flutter 위젯 테스트입니다.
//
// 테스트에서 위젯과 상호작용하려면, Flutter가 제공하는 WidgetTester
// 유틸리티를 사용하세요. 예를 들어 탭 또는 스크롤 제스처를 보낼 수 있고,
// WidgetTester를 사용해 위젯 트리 내 자식 위젯을 찾고 텍스트를 읽으며,
// 위젯 속성 값이 올바른지 확인할 수 있습니다.

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 {
    // 앱을 빌드하고 프레임을 트리거합니다.
    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'));

    // 원하는 항목이 보일 때까지 스크롤합니다.
    await tester.scrollUntilVisible(itemFinder, 500.0, scrollable: listFinder);

    // 해당 항목이 올바른 텍스트를 포함하는지 확인합니다.
    expect(itemFinder, findsOneWidget);
  });
}

---

 

3. 테스트 실행하기

아래 명령어를 프로젝트의 루트 디렉터리에서 실행하여 테스트를 수행합니다:

flutter test test/widget_test.dart