Angular2 之 单元测试

单元测试需要掌握的知识点

  • karma.conf.js的配置 具体了解到每一项的意义,这样才能真正的了解这个配置是如何配置的,甚至才可以做到自己的配置。
  • 组件的测试
  • 单独的service测试

Angular的测试工具

Angular的测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一的,你可以不依赖Angular 的DI(依赖注入)系统,自己new出来测试类的实例。

孤立的单元测试

describe('Service: base-data-remote', () => {
  let service = new BaseDataRemoteService();
  
  it('should be created',() => {
    expect(service).toBeTruthy();
  });
});

利用Angular测试工具进行测试知识点总结

测试工具包含了TestBed类和@angular/core/testing中的一些方法。

  • 在每个spec之前 ,TestBed将自己重设为初始状态。

测试组件

import { Component }   from '@angular/core';

@Component({
  selector: 'app-banner',
  template: '<h1>{{title}}</h1>'
})
export class BannerComponent {
  title = 'Test Tour of Heroes';
}
let comp:    BannerComponent;
let fixture: ComponentFixture<BannerComponent>;
let de:      DebugElement;
let el:      HTMLElement;

describe('BannerComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ BannerComponent ], // declare the test component
    });

    fixture = TestBed.createComponent(BannerComponent);

    comp = fixture.componentInstance; // BannerComponent test instance

    // query for the title <h1> by CSS element selector
    de = fixture.debugElement.query(By.css('h1'));
    el = de.nativeElement;

  });
});
  • 组件测试
  • TestBed.createComponent创建BannerComponent组件的实例,可以用来测试和返回fixture
  • TestBed.createComponent关闭当前TestBed实例,让它不能再被配置。
  • query方法接受predicate函数,并搜索fixture的整个DOM树,试图寻找第一个满足predicate函数的元素。
  • queryAll方法返回一列数组,包含所有DebugElement中满足predicate的元素。
  • By类是Angular测试工具之一,它生成有用的predicate。 它的By.css静态方法产生标准CSS选择器 predicate,与JQuery选择器相同的方式过滤。
  • detectChanges:在测试中的Angular变化检测。 每个测试程序都通过调用fixture.detectChanges() 来通知Angular执行变化检测。

测试有依赖的组件,这个依赖的测试

这个依赖的模拟方式有两种:伪造服务实例(提供服务复制品)、刺探真实服务。这两种方式都不错,只需要挑选一种最适合你当前测试文件的测试方式来做最好。

伪造服务实例

被测试的组件不一定要注入真正的服务。实际上,服务的复制品(stubs, fakes, spies或者mocks)通常会更加合适。 spec的主要目的是测试组件,而不是服务。真实的服务可能自身有问题。

这个测试套件提供了最小化的UserServiceStub类,用来满足组件和它的测试的需求。

userServiceStub = {
  isLoggedIn: true,
  user: { name: 'Test User'}
};

获取注入的服务

测试程序需要访问被注入到组件中的UserService(stub类)。

Angular的注入系统是层次化的。 可以有很多层注入器,从根TestBed创建的注入器下来贯穿整个组件树。

最安全并总是有效的获取注入服务的方法,是从被测试的组件的注入器获取。 组件注入器是fixture的DebugElement的属性。

出人意料的是,请不要引用测试代码里提供给测试模块的userServiceStub对象。它是行不通的! 被注入组件的userService实例是彻底不一样的对象,是提供的userServiceStub 的克隆。

  • TestBed.get方法从根注入器中获取服务。 例如: dataService = testBed.get(DataService);

测试代码

  beforeEach(() => {
    // stub UserService for test purposes
    userServiceStub = {
      isLoggedIn: true,
      user: { name: 'Test User'}
    };

    TestBed.configureTestingModule({
       declarations: [ WelcomeComponent ],
       // 重点
       providers:    [ {provide: UserService, useValue: userServiceStub } ] 
    });

    fixture = TestBed.createComponent(WelcomeComponent);
    comp    = fixture.componentInstance;

    // UserService from the root injector
    // 重点
    userService = TestBed.get(UserService);

    //  get the "welcome" element by CSS selector (e.g., by class name)
    de = fixture.debugElement.query(By.css('.welcome'));
    el = de.nativeElement;
  });

