feat(FEC-13143): upd tests

kaltura · Oct 30, 2023 · 312d192 · 312d192
1 parent 0900008
commit 312d192
Show file tree

Hide file tree

Showing 8 changed files with 263 additions and 150 deletions.
diff --git a/cypress/e2e/env.ts b/cypress/e2e/env.ts
@@ -0,0 +1,46 @@
+export const preparePage = (pluginConf: Object, playbackConf: Object) => {
+  cy.visit('index.html');
+  return cy.window().then(win => {
+    try {
+      // @ts-ignore
+      var kalturaPlayer = win.KalturaPlayer.setup({
+        targetId: 'player-placeholder',
+        provider: {
+          partnerId: -1,
+          env: {
+            cdnUrl: 'http://mock-cdn',
+            serviceUrl: 'http://mock-api'
+          }
+        },
+        plugins: {
+          'playkit-js-info': pluginConf
+        },
+        playback: {muted: true, autoplay: true, ...playbackConf}
+      });
+      return kalturaPlayer.loadMedia({entryId: '0_wifqaipd'});
+    } catch (e: any) {
+      return Promise.reject(e.message);
+    }
+  });
+};
+
+export const getPlayer = () => {
+  // @ts-ignore
+  return cy.window().then($win => $win.KalturaPlayer.getPlayers()['player-placeholder']);
+};
+
+export const loadPlayer = (pluginConf = {}, playbackConf = {}) => {
+  return preparePage(pluginConf, playbackConf).then(() => getPlayer().then(kalturaPlayer => kalturaPlayer));
+};
+
+const checkRequest = (reqBody: any, service: string, action: string) => {
+  return reqBody?.service === service && reqBody?.action === action;
+};
+
+export const mockKalturaBe = (entryFixture = 'vod-without-description.json') => {
+  cy.intercept('http://mock-api/service/multirequest', req => {
+    if (checkRequest(req.body[2], 'baseEntry', 'list')) {
+      return req.reply({fixture: entryFixture});
+    }
+  });
+};
diff --git a/cypress/e2e/info.cy.ts b/cypress/e2e/info.cy.ts
@@ -1,74 +1,149 @@
-const MANIFEST = `#EXTM3U
-#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",DEFAULT=NO,AUTOSELECT=YES,FORCED=NO,LANGUAGE="en",URI="${location.origin}/media/index_1.m3u8"
+import {mockKalturaBe, loadPlayer} from './env';
 
-#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=504265,RESOLUTION=640x360,AUDIO="audio",SUBTITLES="subs"
-${location.origin}/media/index.m3u8`
+const MANIFEST = `#EXTM3U
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="en",NAME="English",AUTOSELECT=YES,DEFAULT=YES,URI="${location.origin}/media/index_1.m3u8",SUBTITLES="subs"
+#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=509496,RESOLUTION=480x272,AUDIO="audio",SUBTITLES="subs"
+${location.origin}/media/index.m3u8`;
 
+const MANIFEST_SAFARI = `#EXTM3U
+#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",DEFAULT=NO,AUTOSELECT=YES,FORCED=NO,LANGUAGE="en",URI="${location.origin}/media/index_1.m3u8"
+#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=504265,RESOLUTION=480x272,AUDIO="audio",SUBTITLES="subs"
+${location.origin}/media/index.m3u8`;
 
