Feng erdong's Blog

Life is beautiful

Testing Directive - Call Controller Method in Default Scope

| Comments

Call controller method in default scope

1
2
3
4
5
6
7
8
9

<div ng-controller="FruitController" ng-init="init()">
    <h4>Call controller method in default scope</h4>
    <label>What's your favorite fruit(name can only contains letter)</label>
    <input type="text" ng-model="newFruit"/>
    <button type="button" add-fruit-method>validate and add</button>
    <ul>
        <li ng-repeat="fruit in fruits track by $index"></li>
    </ul>
</div>

This time, we want to validate the fruit name use typed in first, if it only contains letter, then it’s eligible to add in, otherwise nothing happen. The validation logic is defined in controller, we need to test the validation method is called inside our directive.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

describe('directives', function () {
    beforeEach(module('myApp.directives'));

    describe('addFruitMethod', function () {
        var $scope, element;
        beforeEach(inject(function ($rootScope, $compile) {
            $scope = $rootScope;
            $scope.fruits = [];
            $scope.newFruit = 'apple';
            $scope.isValid = angular.noop;

            element = angular.element('<input type="text" name="fruit" id="fruitDefault" ng-model="newFruit"/><button type="button" add-fruit-method>validate and add</button>');
            $compile(element)($scope);
        }));

        it('should add valid fruit to fruit list when click button', function () {
            var isValid = spyOn($scope, 'isValid').andReturn(true);

            element.filter('button').trigger('click');

            expect(isValid).toHaveBeenCalled();
            expect($scope.fruits[0]).toBe('apple');

        });

        it('should reject invalid fruit when click button', function () {
            var isValid = spyOn($scope, 'isValid').andReturn(false);

            element.filter('button').trigger('click');

            expect(isValid).toHaveBeenCalled();
            expect($scope.fruits.length).toBe(0);
        });
    });
});

It’s very similar with testing manipulate data on default scope, the only thing different is we spy on the validation method to verify it has been called, also we let the spy object return the corresponding result to execute each branch.

Comments