Part 1 - Angular Test Basic 了解Angular单元测试

·  阅读 1816

>>> Part 2 - Jasmine 语法入门

>>> Part 3 - Angular 单元测试简单起步

最近,项目组的开发工作不算紧张,老大要求去写单元测试,让覆盖率的数字好看一些。虽然从个人角度,对这种功能开发结束再补单元测试的行为嗤之以鼻(偷偷的), 但也是一个学习了解的机会,于是,开始研究Angular test...

First Step

首先从最简单的开始入手,初始化一个最简单的测试项目app-test

ng new app-test...
复制代码

项目初始化完成后,直接运行ng test命令,就可以运行默认的测试代码了。 我基于angular cli v6.0.7直接运行出现了关于jasmine和typescript的版本不一致的报错,亲测可行的解决方案. 解决完报错之后,运行ng test就可以运行单元测试代码了,浏览器会自动打开并显示测试结果,第一次单元测试就算是成功的跑起来啦~~当然,并没有什么卵用。。。

Angular如何进行单元测试的?

Angular testing主要依赖于以下两者:

  • Karma karma是由Angular Team开发的一个测试工具,它的本质是通过启动一个Web服务,运行测试代码和源代码,检查并显示测试结果。通过Angular-cli初始化项目时,会自动下载并安装karma。 在项目的src目录下,会默认生成karma.conf.js文件,其中包含一些配置信息,如默认浏览器、根目录、端口号等等,可根据实际需要自行更改。详情参考官方介绍

  • Jasmine Angular默认的单元测试代码是基于Jasmine测试框架构建的,Jasmine是一种测试javascript代码的行为驱动(behavior-driven)的框架,它能跟Karma很好的结合,同样,Jasmine也是官方推荐的测试框架,项目初始化时会自动下载并安装。

.spec测试文件的基本结构

首先,观察默认生成的app.component.spec.ts文件,除去一些必须的import之后,测试代码的主要内容如下:

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});
复制代码

1. describe

其最外层是一个名为‘describe’的方法,该方法会创建一个测试用例的集合,方法的声明如下:

function describe(description: string, specDefinitions: () => void): void
复制代码

describe方法接受两个参数:第一个参数是一个string类型的,即为该测试集合的名字,会对应显示在浏览器的测试报告中;第二个参数接收一个回调,即要执行的一组测试用例。

2. beforeEach

beforeEach方法可以理解为为每个测试用例准备测试环境,会先于测试用例执行,声明如下:

function beforeEach(action: ImplementationCallback, timeout?: number): void (+1 overload)
复制代码

beforeEach是官方API提供的方法;与之类似的还有beforeEach, afterEach, beforeAll, afterAll等方法,其具体的使用方式参照官方API.

3. it

it方法用来定义一个具体的测试用例,通过describe方法定义的测试集合中,至少应包含一个it方法,即至少应有一个测试用例。

function it(expectation: string, assertion?: ImplementationCallback, timeout?: number): void (+1 overload)
复制代码

it方法至少接收一个string类型的参数,通常称之为断言,即为该用例测试内容的描述,同样会显示在测试结果报告中,如上例中的‘should create the app’,即表明该用例的目的是测试app组建被成功的创建。其第二个参数则是具体的测试内容;第三个参数则可以设置其延时执行。

写一个最简单的测试用例

了解清楚测试代码的基本结构之后,尝试来写一个最简单的测试用例,通常来说,对纯方法的测试最简单,因为目前的了解还不充分,为了防止干扰,删除默认的app.component.spec.ts文件,并将app.component.html清空,此时因为整个项目中没有其他的测试文件,运行ng test显示如下:

然后,以一个简单的求和方法为例,写一个简单的测试用例。在src/app下,创建一个utils的文件夹,在文件夹下分别创建convert.ts文件和convert.spec.ts文件,分别输入以下内容:

convert.ts

export class Convert {
    public static sum(x: number, y:number){
        return x+y;
    }
}
复制代码

convert.spec.ts

import { Convert } from './convert';
describe('Convert util testing', ()=>{
    it('should return sum of two',()=>{
        let result = Convert.sum(1, 2);
        expect(result).toEqual(3);
    })
})
复制代码

以上代码,实现了两个number类型数字求和的操作,并以简单的数字测试构建了测试用例。保存修改后运行ng test,查看测试结果:

这样,一个最最简单的测试就算成功啦~~

github: github.com/sunrun93/ap…

当然,真正的angular testing要复杂的多的多的多的多...官方有比较全面的文档,但想要全部了解清楚还有很长的路要走。 千里之行,基于跬步,希望自己能不断深入,持续更新,修正,未完待续...

>>> Part 2 - Jasmine 语法入门

>>> Part 3 - Angular 单元测试简单起步

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改