[Flutter] Golden File Test 的原理

测试的重要性就不在这里赘述了，本篇重点想聊一下Flutter的Widget测试（其他框架称为组件测试）中的Golden File test。

那么什么是Golden File Test呢？

Golden File Testing are like unit tests, except the expected output is stored in a separate file. -- Max Grigorev at ZuriHac

如果有前端经验的童鞋可以理解Flutter的Golden File Testing相当于Jest的快照测试。Flutter将期望的结果存储在图片文件（Golden Image）中。

Widget测试的目标是验证小部件的UI如预期那样的外观和交互。所以Golden File Testing 不等价Widget测试，但通过它可以很方便的测试Widget的UI是否如预期的外观一致。

Golden File Test怎么写，官方有很多例子，这里就不细讲。

和快照测试类似，工作流程如下：

work flow

1. 第一次生成Golden Image
2. 人工检查图片，更新对比基线
3. 当产品代码发生改变时，再次运行测试，测试通过Finder找到当前Widget，通过expectLater与基线进行对比
4. 如果测试通过，并且UI预期不变，测试通过
5. 如果测试通过，并且UI预期需要变，测试失败，需找出原因并修复
6. 如果测试失败，并且UI预期不变，测试失败，需找出原因并修复
7. 如果测试失败，并且UI预期需要变，人工检查图片是否与预期一致，
   • 如果是，则更新对比基线
   • 如果否，需找出原因并修复

在整个工作流程中，有3个关键点：

1. 怎么更新基线的？
2. 第一张golden image是怎么生成的？
3. 对比时是怎么对比的？

那我们接下来一个一个的看这三个问题。

1. 怎么更新基线的？

生成和更新基线，Flutter提供了命令行:
flutter test --update-goldens

只跑某个测试文件可以指定文件路径:
flutter test --update-goldens

不实用--update-goldens参数，会直接生成新的图片

通过它，可以在运行测试的同时，生成/更新图片。

test

2. 第一张golden image是怎么生成的?

理解以下内容，需要对Flutter 渲染流程及相关的概念有了解，此处赘述，如果不了解请移步
architectural-overview
element
render object
isRepaintBoundary, layer
scene

当测试在执行断言的过程：

1. 通过expectLater第一个参数找到的element
2. 将element对应的render object所在最近的 RepaintBoundary 以下的内容在engine中合成到scene里
3. Flutter engine 在后台线程上执行创建栅格图像（这个过程很慢），将未压缩的原始RGBA字节输出到图片中
4. 将图片保存到指定路径

capture image

toImage

3. 对比时是怎么对比的？
   LocalFileComparator是flutter提供的默认对比器，用于根据渲染创建/更新磁盘上的图片文件。当跑测试时，它会先将编码后的图片从系统文件中读取到内存，然后进行像素对比。如果像素完全相同，则返回true。但是需注意的是，技术图片像素相同，而图片编码方式不同，测试也会返回false。
   
   compare

根据需要，可以继承LocalFileComparator并复写的compare和update方法得到你想要的对比器，并通过flutter_test_config.dart指定对比器。

了解Flutter Golden File Test的原理，可以帮组我们更好的去思考什么时候需要使用它。