在指令无法获取元素同时检测AngularJs +茉莉 [英] Can not get element in directive while testing AngularJs + Jasmine

问题描述

我有与外部模板的angularjs指令。它的工作原理很好，但我不能写茉莉单元测试它。
这里是plunker转载code： http://plnkr.co/edit/JPOBm7 p = preVIEW

I've got an angularjs directive with external template. It works well but I can not write jasmine unit tests for it. Here is plunker reproduced code: http://plnkr.co/edit/JPOBm7?p=preview

我所有的尝试失败了同样的问题。联系方式崩溃在得到模板的DOM元素运行单元测试时。它说：类型错误：画布是空的http://run.plnkr.co/YHHxxmSgCiQxjrjw/app.js（8号线）

All my tries failed on the same issue. Link method crashes on getting template's DOM element while running unit-test. It says: TypeError: canvas is null in http://run.plnkr.co/YHHxxmSgCiQxjrjw/app.js (line 8)

我不知道如何使它发挥作用。帮助，请。

I have no idea how to make it work. Help, please.

我的简化指令code：

My simplified directive code:

angular.module('app', [])
  .directive('canvasDirective', canvasDirective);

  function canvasDirective () {
    var link = function () {
      var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        testText = 'Test it!';

      canvas.width = 200;
      canvas.height = 200;

      context.fillStyle = '#cccccc';  
      context.fillRect(0, 0, canvas.width, canvas.height);

      context.font = 'bold 32px Arial';
      context.textAlign = 'center';
      context.fillStyle = 'white';

      context.fillText(testText, 100, 100);
      context.strokeText(testText, 100, 100);
    }

    return {
      restrict: 'A',
      link: link,
      templateUrl: 'canvas.html'
    }
  }

茉莉花单元测试code：

Jasmine unit-test code:

describe('Test directive with canvas', function() {
  var $compile, $scope, $templateCache, defaultData, validTemplate,
      html = '<div data-canvas-directive></div>',

      createDirective = function (data, template) {
        var elm;

        $scope.data = data || defaultData;
        elm = $compile(template || validTemplate)($scope);

        $scope.$digest();

        return elm;
      }

  beforeEach(module('app'));

  beforeEach(inject(function(_$compile_, _$rootScope_, _$templateCache_){
    $compile = _$compile_;
    $scope = _$rootScope_.$new();
    $templateCache = _$templateCache_;

    var template = $templateCache.put('canvas.html', html);
  }));

  describe('when created', function () {

    it('should render the expected output', function () {
      var element = createDirective(null, html);

      expect(element.find('canvas').length).toBe(1);
    });

  });
});

除了

，它花了很长的时间才能重现Plunker问题，但它仍然抛出类型错误：的createElement是不是一个函数 茉莉花HTML 。

推荐答案

好了，我发现我的答案在这里<一个href=\"http://stackoverflow.com/questions/21623974/jasmine-unit-testing-an-element-is-not-hidden\">Jasmine单元测试中的元素不是：隐藏。我试着添加指令元素之前的文件，但没有奏效。我已经错过了唯一的办法就是注入 $文件测试范围。 文件的对象不可没有它。

Well, I've found my answer here Jasmine unit testing an element is not :hidden. I've tried to add directive element to document before, but it didn't work. The only thing I've missed was to inject $document to test scope. document object is not available without it.

describe('Test directive with canvas', function() {
  var $compile, $scope, $templateCache, $document, template,
      html = '<div data-canvas-directive></div>',
      canvasHtml = '<div class="canvas-wrapper"><canvas id="canvas"></canvas></div>';

  beforeEach(module('app'));

  beforeEach(inject(function(_$compile_, _$rootScope_, _$templateCache_, _$document_){
    $document = _$document_;
    $compile = _$compile_;
    $scope = _$rootScope_.$new();
    $templateCache = _$templateCache_;
    template = $templateCache.put('canvas.html', canvasHtml);
  }));

  var createDirective = function () {
    var elm = angular.element(html);

    $compile(elm)($scope);
    document.body.appendChild(elm[0]);
    $scope.$digest();

    return elm;
  };

  describe('when created', function () {

    it('should render the expected output', function () {
      var element = createDirective();

      expect(element.find('canvas').length).toBe(1);
      document.body.removeChild(element[0]);
    });

  });
});

更新plunker http://plnkr.co/edit/JPOBm7?p=preVIEW

这篇关于在指令无法获取元素同时检测AngularJs +茉莉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！