Unable to test bindable property changes in a view model

[suneel]

I'm submitting a bug report

• Library Version:
  1.0.0-beta.3.0.1

Please tell us about your environment:

• Operating System:
  OSX

• Node Version:
  7.9.0

• NPM Version:
  4.2.0

• JSPM OR Webpack AND Version
  webpack 2.6.1

• Browser:
  all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView

• Language:
  ESNext

Current behavior:

propertyChanged method is never called in a unit test. Here is a sample custom element view model

import {customElement, bindable} from 'aurelia-framework';

@customElement('welcome-element')
export class WelcomeElement {

  @bindable name;
  
  constructor() {

  }

  bind() {
    this.showName = `Hello ${this.name}`;
  }

  nameChanged() {
    this.showName = `Hello ${this.name}`;
  }
}

Here is my sample test case:

import {Container} from 'aurelia-dependency-injection';
import {WelcomeElement} from 'welcome-element';

describe('WelcomeComponent', () => {
  let vm;
  let container;

  beforeEach(() => {
    container = new Container();
    vm = container.get(WelcomeElement);
  });

  it('should change showName when name is changed', (done) => {
    vm.name = 'world';
    setTimeout(() => {
      expect(vm.showName).toEqual('Hello world');
      done();
    });
  });
});

After I set the name of the view model, the nameChanged method is not called and test fails.

Expected/desired behavior:

• What is the expected behavior?

nameChanged method should be called when the bindable property name is changed.

• What is the motivation / use case for changing the behavior?

[Rob Eisenberg]

You need to actually use the component testing library to test components. See docs here: http://aurelia.io/hub.html#/doc/article/aurelia/testing/latest/testing-components

[suneel]

I don't want to test the custom element's view. Is it not possible to just test a custom element's view model?
http://patrickwalters.net/unit-testing-your-es6-view-models-my-best-practices-for-aurelia/
I know the above article is old, but it seems like a reasonable way to test view models.

If that is not an option, then it would be great if we can do shallow rendering (#20).

[Rob Eisenberg]

Bindables require runtime infrastructure. That's why you have to use the testing framework. It has nothing to do with the view.

[suneel]

@EisenbergEffect thanks for the info. I will comment on the other referenced issue as that is the reason which made us try to test our custom elements in this way