测试angularjs指令(更改隔离范围var后模板未在测试中更新)

 丫_龟shop 发布于 2023-01-30 09:19

我正在创建一个angularjs组件,它将(将)提供一个带有过滤,排序,切换选项,滚动等的复选框列表指令......一旦完成.它应该可以帮助人们处理长复选框列表.

我正在尝试按标签或ID功能测试订单,但即使在$ digest或$ apply调用之后,模板也不会反映模型更改.我试图解决但没办法.

这是指令定义:

angular.module('angularjsSmartcheckboxApp')
  .directive('smartCheckbox', [function () {
    return {
      templateUrl: 'views/smartcheckbox.html',
      restrict: 'E',
      replace: true,
      scope: {model: '='},
      controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
        // TODO
      }]
    };
  }]);

用法:


其中smartList是:

$scope.smartList = [
    {id: '001', label: 'First item'},
    {id: '002', label: 'Second item'},
    {id: 'Z01', label: 'Another item'}
  ];

这是模板:

...
Order options:

在这里你可以找到失败的测试'标签订单(反向)':

describe('Directive: smartCheckbox', function () {

  // load the directive's module
  beforeEach(module('angularjsSmartcheckboxApp', 'views/smartcheckbox.html'));

  var element,
    $rootScope,
    $compile,
    scope;

  beforeEach(inject(function (_$rootScope_, _$compile_) {
    $rootScope = _$rootScope_;
    scope = $rootScope.$new();
    $compile = _$compile_;
    $rootScope.model = [
        {id: '001', label:'First item'},
        {id: '002', label:'Second item'}
    ];

    element = $compile(angular.element(''))(scope);
    $rootScope.$apply();

  }));

  it('Labels order (reverse)', function () {

    scope.reverse = true;
    scope.orderby = 'label';
    scope.$apply();

    expect(element.children().eq(3).find('label').eq(0).find('span').text()).toBe('[002]');
  });
});

存储库链接:https: //github.com/davidemoro/angularjs-smartcheckbox

PS:如果你打开浏览器,重新排序工作正常,所以我认为测试方法有一些问题.

问题是什么?先感谢您

1 个回答
  • 我是如何解决的:

    -    element = $compile(angular.element('<smart-checkbox model="model"></smart-checkbox>'))(scope);
    +    $element = angular.element('<smart-checkbox model="model"></smart-checkbox>');
    +    element = $compile($element)(scope);
    
    ...
    
       it('Labels order (reverse)', function () {
    
    -    scope.reverse = true;
    -    scope.orderby = 'label';
    -    scope.$apply();
    +    $element.isolateScope().reverse = true;
    +    $element.isolateScope().orderby = 'label';
    +    $element.isolateScope().$apply();
    
    -    expect(element.children().eq(3).find('label').eq(0).find('span').text()).toBe('[002]');
    +    expect($element.children().eq(3).find('label').eq(0).find('span').text()).toBe('[002]');
       });
    

    由于该指令使用隔离范围,我需要使用.isolateScope方法.希望它可以帮助其他人:)

    更新:我根据这个答案写了一篇博客文章.见http://davidemoro.blogspot.com/2014/02/testing-angularjs-directives-with_13.html

    2023-01-30 09:22 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有