how to do backbone.js UI testing

Question

So I've created an require.js and backbone.js (actually marionette.js) application that basically is some sort of mobile app builder.

Now I want to create tests for it, basically testing this scenario:

• Navigate to an existing project, e.g site.com/build/1234
  • Drag a component, check if it is added correctly.
  • Change properties of a component and see if they are updated correctly. I.e: I've a properties panel which lists the properties of the selected component, than for example I've a property which is a selectmenu and changes the size (small, medium, large). I
    should be able to test this.

Now I've been searching on google, however since there are so many testing frameworks, i'm not sure which one to pick and which one provides the functionalities I need.

Potentially PhantomJS seems to be something I could use, however please advice me with some specific information.

Thanks.

Answer 1

if you want to actually simulate clicks, look into selenium (http://docs.seleniumhq.org/projects/webdriver/)

If you just want to test that your Backbone components(views, controllers, etc) and templates are working correctly, you can use a js test runner such as Karma (http://karma-runner.github.io/0.12/index.html) to run your tests. Sinon can mock out your ajax calls for you as well. It can use PhantomJs as a rendering engine, so you can actually render your views, and use view.$() style DOM inspection to verify the output of your views.