如何在Angular Component中为ActionsObject订阅编写单元测试

我有一个角度组件，它使用

ngrx

actionsObject

来监听发送的动作。如何编写一个测试来检查订阅的

actionsObject

该组件如下所示：

export class TestComponent {

constructor(public actionsSubject: ActionsSubject) { }

  public isUpdated = false;

  public ngOnInit() {
    this.actionSubscription = this.actionsSubject.subscribe(action => {
      if (action.type === "Update") {
        this.isUpdated = true; <----- I want to test this condition
      }
    });
  }
}

它可以工作，但我想模拟此订阅，而不是手动调用操作

例如：

  it('isUpdated should be true, when update action dispatched', () => {
    let actionSubject = TestBed.get(ActionsSubject);
    const action = {
      type: 'Update'
    };
    actionSubject = of({ action });
    component.ngOnInit();
    fixture.detectChanges()
    expect(component.isUpdated).toEqual(true);
  });

测试服看起来像这样

const action = { type: FlowActionTypes.UpdateStep }; 
const actionSub: ActionsSubject = new ActionsSubject({ action }); <-- TS not accepting 


providers: [ { provide: ActionsSubject, useValue: actionSub } <-- here I am passing as you told ] 

const action={type:FlowActionTypes.updatesTP}；
const actionSub:actionsObject=新actionsObject（{action}） 你已经很接近了！
以下几点对您有帮助：


ngOnInit在您第一次调用
fixture时运行。detectChanges
（在本例中为beforeach），因此无需在测试中再次调用它
ActionsObject继承自BehaviorSubject，因此您可以将其视为任何其他可观察对象
fixture.detectChanges
更新测试中的html，因为您直接查看组件上的变量，无需调用
TestBed.get
返回
any
，它有助于将角色转换为您想要的服务

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“./test.component”导入{TestComponent}；
从'@ngrx/store'导入{actionsObject}；
描述（'TestComponentComponent'，（）=>{
let组件：TestComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
const actionSub:actionsObject=新actionsObject（）；
TestBed.configureTestingModule({
声明：[TestComponent]，
提供程序：[{provide:actionsObject，useValue:actionSub}]，
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（TestComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
fit（'isUpdated应为true，当发送更新操作时'，（）=>{
const actionSubject=TestBed.get（actionsObject）作为actionsObject；
常量动作={
键入：“更新”
};
下一步（行动）；
expect（component.isUpdated）.toEqual（true）；
});
});
您是否为测试套件的
actionsObject
提供模拟值？否，我是否应该提供此
actionSubject=of（{action}）中提供了什么？但这将如何命名？是的，你可能应该。你能提供一个完整的测试套件的例子，这样我可以更好地帮助你吗？实际上，提供一个运行的例子是非常困难的。您能否帮助我，提供一个示例，说明如何使用默认的
操作将
mock actionSubject
传递给TestSuit，这样当
subscribe
调用时，它将返回传递的操作。我试着这么做，但我认为我错了const action={type:FlowActionTypes.updatesTP}；const actionSub:actionsObject=新actionsObject（{action}）；我很抱歉。我不完全了解这个案例的大局，所以我可以帮助你：（但我认为这可以帮助你。
const action = { type: FlowActionTypes.UpdateStep }; 
const actionSub: ActionsSubject = new ActionsSubject({ action }); <-- TS not accepting 


providers: [ { provide: ActionsSubject, useValue: actionSub } <-- here I am passing as you told ] 


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

import { TestComponent } from './test.component';
import { ActionsSubject } from '@ngrx/store';

describe('TestComponentComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(async(() => {
    const actionSub: ActionsSubject = new ActionsSubject();

    TestBed.configureTestingModule({
      declarations: [TestComponent],
      providers: [{ provide: ActionsSubject, useValue: actionSub }],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  fit('isUpdated should be true, when update action dispatched', () => {
    const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
    const action = {
      type: 'Update'
    };
    actionSubject.next(action);

    expect(component.isUpdated).toEqual(true);
  });
});