刺探(Spy)真实服务

注入了真是的服务,并使用Jasmine的spy替换关键的getXxxx方法。

spy = spyOn(remoteService, 'getTodos').and.returnValues([Promise.resolve(datas), Promise.resolve(datas2)]);

Spy的设计是,所有调用getTodos的方法都会受到立刻解析的承诺,得到一条预设的名言。

it方法中的几个函数

写单元测试时,it里经常会有几个常见的方法,async(),fakeAsync(),tick(),jasmine.done()方法等。 这几个方法,都帮助我们简化了异步测试程序的代码。但是需要正确的使用这几个方法。

组件

@Component({
  selector: 'twain-quote',
  template: '<p class="twain"><i>{{quote}}</i></p>'
})
export class TwainComponent  implements OnInit {
  intervalId: number;
  quote = '...';
  constructor(private twainService: TwainService) { }

  ngOnInit(): void {
    this.twainService.getQuote().then(quote => this.quote = quote);
  }
}
  • async
    • Angular TestBed的一部分。通过将测试代码放到特殊的异步测试区域来运行,async函数简化了异步测试程序的代码。
  • 接受无参数的函数方法,返回无参数的函数方法,变成Jasmine的it函数的参数。
  • 它的参数看起来和普通的it参数主体一样。 没有任何地方显示异步特征。 比如,它不返回承诺,并且没有done方法可调用,因为它是标准的Jasmine异步测试程序。

使用例子:

it('should show quote after getQuote promise (async)', async(() => {
  fixture.detectChanges();

  fixture.whenStable().then(() => { // wait for async getQuote
    fixture.detectChanges();        // update view with quote
    expect(el.textContent).toBe(testQuote);
  });
}));
  • 简单介绍一下whenStable()方法
  • 测试程序必须等待getQuote在JavaScript引擎的下一回合中被解析。
  • ComponentFixture.whenStable方法返回它自己的承诺,它getQuote 承诺完成时被解析。实际上,“stable”的意思是当所有待处理异步行为完成时的状态,在“stable”后whenStable承诺被解析。
  • 然后测试程序继续运行,并开始另一轮的变化检测(fixture.detectChanges ),通知Angular使用名言来更新DOM。 getQuote 辅助方法提取出显示元素文本,然后expect语句确认这个文本与预备的名言相符。
  • fakeAsync
  • fakeAsync是另一种Angular测试工具。
  • async一样,它也接受无参数函数并返回一个函数,变成Jasmine的it 函数的参数。
  • fakeAsync函数通过在特殊的fakeAsync测试区域运行测试程序,让测试代码更加简单直观。
  • 对于async来说,fakeAsync最重要的好处是测试程序看起来像同步的。里面没有任何承诺。 没有then(...)链来打断控制流。
  • tick tick函数是Angular测试工具之一,是fakeAsync的同伴。 它只能在fakeAsync的主体中被调用。
  • 调用tick()模拟时间的推移,直到全部待处理的异步任务都已完成,在这个测试案例中,包含getQuote承诺的解析。

使用例子

it('should show quote after getQuote promise (fakeAsync)', fakeAsync(() => {
  fixture.detectChanges();
  tick();                  // wait for async getQuote
  fixture.detectChanges(); // update view with quote
  expect(el.textContent).toBe(testQuote);
}));
  • jasmine.done 虽然async和fakeAsync函数大大简化了异步测试,但是你仍然可以使用传统的Jasmine异步测试技术。 你仍然可以将接受 done回调的函数传给it。 但是,你必须链接承诺、处理错误,并在适当的时候调用done。 使用例子
it('should show quote after getQuote promise (done)', done => {
  fixture.detectChanges();

  // get the spy promise and wait for it to resolve
  spy.calls.mostRecent().returnValue.then(() => {
    fixture.detectChanges(); // update view with quote
    expect(el.textContent).toBe(testQuote);
    done();
  });
});

