[SOLVED] Ember 2.8: Test that a ember-bootstrap modal is open on page load

Ember 2.8: Test that a ember-bootstrap modal is open on page load

Since I'm not working with pure Bootstrap modals, I've been having trouble figuring out how to unit test for a modal that opens on page load. Here's the modal in question:

{{#bs-modal class="startModal" footer=false open=openModal title="Start Game" closedAction="closeModal" backdropClose=false closeButton=false}}
  //modal content
{{/bs-modal}}

I tried adding a startModal class in hopes of somehow capturing it with find on my unit test

game-test.js

test('Initial modal shows up', function(assert) {
  visit('/');
  andThen(function () {
    assert.equal(find('.startModal').length, 1);
  });
});

This test passes, but it's not really what I'm looking for. I need to assert that the modal is actually shown and not just present.

Solution

Why don't you check for a class appended on the modal or css property change:

test('Initial modal shows up', function(assert) {
  visit('/');
  andThen(function () {
    assert.equal(find('.startModal').hasClass('opened'), true);
    // or 
    // assert.equal(find('.startModal').css('display'), 'block');
  });
});