[Angular & Unit Testing] Automatic change detection
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的更多相关文章
- [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 ...
- [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 ...
- [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 ...
- [Angular Unit Testing] Testing Component methods
import {ComponentFixture, TestBed} from '@angular/core/testing'; import {BrowserDynamicTestingModule ...
- [Angular Unit Testing] Testing Services with dependencies
import { Http, Response, ResponseOptions } from '@angular/http'; import { TestBed } from '@angular/c ...
- [Angular Unit Testing] Shallow Pipe Testing
import { TestBed, ComponentFixture } from '@angular/core/testing'; import { BrowserDynamicTestingMod ...
- [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 ...
- [Unit Testing] Angular Unit Testing, ui-router, httpbackend and spy
// backend test beforeEach(inject(function (_$compile_, _$httpBackend_, _$rootScope_, _$state_, _Ann ...
- [Angular & Unit Testing] TestBed.get vs Injector
Both what "TestBed.get" & "injector" trying to do is get service for the tes ...
随机推荐
- celery 学习
1. 列出计划的ETA任务(worker) celery -A proj inspect scheduled 参考文档:http://docs.celeryproject.org/en/latest/ ...
- OpenJDK源码研究笔记(六)--观察者模式工具类(Observer和Observable)和应用示例
本文主要讲解OpenJDK观察者模式的2个工具类,java.util.Observer观察者接口,java.util.Observable被观察者基类. 然后,给出了一个常见的观察者应用示例. Obs ...
- C++归并算法
#include <iostream> using namespace std; void DealWhat(int ar[],int start,int end,int b[]) { i ...
- 局部特化 & 特化
注意,显式特化不是一个模板.如果是类型跟显式特化一样,那么不是实例化. 显式特化类的函数,不需要再加template,因为不是模板方法. 特化类的函数跟模板类不一定要一样,但是一样更好. 不支持局部特 ...
- Ubuntu 经常使用软件安装
Chromium 14.04+ FlashPlayer 原理 就是安装一个flash插件而已啊,网上都没有详解. 我们首先在浏览器地址栏输入chrome://plugins, 全部插件都会展示出来了. ...
- cocoapods的安装,使用,卸载,以及你可能会遇到的坑..
首先, 不会用cocoapods的话如过你接手某些新项目是用cocoapods写的你会疯, 其次他真的非常好用, 当然某些坑也是存在的,比方你用它导入了AFNetwork然后你须要改动一些AF的内部的 ...
- atitit.js 与c# java交互html5化的原理与总结.doc
atitit.js 与c# java交互html5化的原理与总结.doc 1. 实现html5化界面的要解决的策略 1 1.1. Js交互 1 1.2. 动态參数个数 1 1.3. 事件监听 2 2. ...
- 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 ...
- How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能
个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...
- 通用查询实现方案(可用于DDD)[附源码] -- 设计思路
原文:通用查询实现方案(可用于DDD)[附源码] -- 设计思路 [声明] 写作不易,转载请注明出处(http://www.cnblogs.com/wiseant/p/3988592.html). ...