I am trying to figure out the best way to debug my unit tests when I break them. Typically in previous test environments I could just run the tests in the browser and breakpoint the test, or the code and see why my test was failing. I can't seem to figure out how to do that with testacular. Is there an easy way to debug unit tests?
In karma.conf.js:
browsers = ['Chrome'];
In your failing spec:
it('spec', function() {
debugger; // This is like setting a breakpoint
// ...
});
Run Karma.
Go to the newly opened Chrome Browser, open the console and refresh the page.
Now in Chrome's Developer Tools source tab you should see the execution stopped at the debugger.
Include "browsers = ['Chrome'];" in your karma.config file.
When Chrome opens, you should see "Karma - connected" at the top, with a "Debug" button to the upper-right.
Click this debug button, and a "Karma DEBUG RUNNER" tab will open. Then, simply right-click, inspect element, and debug as you normally would.
I found the following way to debug which doesn't require to make any changes in code (like adding "debugger" statement)
Set the "singleRun" as false in karma config file, such that karma will be listening on debug port and you can run the test again in browser launching the URL given below and debug:
Go to the captured browser and click the "DEBUG" button (or open
http://localhost:9876/debug.html) and use the web inspector to see
what's going on. (You may need to refresh the debug.html page for it
to kick in once the web inspector is open.)
In your console you should notified which it() statement is breaking, and why. For example:
Todos Add a new todo should add a new todo FAILED
expected todo.length to be 1 but was 0
However, you may find it useful to set
logLevel = LOG_DEBUG;
in your karma.conf.js file.
Related
When I add breakpoints to source code in the Chrome Debugger, it works as expected.
However if I then remove the breakpoint and refresh the page, the breakpoints return. Likewise, if I close and reopen developer tools, the breakpoints return.
The only way that chrome forgets the breakpoint is if I close the tab altogether and open a new tab and reload the url, but as this requires a lengthy authentication process it is not ideal.
This is a react app, and I am using React Developer Tools Chrome Plugin - the breakpoints are placed in the source files not the transpiled code.
I am transpiling using babel via webpack, if it is at all pertinant to the issue.
Does anyone know if there is a solution to this issue - I can Deactivate all My Breakpoints, but they still return on a refesh (and are reactivated).
Thanks
Many times I've faced this problem when a code will generate exception( eg. method not defined in object) it will not show up in the Firefox console. Firefox will simply skip that part of code.
After unable to figure the problem out, I'd need to use Chrome console to see the exception. Or I can wrap code in try-catch to see exception when run in Firefox console
Any solution so that Firefox only will show the exception code without wrapping the code within try-catch where it is happening?
You can visit the debug console directly by opening about:devtools-toolbox?type=extension&id=<extension id> in a new tab, then click the Console tab in the debug console. Any console log (console.log, console.info, etc) will appear there if no filter is specified. Uncaught exceptions will also appear here.
You can find your extension id in the overview of addons, or by supplying one manually in your manifest:
"browser_specific_settings": {
"gecko": {
"id": "addonname#yourdomain.org",
}
}
This is what it looks like for an addon of mine:
You could also use the web-ext tool developed by Mozilla to debug your addons, which will also show console logs, however it is less useful than about:devtools-toolbox because it cannot expand nested objects.
npm install --global web-ext
cd /path/to/your/extension
web-ext run --verbose
On running protractor conf.js, browser opens up but it do not proceed any further neither browser is maximised or anything and it gives following error on console:
AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\goog\async\nexttick.js:41
goog.global.setTimeout(function() { throw exception; }, 0);
^
Error while waiting for Protractor to sync with the page: "window.angular is undefined. This could be either because this is a
non-angular page or because your test involves client-side navigation,
which can interfere with Protractor's bootstrapping.
I tried re-installing protractor and selenium-webdriver but it does not help.
I installed selenium-webdriver#2.47.0 but it also gave same error.
This project was running earlier, I did not made any changes to project and re-running this is giving above error.
I read some of the posts to make changes to beforeEach function and all but it do not help.
Please suggest!
I'm able to run my Karma test suite from within WebStorm, using a Karma Run Configuration. After the tests run, the failed ones are shown in a tree on the left side. I would expect that I could click/double-click on a test name and be taken to the source code for the test, but that doesn't happen.
I'm pretty sure I've seen this work in a video before. How can I turn it on?
I looked at the documentation here but it wasn't very helpful: http://www.jetbrains.com/webstorm/webhelp/test-runner-tab.html
In Karma tool window click gear icon and check Auto scroll to source.
I have a working (in development) Angular app and I've just got my Grunt distribution script working how I want it to, however when run my app through Grunt and then run it from the distribution folder I just get a blank page, no errors, no logging in console, no missing files in the network tab in Chrome etc, it appears everything loads but nothing happens.
I've run into this issue before during development and thrashed around until it worked, however this is now much more complex due to the minified files in distribution etc.
I'd like to properly diagnose this blank page issue but I'm not sure where to start, it appears that Angular is simply not bootstrapping at all after processing to dist mode.
It appears there is no such thing as a very verbose diagnostic mode for Angular, I've switched to the uniminified and there is nothing reported at all.
I checked the minified html file and my ng-app tag is still there on the html element as it should be so that's not the issue.
Also if I drop to console I can type angular and get back the output for it, so it's there, just not doing anything.
Where to start?
Start with Chrome devtools open when you load the page.
Add $log.debug statements at the top of all your services and controllers.
app.js will not work without the
['paramname1', 'paramname2', function(paramname1, paramname2) {
version (all the other files minify fine with out it.)