Angular 单元测试&x27；成功'；和'；错误'；角度2组件中的可观测响应

我正在为一个调用OnInit服务的组件编写一个单元测试。如果响应为“成功”，则采取一个操作，另一个操作为“错误”

测试这两种情况的最佳方法是什么？我已经创建了组件和单元测试的简化版本。在这两种情况下，我都可以轻松测试

我已尝试实施该解决方案，但我必须停止实施。我还试图抛出一个错误，您将在规范和注释中看到

组件

@Component({
  selector: 'app-observer-throw-unit-test',
  template: '<p>{{ data }}</p>'
})
export class ObserverThrowUnitTestComponent implements OnInit {
    public data: string;

    constructor(private _observerThrowService: ObserverThrowService) { }

    ngOnInit() {
        this._observerThrowService.getData().subscribe(
            (data) => {
                this.data = data;
            },
            (error) => {
                this.redirect()
            }
        )
    }

    redirect() {
        this.data = "Redirecting...";
    }

}

@组件({
选择器：“应用程序观察者抛出单元测试”，
模板：'{{data}}
'
})
导出类ObserverThrowUnitTestComponent实现OnInit{
公共数据：字符串；
构造函数（私有的_observerThrowService:observer throwservice）{}
恩戈尼尼特（）{
这是.\u observer throwservice.getData（）.subscribe(
（数据）=>{
这个数据=数据；
},
（错误）=>{
this.redirect（）
}
)
}
重定向（）{
this.data=“重定向…”；
}
}

规格

const data: string = "Lorem ipsum dolor sit amet.";

const ObserverThrowServiceStub = {
  error: false,
  getData() {
    return Observable.create((observer) => {
      if(this.error) {
        observer.error(new Error());
      } else {
        observer.next(data);
      }
      observer.complete();
    })
  }
}

describe('ObserverThrowUnitTestComponent', () => {
  let component: ObserverThrowUnitTestComponent;
  let fixture: ComponentFixture<ObserverThrowUnitTestComponent>;
  let _observerThrowService: ObserverThrowService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ObserverThrowUnitTestComponent ],
      providers: [
        { provide: ObserverThrowService, useValue: ObserverThrowServiceStub },
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ObserverThrowUnitTestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    _observerThrowService = TestBed.get(ObserverThrowService);
  });

  it('should set "data" to "Lorem ipsum dolor sit amet." on success', () => {
      expect(component.data).toEqual("Lorem ipsum dolor sit amet.");
  });

  it('should set "data" on "Redirecting..." on error',() => {
    ObserverThrowServiceStub.error = true;
    // spyOn(_observerThrowService, "getData").and.returnValue(Observable.throw("error")); // This did not work and returned : TypeError: undefined is not a constructor (evaluating 'Observable_1.Observable.throw("error")') in src/test.ts
    spyOn(_observerThrowService, "getData")
    expect(component.data).toEqual("Redirecting...");
  });

  it('should set "data" on "Redirecting..." on error',() => {
    // This works after setting error to true in the previous test
    spyOn(_observerThrowService, "getData")
    expect(component.data).toEqual("Redirecting...");
  });

});

const data:string=“Lorem ipsum door sit amet.”；
const observer throwservicestub={
错误：false，
getData（）{
返回可观察的。创建（（观察者）=>{
if（此错误）{
observer.error（新错误（））；
}否则{
下一步（数据）；
}
observer.complete（）；
})
}
}
描述（'ObserverThrowUnitTestComponent'，（）=>{
let组件：ObserverThrowUnitTestComponent；
let夹具：组件夹具；
let_observer throwservice:observer throwservice；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[ObserverThrowUnitTestComponent]，
供应商：[
{提供：observer throwservice，useValue:observer throwservicestub}，
]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（ObserverThrowUnitTestComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
_observerThrowService=TestBed.get（observerThrowService）；
});
它（'应将“数据”设置为“Lorem ipsum dolor sit amet.”关于成功'，（）=>{
expect（component.data）.toEqual（“Lorem ipsum dolor sit amet.”）；
});
它（'应该在“重定向…”上设置“数据”，在出错时设置“数据”，（）=>{
ObserverThrowServiceStub.error=true；
//spyOn（_observerThrowService，“getData”）.and.returnValue（Observable.throw（“error”）；//这不起作用，并返回：TypeError:undefined不是src/test.ts中的构造函数（评估“Observable_1.Observable.throw（“error”））
spyOn（_observerThrowService，“getData”）
expect（component.data）.toEqual（“重定向…”）；
});
它（'应该在“重定向…”上设置“数据”，在出错时设置“数据”，（）=>{
//在上一次测试中将error设置为true后，此选项起作用
spyOn（_observerThrowService，“getData”）
expect（component.data）.toEqual（“重定向…”）；
});
});

我将创建两个模拟，其中一个会抛出错误：

class ObserverThrowServiceStub {
  getData() {
    return Observable.throw(new Error('Test error'));
  }
}

一个成功返回的

class ObserverSuccessServiceStub {
  getData() {
    return Observable.from(data);
  }
}

然后，不向所有测试提供相同的模拟服务，而是根据所讨论的测试适当地提供失败/成功的模拟服务（显然，您需要将模块配置移动到一个可配置的方法中，您可以在每个测试中调用该方法，而不是在

.beforeach（）

代码中调用该方法）

这里有一篇非常好的文章，介绍如何使用可观测数据测试角度服务（使用的正是这个模型）：

---

我会在存根中添加一个公共错误标志。然后我可以在beforeach（）中创建存根一次，只需在每个测试用例中更新错误标志，以决定要使用哪个版本的getData

class ObserverServiceStub {
  public error = false;
  getData() {
    if (this.error) {
      return Observable.throw(new Error('Test error'));
    } else {
      return Observable.from(data);
    }
  }
}

---

您可以使用Jasmine Spy来

spyOn

模拟服务类的方法，该方法返回一个可观察的。

---

更多详情如下：

这正是我想要的。您提供的方法和链接非常准确。谢谢！

class ObserverServiceStub {
  public error = false;
  getData() {
    if (this.error) {
      return Observable.throw(new Error('Test error'));
    } else {
      return Observable.from(data);
    }
  }
}