jeudi 7 novembre 2019

How to test widgets which relies on data which was set by other widget through provider?

a novice programmer here who just started in flutter and trying to explore flutter testing. The following is my userInfoProvider code;

import 'package:flutter/cupertino.dart';

class UserInfoProvider with ChangeNotifier{
  String _username;
  String _userRole;

  getUsername() => _username;
  getUserRole() => _userRole;

  setUsername(String username){
    _username = username;
    notifyListeners();
  }

  setUserRole(String userRole){
    _userRole = userRole;
    notifyListeners();
  }

  getCurrentUserInformation(String uid) async {
    Query q = await Firestore.instance
        .collection('users')
        .document(uid)
        .get()
        .then((DocumentSnapshot ds) {
      setUsername(ds.data['userName']);
      setUserRole(ds.data['userRole']);
      return;
    });
  }

}

I have a homepage widget which has an Uid property. This widget uses this uid to identify from the "users" collection in firestore to set the username and userRole my UserInfoProvider.

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

import 'UserInfoProvider.dart';

class HomePage extends StatefulWidget {
  final String uid;

  HomePage(this.uid);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Future afterFirstLayout(BuildContext context) async {
    var user = Provider.of<UserInfoProvider>(context);
    await user.getCurrentUserInformation(widget.uid);
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

SecondPage widget has 2 text widget which displays the username and userRole from UserInfoProvider get methods.

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

import 'UserInfoProvider.dart';

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    final user = Provider.of<UserInfoProvider>(context);
    return Column(
      children: <Widget>[
        Text(user.getUsername()),
        Text(user.getUserRole())
      ],
    );
  }
}

In such scenarios how would one write the widget test whereby i would like to test the SecondPage Widget to ensure that the text displayed (e.g. the userRole) is the same as the one the mock Uid which i have built in HomePage widget? Following is my test code which fails the test;

    testWidgets("Test secondpage widget to display correct userRole", (WidgetTester tester) async{
      final uid = "ekkMH1sKW1dN0r3ZTQGCngJS1cV2";
      await tester.pumpWidget(ChangeNotifierProvider(
          builder: (_) => UserInfoProvider(),
          child: MaterialApp(
              home: HomePage(uid)
          )
      ));

      await tester.pumpWidget(ChangeNotifierProvider(
          builder: (_) => UserInfoProvider(),
          child: MaterialApp(
              home: SecondPage()
          )
      ));

      final UserRoleTextFinder = find.text("someUserRole");
      expect(UserRoleTextFinder, findsOneWidget);
    });

I would guess is that i have build two instances of userInfoProvider which the state in Homepage is not the same state as the SecondPage based on my test code? Anyways appreciate any advice for my case.

Aucun commentaire:

Enregistrer un commentaire