AngularJS-如何对组件的DOM元素进行单元测试？

Question

我正在使用AngularJS 1.5构建应用程序，有时会使用组件。我在HTML部分中有一些要测试的逻辑。我已经尝试启动它。

如何测试html元素是否已呈现？

以下是代码和链接：

//--- CODE --------------------------
(function() {

  var app = angular.module('myApp');

  app.component('clockingIcon', function() {
    bindings: {
      clocking: '<'
    },
    template: '<img ng-if="$ctrl.clocking.edited" /><span ng-if="!$ctrl.clocking.editied" />'
  });

})();

// ---SPECS-------------------------

describe('myApp', function() {
  describe('component: clockings icon', function () {

      beforeEach(function () {
          module('myApp');
      });

      var scope;
      var $compile;

      beforeEach(inject(function ($rootScope, _$compile_) {
          scope = $rootScope.$new();
          $compile = _$compile_;
      }));

      it('Manual Clocking - should only show manual clocking symbol', function () {

          scope.clocking = {
              edited: true,
              SourceType: 5
          };

          var element = angular.element('<clocking-icon></clocking-icon>');
          element = $compile(element)(scope);
          scope.$apply();

          console.log(' * * * * ELEMENT * * * * * ', element);
          console.log(' * * * * ELEMENT * * * * * ', element.html());

          //var img = element.find('img');
          var img = element[0].querySelectorAll('img');

          console.log(' * * * IMG * * * ',img);

          expect(img.length).toBe(1);

          expect(element[0].getElementsByTagName('img').length).toBe(1);


      });

  });

});

https://codepen.io/aubz/pen/zVVBOp

如何测试DOM元素？

“元素”对象包含哪些属性？