Fixes to make jest 27 work and spec file updates

package.json

@@ -20,6 +20,7 @@
     "test": "jest"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "json",

specs/LightBox/LightBox.spec.js

@@ -49,7 +49,7 @@ describe('LightBox', () => {
     let wrapper
 
     beforeEach(() => {
-      jest.useFakeTimers()
+      jest.useFakeTimers('legacy')
       wrapper = mount(LightBox, {
         propsData: {
           media: mediaWithNineImages,

specs/LightBox/MediaArrayMultipleImages.spec.js

@@ -85,7 +85,7 @@ describe('LightBox', () => {
       let container
 
       beforeEach(() => {
-        jest.useFakeTimers()
+        jest.useFakeTimers('legacy')
         container = wrapper.findComponent({ ref: 'container' }).element
         container.removeEventListener = jest.fn()
         wrapper.destroy()
@@ -100,4 +100,4 @@ describe('LightBox', () => {
       })
     })
   })
-})
+})

specs/LightBox/MediaArrayOneImageWithoutType.spec.js

@@ -64,7 +64,7 @@ describe('LightBox', () => {
 
     describe('mouse movement', () => {
       beforeEach(() => {
-        jest.useFakeTimers()
+        jest.useFakeTimers('legacy')
       })
 
       describe('moving the mouse', () => {
@@ -162,4 +162,4 @@ describe('LightBox', () => {
       })
     })
   })
-})
+})

specs/LightBox/MediaArrayOneVideoWithAutoplay.spec.js

@@ -0,0 +1,42 @@
+import { mount } from '@vue/test-utils'
+import LightBox from '@/LightBox'
+
+import { mediaWithOneVideoWithAutoplay } from '../props'
+
+describe('LightBox', () => {
+  describe('given one video with autoplay in the media array', () => {
+    let wrapper
+
+    const pauseStub = jest
+      .spyOn(window.HTMLMediaElement.prototype, 'pause')
+      .mockImplementation(() => {})
+    const playStub = jest
+      .spyOn(window.HTMLMediaElement.prototype, 'play')
+      .mockImplementation(() => {})
+
+    beforeEach(() => {
+      wrapper = mount(LightBox, {
+        propsData: {
+          media: mediaWithOneVideoWithAutoplay
+        }
+      })
+    })
+
+    afterEach(() => {
+      wrapper.destroy()
+    })
+
+    describe('showImage', () => {
+      test('calls play on the video', () => {
+        expect(playStub).toHaveBeenCalled()
+      })
+    })
+
+    describe('closeLightBox', () => {
+      test('calls pause on the video', async () => {
+        wrapper.vm.closeLightBox()
+        expect(pauseStub).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

specs/LightBox/MediaArrayOneVideo.spec.js → specs/LightBox/MediaArrayOneVideoWithoutAutoplay.spec.js

@@ -1,16 +1,16 @@
 import { mount } from '@vue/test-utils'
 import LightBox from '@/LightBox'
 
-import { mediaWithOneVideo } from '../props'
+import { mediaWithOneVideoWithoutAutoplay } from '../props'
 
 describe('LightBox', () => {
-  describe('given one video in the media array', () => {
+  describe('given one video without autoplay in the media array', () => {
     let wrapper
 
     beforeEach(() => {
       wrapper = mount(LightBox, {
         propsData: {
-          media: mediaWithOneVideo
+          media: mediaWithOneVideoWithoutAutoplay
         }
       })
     })

specs/props.js

@@ -13,7 +13,7 @@ const mediaWithOneImageWithType = [
   }
 ]
 
-const mediaWithOneVideo = [
+const mediaWithOneVideoWithoutAutoplay = [
   {
     type: 'video',
     thumb: 'http://test/test-thumb.jpg',
@@ -25,6 +25,19 @@ const mediaWithOneVideo = [
   }
 ]
 
+const mediaWithOneVideoWithAutoplay = [
+  {
+    type: 'video',
+    thumb: 'http://test/test-thumb.jpg',
+    autoplay: true,
+    sources: [
+      {
+        src: 'http://test/test-video.mp4'
+      }
+    ]
+  }
+]
+
 const mediaWithOneYoutube = [
   {
     type: 'youtube',
@@ -72,4 +85,4 @@ const mediaWithNineImages = [
   }
 ]
 
-export { mediaWithOneImageWithoutType, mediaWithOneImageWithType, mediaWithOneVideo, mediaWithOneYoutube, mediaWithNineImages }
+export { mediaWithOneImageWithoutType, mediaWithOneImageWithType,  mediaWithOneVideoWithoutAutoplay, mediaWithOneVideoWithAutoplay, mediaWithOneYoutube, mediaWithNineImages }