Karma 'Yêu cầu bất ngờ' khi kiểm tra chỉ thị góc, ngay cả với ng-html2js

Question

Sau khi chi tiêu ngày cuối cùng cố gắng thực hiện công việc này, tôi thấy rằng tôi đã quay trở lại cùng một lỗi tôi đã gặp lúc đầu :

Lỗi: yêu cầu mong đợi: GET thử directive.html

tôi đang sử dụng Karma và Jasmine để kiểm tra các chỉ thị trong góc. Tôi đã xem xét các câu hỏi tương tự trên StackOverflow, nhưng thấy rằng mọi thứ đã được thử trong các ví dụ khác là không có kết quả.

cấu trúc Mã

Test-App
-src
--bower
--lib
--js
--modules
--- testDir
--- -test.js
---- test-directive.html
---- test
----- test.spec.js
-test
--config
--- karma.conf.js
--e2e

Karma Config

'use strict'; 
module.exports = function(config){ 
    config.set({ 
    basePath: '../../', 
    frameworks: ['jasmine'], 
    files: [ 
     // Angular 
     'src/bower/angular/angular.js', 
     // Mocks 
     'src/bower/angular-mocks/angular-mocks.js', 
     // Libraries 
     'src/lib/**/*.js', 
     // App 
     'src/js/*.js', 
     'src/modules/*/*.js', 
     // Tests 
     'src/modules/**/test/*spec.js', 
     // Templates 
     'src/modules/**/*.html' 
    ], 
    autoWatch: false, 
    singleRun: true, 
    reporters: ['progress'], 
    browsers: ['PhantomJS'], 

    preprocessors: { 
     'src/modules/**/*.html': 'ng-html2js' 
    }, 
    ngHtml2JsPreprocessor: { 
     moduleName: 'dir-templates' 
    }, 
    plugins: [ 
     'karma-jasmine', 
     'karma-ng-html2js-preprocessor', 
     'karma-phantomjs-launcher', 
     'karma-chrome-launcher', 
     'karma-junit-reporter' 
    ] 
    }); 
}; 

test.js

'use strict'; 
angular.module('modules.test', []). 
directive('testDirective', [function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'test-directive.html', 
     link: function($scope, $elem, $attrs) { 
      $scope.someFn = function() { 
       angular.noop(); 
      }; 
     } 
    }; 
}]); 

thử direct.html

<span>Hello World</span> 

test.spec.js

'use strict'; 
describe('test module', function() { 
    beforeEach(module('modules.test')); 
    /* -- DIRECTIVES------------------ */ 
    describe('directives', function() { 
     var $compile, $scope, elm; 
     beforeEach(module('dir-templates'); 
     beforeEach(inject(function($compile, $rootScope) { 
      $scope = $rootScope.$new(); 
      elm = angular.element('<test-directive></test-directive>'); 
      $compile(elm)($scope); 
      $scope.$digest(); 
     })); 
     it('should have one span tag', function(){ 
      //Jasmine test here to check for one span tag. 
     }); 
    }); 
}); 

đã rút ngắn một vài tập tin để dính vào chỉ nơi vấn đề là. Khi gọi số beforeEach(module('dir-templates')), nó sẽ tải tất cả các tệp .html đã khớp vào $ templateCache và ngăn yêu cầu GET đang gửi lỗi.

Bất kỳ trợ giúp nào sẽ được đánh giá cao vì nó thực sự khiến tôi phát điên. Vui lòng nhận xét nếu bạn có thêm bất kỳ câu hỏi nào.

Answer 1

Vì vậy, một nhức đầu khó khăn cho những gì có vẻ là một sửa chữa hai dòng. Sau khi mở Karma trong Chrome (thay vì PhantomJS) và xem các tệp nguồn, tôi nhận thấy rằng khi ng-html2js gắn chỉ thị vào $ templateCache, nó sử dụng toàn bộ đường dẫn, không phải là đường dẫn được cung cấp trong định nghĩa chỉ thị.

Tóm lại, 'src/modules/test/test-directive.html.js' !== 'test-directive.html.js'.

Để đạt được điều này, hãy sửa đổi karma.conf.js nộp ngHtml2JsProcessor để đọc như:

ngHtml2JsPreprocessor: { 
    stripPrefix: 'src/', 
    moduleName: 'dir-templates' 
}, 

Và templateUrl việc kê khai chỉ thị của để trông giống như:

templateUrl: 'modules/test/test-directive.html' 

Answer 2

Để thêm vào các ý kiến ​​về việc bảo đảm tên mẫu được kết hợp trên trận tiền tố (không có hàng đầu cắt giảm, vv), một điều khác để kiểm tra là trường hợp.

Khóa bộ nhớ cache mẫu phân biệt chữ hoa chữ thường, vì vậy hãy đảm bảo rằng chỉ thị của bạn tham chiếu đến tệp html bằng cách sử dụng đúng cách. Các khóa bộ nhớ cache mẫu mà ngHtml2JsPreprocessor tạo ra sử dụng vỏ của tên tệp thực và tên thư mục trên hệ thống tệp. Vì vậy, nếu tệp của bạn có tên là Test-Directive.html hoặc thư mục của bạn có tên là "Mô-đun" nhưng chỉ thị của bạn tham chiếu "modules/test-directive.html", thì nó sẽ không giải quyết được từ bộ nhớ cache.

Trường hợp độ nhạy không phải là vấn đề với việc sử dụng thực tế (không kiểm tra) mẫu của chỉ thị của bạn (yêu cầu GET rõ ràng là không phân biệt chữ hoa chữ thường và khóa bộ nhớ cache mẫu sẽ được tạo dựa trên bất kỳ yêu cầu GET ban đầu nào). bất cứ điều gì được chỉ định trong chỉ thị của bạn).

Answer 3

Một số mẹo gỡ lỗi khi nhận được lỗi này:

Khi Karma chrome launcher mở trình duyệt, tìm kiếm các mẫu được ném ra lỗi, trong trường hợp này là student-survey.html, bạn sẽ thấy một student-survey.html.js đó là mẫu được đặt trong bộ nhớ cache mẫu góc. Kiểm tra rằng html.js nộp bạn sẽ thấy một id cache: $templateCache.put('/app/views/student-survey.html',....

Bạn phải chắc chắn rằng ID cache, trong trường hợp này app/views/student-survey.html sẽ phù hợp với những gì được tham chiếu bên trong ứng dụng của bạn, trong trường hợp của tôi id bộ nhớ cache đã mất tích một trailing '/' mà tôi quản lý để sửa chữa bằng cách đặt một / trong phần prependPrefix của phần ngHtml2JsPreprocessor trong karma.conf.js tôi:

ngHtml2JsPreprocessor: { prependPrefix: '/', moduleName: 'templates' }