Async Mocha Component Testing

CanJS
1

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?
2

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

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();
    });
  });
});
1 Like
3

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?

4

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

1 Like