`

请您先登录,才能继续操作

Angular UT中Component constructor和ngOnInit的调用顺序

阅读更多

写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 框架中有两个重要的生命周期函数:constructor 和 ngOnInit。它们都是在组件或指令生命周期中被调用的函数,但是它们的含义和适用场景却有所不同。 constructor 是 ES6 中引入的类的概念,它是一个类的...

    详解Angular 中 ngOnInit 和 constructor 使用场景

    ngOnInit 钩子是在 Angular 生命週期钩子中的一部分,钩子的调用顺序如下: 1. ngOnChanges -- 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit() 之前。 2. ngOnInit() -- 在 Angular 第一...

    angular2-now, Angular 1应用的Angular 2 @Component 语法.zip

    angular2-now, Angular 1应用的Angular 2 @Component 语法 angular2-now Angular 1应用的 Angular 2.0组件语法Angular2-now提供了使用 Angular 2组件语法开始编写 Angular 1.4 应用程序的能力。 你可以在学习一些 ...

    Angular中的Dom操作以及@ViewChild、Angular调用css3动画(侧边栏 actionSheet)示例代码.zip

    在Angular框架中,DOM操作是实现用户界面动态更新的关键部分,而@ViewChild和CSS3动画则是提高用户体验的重要技术手段。让我们深入探讨这些概念,并通过实际示例了解它们如何协同工作。 1. Angular中的DOM操作: ...

    angular-tree-component, Angular ( 2 6 )的简单而强大的树组件.zip

    angular-tree-component, Angular ( 2 6 )的简单而强大的树组件 Angular 树组件入门,文档,演示&更多http://500tech.github.io/angular-tree-component/松弛通道获得社区支持的最佳方法: 松弛社区 Angular 支持

    Angular异步变同步处理方法

    在前端开发中,经常遇到的一个场景是多个接口的调用顺序依赖问题。例如,页面需要从第一个接口获取数据,然后用这些数据作为参数调用第二个接口,以此类推。由于Angular的Http服务的请求是异步的,如果按照普通的...

    揭秘Angular2 中文扫描版 带书签

    这本书以中文形式呈现,旨在帮助中国开发者轻松掌握Angular2的核心概念和技术细节。书中内容全面,从基础知识到高级架构,再到实际应用,为读者提供了一个全方位的学习路径。 1. **Angular2简介** Angular2是...

    angular5.x中文手册

    组件中还包含了Angular生命周期钩子,如ngOnInit,它在组件初始化时调用。 五、组件的使用 组件使用包括数据和事件的绑定。数据绑定涵盖了文本绑定和属性绑定。Angular 提供了 *ngFor 指令进行普通循环和列表循环,...

    Angular-RESTfulService, Angular 调用rest式服务的示例.zip

    Angular-RESTfulService, Angular 调用rest式服务的示例 Angular rest式服务示例这个项目简单地介绍了如何使用 Angular 来调用rest式服务。 只需克隆项目或者下载并提取. zip 即可开始。 Angular 概念使用app类和...

    基于Angular的拖拽排序实现

    在Angular框架中实现拖拽排序是一项常见的需求,它允许用户通过直观的拖放操作来调整元素的顺序。本文将深入探讨如何在Angular应用中实现这一功能,并基于提供的"dragSort-Angular-master"项目进行详细讲解。 首先...

    angular中的路由简单使用

    总结,Angular中的路由系统提供了强大的导航和视图管理能力,使得单页应用的构建变得更加灵活和高效。理解并熟练运用路由配置、`RouterLink`、`ActivatedRoute`以及导航方法,是每个Angular开发者必备的技能。通过...

    Angular中的Dom操作以及@ViewChild、Angular调用css3动画(侧边栏 actionSheet)

    在Angular框架中,DOM操作是开发过程中不可或缺的一部分,它允许我们动态地修改页面内容和样式。Angular提供了多种方法来处理DOM,使得开发者可以避免直接使用JavaScript进行操作,从而提高代码的可测试性和可维护性...

    剖析Angular Component的源码示例

    在实际应用中,Angular Component通常与服务、指令和管道等其他Angular特性结合使用,构建出复杂的单页应用。Angular的依赖注入系统使得组件能够轻松获取所需的服务,而指令则提供了操作DOM的能力。通过组件化,...

    Angular中的生命周期函数--动态挂载销毁组件

    为了有效地管理组件的状态和行为,Angular提供了一系列的生命周期钩子(Lifecycle Hooks),这些钩子在组件的不同阶段被调用,让我们能够精确地控制组件的初始化、更新和销毁过程。本篇文章将深入探讨"Angular中的...

    angular-tree-component:一个简单但功能强大的Angular树组件(> = 2)

    npm install @circlon/angular-tree-component 导入TreeModule : import { TreeModule } from '@circlon/angular-tree-component'; @NgModule({ declarations: [AppComponent], imports: [TreeModule], ...

    提取Angular的依赖注入它允许你在框架之外使用它

    在Angular框架中,依赖注入(Dependency Injection,简称DI)是一个核心特性,它使得开发者能够轻松地管理和使用应用程序中的各种服务和组件。这个特性允许我们解耦代码,提高可测试性和可维护性。Angular的DI系统...

    Angular路由的嵌套 父子路由(3)

    在Angular应用中,我们使用`RouterModule`和`Routes`配置来定义路由表。例如: ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ...

    Angular6.X 中文官方文档

    在架构上,Angular的核心是围绕着几个主要概念展开的,包括组件(Component)、模块(Module)、服务(Service)、依赖注入(Dependency Injection)、模板(Template)、指令(Directive)和数据绑定(Data Binding...

Global site tag (gtag.js) - Google Analytics