When you testing Component rendering, you often needs to call:

fixture.detectChanges();

For example:

it('should display original title', () => {
fixture.detectChanges();
expect(el.textContent).toContain(comp.title);
}); it('should display a different test title', () => {
comp.title = 'Test Title';
fixture.detectChanges(); // After change the prop of comp instance, call detectChanges()
expect(el.textContent).toContain('Test Title');
});

You can also set auto change detection:

import { ComponentFixtureAutoDetect } from '@angular/core/testing';

Add to providers:

TestBed.configureTestingModule({
declarations: [ BannerComponent ],
providers: [
{ provide: ComponentFixtureAutoDetect, useValue: true }
]
})

Tests wit auto change detection:

it('should display original title', () => {
// Hooray! No `fixture.detectChanges()` needed
expect(el.textContent).toContain(comp.title);
}); it('should still see original title after comp.title change', () => {
const oldTitle = comp.title;
comp.title = 'Test Title';
// Displayed title is old because Angular didn't hear the change :(
expect(el.textContent).toContain(oldTitle);
}); it('should display updated title after detectChanges', () => {
comp.title = 'Test Title';
fixture.detectChanges(); // detect changes explicitly
expect(el.textContent).toContain(comp.title);
});

[Angular & Unit Testing] Automatic change detection的更多相关文章

  1. [Angular Unit Testing] Debug unit testing -- component rendering

    If sometime you want to log out the comonent html to see whether the html render correctly, you can ...

  2. [Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests

    In a proper unit test we want to isolate external dependencies as much as possible to guarantee a re ...

  3. [Angular & Unit Testing] Testing Component with Store

    When using Ngrx, we need to know how to test the component which has Router injected. Component: imp ...

  4. [Angular Unit Testing] Testing Component methods

    import {ComponentFixture, TestBed} from '@angular/core/testing'; import {BrowserDynamicTestingModule ...

  5. [Angular Unit Testing] Testing Services with dependencies

    import { Http, Response, ResponseOptions } from '@angular/http'; import { TestBed } from '@angular/c ...

  6. [Angular Unit Testing] Shallow Pipe Testing

    import { TestBed, ComponentFixture } from '@angular/core/testing'; import { BrowserDynamicTestingMod ...

  7. [Angular & Unit Testing] Testing a RouterOutlet component

    The way to test router componet needs a little bit setup, first we need to create a "router-stu ...

  8. [Unit Testing] Angular Unit Testing, ui-router, httpbackend and spy

    // backend test beforeEach(inject(function (_$compile_, _$httpBackend_, _$rootScope_, _$state_, _Ann ...

  9. [Angular & Unit Testing] TestBed.get vs Injector

    Both what "TestBed.get" & "injector" trying to do is get service for the tes ...

随机推荐

  1. celery 学习

    1. 列出计划的ETA任务(worker) celery -A proj inspect scheduled 参考文档:http://docs.celeryproject.org/en/latest/ ...

  2. OpenJDK源码研究笔记(六)--观察者模式工具类(Observer和Observable)和应用示例

    本文主要讲解OpenJDK观察者模式的2个工具类,java.util.Observer观察者接口,java.util.Observable被观察者基类. 然后,给出了一个常见的观察者应用示例. Obs ...

  3. C++归并算法

    #include <iostream> using namespace std; void DealWhat(int ar[],int start,int end,int b[]) { i ...

  4. 局部特化 & 特化

    注意,显式特化不是一个模板.如果是类型跟显式特化一样,那么不是实例化. 显式特化类的函数,不需要再加template,因为不是模板方法. 特化类的函数跟模板类不一定要一样,但是一样更好. 不支持局部特 ...

  5. Ubuntu 经常使用软件安装

    Chromium 14.04+ FlashPlayer 原理 就是安装一个flash插件而已啊,网上都没有详解. 我们首先在浏览器地址栏输入chrome://plugins, 全部插件都会展示出来了. ...

  6. cocoapods的安装,使用,卸载,以及你可能会遇到的坑..

    首先, 不会用cocoapods的话如过你接手某些新项目是用cocoapods写的你会疯, 其次他真的非常好用, 当然某些坑也是存在的,比方你用它导入了AFNetwork然后你须要改动一些AF的内部的 ...

  7. atitit.js&#160;与c#&#160;java交互html5化的原理与总结.doc

    atitit.js 与c# java交互html5化的原理与总结.doc 1. 实现html5化界面的要解决的策略 1 1.1. Js交互 1 1.2. 动态參数个数 1 1.3. 事件监听 2 2. ...

  8. Whats the difference between git reset --mixed, --soft, and --hard?

    https://stackoverflow.com/questions/3528245/whats-the-difference-between-git-reset-mixed-soft-and-ha ...

  9. How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能

    个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...

  10. 通用查询实现方案(可用于DDD)[附源码] -- 设计思路

    原文:通用查询实现方案(可用于DDD)[附源码] -- 设计思路 [声明] 写作不易,转载请注明出处(http://www.cnblogs.com/wiseant/p/3988592.html).   ...