Testing Components

When developing an app it's important to cover it with automated tests. The components of ngBackbone are friendly for unit-testings. Examine the tests covering demo app

For testing purposes we can initialize a component out of it context:

let view = new HeroView({
   el: null,
   tagName: "ng-hero"
 });

By passing el: null we tell the Backbone to not bind the component despite configuration given with @Component. Instead it creates a new element ng-hero that we can refer as view.el

First we check if the template string bound to the component has no syntax errors:

expect( this.view.template.report().errors.length ).toBe( 0 );

Then we can cast different states to controls and groups and verify if the template responds as intended:

// No error message
 expect( this.view.el.textContent ).not.toMatch( "Power is required" );
 // Casting state for hero.power dirty and invalid
 this.view.models
  .get( "hero.power" )
  .set({ "dirty": true, "valid": false });
// Check error message appears  
expect( this.view.el.textContent ).toMatch( "Power is required" );

We can also test how the component responds to user input.

let name = this.view.models.get( "hero.name" ),
    group = this.view.models.get( "hero.group" );

 view.testInput( "foo.bar", ""  )
    .then(() => {
      expect( name.get( "valueMissing" ) ).toBe( false );
      expect( name.get( "valid" ) ).toBe( true );
      expect( group.get( "valid" ) ).toBe( true );
    }

Here we change value of an input by using testInput method. It makes FormView to run validation the same way as if the change was received from real input event. Type validation is asynchronous thus the method returns a promise where we can assert states of the control and the group.