Adding functional tests to a Backbone.js application - backbone.js

I'm sorry if this question isn't appropriate: I'm new to test-driven development, especially on JavaScript.
I have a working Backbone.js application, and I'd like to add some JavaScript tests to it. But I don't really know where to start.
Specifically, I'd like to write tests that are passed a URL, and check that the rendered page contains particular DOM elements. (So functional tests, rather than unit tests, I guess.)
What is a good way to do this? Could anyone recommend good practical resources for getting tests like this up and running?
Apologies for the newbie question.

I have faced the same problem lately and Ryan Roemer book Backbone.js Testing (http://backbone-testing.com/) is a great place to start.
His process is not purely TDD, but he gives some nice tips.
When taking it to practice, I will recommend a Yeoman generator like:
https://github.com/mrichard/generator-marionette (Marionette)
https://github.com/revathskumar/generator-backbone-mocha (Backbone and Mocha)
https://github.com/richistron/generator-cornelio (Karma and Backbone)
They will save you some time on the setup. Also, if you are using Rails, Konacha https://github.com/jfirebaugh/konacha has been pretty handy for me.
Good testing!

Selenium is on de-factor way to run functional tests in the browser. Selenium has a firefox plugin that will record actions and replay them. That would be the easiest way to start. You can look at Selenium's API docs to write code to interact with the browser.
Sause Labs (http://saucelabs.com/docs/quickstart) has selenium in the cloud which is useful so you don't need to have a browser window open on you desktop and run the tests. PhantomJS can also run a "headless" browser (it does't open a window on you computer, just runs in the background).
Once you have selenium working you might want to look into acceptance testing. The tests are written in plain english use Gherkin (or similar) syntax and it runs functions to run the test and output reports if there were errors or not.

I wrote an article how to use Selenium for Acceptance Testing http://alex-craft.com/blog/2014/acceptance-testing-for-web-app
Tools: WebDriver (Selenium or Phantom.js), wd.js, node.js, mocha.js.
There's an example with explanation how to use meaningful names instead of CSS selectors, eventual conditions, etc.

Related

Automated Accessibilty Testing Tools For Angular SPAs

I am wondering if anyone has experience with an automated accessibility testing tool for Angular Single Page Applications (SPA).
I have tried pa11y and it does not seem to be working consistently. Just wondering if there are any other tools out there which are comparable to pa11y in ease of use, but which work with Angular.
#Estus raised a good point in the comment — "does not seem to be working consistently" is not a lot to go on. Regardless, a couple options:
Take a look at protractor-accessibility-plugin for NPM which can lean on the Chrome Accessibility Developer Tools or Tenon.
Related, there is a tutorial on using Tenon as a Grunt task.
Level Access offers an implementation example of Continuum called 'Continuum for Protractor' that might be a good place to get started. It's available for free at webaccessibility.com. You can use it as a template or as a reference to integrate automated accessibility testing into your existing Protractor tests. Here's some more information if you're interested. I also help maintain Continuum Explorer, which is a free extension for Google Chrome that is framework-agnostic and more interactive if you think that might be a better match for your use case.

Can I reuse/call existing API in Selenium-Java Framework into the Protractor Framework?

Please bear with me if this is a silly question. But thought of getting an idea.
We have a very sophisticated Selenium Webdriver-Java framework. But now some parts of our application is being implemented in AngularJS. We would like to use protractor for test automation. But we have some API in the existing framework which we would like to reuse. Is there a possibility to do so or do we need to re-write all the existing API in protractor?
Thanks
Not probably the answer you are looking for. But, this can give you some hope.
Unfortunately there is no protractor java port at this moment. I use Selenium C# and my project started using some Angular recently. And, fortunately, there is a Protractor-net project done by some great people to accomplish same thing you are struggling with. I must say, if your project is big enough to leverage some time to write a java port for protractor you can follow this project easily. It's not that extensive. I am personally using it and started writing about this on my blog
Some one is trying to develop jProtractor - An angular/protractor implementation for Java Selenium API. https://github.com/caarlos0/jProtractor
This is still under development(not in a position to use yet), but this could be the right tool for people who are in similar situation as me.

Why was Protractor chosen over angular-scenario?

What is the added value of Protractor over angular-scenario ? I tried to find out why was angular-scenario on the deprecation path, I have read this post, and watched this video
, but I am still unsatisfied by the fact there are no obvious advantage to use Protractor.
In Ruby On Rails land, capybara is one of the major integration test tools, Watir is another. Both utilize the WebDriver api to interact with the browsers. This is the standard way to interact with the browser/webpage for E2E testing.
Karma/ngScenarioE2E utilizes an iframe and interacts with browsers with karma plugins. While effective, its far from standard.
This to me in the main benefit of using protractor, the low-level access to the browser. Whether or not that's enough reason for them to switch, is really up to the google team, and it seems like they've made up their mind on this.

What are the differences between Selenium Webdriver and angular e2e and when should each be used?

I need to test an angular application and I'm thinking which testing framework to use.
Can someone please list the differences between those 2 testing framework, what is good / bad in each. when should each of them should be used? can the one replace the second?
Edit 1:
I'll try to focus my question. what I'm really interested in is the technical abilities of the 2 frameworks.
for example, some of the differences I have found:
selenium webdriver has the ability to run on grid in parallel on multiple machines, on the other side, angular scenarios runs much faster than selenium.
with selenium I can use keyboard keys such as Enter, Backspace and more and also do drag and drop actions.
selenium is not dependent on the app technology, angular is for angular apps only
Those are the type of differences I'm looking for - what can be done with one and can't be done with the other
thanks
Both should be used for testing an angular application. However, in my experience, they serve different purposes.
Angular e2e tests are your best friends when integrating new features into your application, or changing already existing features. They are there to make sure your application still behaves as expected if you are making changes to your code. These tests are much faster than selenium, do not need to be as in-depth, and, in my experience, are best executed before you push a new feature to your version control server.
Selenium tests should be used for regression testing. These tests should be far more in-depth than Angular e2e tests, and should be performed before pushing code into production.
UPDATE: This question may be less relevant now. As of January 2014, Angular plans to move from their own E2E suite to the protractor library for function tests, which use Selenium Webdriver.
If you're starting a new Angular project, you may want to look into using Protractor, as it is going to replace the current method of E2E Testing in the near future.
(Source: http://docs.angularjs.org/guide/dev_guide.e2e-testing)
I am struggling with this question as well.
Here is my thinking today:
1) Use Angular e2e testing for integration/regression testing the UI with mocks of your external dependencies (like the app server).
2) Use Selenium for integration/regression testing the complete system in a test/qa environment.
It seems Angular e2e testing helps fill in the gaps that unit testing leaves in testing view and controller logic that is tied to UI events. All of the Angular tests should mock external dependencies.
Selenium seems like the best fit for testing the entire system as the user will experience it.
This is such a subjective question, and therefore I'd first tell you to do some research. There is not much difference.
It is a very new project, whereas Selenium is a lot more mature. For instance, the JSON Wire Protocol that WebDriver is built on top of, is an actual W3C spec. This shows the project is very mature and very stable.
Due to the above, Selenium has a much much wider set of documentation, and a much wider community.
With Selenium you have a variety of different languages to use to code the tests in, as well as use the IDE. Angular limits use to pure JavaScript. For a lot of manual testers, this is a skill most do not have.
Both Selenium and Angular are open source, which (believe me) helps tremendously in debugging problems and understanding design decisions in their respective API's.

How to improve Silverlight development process productivity of UI & MVVM in particular

I am currently developing for Silverlight 4.0 and after mostly creating class libraries with TDD in usual C# (before SL) I can say that my current process is way slower than I am used to. (I think this can be said about any UI code compared to library classes, but here I think its really serious issue for me.)
I am wondering what techniques can be recommended to increase SL development performance.
I am mainly concerned about hard to test code (from my POV) - MVVM & UI - what can be done to improve performance here, I am thinking maybe theres a way to use a smaller sandbox somehow and test/debug control behaviour outside of scope of whole application, its pretty clear to me that me running whole application to test whether a new dialog box works correctly isnt fastest way and I could improve performance if I had a way to test this dialog alone for example, and there are probably other ways I cannot think of that can be a solution too.
EDIT: 1)here is something that I found useful , for TDD there is now a project that allows console runner to run tests so you dont have to run silverlight tests in browser & can integrate in your build process LightHouse
2) found following page, it provides some idea about a possible approach one could use to test view:
http://fohjin.blogspot.com/2008/09/how-to-test-your-xaml-behavior-using.html
there is no magic beautiful way and this one can be utilized but having to name all controls for example is a must to get this to work which isnt very good often
Statlight for the build server.
AgUnit to allow resharper to run silverlight tests.
WebAii for automation testing.
I'm not a fan of SLUT, as to run an individual test you have to cut and paste its name, and it doesnt remember it until you let it run all the way through, which I rarely do if I'm debugging.
Have you tried to use slut?
http://archive.msdn.microsoft.com/silverlightut
she will do what you want and pretend she enjoys it

Resources