+Cypress.on('uncaught:exception', (err, runnable) => {
+  return false;
+});
 
 describe('Info plugin', () => {
   beforeEach(() => {
     // manifest
-    cy.intercept('GET', '**/a.m3u8*', MANIFEST);
+    cy.intercept('GET', '**/a.m3u8*', Cypress.browser.name === 'webkit' ? MANIFEST_SAFARI : MANIFEST);
     // thumbnails
     cy.intercept('GET', '**/width/164/vid_slices/100', {fixture: '100.jpeg'});
     cy.intercept('GET', '**/height/360/width/640', {fixture: '640.jpeg'});
     // kava
-    cy.intercept('GET', '**/index.php?service=analytics*', {});
+    cy.intercept('POST', '**/index.php?service=analytics*', {});
   });
 
   it('should open and close Info plugin', () => {
-    cy.intercept('POST', 'http://mock-api/service/multirequest', {fixture: 'vod-without-description.json'});
-    cy.visit('index.html');
-    cy.get('.playkit-pre-playback-play-button').click({force: true});
-    cy.get('[data-testid="infoPluginButton"]').click({force: true});
-    cy.get('[data-testid="infoRoot"]').should('exist');
-    cy.get('.playkit-close-overlay').click({force: true});
-    cy.get('[data-testid="infoRoot"]').should('not.exist');
+    mockKalturaBe();
+    loadPlayer().then(() => {
+      cy.get('[data-testid="infoPluginButton"]').click({force: true});
+      cy.get('[data-testid="infoRoot"]').should('exist');
+      cy.get('.playkit-close-overlay').click({force: true});
+      cy.get('[data-testid="infoRoot"]').should('not.exist');
+    });
   });
 
   it('should render entry name without description and broadcast date', () => {
-    cy.intercept('POST', 'http://mock-api/service/multirequest', {fixture: 'vod-without-description.json'});
-    cy.visit('index.html');
-    cy.get('.playkit-pre-playback-play-button').click({force: true});
-    cy.get('[data-testid="infoPluginButton"]').click({force: true});
-    cy.get('[data-testid="entryDescription"]').should('not.exist');
-    cy.get('[data-testid="broadcastedDate"]').should('not.exist');
-    cy.get('[data-testid="entryName"]').should($div => {
-      expect($div.text()).to.eq('MPEG Dash with MultiAudio New Transcoding');
+    mockKalturaBe();
+    loadPlayer().then(() => {
+      cy.get('[data-testid="infoPluginButton"]').click({force: true});
+      cy.get('[data-testid="entryDescription"]').should('not.exist');
+      cy.get('[data-testid="broadcastedDate"]').should('not.exist');
+      cy.get('[data-testid="entryName"]').should($div => {
+        expect($div.text()).to.eq('MPEG Dash with MultiAudio New Transcoding');
+      });
     });
   });
 
   it('should render entry description', () => {
-    cy.intercept('POST', 'http://mock-api/service/multirequest', {fixture: 'vod-with-description.json'});
-    cy.visit('index.html');
-    cy.get('.playkit-pre-playback-play-button').click({force: true});
-    cy.get('[data-testid="infoPluginButton"]').click({force: true});
-    cy.get('[data-testid="entryDescription"]').should($div => {
-      expect($div.text()).to.eq(
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.'
-      );
+    mockKalturaBe('vod-with-description.json');
+    loadPlayer().then(() => {
+      cy.get('[data-testid="infoPluginButton"]').click({force: true});
+      cy.get('[data-testid="entryDescription"]').should($div => {
+        expect($div.text()).to.eq(
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.'
+        );
+      });
+    });
+  });
+
+  describe('should test entry broadcast and update date', () => {
+    it('should test live entry', () => {
+      mockKalturaBe('live.json');
+      loadPlayer().then(() => {
+        cy.get('[data-testid="infoPluginButton"]').click({force: true});
+        cy.get('[data-testid="updatedAt"]').should($div => {
+          expect($div.text()).to.eq('Live now');
+        });
+      });
+    });
+    it('should test entry created more than year ago', () => {
+      cy.clock(new Date(2020, 6, 24), ['Date']);
+      mockKalturaBe();
+      loadPlayer().then(() => {
+        cy.get('[data-testid="infoPluginButton"]').click({force: true});
+        cy.get('[data-testid="updatedAt"]').should($div => {
+          expect($div.text()).to.eq('More than a year ago');
+        });
+      });
+    });
+    it.skip('should test entry created few month ago', () => {
+      // TODO: enable once UI-conf got updated
+      cy.clock(new Date(2023, 10, 10), ['Date']);
+      mockKalturaBe();
+      loadPlayer().then(() => {
+        cy.get('[data-testid="infoPluginButton"]').click({force: true});
+        cy.get('[data-testid="updatedAt"]').should($div => {
+          expect($div.text()).to.eq('2 Months ago');
+        });
+      });
+    });
+    it.skip('should test entry created few days ago', () => {
+      // TODO: enable once UI-conf got updated
+      cy.clock(new Date(2023, 8, 20), ['Date']);
+      mockKalturaBe();
+      loadPlayer().then(() => {
+        cy.get('[data-testid="infoPluginButton"]').click({force: true});
+        cy.get('[data-testid="updatedAt"]').should($div => {
+          expect($div.text()).to.eq('3 days ago');
+        });
+      });
+    });
+    it.skip('should test entry created today', () => {
+      // TODO: enable once UI-conf got updated
+      cy.clock(new Date(2023, 8, 16), ['Date']);
+      mockKalturaBe();
+      loadPlayer().then(() => {
+        cy.get('[data-testid="infoPluginButton"]').click({force: true});
+        cy.get('[data-testid="updatedAt"]').should($div => {
+          expect($div.text()).to.eq('Today');
+        });
+      });
+    });
+  });
+
+  it.skip('should render entry author', () => {
+    // TODO: enable once UI-conf got updated
+    mockKalturaBe();
+    loadPlayer().then(() => {
+      cy.get('[data-testid="infoPluginButton"]').click({force: true});
+      cy.get('[data-testid="creator"]').should($div => {
+        expect($div.text()).to.eq('Test User');
+      });
     });
   });
 
-  it('should render entry broadcast date', () => {
-    cy.intercept('POST', 'http://mock-api/service/multirequest', {fixture: 'live.json'});
-    cy.visit('index.html');
-    cy.get('.playkit-pre-playback-play-button').click({force: true});
-    cy.get('[data-testid="infoPluginButton"]').click({force: true});
-    cy.get('[data-testid="broadcastedDate"]').should($div => {
-      expect($div.text()).to.eq('Live Now');
+  it.skip('should render entry views', () => {
+    // TODO: enable once UI-conf got updated
+    mockKalturaBe();
+    loadPlayer().then(() => {
+      cy.get('[data-testid="infoPluginButton"]').click({force: true});
+      cy.get('[data-testid="views"]').should($div => {
+        expect($div.text()).to.eq('101 views');
+      });
     });
   });
 
   it('should sanitize and render discription with html tags inside', () => {
     const result = `line one<br>line two<br>line three<br>Praesent sapien massa, convallis a <u>pellentesque nec, egest</u>as non nisi. Mauris blandit aliquet elit, eget <a target="_blank" href="http://google.com">tincidunt</a> nibh pulvinar a. <b>Curabitur arcu erat, accumsan </b>id imperdiet et, <span>porttitor</span> at sem.<i> Vestibulum ante ipsum prim</i>is in faucibus;<br><blockquote><ul><li>one</li><li>two</li></ul></blockquote>Last line<br><br>`;
-    cy.intercept('POST', 'http://mock-api/service/multirequest', {fixture: 'vod-with-html-tags.json'});
-    cy.visit('index.html');
-    cy.get('.playkit-pre-playback-play-button').click({force: true});
-    cy.get('[data-testid="infoPluginButton"]').click({force: true});
-    cy.get('[data-testid="entryDescription"]').should($div => {
-      expect($div.html()).to.eq(result);
+    mockKalturaBe('vod-with-html-tags.json');
+    loadPlayer().then(() => {
+      cy.get('[data-testid="infoPluginButton"]').click({force: true});
+      cy.get('[data-testid="entryDescription"]').should($div => {
+        expect($div.html()).to.eq(result);
+      });
     });
   });
 });
diff --git a/cypress/fixtures/vod-without-description.json b/cypress/fixtures/vod-without-description.json
@@ -14,6 +14,9 @@
         "msDuration": 741000,
         "id": "0_wifqaipd",
         "name": "MPEG Dash with MultiAudio New Transcoding",
+        "views": 101,
+        "creatorId": "Test User",
+        "updatedAt": "1692180001",
         "status": 2,
         "type": 1,
         "thumbnailUrl": "https://mock-thumb/p/1091/sp/109100/thumbnail/entry_id/0_wifqaipd/version/100042",

diff --git a/cypress/public/index.html b/cypress/public/index.html
@@ -36,28 +36,6 @@
 
 <body>
   <div id='player-placeholder'></div>
-  <script>
-    var config = {
-      targetId: 'player-placeholder',
-      provider: {
-        partnerId: -1,
-        env: {
-          cdnUrl: 'http://mock-cdn',
-          serviceUrl: 'http://mock-api'
-        }
-      },
-      plugins: {
-        'playkit-js-info': {},
-      }
-    };
-
-    try {
-      var kalturaPlayer = KalturaPlayer.setup(config);
-      kalturaPlayer.loadMedia({ entryId: '0_wifqaipd' });
-    } catch (e) {
-      console.error(e.message);
-    }
-  </script>
 </body>
 
 </html>
diff --git a/cypress/public/ui-conf.js b/cypress/public/ui-conf.js
diff --git a/src/components/info/index.tsx b/src/components/info/index.tsx
@@ -31,7 +31,7 @@ export class Info extends Component<MergedProps> {
   renderMediaInfo = () => {
     const {creator, updatedAt, views} = this.props;
     const mediaInfo = [creator, views, updatedAt];
-    if (!mediaInfo.every(v => v)) {
+    if (!mediaInfo.some(v => v)) {
       return null;
     }
     const dataTestIds = ['creator', 'views', 'updatedAt'];

diff --git a/src/components/info/info.scss b/src/components/info/info.scss
@@ -4,6 +4,8 @@
   position: relative;
   height: 100%;
   width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: flex-start;

diff --git a/src/info-plugin.tsx b/src/info-plugin.tsx
@@ -42,15 +42,17 @@ export class PlaykitJsInfoPlugin extends KalturaPlayer.core.BasePlugin {
 
     if (daysSince <= 1) {
       return <Text id="info.today">Today</Text>;
-    } else if (daysSince <= 30) {
+    }
+    if (daysSince <= 30) {
       return (
         <Text
           id="info.daysAgo"
           fields={{
             daysSince
           }}>{`${daysSince} days ago`}</Text>
       );
-    } else if (daysSince <= 360) {
+    }
+    if (daysSince <= 360) {
       const monthsSince = Math.floor(daysSince / 30);
       return (
         <Text
@@ -60,14 +62,13 @@ export class PlaykitJsInfoPlugin extends KalturaPlayer.core.BasePlugin {
             monthsSince
           }}>{`${monthsSince} Month${monthsSince > 1 ? 's' : ''} ago`}</Text>
       );
-    } else {
-      return <Text id="info.yearAgo">More than a year ago</Text>;
     }
+    return <Text id="info.yearAgo">More than a year ago</Text>;
   };
 
   private _getViews = (): string => {
     const views = this._player.sources.metadata.views;
-    if (Number.isNaN(views)) {
+    if (!Number.isInteger(views)) {
       return '';
     }
     if (views >= 1e3) {