Unit Testing With Flutter: Getting Started

Unit Testing the “Add to Cart” Logic

Now that you’ve written the logic, it’s time to write your tests.

Head to product_list_test.dart and replace TODO 5 with this:

final Product mockProduct = Product(id: 1, name: 'Product1', price: 111, 
    imageUrl: 'imageUrl');

Here, you declare a mock product so you can simulate adding a product to the cart.

Next, replace TODO 6 with:

final cartViewModel = dependencyAssembler<CartModel>();

and add the required import:

import 'package:shopnbuy/core/viewmodels/cart_model.dart';

This will create an instance of the cart view model in the test suite.

Finally, replace TODO 7 with the following:

test('when user adds a product to cart, badge counter should increment by 1', () {
  cartViewModel.addToCart(mockProduct);

  expect((cartViewModel.cartSize), 1);
});

Here, you assert that adding a product to the cart will increment the cart size. Run Flutter test in the terminal, or if you are using Visual Studio Code, press Run ▸ Debug just above the start of the test closure to run the test.

You’ll see this:

00:02 +2: All tests passed!    

Congratulations, you’ve written your second test and it passed!

Unit Testing the Shopping Cart Feature

The shopping cart appears to work properly, so it’s time to add your tests.

Head to cart_test.dart and add the following under TODO 8

List<Product> mockProducts = [
  Product(id: 1, name: 'Product1', price: 111, imageUrl: 'imageUrl'),
  Product(id: 2, name: 'Product2', price: 222, imageUrl: 'imageUrl'),
  Product(id: 3, name: 'Product3', price: 333, imageUrl: 'imageUrl'),
  Product(id: 4, name: 'Product4', price: 444, imageUrl: 'imageUrl'),
];

And import the Product class at the top of the file:

import 'package:shopnbuy/core/models/product.dart';

This declares new mock products.

Then, add the following to TODO 9:

// TODO 9: Call Dependency Injector
setupDependencyAssembler();

This calls the dependency injector just like you did in the other test. Again, make sure to import the setupDependencyAssembler function:

import 'package:shopnbuy/helpers/dependency_assembly.dart';

Next, add the following to TODO 10:

var cartViewModel = dependencyAssembler<CartModel>();

Just like before this will create an instance of your view model.

Again, import the CartModel class:

import 'package:shopnbuy/core/viewmodels/cart_model.dart';

Finally, add mock products to the cart, replacing TODO 11 with the following:

cartViewModel.addToCart(mockProducts[0]);
cartViewModel.addToCart(mockProducts[1]);
cartViewModel.addToCart(mockProducts[2]);
cartViewModel.addToCart(mockProducts[3]);
cartViewModel.addToCart(mockProducts[0]);
cartViewModel.addToCart(mockProducts[1]);

Testing Your Shopping Cart

Now that you’ve added lots of products to your view model, it’s time to write the tests!

Add this test suite at TODO 12:

group('Given Cart Page Loads', () {
  // 1
  test('Page should load list of products added to cart', () async {
    expect(cartViewModel.cartSize, 6);
    expect(cartViewModel.getCartSummary().keys.length, 4);
  });

  // 2
  test(
      'Page should consolidate products in cart and show accurate summary data',
      () {
    cartViewModel.getCartSummary();
    expect(cartViewModel.getProduct(0).id, 1);
    expect(cartViewModel.getProduct(1).id, 2);
    expect(cartViewModel.getProduct(2).id, 3);
    expect(cartViewModel.getProduct(3).id, 4);

    expect(cartViewModel.getProductQuantity(0), 2);
    expect(cartViewModel.getProductQuantity(1), 2);
    expect(cartViewModel.getProductQuantity(2), 1);
    expect(cartViewModel.getProductQuantity(3), 1);
  });
});

Again, make sure to add the following import at the top of the file:

import 'package:flutter_test/flutter_test.dart';

Here you have tests for:

1. The assertion of the cart size and the unique products that the cart shows.
2. The assertion that the products displayed in each index should match their equivalent data.

Run Flutter test and you’ll see:

00:02 +4: All tests passed! 

Four test cases passed. Rejoice!

Challenge: Unit Testing the Checkout Feature

In this final step, you’ll unit test the checkout feature. Try it out on your own or take a peek at the solution first, then attempt the challenge. The best way to learn is to do it yourself!

There are two main requirements for this set of tests:

• Test #1 When the user confirms the purchase, it should show the total cost of all of the items in the cart.
• Test #2 When the user has finished the purchase, it should clear the cart.

If you got stuck or want to compare your answer with the final solution, click Reveal to open the solution section.

[spoiler]

Head to cart_test.dart and add these test cases after the previous two test cases within the group:

// 1
test('When user confirms the purchase, it should show total costs', () {
  expect(cartViewModel.totalCost, 1443);
});

// 2
test('When user has finished the purchase, it should clear the cart', () {
  cartViewModel.clearCart();
  expect(cartViewModel.cartSize, 0);
});

This checks:

1. The assertion of the total costs, calculated by totaling all the selected products.
2. The assertion that the cart clears after checkout.

Run Flutter test and you should see:

00:02 +6: All tests passed!  

Woohoo! All six test cases have passed and you deserve three stars! You’re now ready to start writing unit tests in your Flutter apps.

[/spoiler]

Where to Go From Here?

You can download the final project by clicking the Download Materials button at the top or bottom of this tutorial.

For your next steps, expand your Flutter testing knowledge by exploring the official UI tests cookbook from the Flutter team. You can also take your testing to the next level by exploring and applying Test-Driven Development.

We hope you enjoyed this tutorial. If you have any questions or comments, please join the forum discussion below!