https://github.com/normandy72/testing-directives

Testing AngularJS Directives. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
https://github.com/normandy72/testing-directives

angular angularjs html html5 jasmine jasmine-tests javascript js testing

Last synced: about 1 month ago
JSON representation

Testing AngularJS Directives. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.

• Host: GitHub
• URL: https://github.com/normandy72/testing-directives
• Owner: Normandy72
• Created: 2023-01-27T11:36:19.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-01-27T12:17:52.000Z (almost 2 years ago)
• Last Synced: 2024-12-18T20:13:47.098Z (about 1 month ago)
• Topics: angular, angularjs, html, html5, jasmine, jasmine-tests, javascript, js, testing
• Language: JavaScript
• Homepage:
• Size: 127 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Testing AngularJS Directives

### beforeEach Setup

```

var $compile;

var $rootScope;

var expectedHtml = 'some html';

beforeEach(module('MyApp'));

beforeEach(inject(function(_$rootScope_, _$compile_){

    $rootScope = _$rootScope_;

    $compile = _$compile_;

}));

```

### beforeEach Setup For Using templateUrl

```

beforeEach(inject(function($templateCache){

    var template = null;

    var req = new XMLHttpRequest();

    req.onload = function(){

        template = this.responseText;

    };

    req.open("get", "template.thml", false);

    req.send();

    $templateCache.put("template.html", template);

}));

```

### Test Method

```

it('should property insert content', function(){

    var item = {name: "John"};

    $rootScope.item = item;

    var html = "";

    var elem = $compile(html)($rootScope);

    $rootScope.$digest();

    expect(elem.html()).toContain(expectedHtml);

});

```

***

#### _Summary_

* Use mock inject to inject `$rootScope` and `$compile` services in beforeEach.

* If directive uses templateUrl, use some method to place the template contents into `$templateCache`.

* In the test method, place whatever props are needed for the directive on the `$rootScope`.

* Use `$compile` service to compile directive string and then using the returned function to bind with data by passing in `$rootScope`.

* Call `$rootScope.digest()` to update the compiled HTML.

* Retrieve produced HTML with `.html()` method and compare.

***