[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- ...
随机推荐
- 【J-meter】正则表达式提取
当获取的值中含有折行,可采用下面的办法解决:
- 关于git及其github的使用
一:序言(就是瞎扯) 人们都说不会使用git和github的程序员都不是好程序员,是的,当我第一次听到的时候有点失望.因为我也不会...但是这句话激起了我学习使用git的动力(其实也没怎么深入的学习) ...
- [React] Pass a function to setState in React
In React, when you want to set the state which calculation depends on the current state, using an ob ...
- 关于HttpClient模拟浏览器请求的參数乱码问题解决方式
转载请注明出处:http://blog.csdn.net/xiaojimanman/article/details/44407297 http://www.llwjy.com/blogdetail/9 ...
- FSM的几种策略
FSM是什么?FSM就是Finite(有限) State(状态) 机(Machine)的缩写.(之所以中英文混写,是为了强调学懂FSM的原理是根本,刻意去采用“几段式”的写法并不重要) riple F ...
- 在spring-mybatis.xml 中配置pagehelper
maven导包:<dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</ ...
- POJ - 3847 Moving to Nuremberg 动归
POJ - 3847 Moving to Nuremberg 题意:一张无向有权图,包括边权和点权,求一点,使得到其他点的点权*边权之和最小 思路: #pragma comment(linker, & ...
- POJ 1610 Count the Colors
Count the Colors Time Limit: 2 Seconds Memory Limit: 65536 KB Painting some colored segments on ...
- asp.net 关于cookie的操作
一.无子键或单级cookie 读写(1).写入: 第一种 HttpCookie cookie=new HttpCookie("User"); cookie.Value=" ...
- 【MySQL主从复制原理及搭建全过程】
目录 准备工作 主从复制原理 开始搭建主从复制 本文将使用mariaDB数据库实现主从复制,其步骤与MySQL数据库无差异. MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护, ...