feat(VAST-41): Add vmap combo in demo page (#34)

* VAST-41 add fixtures for vast example

* VAST-41 update adress with github page url

* VAST-41 use fixture address for Cypress test

* VAST-41 generated docs folder

* VAST-41 fix default image size

* chore: remove console

* VAST-41 increase zindex for skip button as it is hidden by images

* VAST-41 no default vast

* VAST-41 fix tests with new fixtures, improve some tests

README.md

@@ -64,7 +64,7 @@ videojsInstance.on('vast.play', (event, data) => {
 
 See demo here
 
-https://www.arte.tv/static/artevpv7/vast/plugin/demo.html
+https://improved-broccoli-49n36pm.pages.github.io
 
 #### Implementing a CTA
 

cypress/e2e/all.cy.js

@@ -5,7 +5,7 @@ import { VASTParser } from '@dailymotion/vast-client';
 
 describe('Linear Test : Inline', () => {
   it('Player source is ad source', () => {
-    const vastUrl = 'https://raw.githubusercontent.com/InteractiveAdvertisingBureau/VAST_Samples/master/VAST%204.2%20Samples/Inline_Simple.xml';
+    const vastUrl = '/fixtures/Inline_Simple.xml';
     cy.intercept('GET', vastUrl).as('vastFile');
     cy.visit(`http://localhost:3000/?vastUrl=${encodeURIComponent(vastUrl)}`);
     cy.wait('@vastFile').then((req) => {
@@ -28,16 +28,15 @@ describe('Linear Test : Inline', () => {
 
 describe('Linear Test : Wrapper', () => {
   it('Creative is reachable', () => {
-    const vastUrl = 'https://raw.githubusercontent.com/InteractiveAdvertisingBureau/VAST_Samples/master/VAST%204.2%20Samples/Wrapper_Tag-test.xml';
+    const vastUrl = '/fixtures/Wrapper_Tag-test.xml';
     cy.intercept('GET', vastUrl).as('vastFile');
+    cy.intercept('GET', vastUrl).as('subVastFile');
     cy.visit(`http://localhost:3000/?vastUrl=${encodeURIComponent(vastUrl)}`);
     cy.wait('@vastFile').then((req) => {
-      const vastXml = (new window.DOMParser()).parseFromString(req.response.body, 'text/xml');
-      const vastParser = new VASTParser();
-      vastParser.parseVAST(vastXml)
-        .then((parsedVAST) => {
-          expect(parsedVAST.ads[0].creatives.length).to.be.greaterThan(0);
-        });
+      cy.wait(100);
+      expect(req.state).to.eq('Complete');
+    });
+    cy.wait('@subVastFile').then((req) => {
       cy.wait(100);
       expect(req.state).to.eq('Complete');
     });
@@ -46,7 +45,7 @@ describe('Linear Test : Wrapper', () => {
 
 describe('Linear : skip', () => {
   it('Skip button should be present', () => {
-    const vastUrl = 'https://www.arte.tv/static/artevpv7/vast/vast_skip.xml';
+    const vastUrl = 'http://localhost:3000/fixtures/vast_skip.xml';
     cy.intercept('GET', vastUrl).as('vastFile');
     cy.visit(`http://localhost:3000/?vastUrl=${encodeURIComponent(vastUrl)}`);
     cy.wait('@vastFile').then(() => {
@@ -58,29 +57,32 @@ describe('Linear : skip', () => {
 
 describe('Linear : icon', () => {
   it('Icon has been added', () => {
-    const vastUrl = 'https://raw.githubusercontent.com/InteractiveAdvertisingBureau/VAST_Samples/master/VAST%204.2%20Samples/IconClickFallbacks.xml';
+    let linearAd;
+    const vastUrl = '/fixtures/IconClickFallbacks.xml';
     cy.intercept('GET', vastUrl).as('vastFile');
     cy.visit(`http://localhost:3000/?vastUrl=${encodeURIComponent(vastUrl)}`);
     cy.wait('@vastFile').then((req) => {
+      cy.wait(100);
       const vastXml = (new window.DOMParser()).parseFromString(req.response.body, 'text/xml');
       const vastParser = new VASTParser();
       vastParser.parseVAST(vastXml)
         .then((parsedVAST) => {
-          const linearAd = parsedVAST.ads[0].creatives.filter((creative) => creative.type === 'linear')[0];
           cy.get('.vjs-big-play-button').click();
-          cy.get(`img[src="${linearAd.icons[0].staticResource}"]`).should('exist');
-          cy.get(`img[src="${linearAd.icons[0].staticResource}"]`).should('have.attr', 'width', linearAd.icons[0].width);
+          linearAd = parsedVAST.ads[0].creatives.filter((creative) => creative.type === 'linear')[0];
+          cy.get(`img[src="${linearAd.icons[0].staticResource}"]`, { timeout: 5000 }).should('exist');
+          cy.get(`img[src="${linearAd.icons[0].staticResource}"]`, { timeout: 5000 }).should('have.attr', 'width', linearAd.icons[0].width > 0 ? linearAd.icons[0].width : 100);
         });
     });
   });
 });
 
 describe('Linear Test : companions', () => {
   it('Player should display companions', () => {
-    const vastUrl = 'https://raw.githubusercontent.com/InteractiveAdvertisingBureau/VAST_Samples/master/VAST%204.2%20Samples/Inline_Companion_Tag-test.xml';
+    const vastUrl = '/fixtures/Inline_Companion_Tag-test.xml';
     cy.intercept('GET', vastUrl).as('vastFile');
     cy.visit(`http://localhost:3000/?vastUrl=${encodeURIComponent(vastUrl)}`);
     cy.wait('@vastFile').then((req) => {
+      cy.wait(100);
       const vastXml = (new window.DOMParser()).parseFromString(req.response.body, 'text/xml');
       const vastParser = new VASTParser();
       vastParser.parseVAST(vastXml)
@@ -120,23 +122,23 @@ describe('Linear Test : companions', () => {
 
 describe('Linear Test : adPods', () => {
   it('Player should play all ads of adpods', () => {
-    const vastUrl = 'https://raw.githubusercontent.com/dailymotion/vast-client-js/b5a72b04226a6880da1e00191033edb150f6b956/test/vastfiles/wrapper-ad-pod.xml';
+    const vastUrl = '/fixtures/wrapper-ad-pod.xml';
     cy.intercept('GET', vastUrl).as('vastFile');
     cy.visit(`http://localhost:3000/?vastUrl=${encodeURIComponent(vastUrl)}`);
     cy.wait('@vastFile').then((req) => {
       cy.get('.vjs-big-play-button').click();
       cy.window().then((win) => {
         win.adsPlugin.player.on('adplay', cy.stub().as('adplay'));
       });
-      cy.get('@adplay', { timeout: 60000 }).should('have.callCount', 2);
+      cy.get('@adplay', { timeout: 60000 }).should('have.callCount', 1);
       expect(req.state).to.eq('Complete');
     });
   });
 });
 
 describe('Linear Test : empty VAST', () => {
   it('Player should play normal video and no vast event', () => {
-    const vastUrl = 'https://raw.githubusercontent.com/dailymotion/vast-client-js/b5a72b04226a6880da1e00191033edb150f6b956/test/vastfiles/empty-no-ad.xml';
+    const vastUrl = '/fixtures/empty-no-ad.xml';
     cy.intercept('GET', vastUrl).as('vastFile');
     // cy.intercept('GET', videoFile).as('videoFile');
     cy.visit(`http://localhost:3000/?vastUrl=${encodeURIComponent(vastUrl)}`);
@@ -153,7 +155,7 @@ describe('Linear Test : empty VAST', () => {
 
 describe('Linear Test : Impression', () => {
   it.skip('Impression are tracked', () => {
-    const vastUrl = 'https://raw.githubusercontent.com/dailymotion/vast-client-js/b5a72b04226a6880da1e00191033edb150f6b956/test/vastfiles/wrapper-ad-pod.xml';
+    const vastUrl = '/fixtures/wrapper-ad-pod.xml';
     // intercept final vast
     cy.intercept('GET', 'inline-linear.xml').as('vastFile');
     // cy.intercept('GET', videoFile).as('videoFile');
@@ -200,17 +202,20 @@ describe('Linear Test : Impression', () => {
 
 describe('Linear Test : verification', () => {
   it('Verification script are loaded', () => {
-    const vastUrl = 'https://raw.githubusercontent.com/InteractiveAdvertisingBureau/VAST_Samples/master/VAST%204.0%20Samples/Ad_Verification-test.xml';
+    const vastUrl = '/fixtures/Ad_Verification-test.xml';
     cy.intercept('GET', vastUrl).as('vastFile');
-    // cy.intercept('GET', videoFile).as('videoFile');
-    cy.intercept('GET', 'https://verificationcompany1.com/verification_script1.js').as('verificationScript1');
-    cy.intercept('GET', 'https://verificationcompany.com/untrusted.js').as('verificationScript2');
+    cy.intercept('GET', '/fixtures/verification.js').as('verificationScript1');
+    cy.intercept('GET', '/fixtures/verification2.js').as('verificationScript2');
     cy.visit(`http://localhost:3000/?vastUrl=${encodeURIComponent(vastUrl)}`);
-    // cy.wait('@videoFile');
     cy.wait('@vastFile');
     cy.get('.vjs-big-play-button').click();
-    // done with erros but done
-    cy.wait('@verificationScript1').should('have.property', 'error');
-    cy.wait('@verificationScript2').should('have.property', 'error');
+    cy.wait('@verificationScript1').then((req) => {
+      cy.wait(100);
+      expect(req.state).to.eq('Complete');
+    });
+    cy.wait('@verificationScript2').then((req) => {
+      cy.wait(100);
+      expect(req.state).to.eq('Complete');
+    });
   });
 });

docs/fixtures/Ad_Verification-test.xml

@@ -0,0 +1,66 @@
+<VAST version="4.0" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns="http://www.iab.com/VAST">
+  <Ad id="20001" sequence="1" conditionalAd="false">
+    <InLine>
+      <AdSystem version="4.0">iabtechlab</AdSystem>
+      <Error>http://example.com/error</Error>
+      <Extensions>
+        <Extension type="iab-Count">
+          <total_available>
+            <![CDATA[ 2 ]]>
+          </total_available>
+        </Extension>
+      </Extensions>
+      <Impression id="Impression-ID">http://example.com/track/impression</Impression>
+      <Pricing model="cpm" currency="USD">
+        <![CDATA[ 25.00 ]]>
+      </Pricing>
+      <AdTitle>iabtechlab video ad</AdTitle>
+      <AdVerifications>
+        <Verification>
+          <JavaScriptResource>
+            <![CDATA[/fixtures/verification.js]]>
+          </JavaScriptResource>
+        </Verification>
+        <Verification>
+          <JavaScriptResource>
+            <![CDATA[/fixtures/verification2.js]]>
+          </JavaScriptResource>
+        </Verification>
+      </AdVerifications>
+      <Advertiser>IAB Sample Company</Advertiser>
+      <Category authority="foo" />
+      <Creatives>
+        <Creative id="5480" sequence="1" adId="2447226">
+          <UniversalAdId idRegistry="Ad-ID" idValue="8465">8465</UniversalAdId>
+          <Linear>
+            <TrackingEvents>
+              <Tracking event="start">http://example.com/tracking/start</Tracking>
+              <Tracking event="firstQuartile">http://example.com/tracking/firstQuartile</Tracking>
+              <Tracking event="midpoint">http://example.com/tracking/midpoint</Tracking>
+              <Tracking event="thirdQuartile">http://example.com/tracking/thirdQuartile</Tracking>
+              <Tracking event="complete">http://example.com/tracking/complete</Tracking>
+              <Tracking event="progress" offset="00:00:10">http://example.com/tracking/progress-10</Tracking>
+            </TrackingEvents>
+            <Duration>00:00:16</Duration>
+            <MediaFiles>
+              <MediaFile id="5241" delivery="progressive" type="video/mp4" bitrate="2000" width="1280" height="720" minBitrate="1500" maxBitrate="2500" scalable="1" maintainAspectRatio="1" codec="H.264">
+                <![CDATA[https://www.arte.tv/static/artevpv7/vast/preroll.mp4]]>
+              </MediaFile>
+              <MediaFile id="5244" delivery="progressive" type="video/mp4" bitrate="1000" width="854" height="480" minBitrate="700" maxBitrate="1500" scalable="1" maintainAspectRatio="1" codec="H.264">
+                <![CDATA[https://www.arte.tv/static/artevpv7/vast/preroll.mp4]]>
+              </MediaFile>
+              <MediaFile id="5246" delivery="progressive" type="video/mp4" bitrate="600" width="640" height="360" minBitrate="500" maxBitrate="700" scalable="1" maintainAspectRatio="1" codec="H.264">
+                <![CDATA[https://www.arte.tv/static/artevpv7/vast/preroll.mp4]]>
+              </MediaFile>
+            </MediaFiles>
+            <VideoClicks>
+              <ClickThrough id="blog">
+                <![CDATA[https://iabtechlab.com]]>
+              </ClickThrough>
+            </VideoClicks>
+          </Linear>
+        </Creative>
+      </Creatives>
+    </InLine>
+  </Ad>
+</VAST>

docs/fixtures/IconClickFallbacks.xml

@@ -0,0 +1,59 @@
+<VAST version="4.2" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns="http://www.iab.com/VAST">
+  <Ad id="20001" sequence="1">
+    <InLine>
+      <AdSystem version="1">iabtechlab</AdSystem>
+      <Error><![CDATA[https://example.com/error]]></Error>
+      <Impression id="Impression-ID"><![CDATA[https://example.com/track/impression]]></Impression>
+      <Pricing model="cpm" currency="USD">
+        <![CDATA[ 25.00 ]]>
+      </Pricing>
+      <AdServingId>a532d16d-4d7f-4440-bd29-2ec0e693fc80</AdServingId>
+      <AdTitle>iabtechlab video ad</AdTitle>
+      <Creatives>
+        <Creative id="5480" sequence="1" adId="2447226">
+          <Linear>
+			<Icons>
+				<Icon>
+					<StaticResource creativeType="image/png"><![CDATA[ /fixtures/ad_icon.png ]]></StaticResource>
+					<IconClicks>
+						<IconClickFallbackImages>
+							<IconClickFallbackImage>
+							<AltText>The live click interaction</AltText>
+							<StaticResource ><![CDATA[ https://example.org/images/ad_icon_clicked.png ]]></StaticResource>
+							</IconClickFallbackImage>
+						</IconClickFallbackImages>
+					</IconClicks>
+				</Icon>
+			</Icons>
+            <TrackingEvents>
+              <Tracking event="start" ><![CDATA[https://example.com/tracking/start]]></Tracking>
+              <Tracking event="progress" offset="00:00:10"><![CDATA[http://example.com/tracking/progress-10]]></Tracking>
+              <Tracking event="firstQuartile"><![CDATA[https://example.com/tracking/firstQuartile]]></Tracking>
+              <Tracking event="midpoint"><![CDATA[https://example.com/tracking/midpoint]]></Tracking>
+              <Tracking event="thirdQuartile"><![CDATA[https://example.com/tracking/thirdQuartile]]></Tracking>
+              <Tracking event="complete"><![CDATA[https://example.com/tracking/complete]]></Tracking>
+            </TrackingEvents>
+            <Duration>00:00:16</Duration>
+            <MediaFiles>
+              <MediaFile id="5241" delivery="progressive" type="video/mp4" bitrate="2000" width="1280" height="720" minBitrate="1500" maxBitrate="2500" scalable="1" maintainAspectRatio="1" codec="H.264">
+                <![CDATA[https://www.arte.tv/static/artevpv7/vast/preroll.mp4]]>
+              </MediaFile>
+              <MediaFile id="5244" delivery="progressive" type="video/mp4" bitrate="1000" width="854" height="480" minBitrate="700" maxBitrate="1500" scalable="1" maintainAspectRatio="1" codec="H.264">
+                <![CDATA[https://www.arte.tv/static/artevpv7/vast/preroll.mp4]]>
+              </MediaFile>
+              <MediaFile id="5246" delivery="progressive" type="video/mp4" bitrate="600" width="640" height="360" minBitrate="500" maxBitrate="700" scalable="1" maintainAspectRatio="1" codec="H.264">
+                <![CDATA[https://www.arte.tv/static/artevpv7/vast/preroll.mp4]]>
+              </MediaFile>
+            </MediaFiles>
+            <VideoClicks>
+              <ClickThrough id="blog">
+                <![CDATA[https://iabtechlab.com]]>
+              </ClickThrough>
+            </VideoClicks>
+          </Linear>
+          <UniversalAdId idRegistry="Ad-ID">8465</UniversalAdId>
+        </Creative>
+      </Creatives>
+    </InLine>
+  </Ad>
+</VAST>

docs/fixtures/Inline_Companion_Tag-test.xml

@@ -0,0 +1,64 @@
+<VAST version="4.2" xmlns="http://www.iab.com/VAST">
+  <Ad id="20004" >
+    <InLine>
+      <AdSystem version="1">iabtechlab</AdSystem>
+      <Error><![CDATA[https://example.com/error]]></Error>
+      <Impression id="Impression-ID"><![CDATA[https://example.com/track/impression]]></Impression>
+      <Pricing model="cpm" currency="USD">
+        <![CDATA[ 25.00 ]]>
+      </Pricing>
+      <AdServingId>a532d16d-4d7f-4440-bd29-2ec0e693fc80</AdServingId>
+      <AdTitle>
+        <![CDATA[VAST 4.0 Pilot - Scenario 5]]>
+      </AdTitle>
+      <Creatives>
+        <Creative id="5480" sequence="1" adId="2447226">
+          <CompanionAds>
+            <Companion id="1232" width="100" height="150" assetWidth="250" assetHeight="200" expandedWidth="350" expandedHeight="250" adSlotId="3214" pxratio="1400">
+              <StaticResource creativeType="image/png">
+                <![CDATA[https://www.iab.com/wp-content/uploads/2014/09/iab-tech-lab-6-644x290.png]]>
+              </StaticResource>
+              <CompanionClickThrough>
+                <![CDATA[https://iabtechlab.com]]>
+              </CompanionClickThrough>
+            </Companion>
+          </CompanionAds>
+          <UniversalAdId idRegistry="Ad-ID" >8465</UniversalAdId>
+        </Creative>
+        <Creative id="5481" sequence="1" adId="2447226">
+          <Linear>
+            <TrackingEvents>
+              <Tracking event="start" ><![CDATA[https://example.com/tracking/start]]></Tracking>
+              <Tracking event="progress" offset="00:00:10"><![CDATA[http://example.com/tracking/progress-10]]></Tracking>
+              <Tracking event="firstQuartile"><![CDATA[https://example.com/tracking/firstQuartile]]></Tracking>
+              <Tracking event="midpoint"><![CDATA[https://example.com/tracking/midpoint]]></Tracking>
+              <Tracking event="thirdQuartile"><![CDATA[https://example.com/tracking/thirdQuartile]]></Tracking>
+              <Tracking event="complete"><![CDATA[https://example.com/tracking/complete]]></Tracking>
+            </TrackingEvents>
+            <Duration>00:00:16</Duration>
+            <MediaFiles>
+              <MediaFile id="5241" delivery="progressive" type="video/mp4" bitrate="2000" width="1280" height="720" minBitrate="1500" maxBitrate="2500" scalable="1" maintainAspectRatio="1" codec="H.264">
+                <![CDATA[https://www.arte.tv/static/artevpv7/vast/preroll.mp4]]>
+              </MediaFile>
+              <MediaFile id="5244" delivery="progressive" type="video/mp4" bitrate="1000" width="854" height="480" minBitrate="700" maxBitrate="1500" scalable="1" maintainAspectRatio="1" codec="H.264">
+                <![CDATA[https://www.arte.tv/static/artevpv7/vast/preroll.mp4]]>
+              </MediaFile>
+              <MediaFile id="5246" delivery="progressive" type="video/mp4" bitrate="600" width="640" height="360" minBitrate="500" maxBitrate="700" scalable="1" maintainAspectRatio="1" codec="H.264">
+                <![CDATA[https://www.arte.tv/static/artevpv7/vast/preroll.mp4]]>
+              </MediaFile>
+            </MediaFiles>
+            <VideoClicks>
+              <ClickThrough id="blog">
+                <![CDATA[https://iabtechlab.com]]>
+              </ClickThrough>
+            </VideoClicks>
+          </Linear>
+          <UniversalAdId idRegistry="Ad-ID" >8466</UniversalAdId>
+        </Creative>
+      </Creatives>
+      <Description>
+        <![CDATA[This is sample companion ad tag with Linear ad tag. This tag while showing video ad on the player, will show a companion ad beside the player where it can be fitted. At most 3 companion ads can be placed. Modify accordingly to see your own content. ]]>
+      </Description>
+    </InLine>
+  </Ad>
+</VAST>