[Angular Unit Testing] Testing Component with ChangeDetectionStrategy.OnPush

Component:

<div class="loading-placeholder" [ngClass]="extraClass">
    &nbsp;
    <ng-container *ngIf="loadingService.config.showContent">
        <ng-content></ng-content>
    </ng-container>
</div>

import {Component, OnInit, Input, ChangeDetectionStrategy} from '@angular/core'
import {LoadingService} from '../loading.service'

@Component({
    selector: 'loading-placeholder',
    templateUrl: './loading-placeholder.component.html',
    styleUrls: ['./loading-placeholder.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class LoadingPlaceholderComponent implements OnInit {
    @Input() type: string
    @Input() size: string

    extraClass: string

    constructor(public loadingService: LoadingService) {}

    ngOnInit(): void {
        this.extraClass = this.getType()
    }

    getType() {
        const whiteList = ['image', 'headline', 'text']
        const sizes = ['small', 'medium', 'large', 'full']
        const alias = ['s', 'm', 'l', 'f']
        let res = ''

        if (whiteList.indexOf(this.type) === -1) {
            return res
        }

        if (
            sizes.indexOf(this.size) === -1 &&
            alias.indexOf(this.size) === -1
        ) {
            return `loading-placeholder__${this.type}`
        }

        return `loading-placeholder__${this.type}--${this.size}`
    }
}

 

Testing:

import {
    async,
    ComponentFixture,
    TestBed,
    fakeAsync,
    flush
} from '@angular/core/testing'

import {LoadingPlaceholderComponent} from './loading-placeholder.component'
import {LoadingService} from '../loading.service'
import {of} from 'rxjs'
import {DebugElement, Component, ChangeDetectionStrategy} from '@angular/core'
import {By} from '@angular/platform-browser'

fdescribe('LoadingPlaceholderComponent', () => {
    let component: LoadingPlaceholderComponent
    let fixture: ComponentFixture<LoadingPlaceholderComponent>
    let el: DebugElement
    let loadingService: LoadingService
    let loadingServiceSpy = {
        loading$: of(true),
        get config() {
            return {showContent: false}
        }
    }

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [LoadingPlaceholderComponent],
            providers: [{provide: LoadingService, useValue: loadingServiceSpy}]
        })
            .overrideComponent(LoadingPlaceholderComponent, {
                set: new Component({
                    templateUrl: './loading-placeholder.component.html',
                    changeDetection: ChangeDetectionStrategy.Default
                })
            })
            .compileComponents()
    }))

    beforeEach(() => {
        fixture = TestBed.createComponent(LoadingPlaceholderComponent)
        component = fixture.componentInstance
        el = fixture.debugElement
        loadingService = TestBed.inject(LoadingService)
        fixture.detectChanges()
    })


        it('should has correct className', () => {
            component.size = 'm'
            component.type = 'headline'
            component.ngOnInit()
            fixture.detectChanges()
            expect(component.extraClass).toBe(
                'loading-placeholder__headline--m',
                'extraClass has wrong value'
            )

            expect(
                el.query(By.css('.loading-placeholder')).nativeElement.classList
            ).toContain(
                'loading-placeholder__headline--m',
                "ngClass doesn't work"
            )
        })

})