title: How to unit test form validation in Aurelia
body: <p>I am trying to implement some unit tests on a form to see if the validation rules are working as expected.</p>
  
  <p>from this page : <a href="https://github.com/aurelia/testing/issues/63" rel="nofollow noreferrer">https://github.com/aurelia/testing/issues/63</a></p>
  
  <p>I found this implementation :  <a href="https://github.com/aurelia/validation/blob/master/test/validate-binding-behavior.ts" rel="nofollow noreferrer">https://github.com/aurelia/validation/blob/master/test/validate-binding-behavior.ts</a></p>
  
  <p>and I tried to implement it in my project</p>
  
  <p><strong>login.spec.js</strong></p>
  
  <pre><code>import {bootstrap} from 'aurelia-bootstrapper';
  import {StageComponent} from 'aurelia-testing';
  import {PLATFORM} from 'aurelia-pal';
  import { configure, blur, change } from './shared';
  import { Login } from './login';
  
  
  describe('ValidateBindingBehavior', () =&gt; {
      it('sets validateTrigger', (done) =&gt; {
          const component = StageComponent
              .withResources(PLATFORM.moduleName('features/account/login/login'))
              .inView('&lt;login&gt;&lt;/login&gt;')
              .boundTo({});
          component.bootstrap(configure);
          let viewModel;
          const renderer = { render: jasmine.createSpy() };
          component.create(bootstrap)
              // grab some references.
              .then(() =&gt; {
              viewModel = component.viewModel;
              viewModel.controller.addRenderer(renderer);
          })
  
              .then(() =&gt; expect(viewModel.controller.errors.length).toBe(0))
              .then(() =&gt; blur(viewModel.firstName))
              .then(() =&gt; expect(viewModel.controller.errors.length).toBe(1))
              .then(() =&gt; component.dispose())
              .then(done);
      });
  });
  </code></pre>
  
  <p><strong>login.js</strong></p>
  
  <pre><code>import { inject, NewInstance } from 'aurelia-dependency-injection';
  import {  ValidationController } from 'aurelia-validation';
  import { User } from './login.model';
  
  @inject(NewInstance.of(ValidationController), User)
  export class Login {
    constructor(controller, user) {
      this.controller = controller;
      this.firstName = '';
      this.lastName = '';
      this.userName = '';
      this.showForm = true;
      this.user = user;
    }
  };
  
  </code></pre>
  
  <p><strong>login.model.js</strong></p>
  
  <pre><code>import {ValidationRules} from 'aurelia-validation';
  
  export class User {
      firstName = '';
      lastName = '';
      userName = '';
  
      constructor() {
        ValidationRules
          .ensure('firstName')
          .required()  
          .ensure('lastName')
          .required()
          .minLength(10)
          .ensure('userName')
          .required()
          .on(this);
      }
    }
  </code></pre>
  
  <p><strong>shared.js</strong></p>
  
  <pre><code>import {DOM, PLATFORM} from 'aurelia-pal';
  
  export function configure(aurelia) {
      return aurelia.use
      .standardConfiguration()
      .plugin(PLATFORM.moduleName('aurelia-validation'))
  }
  export function blur(element) {
      element.dispatchEvent(DOM.createCustomEvent('blur', {}));
      return new Promise(resolve =&gt; setTimeout(resolve));
  }
  export function change(element, value) {
      element.value = value;
      element.dispatchEvent(DOM.createCustomEvent('change', { bubbles: true }));
      return new Promise(resolve =&gt; setTimeout(resolve));
  }
  </code></pre>
  
  <p><strong>and here is a piece of html markup :</strong></p>
  
  <pre><code>    &lt;div&gt;
        &lt;input ref="firstName" type="text" value.bind="user.firstName &amp; validateOnBlur"
          validation-errors.bind="firstNameErrors"&gt;
        &lt;label style="display: block;color:red" repeat.for="errorInfo of firstNameErrors"&gt;
          ${errorInfo.error.message}
        &lt;/label&gt;
      &lt;/div&gt;
      &lt;div&gt;
  </code></pre>
  
  <p>in the spec, when I blur the element I expect to get one error, but "controller.errors" is always an empty array. and I get this for the failed message :</p>
  
  <p>Error: Expected 0 to be 1.</p>
  
  <p><strong>UPDATE 1:</strong></p>
  
  <p>I tried to validate manually, so I added this in my spec :</p>
  
  <pre><code>.then(()=&gt; 
          viewModel.controller.validate({object: viewModel.user, propertyName: 'firstName' })
  
  )
  </code></pre>
  
  <p>and it works fine, but the blur and change functions don't trigger validation.</p>
  
  <p><strong>UPDATE 2:</strong></p>
  
  <p>I changed it like "Sayan Pal" suggested. and it works now but with a tiny problem. when I  "blur" the element once it shows one error. but when I "blur" several elements ( let's say three ) it doesn't show the last error. in this case controller.errors.length would be 2.</p>
  
  <p>I can blur the last element two times to get the correct length of errors. but I think there should be a better solution.</p>
  
  <pre><code>.then(() =&gt; blur(viewModel.firstName))
  .then(() =&gt; blur(viewModel.userName))
  .then(() =&gt; blur(viewModel.lastName))
  .then(() =&gt; blur(viewModel.lastName))
  </code></pre>