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

·  阅读 1519

<< Part 1 - Angular Test Basic

<< Part 2 - Jasmine 语法入门

在开始写单元测试之前,首先需要搞清楚一个问题:什么是单元测试 Unit Test?

单元测试:单元测试是开发人员编写的、用于检测在特定条件下目标代码正确性的代码,是指对软件中的最小可测试单元进行检查和验证。单元测试是在软件开发过程中要进行的最低级别的测试活动,软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。

划重点: 单元测试只关注于功能代码,与数据库,后台请求等通通无关。若功能涉及到service,router等,可通过fakeService及fakeRouter进行处理。

以下通过几个简单的demo来详细了解单元测试的写法及思路,下面的例子从方法类的测试开始,暂时不涉及对template渲染,component依赖,交互等内容的测试,仅为了复盘自己的学习过程,虚心接受批评指正。

demo源码
注: 该项目代码只为了解单元测试的具体写法及基本思路,src/app目录下(01-07)分别对应功能代码和测试代码,无需关注功能代码本身的业务逻辑。下载或clone代码到本地

npm i   //安装依赖
ng test  //运行单元测试
复制代码

1. 从简单计算方法的测试开始

以下是一个简单的计算方法,功能代码中有一处if判断,因此有两个测试分支,即number<0和number>=0的情况,因此至少需要有两个测试用例才能覆盖该方法。

// compute.ts
export function compute (number) {
  if (number < 0) {
      number = 0;
      return number;
  } else {
    return number + 1;
  }
}
复制代码

unit test:

// compute.spec.ts
describe('compute', () => {

  it('should return 0 if input is negative', () => {
    const result = compute(-1);
    expect(result).toBe(0);
  });

  it('should return 1 if input is 0', () => {
    const result = compute(0);
    expect(result).toBe(1);
  });

});
复制代码

以上测试代码中,describe方法定义了一组测试用例的集合,it方法定义一个具体的测试用例,expect和toBe()方法进行断言,这都是Jasmine的基本语法,不在此处赘述。可参考Angular Test Basic, Jasmine 语法入门 part I.

以上构造了两个测试用例,通过input的不同,使测试条件分别满足功能代码中的两个分支,即number<0和number>=0,判断输出是否符合预期。

一个完整的单元测试,务必覆盖功能代码中全部的分支。尤其是的存在if或switch的条件判断时,要考虑到所有的情况进行测试。

通常,可以将一个测试用例分为三部分: Arrange=>Act=>Assert,上述测试用例是针对一个具体的方法的测试,因此省略了Arrange部分,可以直接调用(Act)并断言(Assert)。

2. 对string和array方法的unit test

定义一个简单的方法,返回一个包含三种货币的数组:

// getCurrency.ts
export function getCurrency() {
  return ['CHY', 'USD', 'EUR'];
}
复制代码

对应的测试代码:

// getCurrency.spec.ts
describe('getCUrrency', () => {
  it('should contain the correct currency', () => {
    // Act
    const result = getCurrency();
    // Asset
    expect(result).toContain('CHY');
    expect(result).toContain('USD');
    expect(result).toContain('EUR');
  });
});
复制代码

对于数组元素的测试,通常我们可以在断言中常用toContain,toBe(length),index等方法。

接下来,定义一个简单的方法接收一个参数,并返回固定格式的string。

// sayHello.ts
export function sayHello(name) {
  return `Hello ${name} !!`;
}
复制代码

测试代码:

// sayHello.spec.ts
describe('sayHello', () => {
  it('should contains the input name', () => {
    // Act
    const result = sayHello('Reina');
    // Asset
    expect(result).toContain('Reina');
    // expect(result).toBe('Hello Reina !!');
  });
});
复制代码

在以上的测试代码中,不建议使用expect(result).toBe('Hello Reina !!')进行断言,若使用toBe的判断,则任何改动都会使测试代码fail,这样的测试过于脆弱。

3. 对简单component的unit test

