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的更多相关文章

  1. [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 ...

  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] Debug unit testing -- component rendering

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

  4. [Angular Unit Testing] Testing Component methods

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

  5. [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 ...

  6. [Angular & Unit Testing] Automatic change detection

    When you testing Component rendering, you often needs to call: fixture.detectChanges(); For example: ...

  7. [Angular Unit Testing] Shallow Pipe Testing

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

  8. [Angular Unit Testing] Testing Services with dependencies

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

  9. [Angular + Unit] AngularJS Unit testing using Karma

    http://social.technet.microsoft.com/wiki/contents/articles/32300.angularjs-unit-testing-using-karma- ...

随机推荐

  1. ubuntu 同时安装anaconda2和anaconda3

    说明:先根据Ubuntu预装的python2.7来安装Anaconda2,然后将Anaconda3作为其环境安装在envs文件夹下. 重要提示:有一些软件需要py2.7的环境,比如XX-Net, 最好 ...

  2. 移动端 Modal 组件开发杂谈

    Vant 是有赞开发的一套基于 Vue 2.0 的 Mobile 组件库,在开发的过程中也踩了很多坑,今天我们就来聊一聊开发一个移动端 Modal 组件(在有赞该组件被称为 Popup )需要注意的一 ...

  3. C# Expression 树转化为SQL与语句(二)--解决参数问题

    在用Expression解析的的时候碰到一些参数(不是具体的值),会出现这种情况. 在这里我们希望得到的是id=10,而不是id=m_id;那如何来解析这些参数? ================== ...

  4. 10 hbase源码系列(十)HLog与日志恢复

    hbase源码系列(十)HLog与日志恢复   HLog概述 hbase在写入数据之前会先写入MemStore,成功了再写入HLog,当MemStore的数据丢失的时候,还可以用HLog的数据来进行恢 ...

  5. 用typename和template消除歧义

  6. Android View体系(十)自定义组合控件

    相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属性动画 Android View体系(四)从源 ...

  7. 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 ...

  8. 轻量级记事本工具:CintaNotes

    本片文章介绍CintaNotes小工具 功能介绍: 方便.快捷的记录笔记: 快捷地从任何地方等截取内容生成笔记: 高效的记事本内容查询: 轻松的标签管理 支持移动设备和电脑同步(估计要收费) 官网下载 ...

  9. Sandbox

    Sandbox Contents Overview Design principles Sandbox windows architecture The broker process The targ ...

  10. 关于props default 数组/对象的默认值应当由一个工厂函数返回

    export default {props: { xAxisData: {   type: Array,   default: [] }, },这是我的代码 报错是Invalid default va ...