Question

在我的角度项目中，我有一个指令，在加载真实头像之前显示默认图标。

function avatarDirective(API) {

    var DEFAULT_AVATAR = 'img/default-avatar.png';

    return {
      restrict    : 'A',
      scope       : {
        avatarUrl: '='
      },
      link: linkFunc
    };


    function linkFunc($scope, $element) {
      $element.attr('src', DEFAULT_AVATAR);

      $scope.$watch(function() {
        return $scope.avatarUrl;
      }, _setAvatar);


      function _setAvatar() {
        if ($scope.avatarUrl) {

          var avatar = new Image();
          avatar.onload = function() {
            $element.attr('src', API.BASE_URL + $scope.avatarUrl);
          }
          avatar.src = API.BASE_URL + $scope.avatarUrl;
        }
      }
    }

  }

此代码正常运行没有问题。但是我无法用Karma测试它。实际上，负载功能永远不会触发。以下是我的测试。

it('should set the default avatar if avatar-url is empty', function(done) {
    element = angular.element('<img class="img-circle" dod-avatar avatar-url="avatar"/>');
    element = $compile(element)($scope);
    $scope.avatar = 'img/new-avatar.png';
    $scope.$digest();

    expect(element.attr('src')).toContain('img/new-avatar.png'); // FAILED

  });

谢谢

Answer 1

expect(element.attr('src')).toContain('img/new-avatar.png'); // FAILED

这总是会失败。 attr（）返回一个属性的值，而来自Jasmine的toContain matcher只处理数组（jasmine docs）。

使用Jasmine进行角度单元测试图像加载

1 个答案: