測(cè)試的重要性就不在這里贅述了内斯，本篇重點(diǎn)想聊一下Flutter的Widget測(cè)試（其他框架稱為組件測(cè)試）中的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
如果有前端經(jīng)驗(yàn)的童鞋可以理解Flutter的Golden File Testing相當(dāng)于Jest的快照測(cè)試。Flutter將期望的結(jié)果存儲(chǔ)在圖片文件（Golden Image）中烹骨。
Widget測(cè)試的目標(biāo)是驗(yàn)證小部件的UI如預(yù)期那樣的外觀和交互莫绣。所以Golden File Testing 不等價(jià)Widget測(cè)試，但通過(guò)它可以很方便的測(cè)試Widget的UI是否如預(yù)期的外觀一致诗鸭。
Golden File Test怎么寫染簇，官方有很多例子，這里就不細(xì)講强岸。
和快照測(cè)試類似锻弓，工作流程如下：
- 第一次生成Golden Image
- 人工檢查圖片，更新對(duì)比基線
- 當(dāng)產(chǎn)品代碼發(fā)生改變時(shí)蝌箍，再次運(yùn)行測(cè)試青灼，測(cè)試通過(guò)Finder找到當(dāng)前Widget，通過(guò)expectLater與基線進(jìn)行對(duì)比
- 如果測(cè)試通過(guò)妓盲，并且UI預(yù)期不變杂拨，測(cè)試通過(guò)
- 如果測(cè)試通過(guò)，并且UI預(yù)期需要變悯衬，測(cè)試失敗弹沽，需找出原因并修復(fù)
- 如果測(cè)試失敗，并且UI預(yù)期不變，測(cè)試失敗策橘，需找出原因并修復(fù)
- 如果測(cè)試失敗炸渡，并且UI預(yù)期需要變，人工檢查圖片是否與預(yù)期一致丽已，
- 如果是偶摔，則更新對(duì)比基線
- 如果否，需找出原因并修復(fù)
在整個(gè)工作流程中促脉，有3個(gè)關(guān)鍵點(diǎn)：
- 怎么更新基線的辰斋？
- 第一張golden image是怎么生成的？
- 對(duì)比時(shí)是怎么對(duì)比的瘸味？
那我們接下來(lái)一個(gè)一個(gè)的看這三個(gè)問題宫仗。
- 怎么更新基線的？
生成和更新基線旁仿，F(xiàn)lutter提供了命令行:
flutter test --update-goldens
只跑某個(gè)測(cè)試文件可以指定文件路徑:
flutter test --update-goldens <path_to_test_file>
不實(shí)用--update-goldens參數(shù)藕夫，會(huì)直接生成新的圖片
通過(guò)它，可以在運(yùn)行測(cè)試的同時(shí)枯冈，生成/更新圖片毅贮。
- 第一張golden image是怎么生成的?
理解以下內(nèi)容，需要對(duì)Flutter 渲染流程及相關(guān)的概念有了解尘奏，此處贅述滩褥，如果不了解請(qǐng)移步
architectural-overview
element
render object
isRepaintBoundary, layer
scene
當(dāng)測(cè)試在執(zhí)行斷言的過(guò)程：
- 通過(guò)
expectLater第一個(gè)參數(shù)找到的element - 將element對(duì)應(yīng)的
render object所在最近的RepaintBoundary以下的內(nèi)容在engine中合成到scene里 - Flutter engine 在后臺(tái)線程上執(zhí)行創(chuàng)建柵格圖像（這個(gè)過(guò)程很慢），將未壓縮的原始RGBA字節(jié)輸出到圖片中
- 將圖片保存到指定路徑
- 對(duì)比時(shí)是怎么對(duì)比的炫加？
LocalFileComparator是flutter提供的默認(rèn)對(duì)比器瑰煎，用于根據(jù)渲染創(chuàng)建/更新磁盤上的圖片文件。當(dāng)跑測(cè)試時(shí)俗孝，它會(huì)先將編碼后的圖片從系統(tǒng)文件中讀取到內(nèi)存酒甸，然后進(jìn)行像素對(duì)比。如果像素完全相同赋铝，則返回true插勤。但是需注意的是，技術(shù)圖片像素相同革骨，而圖片編碼方式不同农尖，測(cè)試也會(huì)返回false。
compare
根據(jù)需要苛蒲，可以繼承LocalFileComparator并復(fù)寫的compare和update方法得到你想要的對(duì)比器卤橄，并通過(guò)flutter_test_config.dart指定對(duì)比器绿满。
了解Flutter Golden File Test的原理臂外，可以幫組我們更好的去思考什么時(shí)候需要使用它。
