如何在单元测试时伪造子组件？

Question

我是新来的，用茉莉花和卡玛进行测试。如果我问错了什么，请原谅。我有一个组件 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),
        ...
    ],
});

EDIT：你也做错了什么。

而且我一个一个地做这个给大家看 11个儿童部件 这样

你的组件太大。如果它有11个子组件，那么你的组件的责任就太大了（而且使用、调试、重构和测试都会非常困难）。把它分解成更小的组件。