以上这三个测试例子是等价的,也就是说,你可以随你喜好选择你喜欢的测试方式来进行单元测试的编写。

测试有外部模板的组件

使用例子

// async beforeEach
beforeEach( async(() => {
  TestBed.configureTestingModule({
    declarations: [ DashboardHeroComponent ],
  })
  .compileComponents(); // compile template and css
}));

beforeEach里的async函数

注意beforeEach里面对async的调用,因为异步方法TestBed.compileComponents而变得必要。

compileComponents

  • 在本例中,TestBed.compileComponents编译了组件,那就是DashbaordComponent。 它是这个测试模块唯一的声明组件。
  • 本章后面的测试程序有更多声明组件,它们中间的一些导入应用模块,这些模块有更多的声明组件。 一部分或者全部组件可能有外部模板和CSS文件。 TestBed.compileComponents一次性异步编译所有组件。
  • compileComponents方法返回承诺,可以用来在它完成时候,执行更多额外任务。

测试带有inputs和outputs的组件

测试前期代码

  // async beforeEach
  beforeEach( async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashboardHeroComponent ],
    })
    .compileComponents(); // compile template and css
  }));

  // synchronous beforeEach
  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardHeroComponent);
    comp    = fixture.componentInstance;
    heroEl  = fixture.debugElement.query(By.css('.hero')); // find hero element

    // pretend that it was wired to something that supplied a hero
    expectedHero = new Hero(42, 'Test Name');
    comp.hero = expectedHero;
    fixture.detectChanges(); // trigger initial data binding
  });

属性

测试代码是将模拟英雄(expectedHero)赋值给组件的hero属性的。

// pretend that it was wired to something that supplied a hero 
expectedHero = new Hero(42, 'Test Name'); 
comp.hero = expectedHero;

点击事件

  it('should raise selected event when clicked', () => {
    let selectedHero: Hero;
    comp.selected.subscribe((hero: Hero) => selectedHero = hero);

    heroEl.triggerEventHandler('click', null);
    expect(selectedHero).toBe(expectedHero);
  });

这个组件公开EventEmitter属性。测试程序像宿主组件那样来描述它。

heroEl是个DebugElement,它代表了英雄所在的<div>。 测试程序用"click"事件名字来调用triggerEventHandler。 调用DashboardHeroComponent.click()时,"click"事件绑定作出响应。

如果组件想期待的那样工作,click()通知组件的selected属性发出hero对象,测试程序通过订阅selected事件而检测到这个值,所以测试应该成功。

triggerEventHandler

Angular的DebugElement.triggerEventHandler可以用事件的名字触发任何数据绑定事件。 第二个参数是传递给事件处理器的事件对象。


自己遇到的坑儿

下面都是自己在实际的编写单元测试时,真实遇到的问题,自己真的是在这上面花费了很多时间啊!!!为什么没有说花冤枉时间呢?就是因为是自己对单元测试还没哟掌握,所以出了错,不要紧,重要的是以后不能再犯!

service的注入

刚刚接触angular2吧,对很多service的写法不是很了解,以至于真的是白白浪费了很多时间,尤其是在这个service的模拟上。可能聪明如你,不会犯我这样简单却又致命的错误吧,只希望,以后的贺贺也可以不再犯这样的错!?自己一把... ...

首先来看一下,我创建的这个service的用法。

@Injectable()
export class BaseDataService {
    remoteService: BaseDataRemoteService;
    private datasMap = {}; // 用于存储所有的数据
    private todosCache = {};   // 待办数据的id的临时存储
    private draftsCache = {};  // 草稿数据临时存储
    private relatedCache = {}; // 已办理数据临时存储

    constructor(private config: any, private http: Http) {
        this.config = config;
        this.config.baseUrl = config.baseUrl || config.name;
        this.remoteService = new BaseDataRemoteService(this.config.baseUrl, this.config.idPropertyName, this.http);
    }

