Flutter单元测试的一些总结

什么是单元测试？

单元测试是一个过程，您可以通过编写额外的测试代码来检查质量，性能或可靠性，以确保应用逻辑在广泛使用之前按预期的方式工作。打个比方，走进您最喜欢的服装店，挑选一件您最喜欢的衣服，走进试衣间，在那个试衣间中，您正在执行单元测试，您要确保双手可以穿过衬衫的袖子，纽扣就位并且样式和尺寸与您的身材相符。

编写单元测试可帮助您放心地构建新功能，最大程度地减少错误并毫不费力地重构现有代码。它还迫使您编写更好、更高可维护性的代码，这些代码可以轻松地进行测试。

单元测试通常是针对你要测试的某个类的某个方法进行的。对于一个方法，在调用前必须确定一个预期结果，当输入和预期结果准备好后，执行你要测试的方法，然后将执行后的结果和你的预期结果比较，若一致说明测试通过。

单元测试专注于测试应用程序的逻辑，而不是实际的用户界面。

什么样的架构能够支持更好的编写单元测试？

传统的MVC、MVP模式，虽然业务逻辑都被封装到了Controller层或Presenter层，但是它们有一个共同点，Controller/Presenter会操作View层，而单元测试主要是对业务逻辑层的无关UI的测试，但是若要为这两种架构编写单元测试，那你就必须得在测试代码中导入UI相关的包，也就是说你为了测试业务逻辑不得不连同UI一起测试，这在flutter中称为Widget测试(本文不作描述)，我想这不是我们希望发生的。所以，最能支持单元测试编写的架构应该是MVVM，一个好的MVVM架构在ViewModel层不应该有任何的UI操作，数据发生改变只是简单的发出一条消息而已，这个时候View作为消息的订阅者感知到数据变化后在自己这一层做对应的UI更新。

当然，并不是说只有MVVM的架构才能写单元测试，单元测试可以测试任意类的任意方法。只是为非MVVM架构的功能编写单元测试可能没有那么简单快速而已，因为为了测试某个方法你可能要写一些避开UI操作的代码。

开始为你的ViewModel编写单元测试吧

首先在pubspec.yaml文件添加flutter_test库

dev_dependencies:
  flutter_test:
    sdk: flutter

举个例子，有一个登陆页面，它的ViewModel是这样的

class LoginViewModel extends ChangeNotifier {
  ///是否登陆成功,[Widget]作为观察者观察该值变化，若为true则跳转到主页
  bool loginSuccess = false;

  ///是否在登陆中
  bool isLogining = false;

  ///用户名是否合法,[Widget]作为观察者观察该值变化,若和[isPasswordValid]同时为[true]那么高亮显示登陆按钮，使用[ValueNotifier]更细粒度地控制[Widget]更新
  ValueNotifier isUserNameValid = ValueNotifier(false);

  ///密码是否合法,[Widget]作为观察者观察该值变化,若和[isUserNameValid]同时为[true]那么高亮显示登陆按钮
  ValueNotifier isPasswordValid = ValueNotifier(false);

  ///登陆
  Future login(String userName, String password) async {
    isLogining = true;
    notifyListeners();
    var response = await http.post('url', body: {'userName': userName, 'password': password});
    isLogining = false;
    if (response != null && response.statusCode == 200) {
      String jsonString = response.body;
      Map json = jsonDecode(jsonString);
      if (json['code'] == 10000) {
        //这里业务code == 10000说明登陆成功
        loginSuccess = true;
        notifyListeners();
        return;
      }
    }
    loginSuccess = false;
    notifyListeners();
  }

  ///暴露给Widget的username输入框的监听函数,这里只做了验证
  void onUserNameTextChanged(String text) {
    isUserNameValid.value = text != null && text.isNotEmpty && text.length > 6 && text.length < 20;
  }

  ///暴露给Widget的password输入框的监听函数
  void onPasswordTextChanged(String text) {
    isPasswordValid.value = text != null && text.isNotEmpty;
  }
}

ok,现在我们来测一测这个LoginViewModel
我们在与lib同层级的目录的test目录下新建login_test.dart像这样：

在login_test.dart编写如下代码：

void main() {
  test('test LoginViewModel login', () async {
    var vm = LoginViewModel();

    //1
    vm.onUserNameTextChanged('');
    expect(vm.isUserNameValid.value, false);

    //2
    vm.onUserNameTextChanged('12345667');
    expect(vm.isUserNameValid.value, true);

    //3
    vm.onPasswordTextChanged(null);
    expect(vm.isPasswordValid.value, false);

    //4
    vm.onPasswordTextChanged('123');
    expect(vm.isPasswordValid.value, true);

    //5
    await vm.login('userName', 'password');
    expect(vm.loginSuccess, true);
  });
}

我们在main函数里调用test方法，它接收两个必要参数：

Object类型的description，
Fuction类型的body

在test的body里面，我们先创建LoginViewModel，然后分别验证了它的onUserNameTextChanged,onPasswordTextChanged,login方法。
注释1我们调用onUserNameTextChanged并传入``，这时我们的预期是用户名不合法，所以vm.isUserNameValid.value在调用了该方法后的值应该是false。

expect函数是flutter_test库里的方法，接收两个必要参数：

dynamic actual 实际值（经过测试的方法后的值）
dynamic matcher 匹配值（预期值）

注释2、3、4道理和1相同。
注释5测试login方法，输入合法的userName，password，预期就是登陆成功，所以应该有vm.loginSuccess==true。

点击它们任一个图标就可以运行你的单元测试了

当运行后并且测试通过，控制台会显示这样的信息：

image.png

相反的，当在某个expect执行失败的时候（也就是实际值和预期值不一样，比如将这样改）

vm.onUserNameTextChanged('');
expect(vm.isUserNameValid.value, true);

那么控制台就会报如下错误：

Flutter单元测试的一些总结

什么是单元测试？

什么样的架构能够支持更好的编写单元测试？

开始为你的ViewModel编写单元测试吧

你可能感兴趣的:(Flutter单元测试的一些总结)