Question

我有一个小角度应用程序，显示灯箱。我没有找到适合角度的任何合适的东西（在移动设备上看起来很好），所以我选择了大胆的弹出窗口。 Magnific popup使用jquery初始化弹出窗口：

$(document).ready ->
  $('.image-link').magnificPopup({type:'image'})

我写了一个最小的指令，我用它来使用angular：

angular.module('myapp').directive 'magnificHelper', ($timeout) ->
  restrict: 'A'
  link: (scope, element, attr) ->
    if (scope.$last == true)
      $timeout ->
        element.parent().find('.image-link').magnificPopup
          type:'image'
          gallery: {enabled: true}

这很好用，但我不确定如何为此代码编写单元测试。我试图在网上找到答案，我想这一定是一个相当常见的问题，但我没有找到任何相关的解决方案。

Answer 1

这取决于您要测试的内容，基本测试可以检查是否定义了$last，例如：

'use strict';
describe('magnificHelper', function() {
  var $compile,$rootScope, $scope,$timeout, template;

  beforeEach(module('myapp'));

  beforeEach(inject(function($injector) {
    $rootScope = $injector.get('$rootScope');
    $timeout = $injector.get('$timeout');
    $compile = $injector.get('$compile');
    $scope = $rootScope.$new();
    template = $compile("<div magnificHelper> </div>")($scope);
    $scope.$digest();
  }));

  /*
   *
   * Tests
   *
   */
  describe('Test something', function() {
    it('should test something', function() {
      expect(template).toBeDefined()
      expect($scope.last).toBeDefined()
    });
  });
});

我想您也可以执行类似$scope.magnificPopup = element.parent().find('.image-link').magnificPopup的操作，然后在测试中检查$scope.magnificPopup值

单元测试包装jquery lib的angular指令

1 个答案: