如何将业力应用到实际的Angular2项目中?

如何将业力应用到实际的Angular2项目中?,angular,karma-runner,Angular,Karma Runner,当我试图将因果报应整合到Angular2项目中时,我发现了下面的例子,并理解了因果报应到底想要完成什么。 然而,对于如何将其应用到实际项目中,我有点困惑。要计算渲染的元素数量,本示例将统计设置该数量。 我不认为我可以在实际应用中以这种方式测试它。根据我的理解,我需要融入后端的响应。 我试图找到一些适用的例子,但是我找不到。如果有人有经验,你能给一些建议吗 // App import { Component, Input } from '@angular/core'; @Component({

当我试图将因果报应整合到Angular2项目中时,我发现了下面的例子,并理解了因果报应到底想要完成什么。 然而,对于如何将其应用到实际项目中,我有点困惑。要计算渲染的元素数量,本示例将统计设置该数量。 我不认为我可以在实际应用中以这种方式测试它。根据我的理解,我需要融入后端的响应。 我试图找到一些适用的例子,但是我找不到。如果有人有经验,你能给一些建议吗

// App
import { Component, Input } from '@angular/core';

@Component({
  selector: 'list',
  template: '<span *ngFor="let user of users">{{ user }}</span>',
})
export class ListComponent {
  @Input() public users: Array<string> = [];
}


// App tests
import { async, inject, TestBed } from '@angular/core/testing';

import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());


describe('ListComponent', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ListComponent]
    });

    this.fixture = TestBed.createComponent(ListComponent);
  });

  it('should render list', async(() => {
    const element = this.fixture.nativeElement;
    this.fixture.componentInstance.users = ['John'];
    this.fixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(1);
  }));

});
//应用程序
从“@angular/core”导入{Component,Input};
@组成部分({
选择器:“列表”,
模板:“{user}}”,
})
导出类ListComponent{
@Input()公共用户:数组=[];
}
//应用程序测试
从“@angular/core/testing”导入{async,inject,TestBed};
从“@angular/platform browser dynamic/testing”导入{browser DynamicTesting Module,PlatformBrowser DynamicTesting};
initTestEnvironment(BrowserDynamicTestingModule,platformBrowserDynamicTesting());
描述('ListComponent',()=>{
在每个之前(()=>{
TestBed.configureTestingModule({
声明:[列表组件]
});
this.fixture=TestBed.createComponent(ListComponent);
});
它('应该呈现列表'),异步(()=>{
常量元素=this.fixture.nativeElement;
this.fixture.componentInstance.users=['John'];
this.fixture.detectChanges();
expect(element.queryselectoral('span').length).toBe(1);
}));
});

在进行单元测试时,您不希望与后端绑定。单元测试的全部目的是输入数据并确保组件正确反应,因此如果输入一个用户,并且组件打印一个用户,这正是您想要实现的。单元测试用于测试代码的许多小部分,如果您进行的更改破坏了某些内容,则可以快速发现问题。如果您想测试整个系统,请使用量角器查看端到端测试。啊,我记得我以前读过。非常感谢。