如何在单元测试时制作子组件

Question

我刚开始使用 Jasmine 和 Karma 进行测试。如果我问错了，请原谅我。我有一个组件 app-timeselector，其中有一些自定义子组件。模板如下所示：

timeselector.component.html

<kls-label></kls-label>
<kls-dropdown></kls-dropdown>
<kls-option></kls-option>

在上面的示例中，我只显示了三个，但在我的例子中有 11 个。所以，我知道的解决方案是嘲笑他们。我正在为所有 11 个子组件一一执行此操作，如下所示：

import { TestBed, ComponentFixture, async } from "@angular/core/testing"
import { TimeselectorComponent } from './timeselector.component'
...

describe('TimeselectorComponent', () => {
    let fixture: ComponentFixture<TimeselectorComponent>;
    @Component({
        selector: 'kls-label',
        template: '<div></div>'
    })
    class FakeKlsLabelComponent {}

    @Component({
        selector: 'kls-dropdown',
        template: '<div></div>'
    })
    class FakeKlsDropdownComponent {}


    @Component({
        selector: 'kls-option',
        template: '<div></div>'
    })
    class FakeKlsDropdownOption {
        @Input() value;
    }

    ...

    beforeEach(async(()=>{
        TestBed.configureTestingModule({
            imports: [
                ...
            ],
            providers: [
                ...
            ],
            declarations: [
                TimeselectorComponent,
                FakeKlsLabelComponent,
                FakeKlsDropdownComponent,
                FakeKlsDropdownOption,
                ...
            ],
        });
        fixture = TestBed.createComponent(TimeselectorComponent);

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

    it('should apply filters accross dashboards', () => {
        ...
    })
})

这是一个好习惯吗？有没有办法一起嘲笑他们。我不想使用 NO_ERRORS_SCHEMA。我昨天开始学习 Pluralsight 教程。

Answer 1

使用ng-mocks

这样使用：

import { MockComponent } from 'ng-mocks';

// import your real components
import { KlsLabelComponent } from ...
import { KlsDropdownComponent } from ...
import { KlsDropdownOption } from ...

TestBed.configureTestingModule({
    imports: [
        ...
    ],
    providers: [
        ...
    ],
    declarations: [
        TimeselectorComponent,
        // mock them
        MockComponent(KlsLabelComponent),
        MockComponent(KlsDropdownComponent),
        MockComponent(KlsDropdownOption),
        ...
    ],
});

编辑：你也做错了什么：

And I'm doing this one by one for all 11 child components like this

您的组件太大。如果它有 11 个子组件，那么您的组件就承担了过多的责任（并且将极难使用、调试、重构和测试）。将其分解成更小的组件。

如何在单元测试时制作子组件

How to fake child components while unit testting

angularjs

karma-jasmine

angular-unit-test