写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。它们都是在组件或指令生命周期中被调用的函数,但是它们的含义和适用场景却有所不同。 constructor 是 ES6 中引入的类的概念,它是一个类的...
ngOnInit 钩子是在 Angular 生命週期钩子中的一部分,钩子的调用顺序如下: 1. ngOnChanges -- 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit() 之前。 2. ngOnInit() -- 在 Angular 第一...
angular2-now, Angular 1应用的Angular 2 @Component 语法 angular2-now Angular 1应用的 Angular 2.0组件语法Angular2-now提供了使用 Angular 2组件语法开始编写 Angular 1.4 应用程序的能力。 你可以在学习一些 ...
在Angular框架中,DOM操作是实现用户界面动态更新的关键部分,而@ViewChild和CSS3动画则是提高用户体验的重要技术手段。让我们深入探讨这些概念,并通过实际示例了解它们如何协同工作。 1. Angular中的DOM操作: ...
angular-tree-component, Angular ( 2 6 )的简单而强大的树组件 Angular 树组件入门,文档,演示&更多http://500tech.github.io/angular-tree-component/松弛通道获得社区支持的最佳方法: 松弛社区 Angular 支持
在前端开发中,经常遇到的一个场景是多个接口的调用顺序依赖问题。例如,页面需要从第一个接口获取数据,然后用这些数据作为参数调用第二个接口,以此类推。由于Angular的Http服务的请求是异步的,如果按照普通的...
这本书以中文形式呈现,旨在帮助中国开发者轻松掌握Angular2的核心概念和技术细节。书中内容全面,从基础知识到高级架构,再到实际应用,为读者提供了一个全方位的学习路径。 1. **Angular2简介** Angular2是...
组件中还包含了Angular生命周期钩子,如ngOnInit,它在组件初始化时调用。 五、组件的使用 组件使用包括数据和事件的绑定。数据绑定涵盖了文本绑定和属性绑定。Angular 提供了 *ngFor 指令进行普通循环和列表循环,...
Angular-RESTfulService, Angular 调用rest式服务的示例 Angular rest式服务示例这个项目简单地介绍了如何使用 Angular 来调用rest式服务。 只需克隆项目或者下载并提取. zip 即可开始。 Angular 概念使用app类和...
在Angular框架中实现拖拽排序是一项常见的需求,它允许用户通过直观的拖放操作来调整元素的顺序。本文将深入探讨如何在Angular应用中实现这一功能,并基于提供的"dragSort-Angular-master"项目进行详细讲解。 首先...
总结,Angular中的路由系统提供了强大的导航和视图管理能力,使得单页应用的构建变得更加灵活和高效。理解并熟练运用路由配置、`RouterLink`、`ActivatedRoute`以及导航方法,是每个Angular开发者必备的技能。通过...
在Angular框架中,DOM操作是开发过程中不可或缺的一部分,它允许我们动态地修改页面内容和样式。Angular提供了多种方法来处理DOM,使得开发者可以避免直接使用JavaScript进行操作,从而提高代码的可测试性和可维护性...
在实际应用中,Angular Component通常与服务、指令和管道等其他Angular特性结合使用,构建出复杂的单页应用。Angular的依赖注入系统使得组件能够轻松获取所需的服务,而指令则提供了操作DOM的能力。通过组件化,...
为了有效地管理组件的状态和行为,Angular提供了一系列的生命周期钩子(Lifecycle Hooks),这些钩子在组件的不同阶段被调用,让我们能够精确地控制组件的初始化、更新和销毁过程。本篇文章将深入探讨"Angular中的...
npm install @circlon/angular-tree-component 导入TreeModule : import { TreeModule } from '@circlon/angular-tree-component'; @NgModule({ declarations: [AppComponent], imports: [TreeModule], ...
在Angular框架中,依赖注入(Dependency Injection,简称DI)是一个核心特性,它使得开发者能够轻松地管理和使用应用程序中的各种服务和组件。这个特性允许我们解耦代码,提高可测试性和可维护性。Angular的DI系统...
在Angular应用中,我们使用`RouterModule`和`Routes`配置来定义路由表。例如: ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ...
在架构上,Angular的核心是围绕着几个主要概念展开的,包括组件(Component)、模块(Module)、服务(Service)、依赖注入(Dependency Injection)、模板(Template)、指令(Directive)和数据绑定(Data Binding...