# Better way to test binding value changes than \`setTimeout\`?

**URL:** <https://discourse.aurelia.io/t/better-way-to-test-binding-value-changes-than-settimeout/2933>\
**Category:** Best Practices\
**Created:** [September 17, 2019, 10:45am UTC](https://discourse.aurelia.io/t/better-way-to-test-binding-value-changes-than-settimeout/2933 "2019-09-17T10:45:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nenadvicentic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nenadvicentic/32/1191_2.png) [@nenadvicentic](https://discourse.aurelia.io/u/nenadvicentic)\
**Post date:** [September 17, 2019, 10:45am UTC](https://discourse.aurelia.io/t/better-way-to-test-binding-value-changes-than-settimeout/2933/1 "2019-09-17T10:45:56Z")

</div>

Is there a better way to test binding than using `setTimeout` in the test case? Perhaps a way to trigger re-bind of the component explicitly?

```auto
it("dto change reflects in ViewModel change", async (done) => {
    await component.create(bootstrap);

    dto.pageNumber = 2;
    setTimeout(() => {
        expect(component.viewModel.pageNumber).toBe(2);
        done();
    }, 30);
});

```

Update:

I also noticed that simply changing `dto` does not trigger `pageNumberChanged` method. What would be work around to trigger it?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [September 17, 2019, 12:33pm UTC](https://discourse.aurelia.io/t/better-way-to-test-binding-value-changes-than-settimeout/2933/2 "2019-09-17T12:33:25Z")

</div>

If it’s a DTO, i guess you should use `@observable` instead of `@bindable`

---

<div class="post-metadata">

**Author:** ![nenadvicentic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nenadvicentic/32/1191_2.png) [@nenadvicentic](https://discourse.aurelia.io/u/nenadvicentic)\
**Post date:** [September 18, 2019, 6:34am UTC](https://discourse.aurelia.io/t/better-way-to-test-binding-value-changes-than-settimeout/2933/3 "2019-09-18T06:34:21Z")

</div>

My ViewModel has `bindable` properties, as I think it should, so I can bind values from surrounding view/view-model to it (ex: `<paging page-number.bind="pageNumber"></paging>`). So `dto` belongs to surrounding view, it is not view-model of component.

But observable/bindable topic does not address the question? Is there any way not to use `setTimeout` and to trigger `pageNumberChanged(newValue, oldValue)` method?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [September 18, 2019, 10:08am UTC](https://discourse.aurelia.io/t/better-way-to-test-binding-value-changes-than-settimeout/2933/4 "2019-09-18T10:08:54Z")

</div>

`@bindable` callback is invoked asynchronously while `@observable` is not. `@observable` is best for DTO.

You can have a look at this simple comparison here [Difference between @observable and @bindable](https://discourse.aurelia.io/t/difference-between-observable-and-bindable/400)

---

<div class="post-metadata">

**Author:** ![nenadvicentic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nenadvicentic/32/1191_2.png) [@nenadvicentic](https://discourse.aurelia.io/u/nenadvicentic)\
**Post date:** [September 18, 2019, 10:55am UTC](https://discourse.aurelia.io/t/better-way-to-test-binding-value-changes-than-settimeout/2933/5 "2019-09-18T10:55:48Z")

</div>

Yes, so I use `@bindable` because of number 4:

> 1. Can be used to bind between custom elements

But, this is still a bit off the topic. My questions are:

1. Is there any deterministic way to `await` for binding-update to happen, instead of `setTimeout` and random number of milliseconds? I do believe that this would be same for `@observable` and `@bindable` properties, right?
2. Why is `pageNumberChanged` not triggered at all (synchronously or asynchronously)?

Note: As I said, `dto` is not internal to component’s VM, it’s data from wrapping custom element. In another example from Stackoverflow from Fred Kleuver, it was named `bindingContext`.