use qunit css for our fixture

js/src/carousel/carousel.spec.js

@@ -691,9 +691,13 @@ describe('Carousel', () => {
 
   describe('nextWhenVisible', () => {
     it('should not call next when the page is not visible', () => {
-      fixtureEl.innerHTML = '<div class="carousel" data-interval="false"></div>'
+      fixtureEl.innerHTML = [
+        '<div style="display: none;">',
+        '  <div class="carousel" data-interval="false"></div>',
+        '</div>'
+      ].join('')
 
-      const carouselEl = fixtureEl.querySelector('div')
+      const carouselEl = fixtureEl.querySelector('.carousel')
       const carousel = new Carousel(carouselEl)
 
       spyOn(carousel, 'next')

js/src/dropdown/dropdown.spec.js

@@ -1152,9 +1152,6 @@ describe('Dropdown', () => {
         '</div>'
       ].join('')
 
-      // the element must be displayed, without that activeElement won't change
-      fixtureEl.style.display = 'block'
-
       const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
       const input = fixtureEl.querySelector('input')
@@ -1173,7 +1170,6 @@ describe('Dropdown', () => {
         textarea.dispatchEvent(keyDown)
 
         expect(document.activeElement).toEqual(textarea, 'textarea still focused')
-        fixtureEl.style.display = 'none'
         done()
       })
 
@@ -1195,9 +1191,6 @@ describe('Dropdown', () => {
       const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
 
-      // the element must be displayed, without that activeElement won't change
-      fixtureEl.style.display = 'block'
-
       dropdown.addEventListener('shown.bs.dropdown', () => {
         const keyDown = createEvent('keydown')
         keyDown.which = 40
@@ -1207,7 +1200,6 @@ describe('Dropdown', () => {
 
         expect(document.activeElement.classList.contains('disabled')).toEqual(false, '.disabled not focused')
         expect(document.activeElement.hasAttribute('disabled')).toEqual(false, ':disabled not focused')
-        fixtureEl.style.display = 'none'
         done()
       })
 
@@ -1230,9 +1222,6 @@ describe('Dropdown', () => {
       const item1 = fixtureEl.querySelector('#item1')
       const item2 = fixtureEl.querySelector('#item2')
 
-      // the element must be displayed, without that activeElement won't change
-      fixtureEl.style.display = 'block'
-
       dropdown.addEventListener('shown.bs.dropdown', () => {
         const keyDown40 = createEvent('keydown')
         keyDown40.which = 40
@@ -1249,7 +1238,6 @@ describe('Dropdown', () => {
         document.activeElement.dispatchEvent(keyDown38)
         expect(document.activeElement).toEqual(item1, 'item1 is focused')
 
-        fixtureEl.style.display = 'none'
         done()
       })
 
@@ -1322,9 +1310,6 @@ describe('Dropdown', () => {
         '</div>'
       ].join('')
 
-      // the element must be displayed, without that activeElement won't change
-      fixtureEl.style.display = 'block'
-
       const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
       const input = fixtureEl.querySelector('input')
@@ -1385,7 +1370,6 @@ describe('Dropdown', () => {
         input.dispatchEvent(keyDownEscape)
 
         expect(dropdown.classList.contains('show')).toEqual(false, 'dropdown menu is not shown')
-        fixtureEl.style.display = 'none'
         done()
       })
 

js/src/modal/modal.spec.js

@@ -790,9 +790,6 @@ describe('Modal', () => {
         '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
       ].join('')
 
-      // the element must be displayed, without that activeElement won't change
-      fixtureEl.style.display = 'block'
-
       const modalEl = fixtureEl.querySelector('.modal')
       const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
 
@@ -807,7 +804,6 @@ describe('Modal', () => {
       const hideListener = () => {
         setTimeout(() => {
           expect(trigger.focus).toHaveBeenCalled()
-          fixtureEl.style.display = 'none'
           done()
         }, 20)
       }
@@ -821,8 +817,8 @@ describe('Modal', () => {
 
     it('should not focus the trigger if the modal is not visible', done => {
       fixtureEl.innerHTML = [
-        '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
-        '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
+        '<a data-toggle="modal" href="#" data-target="#exampleModal" style="display: none;"></a>',
+        '<div id="exampleModal" class="modal" style="display: none;"><div class="modal-dialog" /></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')

js/src/scrollspy/scrollspy.spec.js

@@ -33,7 +33,6 @@ describe('ScrollSpy', () => {
   })
 
   afterEach(() => {
-    fixtureEl.style.display = 'none'
     clearFixture()
   })
 
@@ -80,7 +79,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
       const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {
         target: '#navigation'
       })
@@ -114,7 +112,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
       const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
       const rootEl = fixtureEl.querySelector('#root')
       const scrollSpy = new ScrollSpy(scrollSpyEl, {
@@ -172,7 +169,6 @@ describe('ScrollSpy', () => {
         done()
       })
 
-      fixtureEl.style.display = 'block'
       scrollSpyEl.scrollTop = 350
     })
 
@@ -193,7 +189,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
       const contentEl = fixtureEl.querySelector('#content')
       const scrollSpy = new ScrollSpy(contentEl, {
         target: '#navigation',
@@ -227,7 +222,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
       const contentEl = fixtureEl.querySelector('.content')
       const scrollSpy = new ScrollSpy(contentEl, {
         offset: 0,
@@ -268,7 +262,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
       const contentEl = fixtureEl.querySelector('.content')
       const scrollSpy = new ScrollSpy(contentEl, {
         offset: 0,
@@ -309,7 +302,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
       const contentEl = fixtureEl.querySelector('.content')
       const scrollSpy = new ScrollSpy(contentEl, {
         offset: 0,
@@ -355,8 +347,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
-
       const contentEl = fixtureEl.querySelector('#content')
       const scrollSpy = new ScrollSpy(contentEl, {
         target: '#navigation',
@@ -403,8 +393,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
-
       const negativeHeight = -10
       const startOfSectionTwo = 101
       const contentEl = fixtureEl.querySelector('#content')
@@ -456,8 +444,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
-
       const contentEl = fixtureEl.querySelector('.content')
       const scrollSpy = new ScrollSpy(contentEl, {
         offset: 0,
@@ -531,8 +517,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
-
       const contentEl = fixtureEl.querySelector('.content')
       const targetEl = fixtureEl.querySelector('#div-jsm-2')
       const scrollSpy = new ScrollSpy(contentEl, {
@@ -561,8 +545,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      fixtureEl.style.display = 'block'
-
       const contentEl = fixtureEl.querySelector('.content')
       const targetEl = fixtureEl.querySelector('#div-jsm-2')
       const scrollSpy = new ScrollSpy(contentEl, {
@@ -579,11 +561,13 @@ describe('ScrollSpy', () => {
   describe('dispose', () => {
     it('should dispose a scrollspy', () => {
       spyOn(EventHandler, 'off')
+      fixtureEl.innerHTML = '<div style="display: none;"></div>'
 
-      const scrollSpy = new ScrollSpy(fixtureEl)
+      const divEl = fixtureEl.querySelector('div')
+      const scrollSpy = new ScrollSpy(divEl)
 
       scrollSpy.dispose()
-      expect(EventHandler.off).toHaveBeenCalledWith(fixtureEl, '.bs.scrollspy')
+      expect(EventHandler.off).toHaveBeenCalledWith(divEl, '.bs.scrollspy')
     })
   })
 

js/src/util/index.spec.js

@@ -208,9 +208,13 @@ describe('Util', () => {
     })
 
     it('should return false if the parent element is not visible', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = [
+        '<div style="display: none;">',
+        '  <div class="content"></div>',
+        '</div>'
+      ].join('')
 
-      const div = fixtureEl.querySelector('div')
+      const div = fixtureEl.querySelector('.content')
 
       expect(Util.isVisible(div)).toEqual(false)
     })

js/tests/helpers/fixture.js

@@ -6,7 +6,11 @@ export const getFixture = () => {
   if (!fixtureEl) {
     fixtureEl = document.createElement('div')
     fixtureEl.setAttribute('id', fixtureId)
-    fixtureEl.style.display = 'none'
+    fixtureEl.style.position = 'absolute'
+    fixtureEl.style.top = '-10000px'
+    fixtureEl.style.left = '-10000px'
+    fixtureEl.style.width = '10000px'
+    fixtureEl.style.height = '10000px'
     document.body.appendChild(fixtureEl)
   }