# Wait for Aurelia's binding system to update in test

**URL:** <https://discourse.aurelia.io/t/wait-for-aurelias-binding-system-to-update-in-test/6282>\
**Category:** vNext\
**Created:** [October 9, 2024, 3:22pm UTC](https://discourse.aurelia.io/t/wait-for-aurelias-binding-system-to-update-in-test/6282 "2024-10-09T15:22:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [October 9, 2024, 3:22pm UTC](https://discourse.aurelia.io/t/wait-for-aurelias-binding-system-to-update-in-test/6282/1 "2024-10-09T15:22:04Z")

</div>

Hi Folks, I am using vitest and @aurelia/testing and am stuck.

I have a value bound to an input element. I would like to change this value and see if the change is propagated to the bound value.

```auto
describe('add-activity-component', () => {
  it('should render message', async () => {
    const mockData = {name: null}    

    const { appHost } = await createFixture(
      '<test-component data.bind="mockData"></test-component>',
      { mockData },
      [TestComponent],
    ).started
    
    const inputElement = appHost.querySelector('#input') as HTMLInputElement
    
    inputElement.value = 'Test'

   // Need something here that waits until the binding has been updated
    
    expect(mockData.name).toBe('Test')
  })
})

```

How do I do this?

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [October 10, 2024, 1:06pm UTC](https://discourse.aurelia.io/t/wait-for-aurelias-binding-system-to-update-in-test/6282/2 "2024-10-10T13:06:51Z")

</div>

Hi @ivan! I think you need to dispatch the change event and then wait for the DOM queue to yield. It roughly looks like below,

```ts
input.dispatchEvent(new Event('change'));
await platform.domQueue.yield();

```

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [October 10, 2024, 1:46pm UTC](https://discourse.aurelia.io/t/wait-for-aurelias-binding-system-to-update-in-test/6282/3 "2024-10-10T13:46:30Z")

</div>

Thanks for the answer @Sayan751. Unfortunately it doesn’t seem to be working though.

```auto
describe('add-activity-component', () => {
  it('should render message', async () => {

    const mock = { name: null }

    const { appHost, platform } = await createFixture(
      '<test-component data.bind="data"></test-component>',
      {
        data: mock
      },
      [TestComponent]
    ).started

    const input = appHost.querySelector('#input') as HTMLInputElement
    
    input.value = 'Test'

    input.dispatchEvent(new Event('change'))
    
    await platform.domQueue.yield()
    
    expect(mock.name).toBe('Test')
  })

```

Maybe I am just misunderstanding how this is suppose to work 😅

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [October 13, 2024, 5:05am UTC](https://discourse.aurelia.io/t/wait-for-aurelias-binding-system-to-update-in-test/6282/4 "2024-10-13T05:05:09Z")

</div>

I am assuming that you might also need `{bubbles: true}` while [creating the event](https://developer.mozilla.org/en-US/docs/Web/API/Event/Event). If that don’t help as well, please consider sharing a reproduction.