写Angular UT总是犯低级错误,烦躁!
当第一个it跑完之后,第二个it跑之前,会执行component的清理操作。会调用component的ngOnDestroy方法!!!如果只有第一个it而不存在第二个it,那么就不会执行cleanup, 就不会调用ngOnDestroy方法!!!
const component; beforeEach(() => { store = TestBed.get(Store); fixture = TestBed.createComponent(AComponent); component = fixture.componentInstance; }); it('should create', () => { expect(component).toBeTruthy(); }); it('should xxx', () => { xxxx });
列一个加载顺序
// Footer component @Component({ selector: 'app-footer', templateUrl: './footer.html', styleUrls: ['./footer.scss'] }) export class FooterComponent implements OnInit { @Input() data$: Observable<any>; constructor() { console.info(Date.now() + ' constructor run'); } ngOnInit() { console.info(Date.now() + ' ngOnInit run'); } } // Test case @Component({ selector: 'app-test', template: ` <div class="test"> <app-footer [data$]="data$"></app-footer> </div>` }) export class TestComponent { data$ = of(mockData); @ViewChild(FooterComponent) footer: FooterComponent; } describe('FooterComponent', () => { let component: TestComponent; let fixture: ComponentFixture<TestComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [FooterComponent, TestComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA] }) .compileComponents(); })); beforeEach(() => { }); it('should run', async(() => { // 1542164082785 constructor run // fixture = TestBed.createComponent(TestComponent); // 1542164188797 constructor run // fixture = TestBed.createComponent(TestComponent); // component = fixture.componentInstance; // 1542164494371 constructor run // 1542164494456 ngOnInit run // fixture = TestBed.createComponent(TestComponent); // component = fixture.componentInstance; // fixture.detectChanges(); // 1542164608085 constructor run // const fixture2 = TestBed.createComponent(FooterComponent); // 1542165401505 constructor run // const fixture2 = TestBed.createComponent(FooterComponent); // const component2 = fixture2.componentInstance; // 1542165521337 constructor run // 1542165521376 ngOnInit run //const fixture2 = TestBed.createComponent(FooterComponent); //const component2 = fixture2.componentInstance; //component2.data$ = of(mockData); //fixture2.detectChanges(); expect(true).toBe(true); })); });
相关推荐
主要介绍了详解Angular之constructor和ngOnInit差异及适用场景的相关资料,有兴趣的可以了解一下
最初学习Angular的时候总是搞不清楚ngOnInit和constructor的区别,现在我们来稍微理一下两者之间的区别。
angular2-now, Angular 1应用的Angular 2 @Component 语法 angular2-now Angular 1应用的 Angular 2.0组件语法Angular2-now提供了使用 Angular 2组件语法开始编写 Angular 1.4 应用程序的能力。 你可以在学习一些 ...
angular-tree-component, Angular ( 2 6 )的简单而强大的树组件 Angular 树组件入门,文档,演示&更多http://500tech.github.io/angular-tree-component/松弛通道获得社区支持的最佳方法: 松弛社区 Angular 支持
Angular-RESTfulService, Angular 调用rest式服务的示例 Angular rest式服务示例这个项目简单地介绍了如何使用 Angular 来调用rest式服务。 只需克隆项目或者下载并提取. zip 即可开始。 Angular 概念使用app类和...
视图是一组可见的屏幕元素,Angular 可以根据你的程序逻辑和数据来选择和修改它 们。 每个应用都至少有一个根组件。 组件使用服务。服务会提供那些与视图不直接相关的功能。服务提供商可以作为依赖被注入到组件中, ...
Angular中的Dom操作以及@ViewChild、Angular调用css3动画(侧边栏 actionSheet)示例代码.zip
npm install @circlon/angular-tree-component 导入TreeModule : import { TreeModule } from '@circlon/angular-tree-component'; @NgModule({ declarations: [AppComponent], imports: [TreeModule], ...
揭秘angular2 中文pdf电子版是一本专业的angular技术书籍,图文清晰,结构明朗,该书覆盖angular基础、架构以及技术应用等各方面知识,内容非常详细,有兴趣的朋友欢迎前来下载!
Angular 6 SPA 集成企业微信 Demo
import { Component, DoCheck } from "@angular/core"; export class LangListUserComponent implements DoCheck { constructor(private differs: KeyValueDiffers) { } ngOnInit() { this.objDiffer = {}; this...
angular2-datatable, 带有排序和分页的Angular2简单表组件 table 组件,具有对Angular2进行排序和分页的功能 演示在plunker中检查实时演示安装npm i -S angular2-datatable用法示例AppModule.ts
使用angular的过程中有时会出现数据已经更新了,但是对于的视图没有更新,针对这一情况,可以是用angular提供的方法强制更新视图。 这里使用NGZone来更新视图 import {NgZone} from '@angular/core'; constructor...
Angular中的Dom操作以及@ViewChild、Angular调用css3动画(侧边栏 actionSheet)
angular-snapscroll, 在 Angular 中,垂直滚动和捕捉功能 角 snapscroll angular-snapscroll向 Angular 添加垂直scroll-and-snap功能。js仅实现只需要 Angular 内核6.2kB 缩小时,压缩时 2.3 kB
使用Angular-React可以使用Angular [2+]应用程序中的所有React元素,尤其是Office UI Fabric。 Office UI Fabric的包装器库简化了Angular对这些组件的使用。 但是,任何React代码都可以使用自定义Angular-React渲染...
Angular6 中文官方文档 pdf ,分享给大家希望有用啊!
先上网址吧:https://github.com/500tech/angular-tree-component 这是牛逼哄哄的GitHub页面, http://500tech.github.io/angular-tree-component/ 这就是官网啦。 大背景–首先我是在Angular4下面使用的。 1、...