javascript - 我们可以在 Angular 中使用 Jasmine/Karma 测试 ngrx 流吗？

Question

我已将 ngrx 用于我的 Angular 应用程序。现在我正在尝试使用 Jasmine 和 karma 工具进行单元测试，但我找不到合适的方法来测试 ngrx 流程。

请帮助我提供任何方法或其他来源也可以，在此先感谢。

请在下面找到我要测试的组件。

login-form.component.ts


import { Component, OnInit, AfterViewInit, AfterViewChecked, AfterContentInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { ModalService } from '../../../@carbon/modal';
import { LoginResponse } from '../../../@core/login/login.contract';
import { LoginService } from '../../../@core/login/login.service';
import { SessionStorageService } from '../../../@core/session-storage/session-storage.service';
import { LocalStorageService } from '../../../@core/local-storage/local-storage.service';
import { Store } from '@ngrx/store';
import { AppState } from '../../../@models/app-state';
import { ActionSignIn, selectorLogin } from '../../../@core/login/login.reducer';
import { LoginState } from '../../../@core/login/login.state';
import { BusyState } from '../../../@shared/busy-indicator/busy-state';
import {Router} from '@angular/router';


@Component({
  selector: 'eose-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.scss']
})
export class LoginFormComponent implements OnInit {

 // loading: BusyState;
  loading: boolean = false;
  loadingMsg: string = '';
  authForm: FormGroup;
  changeForm: FormGroup
  constructor(
    private store: Store<AppState>,
    private fb: FormBuilder,
    private modalService: ModalService
  ) {
    this.authForm = this.fb.group({
      'env': new FormControl('cdtdevdir'),
      'email': new FormControl('', Validators.required),
      'password': new FormControl('', Validators.required),
      'newpassword': new FormControl(''),
      'confirmpassword': new FormControl('')
    })
  }

  handleLoadingChange(loadingState: BusyState) {
   // this.loading = loadingState;
  }


  ngOnInit() {
    this.store.select(selectorLogin)
    .subscribe((loginState: LoginState) => {
      this.loading = loginState.loading;
      this.loadingMsg = loginState.loadingMsg;
    })
  }

  openModal() {
    this.modalService.open('sign-in');
  }

  onLogin() {
     this.store.select(selectorLogin)
     .subscribe((loginState: LoginState) => {
       this.loading = loginState.loading;
     })
    console.log('Login Payload', this.authForm.value);
   this.store.dispatch(new ActionSignIn(this.authForm.value));
  }
}

Answer 1

您可以spyOn dispatch 并检查action 是否已被调度

let actionSignIn = new ActionSignIn(your input);
expect(store.dispatch).toHaveBeenCalldWith(actionSignIn);