3

我希望使用angular.io doc中描述的主机组件来测试 anguar5 组件。

但是我的测试一直失败，因为

TypeError: Cannot read property 'query' of null
    at UserContext.<anonymous> (http://localhost:9876/base/config-webpack/spec-bundle.js:293832:39)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/base/config-webpack/spec-bundle.js:288418:26)
    at ProxyZoneSpec../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/base/config-webpack/spec-bundle.js:287920:39)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/base/config-webpack/spec-bundle.js:288417:32)
    at Zone../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/base/config-webpack/spec-bundle.js:288168:43)
    at UserContext.<anonymous> (http://localhost:9876/base/config-webpack/spec-bundle.js:287799:34)
    at attempt (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4289:46)
    at ZoneQueueRunner.QueueRunner.run (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4217:20)
    at ZoneQueueRunner.QueueRunner.execute (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4199:10)
    at ZoneQueueRunner../node_modules/zone.js/dist/jasmine-patch.js.jasmine.QueueRunner.ZoneQueueRunner.execute (http://localhost:9876/base/config-webpack/spec-bundle.js:287827:42)

事实上，当我记录我的 fixture.debugElement 时，它返回 null。

我的测试代码是：

import {} from 'jasmine';

import { Component } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DropDownListComponent } from './dropDownList.component';

@Component({
    template: '<dropdown-list [valuesList]="valuesList" [selectedValue]="valuesSelected" ></dropdown-list>'
})
class TestComponent {
    valuesList = [{label: 'test_select', value:'test'}, {label: 'test_select2', value:'test2'}];
    valuesSelected = {label: 'test_select', value:'test'};
}

describe('DropDownListComponent', () => {
    let fixture, component;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [TestComponent,  DropDownListComponent]
        }).compileComponents();
    });

    it('should display selectedValue', () => {
        fixture = TestBed.createComponent(TestComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        console.log(fixture.isStable());
        console.log(fixture);
        console.log(component);
        console.log(fixture.debugElement);
        //const fixture = TestBed.createComponent(TestComponent);
        let de = fixture.debugElement.query(By.css(".value-container"));
        let el = de.nativeElement;
        expect(el.textContent).toContain('test_select');
    });
});
4

1 回答 1

0

当您编写测试时，您只需要测试您的组件/服务/管道/指令等，而不是它的依赖项。

从上面的代码中，我假设DropDownListComponent有一个未在providersof 中声明的 DI 依赖项，TestBed它会导致问题。无论如何，在这种情况下，它应该是一个模拟，而不是一个真正的组件。

如果你想测试DropDownListComponent- 那么请分享它的代码。如果不了解它的接口，就很难猜测如何为它编写测试。

您可以使用ng-mocks来模拟它，然后您只需要测试它[valuesList]并[selectedValue]获得正确的值。

此外，要正确编译所有组件，您需要处理compileComponents'promise。

describe('TestComponent', () => {
    beforeEach(() => {
        return TestBed.configureTestingModule({
            declarations: [TestComponent,  MockComponent(DropDownListComponent)],
        }).compileComponents();
    });

    it('should display selectedValue', () => {
        const fixture = MockRender(TestComponent);
        const dropdown = MockHelper.findOrFail(fixture.debugElement, DropDownListComponent);
        expect(dropdown.valuesList).toEqual(fixture.point.valuesList);
        expect(dropdown.selectedValue).toEqual(fixture.point.valuesSelected);
    });
});

利润。

于 2020-05-16T12:46:54.730 回答