Skip to content

4.1.3 - need to wait until modal overlay is opened (in test) #397

@Techn1x

Description

@Techn1x

This is more an advisory to others in case it affects them.

I was confused why one of my tests was failing under 4.1.3 (it had no release notes to guide).

I have a test like this

test('it closes on click outside', async function (assert) {
  this.showModal = true
  this.close = sinon.stub().callsFake(() => set(this, 'showModal', false))

  await render(hbs`
    <LayoutBlocks::Modal
      data-test-my-modal
      @title="My Modal"
      @showModal={{this.showModal}}
      @close={{this.close}}
    >
      content here
    </LayoutBlocks::Modal>
  `)

  assert.dom('[data-test-my-modal]').exists()

  // simulate a click that occurs outside of the modal
  await click('.ember-modal-overlay')

  assert.calledOnce(this.close)
  assert.dom('[data-test-my-modal]').doesNotExist()
})

It took me a while to figure out, but I needed to add this line before the click
await waitFor('.ember-modal-overlay', { count: 1 })

(import waitFor from '@ember/test-helpers')

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions