Feng erdong's Blog

Life is beautiful

Testing Directive - Basic Dom Manipulation

| Comments

Basic Dom Manipulation

1
2
3
4
5

<div>
    <h4>Basic Dom Manipulation</h4>
    <input type="text" name="search" id="search"/>
    <button type="button" clear-search>Clear</button>
</div>

We’re going to write a directive for the button, after click it, the search box wil be clear. To demonstrate DOM manipulation, we’ll not set ngModel for the search box. Let’s write out the test first.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

    describe('clearSearch', function () {
        var $scope, element;
        beforeEach(inject(function ($rootScope, $compile) {
            $scope = $rootScope;
            element = angular.element('<input type="text"/><button type="button" clear-search>Clear</button>');

            $compile(element)($scope);
        }));
        it('should clear search box when click clear button', inject(function ($rootScope, $compile) {
            var val = spyOn(jQuery.fn, 'val');
            var prev = spyOn(jQuery.fn, 'prev');

            element.filter('input').val('some value');
            element.filter('button').trigger('click');

            expect(val).toHaveBeenCalled();
            expect(val.mostRecentCall.args[0]).toBe('');
        }));
    });
});

To be honest, directive which only manipulate DOM doesn’t need scope, so we can remove scope in test, the test still can pass.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

    describe('clearSearch', function () {
        var element;
        beforeEach(inject(function ($rootScope, $compile) {
            element = angular.element('<input type="text"/><button type="button" clear-search>Clear</button>');

            $compile(element)({});
        }));
        it('should clear search box when click clear button', inject(function ($rootScope, $compile) {
            var val = spyOn(jQuery.fn, 'val');
            var prev = spyOn(jQuery.fn, 'prev');

            element.filter('input').val('some value');
            element.filter('button').trigger('click');

            expect(val).toHaveBeenCalled();
            expect(val.mostRecentCall.args[0]).toBe('');
        }));
    });
});

Comments