[AngularJS + Unit Testing] Testing Directive's controller with bindToController, controllerAs and isolate scope
<div>
<h2>{{vm.userInfo.number}} - {{vm.userInfo.name}}</h2>
</div>
'use strict';
class CardTitleInformCtrl {
constructor() {
}
}
function CardTitleInformDirective() {
return {
restrict: 'EA',
scope: {},
bindToController: {
userInfo: '='
},
replace: true,
template: require('./card-title-inform.html'),
controller: CardTitleInformCtrl,
controllerAs: 'vm'
};
}
export default (ngModule) => {
ngModule.directive('comCardTitleInform', CardTitleInformDirective);
};
Test:
export default (ngModule) => {
describe('card title inform test', () => {
var $scope, $compile, html, directiveName, directiveElm, controller;
html = '<com-card-title-inform userInfo="userInfo"></com-card-title-inform>',
directiveName = 'comCardTitleInform';
beforeEach(window.module(ngModule.name));
beforeEach(inject(function(_$compile_, _$rootScope_){
$scope = _$rootScope_.$new();
$compile = _$compile_;
directiveElm = $compile(angular.element(html))($scope);
controller = directiveElm.controller(directiveName);
$scope.$digest();
}));
it('should has an h2 element with text 888-888-888 - Wan', function () {
// Assign the data to the controller -- Because we use bindToController
controller.userInfo = {
name: "Wan",
number: "888-888-888"
};
// ControllerAs as 'vm', assign controller to the $scope.vm
$scope.vm = controller;
// Make it work
$scope.$digest();
expect(directiveElm.find('h2').text()).toEqual(controller.userInfo.number + ' - ' +controller.userInfo.name);
});
});
};
[AngularJS + Unit Testing] Testing Directive's controller with bindToController, controllerAs and isolate scope的更多相关文章
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- [AngularJS Unit tesint] Testing keyboard event
HTML: <div ng-focus="vm.onFocus(month)", aria-focus="{{vm.focus == month}}", ...
- [Unit Testing] AngularJS Unit Testing - Karma
Install Karam: npm install -g karma npm install -g karma-cli Init Karam: karma init First test: 1. A ...
- [AngularJS + Unit Testing] Testing a component with requiring ngModel
The component test: describe('The component test', () => { let component, $componentController, $ ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- 我也谈 AngularJS 怎么使用Directive, Service, Controller
原文地址:http://sunqianxiang.github.io/angularjs-zen-yao-shi-yong-directiveservicecontroller.html 其转自大漠穷 ...
- AngularJS:何时应该使用Directive、Controller、Service?
AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...
- AngularJS自定义Directive与controller的交互
有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...
- angularjs可交互的directive
angularjs可交互的directive http://jsfiddle.net/revolunet/s4gm6/ directive开发上手练手,以注释的方式说明 html <body n ...
随机推荐
- 【python之旅】python的模块
一.定义模块: 模块:用来从逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能),本质就是以.py结尾的python文件(文件名:test.py ,对应的模块名就是test) 包:用来从逻 ...
- python 元组问题解决
a = (1,2,{'k1':'b2'}) a[2]['k1'] = 5 print(a) (1, 2, {'k1': 5}) 为什么元素'b2' = 5 应该是元素'k1' = 5 求解 a[2][ ...
- base64的一个应用情景
AddActivity.xml rushrank.xml 不过AddActivity.xml不也是通过二进制流就传过去了吗? 事实上是可以的,只要不将这些二进制的数据写下来,传播是可以的,只 ...
- JUnit扩展:引入新注解Annotation
发现问题 JUnit提供了Test Suite来帮助我们组织case,还提供了Category来帮助我们来给建立大的Test Set,比如BAT,MAT, Full Testing. 那么什么情况下, ...
- Hibernate中的多对多关系详解(3)
前面两节我们讲到了一对一的关系,一对多,多对一的关系,相对来说,是比较简单的,但有时,我们也会遇到多对多的关系,比如说:角色与权限的关系,就是典型的多对多的关系,因此,我有必要对这种关系详解,以便大家 ...
- bzoj 1501: [NOI2005]智慧珠游戏 Dancing Link
1501: [NOI2005]智慧珠游戏 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 190 Solved: 122[Submit][Status] ...
- hustoj 1017 - Exact cover dancing link
1017 - Exact cover Time Limit: 15s Memory Limit: 128MB Special Judge Submissions: 5851 Solved: 3092 ...
- h.264并行解码算法2D-Wave实现(基于多核共享内存系统)
cache-coherent shared-memory system 我们最平常使用的很多x86.arm芯片都属于多核共享内存系统,这种系统表现为多个核心能直接对同一内存进行读写访问.尽管内存的存取 ...
- MFC窗口风格 WS_style/WS_EX_style(超详细)
窗口风格(Window style) WS_BORDER 有边框窗口 WS_CAPTION 必须和WS_BORDER风格配合,但不能与WS_DLGFRAME风格一起使用.指示窗口包含标题要部分 ...
- synchronize的心得
记录一下synchronize(this).synchronize(A.class).private B b= new B(); synchronize(b) .synchronize static ...