在单元测试时利用[Angular] AoT编译结果

我叫Quramy。

好吧，前几天我在一个叫做ng-japan的活动上发言，谈论了Angular和测试相关的话题。

这里有资料。

其实我本来有一个想要在这里补充说的内容，但由于时间已经完全超出了预期，所以我决定在Qiita上写。

在JIT中使用AOT技术，并进行AOT单元测试。

听起来好像会有人在问「是《进击的巨人》还是《即刻修真》啊！」。

Angular v4.2版本开始，TestBed#initTestEnvironment方法添加了一个可选参数 aotSummaries。这使得我们可以从单元测试中使用AoT编译的NgFactory。真是个棒呆了。

今天（2017年6月19日）的时候，几乎没有任何文档，因此我会在这里提供相关的提交链接。下面是链接的大致位置。

• https://github.com/angular/angular/commit/547c363

https://github.com/angular/angular/commit/ed73d4f3ac6b542bf5ea3eb73fbe91e2ceabcdb4

有哪些好处

使用此功能可以享受以下好处。

• ComponentのCompileをすっ飛ばせる

より本番に近しいコードでテストを実行可能

特别令人高兴的是第一个选项 “可以跳过组件的编译”。
在使用Angular的组件独立测试时，通过ComponentFixture挂载测试目标组件，每个spec都会执行测试目标组件的编译。
特别是在使用Integration Testing Pattern2的情况下，如果将不必要的依赖组件作为imports注册到测试目标组件中，那么对于在该模块中指定的所有组件，都会执行编译操作。

关于组件的编译对测试执行时间产生多大影响，以前我们在 Medium 上有关于 Angular 单元测试性能的测量和改进的记录，因此在这里不再详述，但我们可以简单说一下，有时候情况会很糟糕，即“Karma执行时间中，70%以上的时间都花费在编译上”。

Karma的执行时间从9分钟缩短到2分钟。非常快速！

如何应用？

只要像 @angular/cli 中的 AoT 编译（ng build –aot）一样，在 ng test 命令中提供选项，那就好了。但是，这个功能还没有实现4。
嗯，我想这个功能以后肯定会被实现，但是如果有人非常急于使用，我写了一个比较粗略的脚本。

#!/bin/sh

# 1. Create ngsummary.ts
cat << EOF > tsconfig.aottest.json
{
  "extends": "./tsconfig.json",
  "angularCompilerOptions": {
    "genDir": ".",
    "debug": false,
    "enableSummariesForJit": true
  }
}
EOF
./node_modules/.bin/ngc -p ./tsconfig.aottest.json

# 2. Create an entry file for AOT testing
echo "import { AppModuleNgSummary } from './app/app.module.ngsummary';" > src/test_aot.ts
sed -E "s/platformBrowserDynamicTesting\(\)/platformBrowserDynamicTesting(), () => [AppModuleNgSummary],/g" src/test.ts >> src/test_aot.ts
mv src/test.ts src/test.ts.bk && mv src/test_aot.ts src/test.ts

# 3. Run karma
ng test --single-run
CODE=$?

# 4. Cleanup temp files
mv src/test.ts.bk src/test.ts
rm tsconfig.aottest.json
node node_modules/rimraf/bin.js src/**/*.ngfactory.* src/**/*.ngsummary.* src/**/*.shim.ngstyle.ts
node node_modules/rimraf/bin.js e2e/**/*.ngfactory.* e2e/**/*.ngsummary.* e2e/**/*.shim.ngstyle.ts

exit $CODE

该存储库位于https://github.com/Quramy/test-with-aot-summary。

可能的重点是以下几个方面：

• AoT Compile時に enableSummariesForJit を有効にする必要がある

test.tsでCompile結果を読み込む必要がある

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  () => [AppModuleNgSummary] // こいつが重要
);

如果你对考试时间的激增感到困扰，请试试看。

参考文献与脚注