Question

我在Angular2文本组件中遇到问题，当我尝试运行testrunner时出现以下错误：

Component: Product Component Should ensure component subscribes to service EventEmitter on instantiation
Failed: Cannot read property 'detectChanges' of undefined
TypeError: Cannot read property 'detectChanges' of undefined
Component: Product Component Should check that service getProducts is called when component getProducts is called
Failed: Cannot read property 'getProducts' of undefined
TypeError: Cannot read property 'getProducts' of undefined

这是我的测试模块：

import { ProductService } from "../../../../services/product.service";
import { TestBed, ComponentFixture, async } from "@angular/core/testing";
import { ProductComponent } from "../../../../components/catalog/products/ProductComponent";
import { HttpModule } from "@angular/http";
import { DebugElement, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { Observable } from "rxjs/Rx";

class MockProductService {
    emitter = Observable.of({});
    constructor() {

    }

    getProducts() {
        return this;
    }
}

let comp:    ProductComponent;
let fixture: ComponentFixture<ProductComponent>;
let de:      DebugElement;
let el:      HTMLElement;

describe('Component: Product Component', () => {
    let mockProductService;

    beforeEach(() => {
        mockProductService = new MockProductService();

        TestBed.configureTestingModule({
            declarations: [
                ProductComponent
            ],
            providers: [
                {
                    provide: ProductService, useValue: mockProductService
                }
            ],
            imports: [
                HttpModule
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        })
        .compileComponents()
            .then(() => {
                fixture = TestBed.createComponent(ProductComponent);
                comp = fixture.componentInstance;
            });
    });

    it('Should ensure component subscribes to service EventEmitter on instantiation', () => {
       // TestBed.compileComponents()
            //.then(() => {
                //spyOn(mockProductService, 'emitter').and.returnValue({
                //    subscribe: () => {}
                //});


                fixture.detectChanges();
                fixture.whenStable().then(() => {
                    expect(comp.products).toBe({});
                });
                //expect(mockProductService.emitter).toHaveBeenCalled();
            //});
    });

    it('Should check that service getProducts is called when component getProducts is called', () => {

        //TestBed.compileComponents()
         //   .then(() => {

                spyOn(mockProductService, 'getProducts').and.returnValue({
                    subscribe: () => {}
                });

                comp.getProducts({});
                expect(mockProductService.getProducts).toHaveBeenCalled();
       // });
    });


});

由于被测组件通过类的templateUrl属性使用外部模板，我必须使用TestBed的compileComponents方法来编译此模板以备测试。正如您所看到的那样，重新计算了一个在回调中的承诺，然后我为每个测试定义了夹具和组件实例。因为这是在beforeEach中，所以每次测试都会这样做。

当我尝试从我的测试中访问fixture和组件实例时，它说它们是未定义的，这使我相信在从compileComponents方法返回promise之前调用了测试。我已经尝试将TestBed.CompileComponents移动到每个测试规范中，但这也会导致错误。

有人可以建议我需要在这里更改什么吗？感谢

Answer 1

我已成功使用以下两种方法。使用DoneFn推迟beforeEach，直到所有内容都完成：

beforeEach(done => {
    mockProductService = new MockProductService();

    TestBed.configureTestingModule({
        ...
    })
    .compileComponents()
        .then(() => {
            fixture = TestBed.createComponent(ProductComponent);
            comp = fixture.componentInstance;
            done();
        });
});

或使用async并将beforeEach拆分为两部分：

beforeEach(async(() => {
    mockProductService = new MockProductService();

    TestBed.configureTestingModule({
        ...
    })
    .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(ProductComponent);
    comp = fixture.componentInstance;
});

在设置compileComponents变量之前运行的Angular2测试

1 个答案: