Светильники не будут загружаться в Карме

Я пробовал много вещей, но я не могу найти инструмент для загрузки, когда я запускаю Karma. Я пробовал использовать html2js и karma-jasmine-jquery - я склоняюсь к последнему, но я буду в порядке с тем, что получает мой прибор, загруженный в DOM), - но насколько я могу сказать, что он не загружается и прикрепляется к DOM при выполнении моих тестов.

Моя структура каталогов довольно проста:

img/
  ↳ mac.png
  ↳ link.png
  ↳ pocketwatch.png
js/
  ↳ spriteloader.js
  ↳ spriteloader.spec.js
karma/
  ↳ imagelist.fix.html
  ↳ karma.conf.js
Gruntfile.coffee
index.html
grunt.config.coffee
package.json

Это модули node, которые я установил:

grunt 0.4.5
grunt-contrib-jshint 0.10.0
grunt-contrib-watch 0.6.1
grunt-karma 0.9.0
karma 0.12.23
karma-chrome-launcher 0.1.4
karma-firefox-launcher 0.1.3
karma-html2js-preprocessor": "^0.1.0",
karma-jasmine 0.2.0
karma-jasmine-jquery 0.1.1
karma-safari-launcher 0.1.1
karma-story-reporter 0.2.2

И вот мои настройки karma.conf.js:

basePath: '../',

frameworks: ['jasmine-jquery', 'jasmine'],

files: [
  // Source and spec files
  {
    pattern: 'js/*.js',
    watched: true,
    served: true,
    included: true
  },
  // Fixtures
  {
    pattern: 'karma/*.fix.html',
    watched: false,
    served: true,
    included: false
  }
],

exclude: [
],

preprocessors: {
},

reporters: ['story'],

port: 9018,

colors: true,

logLevel: config.LOG_INFO,

autoWatch: true,

browsers: ['Chrome', 'Firefox', 'Safari'],

singleRun: true

В моей спецификации я начинаю с describe() с beforeEach(), который выполняет следующие две строки:

jasmine.getFixtures().fixturesPath = '../';
jasmine.getFixtures().load('/karma/imagelist.fix.html');

Затем запускаются функции it(). Они тестируют функцию, которая добавляет прослушиватель событий к некоторым элементам <img>, используя document.getElementById(). Что там, где должно быть устройство, потому что без него getElementById() вернется null. (В чем проблема, которую я нажимаю.)

Я просматривал паутину почти целый день, пытаясь найти что-то, но я не могу ничего извлечь из Кармы, кроме TypeError: document.getElementById(...) is null. Я попытался изменить конфигурацию Karama так, чтобы вместо preprocessors был "**/*.html": [], чтобы отключить html2js, но ничего не сделал. Я попытался отключить jasmine-jquery и вместо этого использовать html2js, но практически нет документации по karma-html2js-preprocessor, поэтому я даже не могу сказать, правильно ли я ее использую. (Вот почему я больше склоняюсь к jasmine-jquery.) Я просто не могу понять этого.

ОБНОВЛЕНИЕ (3 OCT)

Я нашел этот вопрос о переполнении стека и попробовал ответ там, но он не сработал - у меня все еще было такое же поведение, которое я видел. Мой karma.conf.js не изменился сверху, но в моем spriteloader.spec.js я изменил призывы Жасмина к этому:

jasmine.getFixtures().fixturesPath = 'http://localhost:9019/base/karma/';
jasmine.getFixtures().load('imagelist.fix.html');

Я также пробовал это и снова получил тот же результат:

jasmine.getFixtures().fixturesPath = 'http://localhost:9019/base/karma/';
jasmine.getFixtures().load('http://localhost:9019/base/karma/imagelist.fix.html');

Затем я нашел эту проблему на GitHub и изменил preprocessors в karma.conf.js на это:

preprocessors: {
    '**/*.html': []
},

И я изменил вызовы Жасмин в моей спецификации:

var fixtures = jasmine.getFixtures();
fixtures.fixturesPath = 'base/karma/';
fixtures.load('imagelist.fix.html');

Это также привело к такому же поведению: TypeError: document.getElementById(...) is null

Я также нашел этот пост и попробовал сконфигурированную в нем конфигурацию - за исключением добавления JASMINE и JASMINE_ADAPTER к files раздела karma.conf.js, но я все равно получаю такое же поведение.

Так как я локально установлен karma-jasmine-jquery, я указал на jasmine-jquery script следующим образом:

'node_modules/karma-jasmine-jquery/lib/jasmine-jquery.js'

Я даже попробовал выкрикивать звонки Жасмина в целом и вместо этого использовал вызов AJAX:

$('#fixture').remove();
$.ajax({
    async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
    dataType: 'html',
    url: '../karma/imagelist.fix.html',
    success: function(data) {
        $('body').append($(data));
    }
});

У меня все же был тот же результат. Не уверен, что еще я могу попробовать.

ОБНОВЛЕНИЕ (4 OCT)

Я нашел qaru.site/info/69240/... и попытался настроить его с помощью html2js на решение там. Я удалил jasmine-jquery из раздела frameworks моего karma.conf.js и добавил раздел plugins, который выглядит следующим образом:

plugins: [
    'karma-chrome-launcher',
    'karma-firefox-launcher',
    'karma-html2js-preprocessor',
    'karma-jasmine',
    'karma-safari-launcher',
    'karma-story-reporter'
],

Я также изменил раздел preprocessors, чтобы выглядеть так:

preprocessors: {
    '**/*.html': ['html2js']
},

И я изменил свой beforeEach() на следующее:

beforeEach(function() {
    var imagelist = __html__['../karma/imagelist.fix.html'];
    document.body.appendChild(imagelist);
});

Я все еще вижу тот же TypeError: document.getElementById(...) is null.

Ответ 1

Если вы используете karma-jasmine-jquery, вы можете просто установить следующее:

  • добавить его в качестве рамки - frameworks: ['jasmine-jquery', 'jasmine']

  • включить ваши светильники как шаблоны в массив файлов - { pattern: 'test/fixtures/*.html', included: false, served: true }

  • задайте путь, используя base/, например jasmine.getFixtures().fixturesPath = 'base/test/fixtures'; в ваших тестовых пакетах.

  • загрузите приборы в тестовые спецификации - loadFixtures('index.html');

карма-жасмин-JQuery https://www.npmjs.com/package/karma-jasmine-jquery

Настройка Karma http://karma-runner.github.io/0.12/config/files.html

Обновление 02.16.16

Новые версии Chrome не разрешают файл://URI читают другой файл://URI. По сути, jasmine-jquery не может правильно загружать светильники под некоторые версии Chrome. Для этого необходимо переопределить Chrome с помощью переключателя --allow-file-access-from-files. https://github.com/velesin/jasmine-jquery#cross-domain-policy-problems-under-chrome