Angular2 之单元测试

贺贺V5

发布于 2018-08-21 12:10:11

5.5K0

发布于 2018-08-21 12:10:11

文章被收录于专栏：贺贺的前端工程师之路贺贺的前端工程师之路

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

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);

最好的解决办法是，是使用fakeAsync和tick来解决。
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()方法都看过一遍的，可是还是不理解其中的意思，所以记录下来吧，所谓书读百遍变其义自见，加油啊！???

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016.12.05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度