zoukankan      html  css  js  c++  java
  • [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
      });
    });
  • 相关阅读:
    【转帖】android线程知识整理
    Andorid开发笔记
    Flex 4.6 手机项目第一次开发小记
    memory point
    两个sql server 2000的通用分页存储过程
    网页通用视频播放(asp.net2.0原作)
    c#操作XML常用方法
    也说项目开发经验
    SQL Server各种日期计算方法
    Server.Transfer()方法在页间传值
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7646099.html
Copyright © 2011-2022 走看看