Aurelia testing components with

Question

I am trying to test a custom dialog component to be used with aurelia-dialog which gets it's property bindings through an activate() method. In order to test the component, I am setting up the tests with a <compose> element which also utilizes the activate() method like so:

beforeEach(() => {
  component = StageComponent
    .withResources('path/to/dialogComponent')
    .inView(`<compose view-model="path/to/dialogComponent" model.bind="mockModel">
             </compose>`)
    .boundTo(mockModel);
});

However, when I come to test the view-model for bound properties I get a null where the actual view model used to be.

describe('#someComponentMethod()', () => {
  it('Should exist', done => {
    // In the past, I succesfully accessed child viewModels for
    // compose through the following property, after a general package update, 
    // this seems not to work anymore
    let viewModel = component.viewModel.currentViewModel

    expect(viewModel.someComponentMethod).toBeDefined(); 
    // ==> Runtime error, since currentViewModel === null

    done();
  });
});

Is there a known or better way to test custom elements which have no bindable properties but rely on a model to be bound by activate()?

Additionally, in order to test rendering: There seems to be a similair issue that might be related: Aurelia Testing Composed Custom Element

For a component, I think you should use the `attached()` method. For handling the lifecyle in testing, see https://github.com/aurelia/testing/blob/master/doc/article/en-US/testing-components.md#manually-handling-lifecycle — Marc Scheib, Jan 17 '17 at 20:49
A model isn't bound for a custom element via the `activate` callback. That's just how VMs loaded by `compose` get a model passed to them. — Ashley Grant, Jan 17 '17 at 21:38

score 0 · Answer 1 · edited Apr 06 '20 at 17:26

You can call the create function and pass in bootstrap imported from aurelia-bootstrapper like so:

import { bootstrap } from 'aurelia-bootstrapper';

...

component.create(bootstrap);

When I call create, the viewModel is built and populated. The create function is awaitable so you can either access the viewmodel property in .then(() => component.viewModel) or you use async/await like so:

await component.create(bootstrap);

Aurelia testing components with

1 Answers1