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

  1. casual reader says:

    In Chrome you can change debugger’s current context. By default it’s the but you can change it to one of the iframes available on the page too. There is a dropdown just next to ‘clear console’ on the bottom left of console window. You’ll no longer need to use custom bridge functions or other workarounds :).

    Other browsers have this feature too

Leave a Reply

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