Wait for Aurelia's binding system to update in test

vNext
1

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.

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?

2

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,

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

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

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 :sweat_smile:

4

I am assuming that you might also need {bubbles: true} while creating the event. If that don’t help as well, please consider sharing a reproduction.