Модульное тестирование Angular 6: я хочу заблокировать объявленное свойство для своего теста

Question

Я использую угловую версию 6 и Жасмин.

Когда я запускаю тест ng --sourceMap = false

Ошибка, которую я получаю: videojs не определено

Я хотел бы заглушить videojs, если это возможно.Кроме того, обратите внимание, что компонент работает нормально, это просто модульный тест, который не проходит.

Videojs - это библиотека npm, которую я использую для показа видео и т. Д.

Мой компонент, которым я являюсьтестирование:

import { AfterViewInit, Component } from '@angular/core';

declare const videojs: any;

@Component({
  selector: 'test-details',
  templateUrl: './test-details.component.html'
})
export class TestDetailsComponent implements AfterViewInit {
  public videoJSplayer: any;

  constructor() {}

  ngAfterViewInit(): void {
    this.initVideo();
  }

  public initVideo(): void {
    this.videoJSplayer = videojs(
      document.getElementById('video_player_id'),
      { controls: true, autoplay: false, preload: 'auto' }
    );
  }
}

My Unit test

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestDetailsComponent } from './test-details.component';

declare const videojs: any;

fdescribe('TestDetailsComponent', () => {
  let component: TestDetailsComponent;
  let fixture: ComponentFixture<TestDetailsComponent>;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        imports: [],
        declarations: [ TestDetailsComponent ],
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
        providers: [
           { provide: videojs, useValue: {} }
        ]
      }).compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(TestDetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

Answer 1

Хотя я согласен с ответом @ Райана как с лучшим подходом, если вы хотите смоделировать глобальную переменную, вы можете просто установить переменную в глобальной области видимости в вашей спецификации.Поскольку это глобальная область, вы должны быть осторожны, чтобы очистить его после запуска теста.

beforeEach(() => {
  global.videojs = {my: 'mock', object: 'here'};
});

afterEach(() => {
  delete global.videojs; // Cleanup
});

Примечание: вы можете использовать window вместо global, если это соответствует вашим потребностямлучше.

Answer 2

Вы можете добавить сервис, который имеет ссылку на объект / функцию videojs, вместо того, чтобы ссылаться на него непосредственно в Компоненте.Затем вы можете смоделировать службу в тесте, используя provide / useClass, и добавить любые функции / значения для videojs, которые вы хотите