fix(FEC-13145): upd dependencies + cypress tests (#300)

.github/workflows/common_test.yml

@@ -0,0 +1,13 @@
+name: Run tests
+
+on:
+  pull_request:
+    types: 
+      - opened
+      - reopened
+      - synchronize
+
+jobs:
+   test:
+    uses: kaltura/playkit-js-common/.github/workflows/cypress.yml@master
+    secrets: inherit

cypress.config.ts

@@ -0,0 +1,10 @@
+import {defineConfig} from 'cypress';
+
+export default defineConfig({
+  fileServerFolder: 'cypress/public',
+  experimentalWebKitSupport: true,
+  defaultCommandTimeout: 30000,
+  e2e: {
+    supportFile: false
+  }
+});

cypress/.gitignore

@@ -0,0 +1,3 @@
+public/plugin.js
+videos/*.mp4
+screenshots/*

cypress/e2e/env.ts

@@ -0,0 +1,68 @@
+export 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`;
+
+export 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`;
+
+export const getPlayer = (id = 'player-placeholder') => {
+  // @ts-ignore
+  return cy.window().then($win => $win.KalturaPlayer.getPlayers()[id]);
+};
+
+export const preparePage = (puginConf = {}, playbackConf = {}) => {
+  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-hotspots': puginConf,
+          kalturaCuepoints: {}
+        },
+        playback: {muted: true, autoplay: true, ...playbackConf}
+      });
+      return kalturaPlayer.loadMedia({entryId: '0_wifqaipd'});
+    } catch (e: any) {
+      return Promise.reject(e.message);
+    }
+  });
+};
+
+const checkRequest = (reqBody: any, service: string, action: string) => {
+  return reqBody?.service === service && reqBody?.action === action;
+};
+
+export const loadPlayer = (puginConf = {}, playbackConf: Record<string, any> = {}) => {
+  return preparePage(puginConf, playbackConf).then(() =>
+    getPlayer().then(kalturaPlayer => {
+      if (playbackConf.autoplay) {
+        return kalturaPlayer.ready().then(() => kalturaPlayer);
+      }
+      return kalturaPlayer;
+    })
+  );
+};
+
+export const mockKalturaBe = (cuesFixture: string) => {
+  cy.intercept('http://mock-api/service/multirequest', req => {
+    if (checkRequest(req.body[2], 'baseEntry', 'list')) {
+      return req.reply({fixture: 'base_entry.json'});
+    }
+    if (checkRequest(req.body[2], 'cuepoint_cuepoint', 'list')) {
+      return req.reply({fixture: cuesFixture});
+    }
+  });
+  cy.intercept('GET', '**/ks/123', {fixture: 'thumb-asset.jpeg'}).as('getSlides');
+};

cypress/e2e/hotspots.cy.ts

@@ -0,0 +1,79 @@
+import {mockKalturaBe, loadPlayer, MANIFEST, MANIFEST_SAFARI} from './env';
+
+describe('Hotspots plugin', () => {
+  beforeEach(() => {
+    // 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*', {});
+  });
+
+  describe('test hotspots start-end time', () => {
+    it('should render hotspot container witout hotspots', () => {
+      mockKalturaBe('cue-points.json');
+      loadPlayer({}, {startTime: 55}).then(() => {
+        cy.get('[data-testid="hotspots_hotspotsContainer"]').should('exist');
+        cy.get('[data-testid="hotspots_hotspot"]').should('have.length', 0);
+      });
+    });
+    it('should render hotspot on 0:00', () => {
+      mockKalturaBe('cue-points.json');
+      loadPlayer().then(() => {
+        cy.get('[data-testid="hotspots_hotspotsContainer"]').should('exist');
+        cy.get('[data-testid="hotspots_hotspot"]').should('have.length', 1);
+      });
+    });
+    it('should render hotspot on 0:10', () => {
+      mockKalturaBe('cue-points.json');
+      loadPlayer({}, {startTime: 10}).then(() => {
+        cy.get('[data-testid="hotspots_hotspotsContainer"]').should('exist');
+        cy.get('[data-testid="hotspots_hotspot"]').should('have.length', 2);
+      });
+    });
+    it('should hide hotspot on 0:20', () => {
+      mockKalturaBe('cue-points.json');
+      loadPlayer({}, {startTime: 10}).then(player => {
+        cy.get('[data-testid="hotspots_hotspotsContainer"]').should('exist');
+        cy.get('[data-testid="hotspots_hotspot"]')
+          .should('have.length', 2)
+          .then(() => {
+            player.currentTime = 20;
+            cy.get('[data-testid="hotspots_hotspot"]').should('have.length', 1);
+          });
+      });
+    });
+  });
+  describe('test hotspots styles and actions', () => {
+    it('should test hotspots styles', () => {
+      mockKalturaBe('cue-points.json');
+      loadPlayer({}, {startTime: 11}).then(player => {
+        player.pause();
+        const first = cy.get('[aria-label="Hotspot on 0:00-0:50"]');
+        first.should('have.text', 'Hotspot on 0:00-0:50');
+        first.children().should('have.css', {background: 'rgba(27, 219, 85, 0.6)', color: 'rgb(0, 0, 0)'});
+        const last = cy.get('[aria-label="hotspot on 0:10-0:20"]');
+        last.should('have.text', 'hotspot on 0:10-0:20');
+        last.children().should('have.css', {background: 'rgb(255, 255, 255)', color: 'rgb(255, 0, 0)'});
+      });
+    });
+    it('should test hotspots actions', () => {
+      mockKalturaBe('cue-points.json');
+      loadPlayer({}, {startTime: 11}).then(player => {
+        player.pause();
+        cy.get('[aria-label="hotspot on 0:10-0:20"]')
+          .click({force: true})
+          .then(() => {
+            expect(player.currentTime).to.be.closeTo(30, 1);
+          });
+        cy.window().then(win => {
+          cy.spy(win, 'open').as('windowOpen');
+          cy.get('[aria-label="Hotspot on 0:00-0:50"]').click({force: true});
+          cy.get('@windowOpen').should('be.calledWith', 'https://google.com', '_blank');
+        });
+      });
+    });
+  });
+});