@financial-times/cp-content-pipeline-ui 6.6.3 → 6.7.1

package/src/components/Clip/test/index.spec.ts

@@ -763,6 +763,51 @@ describe('Clip', () => {
       clip.videoEl.addEventListener('playing', listener)
       clip.videoEl.play()
     })
+
+    it('shows loading indicator when waiting event is triggered', (done) => {
+      const clip = clips[0]
+      const spy = jest.spyOn(clip, 'fadeIn')
+
+      clip.videoEl.dispatchEvent(new Event('waiting'))
+
+      setTimeout(() => {
+        expect(clip.containerEl.classList.contains('cp-clip--loading')).toBe(
+          true
+        )
+        expect(spy).toHaveBeenCalled()
+        done()
+      }, 100)
+    })
+
+    it('hides loading indicator when canplay event is triggered', (done) => {
+      const clip = clips[0]
+      const spy = jest.spyOn(clip, 'fadeOut')
+
+      clip.videoEl.dispatchEvent(new Event('canplay'))
+
+      setTimeout(() => {
+        expect(clip.containerEl.classList.contains('cp-clip--loading')).toBe(
+          false
+        )
+        expect(spy).toHaveBeenCalledWith(true)
+        done()
+      }, 100)
+    })
+
+    it('hides loading indicator when canplaythrough event is triggered', (done) => {
+      const clip = clips[0]
+      const spy = jest.spyOn(clip, 'fadeOut')
+
+      clip.videoEl.dispatchEvent(new Event('canplaythrough'))
+
+      setTimeout(() => {
+        expect(clip.containerEl.classList.contains('cp-clip--loading')).toBe(
+          false
+        )
+        expect(spy).toHaveBeenCalledWith(true)
+        done()
+      }, 100)
+    })
   })
 
   describe('Captions, credits, and descriptions', () => {