Any AngularJs application, needed to create re-using procedures for DOM manipulation, implements dedicated directives: they are code parts capable to execute actions inside a page, once called via classes, new attributes, html tags or html comments. 

By way of example, let's look at a sample Directive, called ngDestroy, whose task is to inject an element inside the Container in which it was declared, and to destroy the Container when you click on the element. 

angular.module(spaghetti.directives", []).                                                                                                                                                                     
  directive("ngDestroy", function(){                                                                                                                                                                         
        return {                                                                                                                                                                                             
            restrict: "C",                                                                                                                                                                                   
            replace: true,                                                                                                                                                                                   
            link: function(scope, elem, attrs) {
                var span = angular.element("<span>x</span>");
                    elem.append(span);
                    span.on("click", function(){
                    elem.remove();
                });
            }
         };
  });

To call such Directive after making it available in your app, you simply need to use the proper class. 

<div class="ngDestroy"></div>

The result will be appending the SPAN on which you activated the click event. 

<div class="ngDestroy"><span>x</span></div>

Performing an automated test of such procedure via Karma 0.12.16 and Jasmine 1.*, you could get something like that:

//step1: Describe
describe("corley.directives ngDestroy", function () {                                                                                                                                                 
    var $_compile;
     var $_scope;
     var el;
     var template;
     //step2: init module
     beforeEach(function(){
         module("corley.directives");
     });

     //step3: resume dependencies and base setup
     beforeEach(inject(function($compile, $rootScope) {
         $_compile = $compile;
         $_scope = $rootScope.$new();
         el = angular.element("<div class="ngDestroy">");
         template = $_compile(el)($_scope);
      }));
     //step4: tests
     it("Append span in element", function(){
        expect(template.find("span").length).toBe(1);
     });
     it("trigger click event and destroy element", function(){
        template.find("span").triggerHandler("click");
        expect(template.find("div").length).toBe(0);
     });
});

You need to load your module, its dependencies and then simulate your test environment; for this purpose you can add to the Scope of your module a DIV element containing a class allowing the activation of your Directive.

So you can define your tests, as shown in the following:

Is a SPAN element appended?

Does the click cause the removal of the involved element?

In this simple case, these ones are the main questions to be tested, as they correspond to your 2 It().

For this purpose, you simply need to run the tests and check the answers.

.$ karma start --single-run
INFO [karma]: Karma v0.12.16 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Linux)]: Connected on socket 89Wilodgr8FJVrfs8Xqx with id 45225784
PhantomJS 1.9.7 (Linux): Executed 2 of 2 SUCCESS (0.039 secs / 0.015 secs)

Comments

comments powered by Disqus

cloudparty

Follow Us