Почему $ httpBackend.flush() приводит к неожиданному запросу?

Question

Если я добавляю вызов flush(), он дает мне «Ошибка: неожиданный запрос: GET templates/createAccountWithAcme.html». Почему это говорит мне о шаблоне вида и как я могу избежать этого? Это проект Ionic Framework (v 1.0.0 RC2 - AngularJS).

EDIT: Раньше я ошибочно опускал вызов $ httpBackend.when или $ httpBackend.whenGET, который я пробовал. Такая же ошибка с обновленным кодом:

EDIT 2: Подробнее: Это проект Ionic Framework (v1.0.0 RC2), который использует ui-router. Когда я попытался удалить все другие тесты, я все равно получил ошибку, но заметил, что шаблон, на который он жаловался, был последним, указанным в конфигурации маршрутизатора UI (в Ionic маршрутизатор $stateProvider). Если бы я добавил фиктивное состояние в конец определений состояний, тогда он стал ТО, что тест жаловался. Поэтому я решил, что маршрутизатор должен пытаться загрузить в шаблоны, которые мой тест не ожидал. Я опубликовал исправление.

describe('foo', function() { 
    var $http, $httpBackend; 
    $http = void 0; 
    $httpBackend = void 0; 
    $http = null; 
    $httpBackend = null; 
    beforeEach(module('acme')); 
    beforeEach(inject(function($injector) { 
    $http = $injector.get('$http'); 
    $httpBackend = $injector.get('$httpBackend'); 
    $httpBackend.whenGET('http://www.google.com').respond({}); 
    })); 
    it('should have parsed genres', function() { 
    console.log('foo'); 
    $http({ 
     method: 'GET', 
     url: 'http://www.google.com' 
    }).then(function(response) { 
     console.log('success: ', response); 
    }, function(error) { 
     console.log(error); 
    }); 
    $httpBackend.flush(); 
    }); 
}); 

Answer 1

То, что вы должны сделать, это насмешка вашего запроса в вашем beforeEach пункте:

beforeEach(inject(function($injector) { 
    $http = $injector.get('$http'); 
    $httpBackend = $injector.get('$httpBackend'); 
    $httpBackend.whenGet('http://www.google.com') 
    .respond('Some return'); 
    })); 

И когда вы выполняете .flush() обещание метода GET будет решено

Answer 2

Я кончался белый список все html-шаблоны:

beforeEach ... 

//this line solves it 
$httpBackend.whenGET(/templates/.*/).respond(200, ''); 

$httpBackend.whenGET('http://www.google.com').respond({}); 

... 

Answer 3

I hav e видели похожие проблемы с неожиданными запросами на получение HTML-кода, когда директивы модульного тестирования содержат другие директивы в своих шаблонах.

Общее решение, которое мы использовали, заключалось в том, чтобы добавить некоторые шаги сборки, которые «скомпилируют» (вроде) все HTML-шаблоны проекта в один JS-файл, а затем включают этот JS-файл в список javascript, включенный в karma.conf.js. Теперь, когда директива загружает и делает запрос к кешу шаблона для шаблона, шаблон уже загружается (поскольку ваш JS был включен через karma.conf.js), а затем нет неожиданного запроса GET!

Обратите внимание, что это, как правило, хорошо, как часть процесса сборки, поэтому ваши клиентские браузеры не делают N дополнительных HTTP-запросов для HTML-шаблонов.

Если вы работаете в проекте node.js, вы можете использовать ng-htmljs для преобразования всех шаблонов в js. Их документы также объясняют проблему немного лучше: https://www.npmjs.com/package/ng-html2js. Это также удобно обертывать хрюканьем - https://www.npmjs.com/package/grunt-html2js, а также gulp - https://www.npmjs.com/package/gulp-ng-html2js.

В node.js хрюкать решение более подробно:

GruntFile.coffee:

grunt.initConfig 
    html2js: 
    test: 
     src: ['all/my/html_templates/**/*.html'] 
     dest: 'app/.tmp/templates.js' 
    options: 
     base : 'app/' 
     module: 'myAppTemplates' 
     singleModule: true 
     htmlmin: 
     collapseWhitespace: false 
     collapseBooleanAttributes: true 
     removeCommentsFromCDATA: true 
     removeOptionalTags: true 

grunt.registerTask 'test', [ 
    ... 
    'html2js:test' 
    'karma:unit' 
    ... 
] 

И в Karma.conf.js:

files: [ 
    ... 
    'app/.tmp/templates.js' 
], 

И не забудьте в ваш тест, чтобы включить ваш шаблонный модуль:

beforeEach module 'myAppTemplates' 
#or if you are using browserify: 
beforeEach window.angular.mock.module 'myAppTemplates'