    getTodos(userId: String, pageNo?: number): any {
        pageNo = pageNo || 0;
        return this.remoteService.getTodos(userId, pageNo).then(datas => {
            let todos = datas.content;
            todos.forEach(element => {
                this.datasMap[element[this.config.idPropertyName]] = element;
                if (pageNo === 0) {
                    this.todosCache = {};
                }
            });

            this.todosCache[pageNo] = this.getRecordIds(todos);
            return todos;
        }, () => {
            return [];
        });

    }
}

其中的BaseDataRemoteService我是自己new出来的,而且这个BaseDataService也是我自己new出来的,所以首先第一点,我应该自己创建,而不能使用angular的DI系统来帮助我创建。

第二点就是在模拟的时候,我竟然傻傻的自己去在spec文件中自己去new了BaseDataRemoteService,所以我根本没有办法去执行spyOn(foo, "getBar")这样的模拟,然后就是一直的出错。错样百出了!

正确的单元测试:

function makeEnvironment() {
  return TestBed.configureTestingModule({
    providers: [
      MockBackend,
      BaseRequestOptions,
      {
        provide: Http,
        useFactory: (backend, options) => {
          return new Http(backend, options);
        }, deps: [MockBackend, BaseRequestOptions],
      },
    ],
    imports: [HttpModule],
  });
}

const userId: String = '123';
let pageNo: number;

