aurelia / aurelia/testing

Testing a custom attributes' valueChanged() hook

Open
#70 17 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
38
Forks
27
PR merge metrics
No merged PRs in 30d

Description

**I'm submitting a bug report**

* **Library Version:**
^1.0.0-beta.3.0.1

**Please tell us about your environment:**
* **Operating System:**
Windows 10

* **Node Version:**
8.1.3

* **NPM Version:**
5.0.3

* **JSPM OR Webpack AND Version**
JSPM 0.16.53

* **Browser:**
Chrome

* **Language:**
ESNext

**Current behavior:**

When testing a custom attribute with one bound value and `valueChanged()` method, the method is not called during the spec, although the value binding is working in e.g. an input field.

* **What is the expected behavior?**

The `valueChanged()` is called during testing when changing the bound value.

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

Testing the logic of a custom attributes `valueChanged()` hook.

I am using the following code so far and binding is also working for the input, but not for the custom attribute:

```javascript
import {bootstrap} from 'aurelia-bootstrapper';
import {Aurelia} from 'aurelia-framework';
import {StageComponent} from 'aurelia-testing';
import {DOM} from 'aurelia-pal';

import {BackgroundChanger} from '../../src/background-changer';

describe('BackgroundChange', () => {
let component;
let vm = { bg: 'blue' };

beforeEach(() => {
component = StageComponent
.withResources('src/background-changer')
.inView(`


`)
.boundTo(vm);
});

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

it('changes the background on input change', done => {
component.create(bootstrap)
.then(() => {
const inputEl = DOM.getElementById('bg-input');
const divEl = DOM.getElementById('bg');

expect(inputEl.value).toEqual(vm.bg);

const newBg = 'red';

inputEl.value = newBg;
expect(inputEl.value).toEqual(newBg);
inputEl.dispatchEvent(DOM.createCustomEvent('change'));
expect(vm.bg).toEqual(newBg);
expect(divEl.style.background).toEqual(newBg); // this one fails with expected blue to be red
})
.then(done);
});
});
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.