@@ -25,18 +25,11 @@ test.beforeEach(t => {
2525 global . window = dom . window ;
2626} )
2727
28- const createDomNode = ( vendor , src , title , thumbnail ) => {
28+ const createDomNode = ( params = { } ) => {
2929 const node = document . createElement ( 'div' ) ;
3030 node . classList . add ( 'lazyframe' ) ;
31- node . setAttribute ( 'data-src' , src )
32- if ( vendor ) {
33- node . setAttribute ( 'data-vendor' , vendor )
34- }
35- if ( title ) {
36- node . setAttribute ( 'data-title' , title ) ;
37- }
38- if ( thumbnail ) {
39- node . setAttribute ( 'data-thumbnail' , thumbnail ) ;
31+ for ( const [ key , value ] of Object . entries ( params ) ) {
32+ node . setAttribute ( `data-${ key } ` , value )
4033 }
4134 document . body . appendChild ( node ) ;
4235 return node ;
@@ -47,34 +40,38 @@ test('should expose lazyframe()', (t) => {
4740} ) ;
4841
4942test ( 'should initialize one node with a string selector' , ( t ) => {
50- createDomNode ( 'youtube' , 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' )
43+ createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' } ) ;
5144 window . lazyframe ( '.lazyframe' ) ;
5245 t . is ( document . querySelectorAll ( '.lazyframe--loaded' ) . length , 1 ) ;
5346} )
5447
5548test ( 'should initialize mulitple nodes with a string selector' , ( t ) => {
56- createDomNode ( 'youtube' , 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0' )
57- createDomNode ( 'youtube' , 'http://www.youtube.com/embed/iwGFalTRHDC/?rel=0' )
49+ createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' } ) ;
50+ createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' } ) ;
51+
5852 window . lazyframe ( '.lazyframe' ) ;
5953 t . is ( document . querySelectorAll ( '.lazyframe--loaded' ) . length , 2 ) ;
6054} )
6155
6256test ( 'should initialize with a single node' , ( t ) => {
63- const node = createDomNode ( 'youtube' , 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0' )
57+ const node = createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' } ) ;
58+
6459 window . lazyframe ( node ) ;
6560 t . is ( document . querySelectorAll ( '.lazyframe--loaded' ) . length , 1 ) ;
6661} )
6762
6863test ( 'should initialize with a nodelist' , ( t ) => {
69- createDomNode ( 'youtube' , 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0' )
70- createDomNode ( 'youtube' , 'http://www.youtube.com/embed/iwGFalTRHDC/?rel=0' )
64+ createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0' } ) ;
65+ createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDC/?rel=0' } ) ;
66+
7167 const nodes = document . querySelectorAll ( '.lazyframe' )
7268 window . lazyframe ( nodes ) ;
7369 t . is ( document . querySelectorAll ( '.lazyframe--loaded' ) . length , 2 ) ;
7470} )
7571
7672test ( 'should append an iframe on click' , ( t ) => {
77- const node = createDomNode ( 'youtube' , 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0' )
73+ const node = createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' } ) ;
74+
7875 window . lazyframe ( '.lazyframe' ) ;
7976 node . click ( ) ;
8077
@@ -83,8 +80,9 @@ test('should append an iframe on click', (t) => {
8380
8481test ( 'should call onAppend callback function' , ( t ) => {
8582 let i = 0 ;
86- const node1 = createDomNode ( 'youtube' , 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0' )
87- const node2 = createDomNode ( 'youtube' , 'http://www.youtube.com/embed/iwGFalTRHDB/?rel=0' )
83+ const node1 = createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' } ) ;
84+ const node2 = createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDA/?rel=0' } ) ;
85+
8886 window . lazyframe ( '.lazyframe' , {
8987 onAppend ( ) {
9088 i ++ ;
@@ -98,10 +96,24 @@ test('should call onAppend callback function', (t) => {
9896
9997test ( 'should use data-title' , ( t ) => {
10098 const title = 'custom title'
101- const node = createDomNode ( 'youtube' , 'http://www.youtube.com/embed/iwGFalTRHDB /?rel=0' , title )
99+ const node = createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDA /?rel=0' , title } ) ;
102100
103101 window . lazyframe ( '.lazyframe' ) ;
104102
105103 node . click ( )
106104 t . is ( document . querySelector ( '.lazyframe__title' ) . textContent , title )
105+ } )
106+
107+ test ( 'should append optional query params from data-src' , ( t ) => {
108+ const query = 'rel=0&p=1'
109+ const node = createDomNode ( { vendor : 'youtube' , src : 'http://www.youtube.com/embed/iwGFalTRHDA/?' + query } ) ;
110+
111+ window . lazyframe ( '.lazyframe' ) ;
112+
113+ node . click ( )
114+ const iframe = node . querySelector ( 'iframe' ) ;
115+ const src = iframe . getAttribute ( 'src' ) ;
116+ const [ , iframQuery ] = src . split ( '?autoplay=1&' )
117+
118+ t . is ( iframQuery , query ) ;
107119} )
0 commit comments