从Angular中的订阅返回值

2024-05-20 • 问答

我试图了解rxjs订阅，可观察内容等，但是对我而言这是陌生的。我有一种我订阅的方法的服务。该方法如下所示：

create(product: any): Observable<any> {
    return this.http.post<any>(`${environment.apiUrl}/products`,product).pipe(
        map((response: any) => {
            this.toastr.success(response.message);
            return response.model;
        }),);
}

然后，我的组件中有一个save方法，对于测试，我想获取返回的模型。所以我这样做了：

onSubmit(): Observable<any> {
    this.submitted = true;

    if (this.saveForm.invalid) return;

    let valid = true;
    let categoryId = this.fields[0].categoryId;
    let product = {
        categoryId: categoryId,};

    this.fields.forEach(field => {
        let value = this.f[field.name].value;
        if (valid) {
            valid = value !== undefined;
        }
        product[field.name] = value;
    });

    product['state'] = valid ? 'verified' : 'raw';

    var response = new Subject<any>();
    this.productService.create(product).subscribe(data => {
        response.next(data);
    });
    return response.asObservable();
}

在测试中，我这样写：

it('should save a product and remove from range',() => {
    let component = spectator.component;

    component.onSubmit().subscribe(product => {
        expect(product.gtin).toBe(0);
        expect(product.state).toBe('verified');
        console.log(product);
    });

    expect(component.range.length).toBe(1);
    expect(component.saveForm.controls['gtin'].value).toBe(1);
});

我猜我做错了。测试通过了，但是我认为这是因为从未达到订阅。有人可以告诉我我需要做什么吗？

代替

Loaded

就做

var response = new Subject<any>();
    this.productService.create(product).subscribe(data => {
        response.next(data);
    });
    return response.asObservable();

您的假设是正确的，您的测试中不会调用订阅主体...因为可观察的结果不会产生。

您需要像这样更改测试：

let httpTestingController: HttpTestingController;

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,// <== very important to mock the request
      ],});

    (...)

    httpTestingController = TestBed.get(HttpTestingController);
  });

it('should save a product and remove from range',async done => {
    let component = spectator.component;

    component.onSubmit().subscribe(product => {
        expect(product.gtin).toBe(0);
        expect(product.state).toBe('verified');
        console.log(product);
        done();
    });

    expect(component.range.length).toBe(1);
    expect(component.saveForm.controls['gtin'].value).toBe(1);

    //This part simulates the backend responding your .onSubmit() call: 
    const testProductData = {your_atributes} // <== this should be what you expect to receive from the backend;
    const mockRequest = httpTestingController.expectOne(`${environment.apiUrl}/products`);
    mockRequest.flush(testProductData); // <== this call will make your observable respond.
});

此测试中的done回调使您的测试能够满足您的异步测试要求。如果未调用订阅主体，则测试将失败。

从Angular中的订阅返回值

a751113604 回答：从Angular中的订阅返回值

大家都在问