Fix FastBoot rendering of opened modals

Previously an inline `display: block` (to override a default `display: none`) was set in JavaScript (CSSOM) to not cause strict CSP violations (see #746). But in FastBoot that code would not run (there is no real DOM to set styles to), so an opened modal rendered in FastBoot would show only the backdrop, the actual modals would still be hidden.

This change applies the default BS classes that apply `display: block` in a normal Ember-only way, so they get rendered in FastBoot. That is happening *additionally* to setting inline `display: block`, as I thought that maybe users might have omitted those utility classes from their CSS bundle, in which case modals wouldn't show up at all.

addon/components/bs3/bs-modal/dialog.js

@@ -1,5 +1,5 @@
 import ModalDialog from 'ember-bootstrap/components/base/bs-modal/dialog';
 
 export default ModalDialog.extend({
-  classNameBindings: ['showModal:in']
+  classNameBindings: ['showModal:in', 'inDom:show']
 });

addon/components/bs4/bs-modal/dialog.js

@@ -1,6 +1,6 @@
 import ModalDialog from 'ember-bootstrap/components/base/bs-modal/dialog';
 
 export default ModalDialog.extend({
-  classNameBindings: ['showModal:show'],
+  classNameBindings: ['showModal:show', 'inDom:d-block'],
   centered: false
 });

tests/fastboot/modal-test.js

@@ -12,6 +12,7 @@ module('FastBoot | modal', function(hooks) {
 
     assert.dom('.modal').exists();
     assert.dom('.modal').hasClass(visibilityClass());
+    assert.dom('.modal').isVisible();
     assert.dom('.modal-backdrop').hasClass(visibilityClass());
     assert.dom('.modal .modal-header .modal-title').hasText('Simple Modal');
     assert.dom('.modal .modal-body').hasText('Hi there');

tests/integration/components/bs-modal-simple-test.js

@@ -75,14 +75,14 @@ module('Integration | Component | bs-modal-simple', function(hooks) {
     await render(hbs`{{#bs-modal-simple title="Simple Dialog" fade=false}}Hello world!{{/bs-modal-simple}}`);
 
     assert.dom('.modal').hasClass(visibilityClass(), 'Modal is visible');
-    assert.equal(this.element.querySelector('.modal').style.display, 'block', 'Modal is visible');
+    assert.dom('.modal').isVisible();
   });
 
   testRequiringTransitions('open modal is immediately shown [fade]', async function(assert) {
     await render(hbs`{{#bs-modal-simple title="Simple Dialog"}}Hello world!{{/bs-modal-simple}}`);
 
     assert.dom('.modal').hasClass(visibilityClass(), 'Modal is visible');
-    assert.equal(this.element.querySelector('.modal').style.display, 'block', 'Modal is visible');
+    assert.dom('.modal').isVisible();
   });
 
   test('open property shows modal', async function(assert) {
@@ -93,7 +93,7 @@ module('Integration | Component | bs-modal-simple', function(hooks) {
     run(() => this.set('open', true));
 
     assert.dom('.modal').hasClass(visibilityClass(), 'Modal is visible');
-    assert.equal(this.element.querySelector('.modal').style.display, 'block', 'Modal is visible');
+    assert.dom('.modal').isVisible();
 
     run(() => this.set('open', false));
     assert.dom('.modal').doesNotExist('Modal is hidden');
@@ -108,7 +108,7 @@ module('Integration | Component | bs-modal-simple', function(hooks) {
 
     await settled();
     assert.dom('.modal').hasClass(visibilityClass(), 'Modal is visible');
-    assert.equal(this.element.querySelector('.modal').style.display, 'block', 'Modal is visible');
+    assert.dom('.modal').isVisible();
     this.set('open', false);
 
     await settled();