# Async Mocha Component Testing

**URL:** <https://forums.bitovi.com/t/async-mocha-component-testing/597>\
**Category:** CanJS\
**Created:** [April 7, 2017, 6:01am UTC](https://forums.bitovi.com/t/async-mocha-component-testing/597 "2017-04-07T06:01:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nithanaroy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nithanaroy/32/225_2.png) [@Nithanaroy](https://forums.bitovi.com/u/Nithanaroy)\
**Post date:** [April 7, 2017, 6:01am UTC](https://forums.bitovi.com/t/async-mocha-component-testing/597/1 "2017-04-07T06:01:47Z")

</div>

I am using mocha for testing a CanJS 3 app.

To test the home page, I load the page in phantomjs and run home page’s corresponding tests.

- How I can access the current ViewModel state and its values to make some assertions in tests?
- I want some tests to start after standard events like `inserted` or custom component’s view model events fire. How to write this code in CanJS?

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [April 7, 2017, 2:30pm UTC](https://forums.bitovi.com/t/async-mocha-component-testing/597/2 "2017-04-07T14:30:18Z")

</div>

Usually you would test a view model by importing it into your tests like so:

```auto
import ViewModel from './my-component';
import chai from 'chai';

const assert = chai.assert;

describe('<my-component> ViewModel', function(){
  it('fetches stuff', function(done){
    var vm = new ViewModel();
    vm.todosPromise.then(function(){
      assert.ok(true, 'yay it worked');
      done();
    });
  });
});

```

---

<div class="post-metadata">

**Author:** ![Nithanaroy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nithanaroy/32/225_2.png) [@Nithanaroy](https://forums.bitovi.com/u/Nithanaroy)\
**Post date:** [April 7, 2017, 4:57pm UTC](https://forums.bitovi.com/t/async-mocha-component-testing/597/3 "2017-04-07T16:57:20Z")

</div>

Thanks Matthew. That is how we were testing components till now.

But lately we also have use cases which require checking UI state. The simplest example I could share is,

### Flow to test

- Show alert on page load with content, “Loading”
- Fetch something from server
- Based on promise result show another alert or hide the alert

I agree the code can refactored and multiple view models can be imported and tested. But by the way code is origanized, it is much easier to test by navigating to that page, wait for the DOM to load and check for the required HTML using jQuery or something.

How can we achieve this?

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [April 7, 2017, 6:39pm UTC](https://forums.bitovi.com/t/async-mocha-component-testing/597/4 "2017-04-07T18:39:14Z")

</div>

Have you tried FuncUnit? It’s exactly for the type of testing you describe: [http://funcunit.com/](http://funcunit.com/)