How to write widget test for screen which uses provider using mocktail or mockito?

165 Views Asked by At

how write widget tests using mocktail or mockito for a screen that calls an API from a provider in the initState ?

the below screen calls an api from provider in initState. so here i want to write test cases to check the screen state such as empty, loading, data loaded and error state.

Screen widget -

class ListScreen extends StatefulWidget {
 const ListScreen({Key? key}) : super(key: key);

 @override
 State<ListScreen> createState() => _ListScreenState();
}

class _ListScreenState extends State<ListScreen> {
 late HomeProvider _homeProvider;
 late Future _list;

 @override
 void initState() {
   _homeProvider = Provider.of(context, listen: false);

   WidgetsBinding.instance.addPostFrameCallback((_) {
     _list = _homeProvider.getTheData(context);
   });

   super.initState();
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(),
     body: Consumer<HomeProvider>(
       builder: (context, provider, _) {
         return provider.isLoading
             ? const Center(
                 child: CircularProgressIndicator(),
               )
             : provider.products.isNotEmpty
                 ? ListView.builder(
                     itemCount: provider.products.length,
                     itemBuilder: (context, index) {
                       var product = provider.products[index];
                       String name = product['title'];
                       return ListTile(
                         title: Text(name),
                       );
                     },
                   )
                 : const Center(
                     child: Text('List is Empty'),
                   );
       },
     ),
   );
 }
}

Provider class -

class HomeProvider extends ChangeNotifier {
 final HttpClientHelper httpClientHelper;
 HomeProvider({
   required this.httpClientHelper,
 });

 bool isLoading = false;
 List<Map<String,dynamic>> products = [];

 Future<void> getTheData(BuildContext context) async {
   isLoading = true;
   notifyListeners();
   try {
     var res = await httpClientHelper.get("https://fakestoreapi.com/products");
     if (res.status) {
       products = List<Map<String,dynamic>>.from(res.data);
     } else {
       products = [];
     }
   } catch (e) {
     debugPrint(e.toString());
     products = [];
   }

   isLoading = false;
   notifyListeners();
 }
0

There are 0 best solutions below