> For the complete documentation index, see [llms.txt](https://dsheiko.gitbook.io/ng-backbone/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dsheiko.gitbook.io/ng-backbone/testing_components.md).

# 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](https://github.com/dsheiko/ng-backbone/tree/master/demo/tests)

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

```javascript
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:

```javascript
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:

```javascript
// 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.

```javascript
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.