如何使用 angularJS-karma-jasmine 测试指令的控制器?

2024-01-21

Goal:

为以下内容编写一个通过测试waCarousel指令范围变量:self.awesomeThings。预计此测试通过时self.awsomeThings.length.toBe(3)是真的吗?

问题:

我怎样才能正确地编写这个测试?相反,我如何注入指令控制器?


指示:

angular.module('carouselApp')
    .directive('waCarousel', function() {
        return {
            templateUrl: '../../../views/carousel/wa.carousel.html',
            controller: function($scope) {
                var self = this;

                self.awesomeThings = [1, 2, 3];

                return $scope.carousel = self;
            }
        }
    });

单元测试:

describe('waCarousel Unit', function() {
  // am I missing a $controller & namespace variable init?
   var $compile,
      $rootScope;


  // Load the myApp module, which contains the directive
  beforeEach(module('carouselApp'));

  // Store references to $rootScope and $compile and $controller
  // so they are available to all tests in this describe block
  beforeEach(inject(function(_$compile_, _$rootScope_, _$controller_){
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $compile = _$compile_;
    $rootScope = _$rootScope_;
    $controller = _$controller_;
     //   WaCarouselCtrl = $controller('WaCarouselCtrl', {
     //       $scope: scope
     //   });
  }));

  it('should have a list of awesomeThings', function() {
    // This wont pass       
    expect(scope.awesomeThings.length).toBe(3);
  });
});

这就是我对于典型视图而不是指令的做法:

describe('Controller: MainCtrl', function() {

    // load the controller's module
    beforeEach(module('carouselApp'));

    var MainCtrl,
        scope;

    // Initialize the controller and a mock scope
    beforeEach(inject(function($controller, $rootScope) {
        scope = $rootScope.$new();
        // !!*** this is how I would inject the typical controller of a view **!! //
        MainCtrl = $controller('MainCtrl', {
            $scope: scope
        });
    }));

    it('should attach a list of awesomeThings to the scope', function() {
        expect(scope.awesomeThings.length).toBe(3);
    });
});

我如何合并这两个概念以便我可以期望self.awesomeThings.length).toBe(3)?

UPDATE: enter image description here


Compile https://docs.angularjs.org/api/ng/service/%24compile元素,并在调用后$digest() https://docs.angularjs.org/api/ng/type/%24rootScope.Scope#%24digest,您将有权访问包含以下内容的范围carousel对象与awesomeThings array:

describe('waCarousel Unit', function() {
    var scope;

    beforeEach(module('carouselApp'));
    beforeEach(inject(function($rootScope, $compile) {
        var element = '<test></test>';

        scope = $rootScope.$new();

        element = $compile(element)(scope);
        scope.$digest();
    }));

    it('should have a list of awesomeThings', function() {    
        expect(scope.carousel.awesomeThings.length).toBe(3);
    });
});