以下定义了一个简单的vote组件(此处不考虑template,stylesheet等),包含upVote和downVote两个方法,分别控制totalVote的加减。

// vote.component.ts
export class VoteComponent {
  totalVotes = 0;

  upVote() {
    this.totalVotes++;
  }

  downVote() {
    this.totalVotes--;
  }

}
复制代码

针对upVote()和downVote()两个方法,分别定义两个测试用例,在每个测试用例中,我们都需要初始化一个voteComponent,以保证两个测试用例相互独立,totalVotes不会相互影响:

describe('vote', () => {

  it('should increment the totalvotes when upvote', () => {
    // Arrange
    const component = new VoteComponent();
    // Act
    component.upVote();
    // Assert
    expect(component.totalVotes).toBe(1);
  });

  it('should decrement the totalvotes when downvote', () => {
    // Arrange
    const component = new VoteComponent();
    // Act
    component.downVote();
    // Assert
    expect(component.totalVotes).toBe(-1);
  });

});
复制代码

随着测试量的增加,可能需要在多个测试用例中对组件进行初始化,会造成很多重复的代码,这种情况下可以使用beforeEach来重构。

describe('vote', () => {
  let component: VoteComponent;

  beforeEach(() => {
    component = new VoteComponent();
  });

  it('should increment the totalvotes when upvote', () => {
    // Act
    component.upVote();
    // Assert
    expect(component.totalVotes).toBe(1);
  });

  it('should decrement the totalvotes when downvote', () => {
    // Act
    component.downVote();
    // Assert
    expect(component.totalVotes).toBe(-1);
  });

});
复制代码

上述测试代码中,首先声明一个component变量但不进行初始化,将初始化代码放在beforeEach中,这是在每个测试用例运行前,beforeEach中的代码都会被执行。
除了beforeEach之外,Jasmine还提供了beforeAll,afterEach,afterAll等方法。根据字面意思,beforeEach和afterEach分别会在每个测试用例的执行前、后执行;而beforeAll和afterAll则分别会在所有的测试用例执行前、后各执行一次。

4. form表单的unit test

首先,通过FormBuilder初始化一个formgroup,并为其添加两个name和email两个字段,将name规定为必填项。

// form.component.ts
export class FormComponent {
  formGroup: FormGroup;

  constructor(fb: FormBuilder) {
    // 初始化一个formgroup,将name设为required
    this.formGroup = fb.group({
      name: ['', Validators.required],
      email: [''],
    });

  }
}
复制代码

分别测试一下三种情况:

  1. formGroup应包含name和email两个field
  2. name字段为空,form为invalid
  3. name字段输入合法值后,form为valid
describe('form', () => {

  let component: FormComponent;

  beforeEach(() => {
    // 初始化formComponent时,需要传入一个formBuilder实例
    component = new FormComponent(new FormBuilder());
  });

  it('should create the formGroup with 2 fields', () => {
    expect(component.formGroup.contains('name')).toBeTruthy();
    expect(component.formGroup.contains('email')).toBeTruthy();
  });

  it('should make the name control required', () => {
    const control = component.formGroup.get('name');
    control.setValue('');
    expect(control.valid).toBeFalsy();
  });

  it('should make the name control valid if input acceptable name', () => {
    const control = component.formGroup.get('name');
    control.setValue('Reina');
    expect(control.valid).toBeTruthy();
  });

});

复制代码

以上测试代码,首先在beforeEach中,对formComponent进行初始化,因其构造函数中需要传入一个formBuilder实例,因此在测试代码中,将new FormBuilder()作为参数。

另外,在上述测试代码中,使用到了formControl和formGroup的属性及方法,并通过toBeFalsy(),toBeTruthy()等方法对布尔值进行判断。

5.EventEmitter的Unit Test

再次以VoteComponent方法为例,在该组件中,定义了一个voteChanged方法作为output,在upVote中触发this.voteChanged.emit(this.totalVotes)。