describe('Service: base-data', () => {

  const config = {
    name: 'archives/out',
    baseUrl: '/archives/out',
    idPropertyName: 'outId',
    subflagPropertyName: 'subflag',
  };

  const datas = [];

  const datas2 = [];

  let service: BaseDataService;
  let spy: jasmine.Spy;
  let http: Http; // 还应该是DI系统的

  beforeEach(() => {
    const testBed = makeEnvironment();
    http = testBed.get(Http);

    service = new BaseDataService(config, http); //这是自己new出来的
// 但是自己不能new出来BaseDataRemoteService
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

    it('获取到的数据为空', async(() => {
      // 这样的使用才是正确的!!!
      spy = spyOn(service.remoteService, 'getTodos').and.returnValue(Promise.resolve({content: []}));
      service.getTodos(userId).then(todos => {
        expect(todos.length).toBe(0);
        expect(todos).toEqual([]);
        expect(service.getTodosCache(0).length).toBe(0);
      });
    }));

下次一定要注意,不要瞎写!!!


多次调用同一个异步方法

相信大家对这段单元测试的代码很熟悉,这里就是模拟多次调用同一个方法时,返回不同的值。

这里是同步方法的模拟返回数据,那么异步方法同样可以。

describe("A spy, when configured to fake a series of return values", function() {
  var foo, bar;

  beforeEach(function() {
    foo = {
      setBar: function(value) {
        bar = value;
      },
      getBar: function() {
        return bar;
      }
    };

    // 多次调用时,返回不同的值!
    spyOn(foo, "getBar").and.returnValues("fetched first", "fetched second"); 

    foo.setBar(123);
  });

  it("when called multiple times returns the requested values in order", function() {
    expect(foo.getBar()).toEqual("fetched first");
    expect(foo.getBar()).toEqual("fetched second");
    expect(foo.getBar()).toBeUndefined();
  });
});

下面是出错的代码。

    it('when the baseUrl is exist and pageNo is exist', async(() => {
      // 模拟多次进行异步调用时的返回值
      spyOn(service.remoteService, 'getRelatedList').and
      .returnValues(Promise.resolve({content: datas}), Promise.resolve({content: datas2}));
      pageNo = 0;
      // 第一次调用
      service.getRelatedList(userId, pageNo).then(relate => {
        expect(relate.length).toBe(2);
        expect(relate).toEqual(datas);
        expect(service.getRelatedCache(0).length).toBe(2, 'the length should be 2.');
      });
      // 第二次调用
      service.getRelatedList(userId).then(relate => {
        expect(relate.length).toBe(3);
        expect(relate).toEqual(datas2);
        expect(relate.length).not.toBe(2);
        expect(relate).not.toEqual(datas);
        expect(service.getRelatedCache(0).length).toBe(3);
      });
    }));

下面是单元测试的结果:

虽然第一个、第二个expect通过了,但是第三个无论如何也通不过。其实不是代码写的有问题,是单元测试写的有有问题,在第一个expect去判断的时候,第二个 service.getRelatedList已经执行完了,所以才会出错。

这个错误,我意识到了,所以我再第二次调用的地方添加了一个延时执行的函数,这样单元测试是完全正确的,但是这并不是一个好的解决办法。

      setTimeout(function() {
        
      }, 200);

最好的解决办法是,是使用fakeAsynctick来解决。

tick函数是Angular测试工具之一,是fakeAsync的同伴。 它只能在fakeAsync的主体中被调用。

调用tick()模拟时间的推移,直到全部待处理的异步任务都已完成。

下面是正确的代码:

    it('when the baseUrl is exist and pageNo is exist', fakeAsync(() => {
      spyOn(service.remoteService, 'getRelatedList').and
      .returnValues(Promise.resolve({content: datas}), Promise.resolve({content: datas2}));
      pageNo = 0;

      service.getRelatedList(userId, pageNo).then(relate => {
        expect(relate.length).toBe(2);
        expect(relate).toEqual(datas);
        expect(service.getRelatedCache(0).length).toBe(2, 'the length should be 2.');
      });

      tick(); // 基本的意思就是,前后分开来执行

      service.getRelatedList(userId).then(relate => {
        expect(relate.length).toBe(3);
        expect(relate).toEqual(datas2);
        expect(relate.length).not.toBe(2);
        expect(relate).not.toEqual(datas);
        expect(service.getRelatedCache(0).length).toBe(3);
      });
    }));

其实这之前我是把tick()方法都看过一遍的,可是还是不理解其中的意思,所以记录下来吧,所谓书读百遍变其义自见,加油啊!???

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Kubernetes

Kubernetes Deployment滚动更新场景分析

基于Kubernetes v1.7.4 关于Kubernetes Deployment滚动更新 Kubernetes官网文档说明:https://kube...

40490
来自专栏cmazxiaoma的架构师之路

JavaWeb学习(1) 使用Session和Token防止表单重复提交

22430
来自专栏阮一峰的网络日志

JavaScript与有限状态机

有限状态机(Finite-state machine)是一个非常有用的模型,可以模拟世界上大部分事物。 ? 简单说,它有三个特征:   * 状态总数(stat...

38270
来自专栏Modeng的专栏

Vue双向绑定原理,教你一步一步实现双向绑定

当今前端天下以 Angular、React、vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋。

13210
来自专栏用户2442861的专栏

webStorm 3.0配置使用主题背景色等

http://www.cnblogs.com/jikey/archive/2012/01/16/2323590.html

29110
来自专栏CaiRui

Python Flask-web表单

Flask-WTF扩展可以把处理web表单的过程变成一种愉悦的体验。 ? 一、跨站请求伪造保护 默认情况下,Flask-WTF能够保护所有表单免受跨站请求伪造的...

39790
来自专栏自由而无用的灵魂的碎碎念

通过重建图标缓存文件来解决程序图标显示错误的问题

最近发现一两个程序的图标显示不太正确。很明显,上图在资源管理器与详细信息面板的图标不同。

12510
来自专栏圣杰的专栏

Asp.net mvc 知多少(七)

本系列主要翻译自《ASP.NET MVC Interview Questions and Answers 》- By Shailendra Chauhan,想...

23950
来自专栏Spark学习技巧

Kafka源码系列之kafka如何实现高性能读写的

本文依然是以kafka 0.8.2.2的源码为例进行讲解。 一,kafka高性能的原因 Kafka吞吐量是大家公认的高,那么这是为什么呢?个人总结为以下三点: ...

1.9K70
来自专栏崔庆才的专栏

正则表达式中零宽断言的用法

了解了正则表达式,想必一般情况下的匹配都不会出现什么问题,但是如果一些特殊情况,可能需要用到一些更高级的正则表达式匹配操作,本节我们来说明一下正则表达式的一个较...

29840

扫码关注云+社区

领取腾讯云代金券