Flutter로 Widget test를 한다. (with Provider)

있어요. Flutter하고 있습니다.

Flutter

UI 구축이 매우 간단하고 좋네요. 은은
이 기사를 읽고있는 분은 적지 않고 Flutter에 관심이 있겠지요. 은은

이번은 Provider 사용시의 Widget test에 대해서 간단하게 써 갑니다.
(에? Riv○rP○d? 좀 잘 모르겠네.)

화면수가 늘어나면 테스트가 귀찮다.

swift로 한 화면 단체의 테스트는 있었습니까? ((바로 위에 말하고 쓰고 싶다.

Flutter에서는 Widget test를 이용하여 만든 화면 단독으로 테스트할 수 있습니다.

이제 화면 수가 늘어도 부담없이 테스트 할 수 있군요!

위젯 테스트

state notifier를 사용하고 있습니다.
freezed 사용하는 것이 좋지만 이것뿐이므로 정직하게 귀찮았다. copyWith 편리.

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_state_notifier/flutter_state_notifier.dart';
import 'package:state_notifier/state_notifier.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StateNotifierProvider<ViewModel, State>(
        create: (context) => ViewModel(),
        child: Home(),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(context.watch<State>().one.toString()),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<ViewModel>().toggle(),
      ),
    );
  }
}

class ViewModel extends StateNotifier<State> {
  ViewModel(): super(State(false));

  void toggle() {
    state = State(!state.one);
  }
}

class State {
  State(this.one);

  bool one;
}

편리하게, 1 파일에 기술.
코드의 명명 등은 2의 다음 ٩( ᐛ )و

중요한 것은 "state를 참조하고, 그 state가 가지고 있는 bool을, FloatingActionButton을 탭할 때마다 토글하는 앱"이라는 것



이 테스트 코드는 다음과 같습니다.

test/widget_test.dart

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

import 'package:disposable/main.dart' as home;

void main() {
  testWidgets('Float Button Test', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(
      home: StateNotifierProvider<home.ViewModel, home.State>(
        create: (context) => TestViewModel1(),
        child: home.Home(),
      ),
    ));

    final floatbtn = find.byWidgetPredicate((widget) => widget is FloatingActionButton);
    expect(floatbtn, findsOneWidget);

    expect(find.text('true'), findsOneWidget);
    await tester.tap(floatbtn);
    await tester.pump();
    expect(find.text('false'), findsOneWidget);

  });
}

class TestViewModel1 extends StateNotifier<home.State> implements home.ViewModel {
  TestViewModel1(): super(home.State(true));

  @override
  void toggle() {
    state = home.State(!state.one);
  }

}

class TestViewModel2 extends home.ViewModel {

  @override
  void toggle() {
    state = home.State(!state.one);
  }
}

TestViewModel은 두 가지 형태를 취할 수 있습니다. 시도하지 않는 것만으로 다른 방법이있을 것입니다.

주의점은

test 디렉토리에서 lib 디렉토리의 클래스를 참조하고 싶다.

Provider에서 이용하기 위해서 지정하는 형태는 원의 클래스를 참조할 필요가 있다. StateNotifierProvider<TestViewModel, State>(create: ...);에서는 FloatingActionButton에서 ViewModel을 참조하고 TestViewModel을 얻을 수 없으므로 오류가 발생합니다.

모의로 옮겨놓는 클래스는, 기본이 되는 클래스를 상속해 둘 필요가 있다. (여기 요조일지도?)

tester.pump() 로 화면을 갱신해 준다. 이것을 넣지 않으면 화면이 갱신되지 않기 때문에, false를 기대하고 있는 테스트 코드로 넘어진다. 여기 조금 집어들었다.

(RiverPod에서도 하고 싶다)

사랑 읽어 주셔서 감사합니다. 아베 선생님의 다음 작품에 기대하십시오.