使用 Karma Jasmine 的 Angular 1.5 组件模板单元测试

Posted 2023-03-16

【中文标题】使用 Karma Jasmine 的 Angular 1.5 组件模板单元测试

【英文标题】：Angular 1.5 Component template unit test with Karma Jasmine

【发布时间】：2017-09-15 22:06:34

【问题描述】：

我正在尝试使用 Karma Jasmine 对 Angular 组件和模板进行单元测试。我正在使用ng-html2js 测试组件控制器已实现但不是模板 我引用this Git Repository 作为其中的一部分。karma-conf 文件与上述 repo 中的文件相同。

文件夹结构

|   .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'
,

我这里有什么遗漏吗？

【问题讨论】：

你能创建一个 plunker/fiddle/pen 吗？或者您可以分享您正在使用的文件夹结构吗？

还有一件事，通过查看错误，您提供的模板路径看起来与模板的绝对路径不匹配。这么说，我遵循的规则是模板路径应该可以从我的“index.html”所在的位置遍历（这可能因项目和配置而异）。

编辑了问题

这里的一切对我来说都很好。但是在您的规范中，我看到您没有包含您的“headerComponent”模块，即app 模块。当您在此处键入 title.text() 时，还有一件事 title 假定为 jqLit​​e 或 jquery 元素，而不是 HTML 元素。

【参考方案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' 

【讨论】：

收到此错误。 ` 错误：[$injector:modulerr] 无法实例化模块应用程序，原因是：错误：[$injector:nomod] 模块“应用程序”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。`

确保您已经定义了“app”模块，因为您正在测试在名为“app”的模块中定义的组件。另外，我已经编辑了答案（与您的 karma.conf 文件相关）。