50 行代码即可对任何 Angular 应用进行冒烟测试
应用冒烟测试设置
验证应用程序是否可以启动
验证导航功能是否正常
结论
无风不起浪。封面照片由Pixabay 用户blickpixel提供。
在本文中，我们使用 Angular 框架创建了一个冒烟测试套件，用于TestBed运行集成测试，该测试会加载我们整个应用程序AppModule而无需任何修改。这实际上是我们能使用 Angular 框架实现的最接近端到端测试的方法TestBed。
应用冒烟测试设置
首先，我们来看一下冒烟测试的设置，它只依赖于我们的 Angular 应用程序的AppModule和AppComponent。
// if needed
// import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
function setup() {
TestBed.configureTestingModule({
imports: [
AppModule,
RouterTestingModule,
// if needed
// HttpClientTestingModule,
],
}).compileComponents();
let rootFixture: ComponentFixture<AppComponent>;
const initializeRootFixture = () => {
if (rootFixture == null) {
rootFixture = TestBed.createComponent(AppComponent);
}
};
return {
get router() {
initializeRootFixture();
return TestBed.inject(Router);
},
run<TResult>(task: () => TResult) {
initializeRootFixture();
return rootFixture.ngZone == null
? task()
: rootFixture.ngZone.run(task);
},
};
}
AppModule我们在 Angular 测试模块中导入并导入RouterTestingModule以模拟 History 和 Location API。
通用设置准备就绪后，我们开始对 Angular 应用程序进行第一个冒烟测试用例。
验证应用程序是否可以启动
第一个冒烟测试用例验证了我们的应用程序可以无错误启动。
describe('Applicaton smoke test', () => {
it('the application boots up', () => {
const bootApplication = () => {
const { router, run } = setup();
run(() => router.initialNavigation());
};
expect(bootApplication).not.toThrow();
});
});
AppModule通过函数将文件加载到 Angular 测试模块后setup，它会设置路由并导航到默认路由。断言语句验证这些操作都不会导致任何故障。
因为我们正在测试它AppModule以及它触发的所有配置和初始化，所以我们正在与我们的应用程序协作，对大量的 Angular API 进行集成测试。
验证导航功能是否正常
我们的下一个冒烟测试用例将测试导航到特定路径（在本例中为默认路径）的功能，包括路径守卫和路径解析器。
describe('Applicaton smoke test', () => {
it('navigation works', async () => {
const { router, run } = setup();
const canNavigate = await run(() => router.navigateByUrl('/'));
expect(canNavigate).toBe(true);
});
});
canNavigate如果导航到默认路由被允许且成功，则结果为真true。如果路由守卫拒绝访问或路由解析器失败，canNavigate will resolve to则结果为假，断言失败。
如果你的应用程序中的大多数路由都受到登录保护，请更改router.navigateByUrl('/')或router.navigateByUrl('/login')将登录设置添加到测试套件中。
结论
使用TestBed集成测试在实现成本和执行速度之间取得了很好的平衡，因为它比大多数端到端测试框架更快，并且足够接近在真实浏览器中渲染一个或多个 Angular 组件，同时实现起来也很快。这为我们带来了极高的性价比。
副作用
我们可能需要添加一些虚拟 API 或服务来替换那些在真实环境中会导致副作用的 API 或服务。这些虚拟 API 或服务可以由应用程序初始化程序、OnInit生命周期事件或其他 Angular 触发器触发。这些虚拟 API 或服务是通过 Angular 测试模块添加的，该模块由 Angular 测试模块控制TestBed。
在运行冒烟测试时，我们可以考虑使用类似 Mock Service Worker 的工具来模拟 Web API 端点。我建议您阅读 Tim Deschryver 的文章“在 Angular 项目中使用 MSW（Mock Service Worker） ”，并参考Angular 官方示例。
下一步
我们在 Angular 冒烟测试套件中添加了两个测试用例。第一个测试用例验证启动 Angular 应用程序是否会导致任何故障。第二个测试用例测试导航到默认路由的功能。
另一个合乎逻辑的步骤是添加跳转到其他路由的测试用例。更完善的冒烟测试套件甚至应该涵盖应用程序最重要的用例。
文章来源：https://dev.to/this-is-angular/50-lines-of-code-smoke-test-for-any-angular-application-1c0n