aurelia / testing

Simplifies the testing of UI components by providing an elegant, fluent interface for arranging test setups along with a number of runtime debug/test helpers.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unable to test bindable property changes in a view model

suneelv opened this issue · comments

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?

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

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).

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

@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