[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 ...
随机推荐
- 浅谈购物车中cookie的使用
购物车对于电商网站来说是一个非常重要的模块.最近自己的项目中也用到了,所以拿出来说说事! 购物车是用户选择商品的一个缓存的地方.其中包含了商品的基本信息,例如:商品的描述,商品的价格,商品的数量等等. ...
- linux安装python使用的MySQLdb
安装mysqldb模块需已安装mysql 使用pip安装MySQLdb pip install mysql-python mac os安装mysqldb sudo pip install mysql- ...
- phalcon做日报告提交平台总结
总结:通过开发日报告提交系统,掌握了基本的phalcon框架原理和PHP语言.也了解了一些linux常用指令,收获颇丰. 下面对项目中所遇到的问题进行总结: 1.前台数据传往后台所用的三种方法: (1 ...
- Windows命令行下pip安装python whl包
因为做网页爬虫,需要用到一个爬新闻的BeautifulSoup 的包,然后再关网上下的是whl包,第一次装,虽然花了点时间,最后还是装上去了,记录一下,方便下次. 先发一下官方文档地址.http:// ...
- 面试cookie
cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据 1.不同的浏览器存放的cookie位置不一样,也是不能通用的 2.cookie的存储 ...
- 利用servlet做转发,实现js跨域解决同源问题
做前端开发,避免不了跨域这个问题,跨域具体什么概念,不赘述,博客里太多.简单说下,我们用js发请求,不管post还是get,如果发请求的对象和当前web页面不在同一域名下,浏览器的同源策略会限制发请求 ...
- 安卓天天练练(五)CompoundButton
ToggleButton 让我想起了从前jQuery还没有取消toggle方法时是怎么偷懒的.. 注意: 如果LinearLayout,与RelativeLayout不同,必须有orientation ...
- GConf 错误:联系配置服务器失败;某些可能原因是需要为 ORBit 启用 TCP/IP 联网
http://blog.csdn.net/heirenheiren/article/details/8107294 http://blog.sina.com.cn/s/blog_8097f8aa010 ...
- Java编程杂记
13 Java Date 日期的使用方法 注意: 月份的设定要-1.0-代表1月:1代表2月,11代表12月. Calendar cal = new GregorianCalendar(2013,00 ...
- cocos2d-iphone加入芒果广告
cocos2d-iphone加入芒果广告的时候在模拟器上显示不出广告 真机上却可以.提示信息如下: AdsMoGo don't start alternate ADDRESPONSE - ADDING ...