另外,这里还有一些有用的链接来测试 Angular 指令:

  • 测试指令 https://docs.angularjs.org/guide/unit-testing#testing-directives
  • 使用 Jasmine 和 Karma 测试 AngularJS 指令控制器 http://daginge.com/technology/2014/03/03/testing-angular-directive-controllers-with-jasmine-and-karma/
  • 单元测试简介:指令 http://angular-tips.com/blog/2014/06/introduction-to-unit-test-directives/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 angularJS-karma-jasmine 测试指令的控制器? 的相关文章

  • 如何使用 jquery 在 ajax 调用中设置标头

    我需要从我自己的应用程序调用 Office 365 Rest API 当我在同一浏览器会话上复制并粘贴 url 时 我可以看到一些 XML 如果我将该 URL 粘贴到隐身窗口中 则会收到以下错误 The custom error modul
  • 尝试制作Linux终端但失败

    这可能是一个愚蠢的问题 可能很容易找到 但我对这一切都很陌生 我似乎找不到我要找的东西 或者至少我不知道我需要寻找什么 所以我在这里 所以我想做的是创建一种 Linux 终端 这就是我到目前为止所得到的 我所坚持的是实际输入文本部分 我一直
  • 图表外的 JQPlot 图例

    我正在使用 JQPlot 并且在一个 HTML 页面上有很多图表 每个图表都有相同的图例 我的问题是 是否可以完全在图表之外显示图例 并在 HTML 页面或自己的 div 中拥有自己的位置 legend show true renderer
  • 从 HTML 模板调用异步函数(Retunes Observable)

    HTML 模板上显示的数据是关键表单数据 意思是 需要翻译 为此 我想从我的模板中调用异步函数 尝试过这个 但没有成功 模板 span class myClass rowValue translateServingStyle size de
  • 将全局样式表与故事书和角度结合使用 - SassError:SassError:预期“{”

    几天来 我一直在尝试将全局样式表集成到故事书中 我已经从 sass 支持文档中集成了 webpackFinal 配置 在 storybook 目录中 我创建了一个 scss loader scss 文件 该文件应该加载全局样式表 在 pre
  • 使用 ReactJS 突出显示文本

    我试图突出显示与查询匹配的文本 但我不知道如何让标签显示为 HTML 而不是文本 var Component React createClass highlightQuery function name query var regex ne
  • 使用 Nestjs 和 typeorm 保存实体的审核

    我有一个实体Audit就像下面在 Nestjs 应用程序中使用 typeorm for mongodb 一样 Entity export class Audit Column createdBy string BeforeInsert se
  • scrollTop 在 Chrome 中不起作用,建议的解决方法也不起作用

    许多其他问题 here https stackoverflow com questions 2544979 is there a problem with scrolltop in chrome here https stackoverfl
  • 停止 ASP.NET 按钮的页面重新加载

    NET 应用程序中 我插入了一个调用 Javascript 函数的按钮 OnClientClick事件 和 VB NET 函数 OnClick event
  • 在 Angular 2+ 中进行 DOM 操作的正确方法

    我知道有一些类似的问题 但没有人回答我的问题 基本上 以角度方式操作 DOM 的正确方法是什么 比如说我有这个 html
  • AngularJS:如何缓存从 $http 调用返回的 json 数据?

    如何缓存从 http 调用返回的 json 数据 我使用以下风格的 http 调用 http url SomeWebMethodUrl method POST data query somevalue headers Content Typ
  • 创建一个通用函数以将其用于其他数据

    我正在制作一个项目列表 并希望随着数量变化计算其值 但如何使该函数通用以便我可以将它用于所有行 你能建议一些最好和简单的方法 但请记住我想这样做仅限 JavaScript table thead tr th Name th th Quant
  • Javascript 搜索并替换包含方括号的字符序列

    我正在尝试在字符串 Nationality EN ESP 中搜索 EN 我想从字符串中删除它 所以我使用替换方法 代码示例如下 var str Nationality EN ESP var find EN var regex new Reg
  • 在 JQueryUI 小部件的 QUnit 测试中测试可见性

    这对于其他人来说可能是显而易见的 但我没有通过搜索找到它 所以在这里发布问题和一个可能的答案 背景 使用自定义 JQuery UI 小部件小部件工厂 http jqueryui com widget 在小部件中 某些元素根据其他数据 选项隐
  • 从 Web 浏览器控件读取 Javascript 变量

    我正在尝试读取从表单上的 WebBrowser 控件加载和调用的 Javascript 变量的值 Example index html 引用名为 test js 的 javascript 在 test js 上 创建并填充了几个变量 然后i
  • 样式表何时添加到 document.styleSheets

    我正在尝试使用 javascript 动态添加 css 样式表规则 例如示例 2here https developer mozilla org en DOM CSSStyleSheet insertRule 它在大多数情况下都有效 但似乎
  • Mapbox 关闭除一层之外的所有图层

    我是 Mapbox 和 javascript 的新手 我试图稍微修改一下 Mapbox GL 代码示例 发现here https www mapbox com mapbox gl js example toggle layers 允许打开
  • 时间序列折线图与轴不同步

    本实验基于这个d3官方例子 http bost ocks org mike path 我想要实现的是可视化时间序列数据的最后 x 分钟 我有这个代码的副本jsfiddle http jsfiddle net 225dC 3 单击以添加新数据
  • 对数滑块

    我有一个值范围从 0 到 100 的滑块 我想将它们映射到 100 到 10 000 000 的范围 我在网上看到过一些函数 但它们都是用 C 编写的 我需要它在 JavaScript 中 有任何想法吗 您可以使用这样的函数 functio
  • Google Maps JavaScript API v3 方向功能

    我使用 Google Maps js API v3 我可以根据路径点显示方向this http code google com intl hu apis maps documentation directions Waypoints 我想要

随机推荐