Глобальные переменные в средстве запуска тестов Karma

Вы либо объявляете эту глобальную переменную в своем тестовом файле:

var global = "something";

describe('Your test suit', function() {
...
});

или добавьте файл Javascript, где он определен, в ваш файл karma.conf.js:

// list of files / patterns to load in the browser
files: [
   ...,
   'file-containing-the-global-variable.js'
],

Если вы переходите с Angular 2+, единственный способ, который я нашел, это создать переменную или объект глобально, используя window:

Google Recapthca Загружается из скрипта:

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

В этом примере вызов Google Recaptcha создаст глобальную переменную с именем grecaptcha.

В нашем компоненте мы решили отобразить новую Google Recaptcha. Конечно, поскольку мы не объявляем grecaptcha, нам нужно использовать declare var, чтобы сказать «эй, я обещаю, что это где-то объявлено»:

declare var grecaptcha;

private CreateGoogleCaptcha() {
  grecaptcha.render('recaptcha', {
    sitekey: this.siteKey,
    callback: this.GoogleCaptchaCallback,
    badge: 'inline'
  });
}

private GoogleCaptchaCallback(token) {
   // Handle Callback Logic
}

Теперь, когда наша функция работает, мы решаем запустить тест, но, конечно же, мы хотели бы издеваться над нашим grecaptcha, поскольку мы не можем его контролировать. Итак, мы назовем нашу глобальную переменную, которую мы хотели бы создать, и добавим нужные нам функции:

beforeEach(() => {
  fixture = TestBed.createComponent(GoogleRecaptchaComponent);
  component = fixture.componentInstance;

  window['grecaptcha'] = {
    render() {
      console.log('mocked global variable and function');
    }
  }
}

Обновлять:

Создание глобальной переменной в beforeEach — это хорошо, но как насчет того, чтобы иметь какую-то функцию обратного вызова, такую ​​как выше, которая вызывает функцию из вашего компонента? Достаточно просто мы просто перемещаем логин в наш тест, а в макете мы устанавливаем его для функции наших компонентов:

it('should ', () => {
  window['grecaptcha'] = {
    render: function() { GoogleRecaptchaComponent['GoogleCaptchaCallback']('token'); }
  };

  spyOn<any>(GoogleRecaptchaComponent, 'GoogleCaptchaCallback');

  GoogleRecaptchaComponent['CreateGoogleCaptcha']();
  expect(GoogleRecaptchaComponent['GoogleCaptchaCallback']).toHaveBeenCalled();
});

Примечание: spyOn<any>: <any> используется для того, чтобы мы могли без ошибок ссылаться на функцию, потому что она закрытая, иначе мы получим ошибку машинописного текста;

Первое решение у меня не сработало в Angular 2.1.x. Он просто не распознал бы переменную в моей импортированной службе. Что мне нужно было сделать, так это поместить мою переменную среды в мой файл karma-test-shim.js и удалить var, чтобы она была глобально доступна.

Мой выглядит так:

Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('reflect-metadata');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy'),
require('zone.js/dist/sync-test'),
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

// Add environment variables here so that tests will inject them in source code
API_URL = 'http://localhost:8080/api/';

var appContext = require.context('../src', true, /\.spec\.ts/);

appContext.keys().forEach(appContext);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(
    browser.BrowserDynamicTestingModule,
    browser.platformBrowserDynamicTesting()
);