zoukankan      html  css  js  c++  java
  • [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);
            });
        });
    };
  • 相关阅读:
    TCP协议与UDP协议的区别
    打印阵列
    Java的动态代理机制详解(转)
    Java内存模型(转载)
    Hibernate工作原理及为什么要用?(转http://www.cnblogs.com/javaNewegg/archive/2011/08/28/2156521.html)
    SpringMVC工作原理
    FPGrowth算法原理
    十大排序之快速排序
    python logging
    把字符串转换成整数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4893556.html
Copyright © 2011-2022 走看看