// eventEmitter/vote.component.ts
export class VoteComponent {
  totalVotes = 0;
  @Output() voteChanged = new EventEmitter();

  upVote() {
    this.totalVotes ++;
    this.voteChanged.emit(this.totalVotes);
  }
复制代码

对eventEmitter进行测试时,首先要保证对应的output方法会被触发,并且要判断拿到的参数是否正确。另外需要知道,EventEmitter类派生自Observable,可以对其进行订阅,测试用例如下:

describe('voteComponent', () => {

  let component: VoteComponent;

  beforeEach(() => {
    component = new VoteComponent();
  });

  it('should trigger voteChanged with totalVotes when upVotes', () => {
    // Arrange
    let totalVotes = null;
    component.voteChanged.subscribe(tv => totalVotes = tv);
    // Act
    component.upVote();
    // Assert
    expect(totalVotes).toBe(1);
  });
});
复制代码

上述测试用例中,首先对VoteChanged进行了订阅,并在其回调中拿到给totalVotes赋值;然后触发update方法,根据totalVotes的值进行断言。

6.针对service的unit test

首先,回顾开头提过的,单元测试只关注于功能代码,与数据库,后台请求等通通无关。因此,在对service进行单元测试时,也不应该真正的触发请求,而是通过fakeService进行。至于service请求是否能返回正确的值,属于集成测试的范畴,不在此考虑。

首先,分别构造一个heroComponent和heroService,heroService为heroComponent提供数据请求,我们将heroService注入到heroComponent中。

在service中,定义了三个方法分别向后抬发送请求,此处并不关心具体实现及其真正的返回值:

// hero.service.ts
export class HeroService {

  constructor(private http: Http) { }

  getHeroes() {
    return this.http.get('...');
  }

  addHero(hero) {
    return this.http.post('...', hero);
  }

  deleteHero(id) {
    return this.http.get('...' + id);
  }
}
复制代码

在heroComponent中,在其初始化时调用service的getHeros方法,并另外定义了add和delete方法分别调用service的addHero和deleteHero的方法。

// hero.component.ts
export class HeroComponent implements OnInit {

  heroList: any;
  message: string;

  constructor(private heroService: HeroService ) {}

  ngOnInit() {
    this.heroService.getHeroes().subscribe((res) => {
      this.heroList = res;
    });
  }

  add() {
    let hero = { id: 1, name: 'hero' };
    this.heroService.addHero(hero).subscribe(
      res => { this.heroList.push(res) },
      err => {
        this.message = err;
      }
    );
  }

  delete(id) {
    if ( confirm('Are you sure to delete?')) {
      this.heroService.deleteHero(id);
    }
  }

}
复制代码

因为组件中分三种情况对service方法进行了调用,因此分别来看针对这三种情况的测试用例:

  1. ngOnInit中调用了getHeros方法,并将返回值赋给heroList
  2. add方法中调用了addHeros,并分别对请求成功和失败进行了处理
  3. delete方法首先使用了window.confirm,确认后调用了deleteHero方法

首先,在beforeEach中对component和service进行初始化,因为测试时并不发送真正的请求,在初始化service可用null代替http,并将service注入component中:

describe('heroComponent', () => {
  let service: HeroService;
  let component: HeroComponent;

   beforeEach(() => {
    service = new HeroService(null);
    component = new HeroComponent(service);
   });
  // ......
});
复制代码

初始化完成后,针对第一个功能点(ngOnInit中调用了getHeros方法,并将返回值赋给heroList)进行测试:

it('should set heroList with the heros returned from service', () => {
    // Arrange
    const heroes = ['Reina', 'David'];
    spyOn(service, 'getHeroes').and.callFake(() => {
      return of(heroes);
    });
    // Act
    component.ngOnInit();
    // Assert
    expect(component.heroList).toBe(heroes);
});
复制代码

以上测试用例中,用到了spyOn(),spyOn方法可以添加对某个对象下的函数执行情况的监控,该方法接收两个参数,分别为被监视的对象和被监视函数的方法名,spyOn(service, 'getHeroes')则是监视service对象中getHeroes方法;结合and.callFake方法可以伪造监听的方法返回值,此处通过一个自定义函数将heroes数组返回。

然后调用ngOnInit以触发getHeroes方法,并通过component.heroList与mock的返回值判断执行结果。

除了and.callFake方法外,jasmine还提供了and.returnValue方法可以指定监听的方法返回值;and.throwError方法可以让监听方法执行之后返回一个错误信息,可以通过toThrowError来适配等,可自行查阅Jasmine文档

接下来,针对第二个功能点(add方法中调用了addHeros,并分别对请求成功和失败进行了处理),测试以下三种情况:

  • service中的addHero方法能够被成功调用;
 it('should call the service to save changes when new hero is added', () => {
    const spy = spyOn(service, 'addHero').and.returnValue(empty());

    component.add();

    expect(spy).toHaveBeenCalled();
   });
复制代码

上述测试用例中,监听了service中的addHero方法,因此处只测试方法是否被正常调用,因此不对返回值进行处理,通过rxjs的empty操作符返回一个空数据流,通过toHaveBeenCalled()检查监听函数是否被调用过。

  • addHero请求成功时,其返回值能够被添加到heroLists中;
it('should add the new hero to herolist return from the server', () => {
  spyOn(service, 'addHero').and.returnValue(of('Lee'));

  component.add();

  expect(component.heroList.indexOf('Lee')).toBeGreaterThan(-1);
  });
复制代码

上述测试用例中,同样通过监听service中的addHero方法,并通过and.returnValue(of('Lee'))方法返回‘Lee’,并通过判断Lee是否被成功的添加到heroList数组中,此处用到了rxjs的of操作符和jasmine中提供的toBeGreaterThan方法。

  • addHero报错时,message能够获得错误信息;
 it('should set error message with the msg return from server when add new hero throw error', () => {
    const mockError = 'Add Hero Error';
    spyOn(service, 'addHero').and.returnValue(throwError(mockError));

    component.add();

    expect(component.message).toBe(mockError);
});

复制代码

在该测试用例中,同样通过监听service中的addHero方法,并通过and.returnValue方法,结合rxjs的throwError操作符返回错误信息,并判断component的message是否被成功赋值。

最后,对第三个功能点(delete方法首先使用了window.confirm,确认后调用了deleteHero方法)进行测试。分别测试确认删除和取消删除的两种情况:

it('should delete the hero with id when user confirm to delete', () => {
    spyOn(window, 'confirm').and.returnValue(true);
    const spy = spyOn(service, 'deleteHero').and.returnValue(empty());

    component.delete(1);

    expect(spy).toHaveBeenCalledWith(1);
   });
复制代码

上述测试用例中,首先通过spyOn(window, 'confirm').and.returnValue(true)监听用户confirm的操作,将返回值设为true,即用户确认删除;然后监听service中的deleteHero方法,并通过and.returnValue返回空,最终判断deleteHero方法是否被成功调用,并检查参数信息是否与传入的一致。

同理,通过spyOn(window, 'confirm').and.returnValue(false)模拟用户取消删除的场景,验证delete方法不被调用。jasmine的常用断言方法,在任何断言方法前面加上not,代表相反的意思。测试用例如下:

it('should NOT delete the hero with id when user cancel to delete', () => {
    spyOn(window, 'confirm').and.returnValue(false);
    const spy = spyOn(service, 'deleteHero').and.returnValue(empty());

    component.delete(1);

    expect(spy).not.toHaveBeenCalledWith(1);
  });
复制代码

以上,通过简单的示例记录了Angular单元测试的基础入门过程。当然,在实际的项目中,远比这复杂的多,一步步继续挖下去吧~

demo源码

<< Part 1 - Angular Test Basic

<< Part 2 - Jasmine 语法入门

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