angularjs - 使用 Karma Jasmine 进行 Angular 1.5 组件模板单元测试

Question

我正在尝试使用 Karma Jasmine 对 Angular 组件和模板进行单元测试。我正在使用 ng-html2js 测试组件 Controller 已实现，但未实现模板 我指的是this Git Repository作为此的一部分。karma-conf 文件与上面存储库中的文件相同。

文件夹结构

|   .editorconfig
|   .jshintrc
|   gulpfile.js
|   index.html
|   karma.conf.js
|   package.json
|
+---app
|   |   app-constants.js
|   |   app-routes.js
|   |   app.js
|   |   
|   +---components
|   |   |   about-component.js
|   |   |   footer-component.js
|   |   |   header-component.js
|   |   |   home-component.js
|   |   |   
|   |   \---shared
|   +---services
|   |       endpoint-service.js
|   |       
|   \---templates
|           about-template.html
|           footer-template.html
|           header-template.html
|           home-template.html
|           
\---tests
    |   app.spec.js
    |   
    +---components
    |       endpoint-service.mock.js
    |       footer-component.spec.js
    |       header-component.spec.js
    |       home-component.spec.js
    |       
    +---services
    |       endpoint-services.spec.js
    |       
    \---templates
           home-template.spec.js

组件

angular.module("app").component('headerComponent', {
    templateUrl: 'app/templates/header-template.html'
});

模板

<header>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#!/">Header Text</a>
            </div>              
        </div>
    </nav>
</header>

规范

'use strict';
describe('Component: headerComponent', function () { 
    beforeEach(module('errorlogger'));
    beforeEach(module('templates'));
    var element;
    var scope;
    beforeEach(inject(function ($rootScope, $compile) {         
        scope = $rootScope.$new();          
        element = angular.element('<header-component></header-component>');         
        scope.$apply(function () {
            $compile(element)(scope);
        });         
    }));

    it('should render the header text', function () {
        var title = element.find('a')[0];
        expect(title).toBeTruthy();
        expect(title.text()).toBe('Header Text');
    });
});

控制台中出现错误(我正在使用 karma-spec 进行报告)

Component: headerComponent
    × should render the title text (1160ms)
        Error: [$compile:tpload] Failed to load template: app/templates/header-template.html (HTTP status: undefined undefined)
        http://errors.angularjs.org/1.6.4/$compile/tpload?p0=app%2Ftemplates%2Fheader-template.html&p1=undefined&p2=undefined
            at node_modules/angular/angular.js:66:12
            at handleError (node_modules/angular/angular.js:19992:20)
            at processQueue (node_modules/angular/angular.js:16832:37)
            at node_modules/angular/angular.js:16876:27
            at Scope.$digest (node_modules/angular/angular.js:17971:15)
            at ChildScope.$apply (node_modules/angular/angular.js:18269:24)
            at Object.<anonymous> (tests/components/header-component.spec.js:16:9)
            at Object.invoke (node_modules/angular/angular.js:5003:19)
            at Object.WorkFn (node_modules/angular-mocks/angular-mocks.js:3173:20)
        Error: Declaration Location
            at window.inject.angular.mock.inject (node_modules/angular-mocks/angular-mocks.js:3136:25)
            at Suite.<anonymous> (tests/components/header-component.spec.js:7:13)
            at tests/components/header-component.spec.js:2:1

karma.conf 文件

files: [
        'node_modules/jquery/dist/jquery.js',
        'node_modules/angular/angular.js',
        'node_modules/angular-ui-router/release/angular-ui-router.js',
        'node_modules/angular-mocks/angular-mocks.js',
        'app/app.js',
        'app/services/*.js',
        'app/components/*.js',
        'app/**/*.js',
        'app/templates/*.html',
        'tests/app.spec.js',
        'tests/components/header-component.spec.js'         
        //'tests/components/*.spec.js'
        //'tests/**/*.js'
],
preprocessors: {
  'app/templates/*.html': 'ng-html2js',
  'app/**/!(*.mock|*.spec).js': ['coverage']
},

ngHtml2JsPreprocessor: {
  // strip this from the file path
  stripPrefix: 'app/',
  // create a single module that contains templates from all the files
  moduleName: 'templates'
},

我在这里遗漏了什么吗？

Answer 1

您似乎错过了规范文件中的模块引用:

'use strict';
describe('Component: headerComponent', function () { 
    // beforeEach(module('errorlogger')); // <-- Is this needed?
    beforeEach(module('app'));  // <-- Add this
    beforeEach(module('templates'));
    var element;
    var scope;
    beforeEach(inject(function ($rootScope, $compile) {         
        scope = $rootScope.$new();          
        element = angular.element('<header-component></header-component>');         
        scope.$apply(function () {
            $compile(element)(scope);
        });         
    }));

    it('should render the header text', function () {
        //var title = element.find('a')[0];  // <-- Chnage this
        var title = element.find('a');  // <-- To this
        expect(title.text()).toBe('Header Text');
    });
});

此外，将您的 karma.conf 文件修改为:(根据您的情况更改文件部分，您可以包含所有 js 文件)

files: [
        'node_modules/jquery/dist/jquery.js',
        'node_modules/angular/angular.js',
        'node_modules/angular-ui-router/release/angular-ui-router.js',
        'node_modules/angular-mocks/angular-mocks.js',
        'app/**/*.js',
        'app/**/*.html',
        'tests/**/*.spec.js',
], 
preprocessors: {   
    'app/templates/*.html': 'ng-html2js',   
    'app/**/!(*.mock|*.spec).js': ['coverage'] 
},

ngHtml2JsPreprocessor: {
    // strip this from the file path   
    //stripPrefix: 'app/', // <-- Not needed in your case.  
    // create a single module that contains templates from all the files   
   moduleName: 'templates' 
}