Gulp 角度单元测试指令 templateUrl [英] Gulp angular unit testing directive templateUrl

问题描述

我在互联网和 SO 上阅读了许多帖子，但找不到任何有效的解决方案我正在尝试为指令编写单元测试，并希望从模板缓存中提供 html 文件

I read many post on internet and SO but couldn't find any solution that works I am trying to write unit test for a directive and want the html files to be served from template cache

我使用 Gulp 作为构建工具

I am using Gulp as a build tool

测试的 gulp 任务如下所示

The gulp task for test looks like this

gulp.task('test', function (done) {
    karma.start({
        configFile:__dirname + '/' + config.test.karmaconf,
        singleRun: false
    }, done);
});

在 karma.conf 中，我已经定义了

and in karma.conf , I have defined

    browserify: {
        debug: true,
        transform: [['browserify-ng-html2js', {
            module: 'templates',
            extension: 'html'
        }]]
    } 

在单元测试中，我声明

beforeEach(angular.mock.module('templates'));

但接收

Error: Unexpected request: GET path/to/some.html
No more request expected
    at $httpBackend 

我也尝试在 karma.conf 中使用 preprocessors 和 ngHtml2JsPreprocessor 但没有成功.任何人都可以提供解决方案或指出我如何调试为什么不提供模板?

I also tried to use preprocessors and ngHtml2JsPreprocessor in karma.conf but no success. Could anyone provide solution or point me how can I go about debugging why the templates are not served?

推荐答案

解决方案

有多种方法可以做到这一点.我是这样做的:

Solution

There are multiple ways you could go about doing that. Here's how I do it:

1. 使用gulp-angular-templatecache:

gulp.task('bundle-common', function() {
  return merge(
    // Store all html files in $templateCache
    gulp.src([
      appDir + '/common/**/*.html'
    ])
    .pipe($$.angularTemplatecache({
      root: 'common'
    }))

    // Append everything else: directives, tests, etc.
    gulp.src([
      appDir + '/common/**/*.js'
    ])
  )
  .pipe($$.concat('common.js'))
  .pipe(gulp.dest('public/js/'));
});

这将输出一个名为 common.js 的文件，其中包含所有 html 模板和指令.

This will output a file named common.js with all your html templates and directives in it.

它看起来有点像这样:

angular.module("templates").run(["$templateCache", function($templateCache) {
$templateCache.put("common/a-great-eye.html","<div>lidless, wreathed in flame, 2 times</div>");}]);

angular.module("common")

.directive('aGreatEye', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'common/a-great-eye.html'
    };
});

...

1. 在karma.conf.js中加载common.js:

     files: [
      '../vendor/jquery/dist/jquery.js',
      '../vendor/angular/angular.js',
      '../vendor/angular-mocks/angular-mocks.js',
      '../public/js/common.js'
    ]

1. 在您的测试文件中引用 templates 模块:

describe('Unit testing great quotes', function() {
  var $compile,
      $rootScope;

  // Load the common module, which contains the directive
  beforeEach(function() {
    module('templates');
    module('common');
  });

  // Store references to $rootScope and $compile
  // so they are available to all tests in this describe block
  beforeEach(inject(function(_$compile_, _$rootScope_){
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));

  it('Replaces the element with the appropriate content', function() {
    // Compile a piece of HTML containing the directive
    var element = $compile("<a-great-eye></a-great-eye>")($rootScope);
    // fire all the watches, so the scope expression {{1 + 1}} will be evaluated
    $rootScope.$digest();
    // Check that the compiled element contains the templated content
    expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
  });
});

调试

在 Chrome 浏览器中开始测试并点击调试按钮.然后打开开发者控制台.

Debugging

Start your test in Chrome browser and hit Debug button. Then open Developer Console.

一些提示:

• 您可以在测试中添加断点.
• 确保控制台窗口中没有错误，尤其是注入错误.如果这样做，请验证您在 karma.config.js 中请求的所有 js 文件(它们将在开发者控制台中列出)都已正确加载并包含您需要的代码(角度、模板、指令、等).

• You can add breakpoints in your tests.
• Make sure that there are no errors in console window, especially injection errors. If you do, verify that all the js files you requested in karma.config.js (they will be listed in Developer Console) are loaded correctly and contain the code you need (angular, templates, directives, etc.).

这篇关于Gulp 角度单元测试指令 templateUrl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！