[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 ...
随机推荐
- Android APK安装过程介绍
课题路径:从Myfile中点击应用进行安装,到安装完成,过程分析 思想方法:在研究PreloadInstaller的时候我们直接从整个apk的文件结构入手,由整体到部分的分析:但现在整个PMS非常庞大 ...
- C# 数据结构 基础 论述
问题: 信息世界中,计算机是加工处理的信息的载体,在这个过程中面临着三个问题: 1.如何方便高效的组织数据 2.如何在计算机中存储数据(内存和外存) 3.如何对存储的数据进行高效的操作 目的: 我们都 ...
- URL encode 与 URL decode 的C语言实现
转载自:http://blog.csdn.net/langeldep/article/details/6264058 本文代码为从PHP代码中修改而来,只保留了2个函数. int php_url_de ...
- 异步请求HTTP
代码: @interface HttpProcessor : NSObject <NSURLConnectionDataDelegate> { NSMutableData *buffer; ...
- iOS内存管理系列之一:对象所有权与引用计数
当一个所有者(owner,其本身可以是任何一个Objective-C对象)做了以下某个动作时,它拥有对一个对象的所有权(ownership): 1. 创建一个对象.包括使用任何名称中包含“alloc” ...
- Git如何Check Out出指定文件或者文件夹
原文 http://www.handaoliang.com/a/20140506/195406.html 在进行项目开发的时候,有时候会有这样的需求那就是:我们只希望从Git仓库里取指定的文件或者文 ...
- WebSocket能干啥
------这东西到底有什么用途,仔细看了说明,还是不明所以.楼上几位能不能介绍一下实际使用的场景?? 1.可以实现 服务器端(delphi&lazarus@win)<->手机端 ...
- BZOJ1616: [Usaco2008 Mar]Cow Travelling游荡的奶牛
1616: [Usaco2008 Mar]Cow Travelling游荡的奶牛 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 762 Solved: ...
- nginx+tomcat配置https
nginx代理https后,应用redirect https变成http,很多页面报404.情况类似http://blog.sina.com.cn/s/blog_56d8ea900101hlhv.ht ...
- 最大流算法---Edmond-Karp
这个算法是基于FF方法,就是通过不断求残余网络的增广路来增广流量,直到找不到增广路为止.注意:每次找到增广路以后都要更新原网络.EK算法通过BFS寻找源S到汇T的一条最短路径,因此时间复杂度是O(VE ...