Testing a routed component

[manuel-guilbault]

At the moment, is there a way to test a routed component? I tried the following:

component = new ComponentTester()
  .inView('<router-view></router-view>')
  .boundTo({
    configureRouter: config => {
      config.map([
        { route: '', moduleId: 'my-routed-component' }
      ]);
    }
  });

This throws an error because no viewModel is set on the container (the router's _findViewModel method returns undefined).

As far as I can tell, the only way to test a routed component is with end-to-end tests right now. Is there any plan to support this kind of feature?

[EisenbergEffect]

There is now :)

[manuel-guilbault]

Awesome :)

[EisenbergEffect]

@manuel-guilbault Can you describe to us what you would like to be able to do in such a test?

[manuel-guilbault]

Here's the features I would need:

• Methods similar to the ComponentTester's, to setup the sandboxed Aurelia app:
  • bootstrap
  • withResources
• Ability to manually handle the screen activation lifecycle along with the component lifecycle
• When not manually handling the lifecycle, ability to specify the route parameters passed to the activatemethod

Here's a typical test case I would write:

import {StageRoute} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrap';

describe('the list component', () => {
  let component;

  beforeEach(() => {
    component = StageRoute.component('list')
      .withResources('custom-element-needed-by-list')
      .withRouteParams({ /* Some route parameters passed to activate */ })
      .bootstrap(aurelia => {
        aurelia.use.standardConfiguration();
        //Here I would register an HttpClient mock or something similar in the DI container
      });
  });

  afterEach(() => {
    component.dispose();
  });

  it('should load data upon activation', done => {
    component.create(bootstrap)
      .then(() => {
        let elements = document.querySelectorAll('.container .item');
        // Here I would assert that the items were properly rendered
      })
      .then(done);
  });
});

[massimocode]

What the latest on this issue? We can't seem to find a way to call activate in our tests.

Edit: Oops, I found how to do it. component.viewModel.activate()

[Alexander-Taran]

@EisenbergEffect can be closed?

[tomtomau]

I've tried to roll our own abstractions here to test routed components but ran into the same issue describe above

(the router's _findViewModel method returns undefined)