How to fake child components while unit testting

Question

I'm new to testing with Jasmine and Karma. Pardon me if I'm asking anything wrong. I've a component app-timeselector inside which there are some custom child components. The template looks like:

timeselector.component.html

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

In the above example I've shown only three but in my case there are 11 of them. So, the solution that I know is to mock them. And I'm doing this one by one for all 11 child components like this:

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', () => {
        ...
    })
})

Is this a good practice. Is there are way to mock all of them together. I don't want to use NO_ERRORS_SCHEMA. I've yesterday started following Pluralsight tutorials.

Just use [ng-mocks](https://www.npmjs.com/package/ng-mocks) – Adam Jenkins May 11 '20 at 15:03 — Adam Jenkins, May 11 '20 at 15:03

Adam Jenkins · Accepted Answer · 2020-05-11T17:04:17.917

1

Use ng-mocks

Use it like this:

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: You're doing something wrong, too:

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

Your component is too big. If it has 11 child components, your component has far too much responsibility (and will be extremely difficult to use, debug, refactor AND test). Break it down into smaller components.

edited May 11 '20 at 17:04

answered May 11 '20 at 15:04

Adam Jenkins

51,445
11
72
100

So i don't need any decorator to create mock child after this ? – Tanzeel May 11 '20 at 15:05
You don't need to do anything else - all your child stuff is replaced my mock (empty) implementations that have all the same inputs and outpus as your real components. – Adam Jenkins May 11 '20 at 15:07
Ok. I'm accepting this answer. Hope my tech lead don't have any objection on this. – Tanzeel May 11 '20 at 15:39
And thanks a lot for the suggestion. I'll surely work on that and try to break it down. – Tanzeel May 11 '20 at 15:54

How to fake child components while unit testting

1 Answers1