Тестирование ngOnInit и MediaChange с помощью Karma

Question

Я пытаюсь проверить код в методе ngOnInit. Код отслеживает изменение размера экрана, чтобы навигационная панель изменяла размеры до мобильной или оставалась верхней панелью. Я пробовал около недели и продолжаю получать кучу разных ошибок при тестировании. Я пропустил некоторый код для comp.component.ts, так как другой код не нужен для этого. Я продолжаю получать subscribe is not a method или Can't resolve all parameters for MediaChange: (?, ?, ?, ?). Любые советы о том, как я могу добиться написания теста для этого или любых ресурсов, на которые вы могли бы обратить внимание, чтобы помочь мне понять это.

comp.component.ts

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { MediaChange, ObservableMedia } from '@angular/flex-layout';

@Component({
    selector: 'app-comp',
    templateUrl: './comp.component.html',
    styleUrls: ['./comp.component.scss']
})

export class NavigationComponent implements OnInit {
    isOpen: Boolean;
    watcher: Subscription;
    activeMediaQuery = "";
    media: ObservableMedia;

    constructor() {
        this.isOpen = false;
    }

    ngOnInit(): void {
        this.watcher = this.media.subscribe((change: MediaChange) => {
            this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
            this.isOpen = false;
        });
    }

    navPressed(event, path): void {
        this.navClick.emit(path);
        if ( this.checkSize() ) this.toggle();
    }

    checkSize(): Boolean {
        return this.activeMediaQuery.includes('xs') || this.activeMediaQuery.includes('sm');
    }
}

comp.component.spec.ts

import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatToolbarModule, MatIconModule } from '@angular/material';
import { CompComponent } from './comp.component';
import { Subscription } from 'rxjs';
import { MediaChange, ObservableMedia } from '@angular/flex-layout';


@Component({
    selector: 'app-test-component-wrapper',
    template: '<app-navigation [navItems]="clickables" (navClick)="handleNavClick($event)"></app-navigation>'
})

class TestWrapperComponent {
    clickables = [
        { path: '/login', label: 'Login', onClick() {} }
    ];
}

describe('app testing', () => {
    let component: CompComponent;
    let fixture: ComponentFixture<TestWrapperComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                MatButtonModule,
                MatToolbarModule,
                MatIconModule,
                BrowserAnimationsModule
            ],
            declarations: [
                TestWrapperComponent,
                NavigationComponent
            ],
            providers: [
                ObservableMedia,
                MediaChange,
                Subscription
            ]
        }).compileComponents();
        fixture = TestBed.createComponent(TestWrapperComponent);
    }));

    it('should create and have Login label', () => {
        // EDIT START
        spyOn(ObservableMedia, 'prototype');
        // EDIT END
        expect(fixture).toBeTruthy();
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            component = fixture.debugElement.children[0].componentInstance;
            expect(component.navItems[0].label).toBe('Login');
        });
    });
});

РЕДАКТИРОВАТЬ: Добавлен комментарий «РЕДАКТИРОВАТЬ» в коде с кодом, который я добавил. Теперь я получаю сообщение об ошибке resolve all parameters for MediaChange: (?, ?, ?, ?), которое, я думаю, связано с ошибкой подписки, указанной выше.

Answer 1

Некоторые наблюдения:

• ObservableMedia из flex-layout необходимо внедрить в ваш компонент для работы.Подробности здесь
• Вы не предоставляете MediaChange или Подписку в исходном компоненте, поэтому нет необходимости в TestBed.

В приведенном ниже стекаблице Iпришлось сделать несколько предположений.Дайте мне знать, если что-то из этого не так, или просто обновите stackblitz:

• В вашей спецификации вы импортировали CompComponent, но в comp.component.ts вы определили NavigationComponent.Из этих двух я выбрал использование NavigationComponent.
• navClick отсутствовал в вашем коде выше, поэтому я предположил, что это @Output из вашего компонента (поскольку вы генерируете путь к нему).
• navItems также отсутствовал в приведенном выше коде, но так как вы тестируете его, я предположил, что это важно, и предположил, что это входные данные для вашего компонента (опять же, по тому, как вы его использовали).
• Вы не сделалиНе включайте ваш шаблон, поэтому я очень просто его высмеял. Переключатель
• был вызван из navPressed, но не существовал, поэтому я создал его как пустую функцию.

Здесьэто стек стека: https://stackblitz.com/edit/stackoverflow-q-53024049?file=app%2Fmy.component.spec.ts

Чтобы исправить то, что у вас было : я внес изменения выше и высмеял объект ObservableMedia, переданный со следующим:

let mockFlex = jasmine.createSpyObj({
  subscribe: ({mqAlias: 'xs', mediaQuery: ''}),
  isActive: true,
  });

Я также изменил массив провайдеров на следующий:

providers: [
    { provide: ObservableMedia, useValue: mockFlex }
]

Проверьте стекаблитц для всех деталей.Как вы видите, тест теперь проходит.