[Angular & Unit Testing] Testing Component with Store
When using Ngrx, we need to know how to test the component which has Router injected.
Component:
import {Component} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {Store} from '@ngrx/store'; import * as fromAuth from '../../reducers/auth';
import * as actions from '../../actions/auth'; @Component({
selector: 'register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent { error: string; constructor(private store: Store<fromAuth.State>) { } registerUser(event: FormGroup) {
const {email, password} = event.value;
this.store.dispatch(new actions.Register({
email,
password
}));
} }
One thing we can test just for component wihtout template is to test whether 'dispatch' function was called on Store.
import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {RegisterComponent} from './register.component';
import {RouterTestingModule} from '@angular/router/testing';
import {combineReducers, Store, StoreModule} from '@ngrx/store';
import {SharedModule} from '../../shared/SharedModule'; import {State as AuthState, reducers as AuthReducers} from '../../reducers';
import {Register, REGISTER} from '../../actions/auth';
import * as fromRoot from '../../../reducers';
import {FormGroup} from '@angular/forms'; describe('RegisterComponent', () => {
let component: RegisterComponent;
let fixture: ComponentFixture<RegisterComponent>;
let store: Store<fromRoot.State | AuthState>; beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [RegisterComponent],
imports: [
StoreModule.forRoot({
...fromRoot.reducers,
'auth': combineReducers(AuthReducers)
}),
SharedModule
]
})
.compileComponents();
})); beforeEach(() => { store = TestBed.get(Store);
spyOn(store, 'dispatch').and.callThrough(); fixture = TestBed.createComponent(RegisterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}); it('should create', () => {
expect(component).toBeTruthy();
}); it('should call distach when rigster a new user', () => {
const payload = {
email: 'test@test.com',
password: 'test123'
};
const event = {
value: payload
};
const action = new Register(payload); // init the action creatir
component.registerUser(event as FormGroup); // call the function or trigger from DOM
expect(store.dispatch).toHaveBeenCalledWith(action); // expect the dispatch have been call
expect(action.payload).toBe(payload); // check whether payload is correct
expect(action.type).toBe(REGISTER); // check the action type is correct
});
});
[Angular & Unit Testing] Testing Component with Store的更多相关文章
- [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 ...
- [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] 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] Testing Component methods
import {ComponentFixture, TestBed} from '@angular/core/testing'; import {BrowserDynamicTestingModule ...
- [Angular Testing] Unit Testing -- Test component and service.
Recommend to use angular-cli to generate component and service, so we can get testing templates. ng ...
- [Angular & Unit Testing] Automatic change detection
When you testing Component rendering, you often needs to call: fixture.detectChanges(); For example: ...
- [Angular Unit Testing] Shallow Pipe Testing
import { TestBed, ComponentFixture } from '@angular/core/testing'; import { BrowserDynamicTestingMod ...
- [Angular Unit Testing] Testing Services with dependencies
import { Http, Response, ResponseOptions } from '@angular/http'; import { TestBed } from '@angular/c ...
- [Angular + Unit] AngularJS Unit testing using Karma
http://social.technet.microsoft.com/wiki/contents/articles/32300.angularjs-unit-testing-using-karma- ...
随机推荐
- ubuntu 同时安装anaconda2和anaconda3
说明:先根据Ubuntu预装的python2.7来安装Anaconda2,然后将Anaconda3作为其环境安装在envs文件夹下. 重要提示:有一些软件需要py2.7的环境,比如XX-Net, 最好 ...
- 移动端 Modal 组件开发杂谈
Vant 是有赞开发的一套基于 Vue 2.0 的 Mobile 组件库,在开发的过程中也踩了很多坑,今天我们就来聊一聊开发一个移动端 Modal 组件(在有赞该组件被称为 Popup )需要注意的一 ...
- C# Expression 树转化为SQL与语句(二)--解决参数问题
在用Expression解析的的时候碰到一些参数(不是具体的值),会出现这种情况. 在这里我们希望得到的是id=10,而不是id=m_id;那如何来解析这些参数? ================== ...
- 10 hbase源码系列(十)HLog与日志恢复
hbase源码系列(十)HLog与日志恢复 HLog概述 hbase在写入数据之前会先写入MemStore,成功了再写入HLog,当MemStore的数据丢失的时候,还可以用HLog的数据来进行恢 ...
- 用typename和template消除歧义
- Android View体系(十)自定义组合控件
相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属性动画 Android View体系(四)从源 ...
- POJ 1671 第二类斯特林数
思路: 递推出来斯特林数 求个和 if(i==j)f[i][j]=1; else f[i][j]=f[i-1][j-1]+f[i-1][j]*j; //By SiriusRen #include &l ...
- 轻量级记事本工具:CintaNotes
本片文章介绍CintaNotes小工具 功能介绍: 方便.快捷的记录笔记: 快捷地从任何地方等截取内容生成笔记: 高效的记事本内容查询: 轻松的标签管理 支持移动设备和电脑同步(估计要收费) 官网下载 ...
- Sandbox
Sandbox Contents Overview Design principles Sandbox windows architecture The broker process The targ ...
- 关于props default 数组/对象的默认值应当由一个工厂函数返回
export default {props: { xAxisData: { type: Array, default: [] }, },这是我的代码 报错是Invalid default va ...