@@ -43,6 +43,7 @@ beforeEach(() => {
4343afterEach ( ( ) => {
4444 vi . useRealTimers ( )
4545 vi . restoreAllMocks ( )
46+ vi . unstubAllGlobals ( )
4647 document . body . replaceChildren ( )
4748} )
4849
@@ -87,7 +88,7 @@ describe('FeaturedCustomer', () => {
8788 )
8889 const expVideo = expRealty . querySelector ( 'video' ) as HTMLVideoElement
8990 expect ( expVideo . getAttribute ( 'src' ) ) . toBe ( '/landing/customer-stories/exp-house-color-loop.mp4' )
90- expect ( expVideo . getAttribute ( 'preload' ) ) . toBe ( 'none ' )
91+ expect ( expVideo . getAttribute ( 'preload' ) ) . toBe ( 'auto ' )
9192 expect ( expVideo . muted ) . toBe ( true )
9293 expect ( vi . mocked ( video . play ) . mock . contexts ) . not . toContain ( expVideo )
9394 expect (
@@ -178,6 +179,55 @@ describe('FeaturedCustomer', () => {
178179 } )
179180 } )
180181
182+ it ( 'prepares neighboring videos only once the carousel is visible without starting playback' , ( ) => {
183+ const observers : Array < {
184+ target : Element
185+ intersect : ( isIntersecting : boolean ) => void
186+ } > = [ ]
187+ vi . stubGlobal (
188+ 'IntersectionObserver' ,
189+ class {
190+ constructor ( private readonly callback : IntersectionObserverCallback ) { }
191+
192+ observe ( target : Element ) {
193+ observers . push ( {
194+ target,
195+ intersect : ( isIntersecting ) =>
196+ this . callback (
197+ [ { target, isIntersecting } as IntersectionObserverEntry ] ,
198+ { } as IntersectionObserver
199+ ) ,
200+ } )
201+ }
202+
203+ disconnect ( ) { }
204+ }
205+ )
206+ const host = document . createElement ( 'div' )
207+ document . body . appendChild ( host )
208+ const root = createRoot ( host )
209+ act ( ( ) => root . render ( < FeaturedCustomer /> ) )
210+
211+ const videos = [ ...host . querySelectorAll ( 'video' ) ]
212+ expect ( videos . map ( ( video ) => video . preload ) ) . toEqual ( [ 'none' , 'none' ] )
213+ expect ( HTMLMediaElement . prototype . play ) . not . toHaveBeenCalled ( )
214+
215+ const regionObserver = observers . find ( ( { target } ) => target . tagName === 'DIV' ) !
216+ act ( ( ) => regionObserver . intersect ( true ) )
217+ expect ( videos . map ( ( video ) => video . preload ) ) . toEqual ( [ 'auto' , 'auto' ] )
218+ expect ( HTMLMediaElement . prototype . play ) . not . toHaveBeenCalled ( )
219+
220+ const playbackObserver = observers . find ( ( { target } ) => target === videos [ 0 ] ) !
221+ act ( ( ) => playbackObserver . intersect ( true ) )
222+ expect ( vi . mocked ( HTMLMediaElement . prototype . play ) . mock . contexts ) . toEqual ( [ videos [ 0 ] ] )
223+
224+ motionPreference . reduced = true
225+ act ( ( ) => root . render ( < FeaturedCustomer /> ) )
226+ expect ( videos . map ( ( video ) => video . preload ) ) . toEqual ( [ 'none' , 'none' ] )
227+
228+ act ( ( ) => root . unmount ( ) )
229+ } )
230+
181231 it ( 'keeps video paused with reduced motion and responds to preference changes' , ( ) => {
182232 motionPreference . reduced = true
183233 ; ( globalThis as { IS_REACT_ACT_ENVIRONMENT ?: boolean } ) . IS_REACT_ACT_ENVIRONMENT = true
0 commit comments