AngularJs-Karma (testacular) – Debug in browser

Karma – AngularJS Unit test debugging

  • In karma.conf.js file, use your favorite browser

     browsers = ['Chrome'];
    
  • In the spec file, add the statement “debugger” wherever you want to debug

     it('my awesome test', function () {
         debugger; //This is like setting a breakpoint
         ...
      });
    
  • Run karma.

  • In the newly opened Chrome Browser, open the console and refresh the page. The execution will stop at the position you added debugger. Now you can add additional breakpoints using the devtools also, if you want 😉

Karma – AngularJS e2e test debugging

  • In the karma config, enable

     //set log_level to debug
     LOG_LEVEL = debug;
    
  • In the e2e test scenarios, add “pause()” , check the more info at http://docs.angularjs.org/guide/dev_guide.e2e-testing

  • Further debugging

    https://groups.google.com/forum/#!msg/angular/eUEVKUsif8U/W4rnLAVF8P0J

    As the application runs in an iframe, if you access the angular object from the JavaScript console, it’s the scenario runner’s one, not the application’s one.

    You can refer to the angular object of the iframe window object using this verbose syntax :

     document.getElementsByTagName('iframe')[0].contentWindow.angular.element("#app")
    

    Adding these two functions in the scenarios.js file will help :

    function appWindow() {
        return document.getElementsByTagName('iframe')[0].contentWindow;
    }
    function appAngular() {
        return appWindow().angular;
    }
    

    Now appWindow() and appAngular() will return respectively the application’s window and angular object. For instance :

    appAngular().element("#content").scope()
    
This entry was posted in AngularJS and tagged , . Bookmark the permalink.

2 Responses to AngularJs-Karma (testacular) – Debug in browser

Leave a Reply

Your email address will not be published. Required fields are marked *