FEC-14246-add-cypress-tests + prettier/eslintrc fixes

.eslintrc.json

@@ -5,7 +5,8 @@
   "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "preact", "plugin:jsdoc/recommended"],
   "globals": {
     "KalturaPlayer": true,
-    "KalturaPlayerTypes": true
+    "KalturaPlayerTypes": true,
+    "cypress/globals": true
   },
   "rules": {
     "prettier/prettier": "error",

.github/workflows/run_canary.yaml

@@ -17,7 +17,7 @@ jobs:
     uses: kaltura/playkit-js-common/.github/workflows/canary_plugin.yaml@master
     secrets: inherit
     with:
-      schema-type: "playerV3Versions"
+      schema-type: 'playerV3Versions'
       tests-yarn-run-to-execute: 'eslint'
       enabled-openssl-legacy-provider: 'false'
-      node-version: "18.x"
+      node-version: '18.x'

.github/workflows/run_canary_full_flow.yaml

@@ -21,9 +21,9 @@ jobs:
       PLAYER_MSTEAMS_WEBHOOK: ${{ secrets.PLAYER_MSTEAMS_WEBHOOK }}
       PLAYER_GITHUB_BOT_TOKEN: ${{ secrets.PLAYER_GITHUB_BOT_TOKEN }}
     with:
-      type: "plugin"
-      stage: "canary"
-      schema-type: "playerV3Versions"
+      type: 'plugin'
+      stage: 'canary'
+      schema-type: 'playerV3Versions'
       tests-yarn-run-to-execute: 'eslint'
       enabled-openssl-legacy-provider: 'false'
-      node-version: "18.x"
+      node-version: '18.x'

.github/workflows/run_prod.yaml

@@ -18,9 +18,9 @@ jobs:
       PLAYER_MSTEAMS_WEBHOOK: ${{ secrets.PLAYER_MSTEAMS_WEBHOOK }}
       PLAYER_GITHUB_BOT_TOKEN: ${{ secrets.PLAYER_GITHUB_BOT_TOKEN }}
     with:
-      type: "plugin"
-      env: "prod"
-      schema-type: "playerV3Versions"
+      type: 'plugin'
+      env: 'prod'
+      schema-type: 'playerV3Versions'
       tests-yarn-run-to-execute: 'eslint'
       enabled-openssl-legacy-provider: 'false'
-      node-version: "18.x"
+      node-version: '18.x'

.github/workflows/run_tests.yaml

@@ -5,7 +5,7 @@ run-name: Player And Plugin Tests
 on:
   pull_request:
     branches:
-      - "*"
+      - '*'
 
 jobs:
   tests:
@@ -15,7 +15,7 @@ jobs:
     uses: kaltura/ovp-pipelines-pub/.github/workflows/player_tests.yaml@master
     with:
       yarn-run-to-execute: 'eslint'
-      node-version: "18.x"
+      node-version: '18.x'
 
   notification:
     if: always()

README.md

@@ -135,5 +135,3 @@ We use [SemVer](http://semver.org/) for versioning. For the versions available,
 ## License
 
 This project is licensed under the AGPL-3.0 License - see the [LICENSE.md](LICENSE.md) file for details
-
-

cypress/e2e/related.cy.ts

@@ -7,12 +7,7 @@ declare global {
   }
 }
 
-import {
-  clickOnNextButton,
-  clickOnListToggle,
-  clickOnCloseButton,
-  clickOnRelatedEntry
-} from './utils/actions';
+import {clickOnNextButton, clickOnListToggle, clickOnCloseButton, clickOnRelatedEntry} from './utils/actions';
 import {
   expectElementContains,
   expectElementDoesntExist,
@@ -122,36 +117,46 @@ describe('Related plugin', () => {
         }
       });
 
-      setupAndExpect({
-        playlistId: 'test_playlist',
-        entryList: mockRelatedEntries,
-        sourcesList: mockRelatedEntries,
-        useContext: true
-      }, loadPlayerAndSetMedia, () => {
-        clickOnListToggle();
-        expectElementExists(getRelatedListElement);
-        expectElementContains(getRelatedListElement, [playlistEntries[0].name]);
-        expectElementDoesntExist(() => cy.contains(mockRelatedEntries[0].name));
-      });
+      setupAndExpect(
+        {
+          playlistId: 'test_playlist',
+          entryList: mockRelatedEntries,
+          sourcesList: mockRelatedEntries,
+          useContext: true
+        },
+        loadPlayerAndSetMedia,
+        () => {
+          clickOnListToggle();
+          expectElementExists(getRelatedListElement);
+          expectElementContains(getRelatedListElement, [playlistEntries[0].name]);
+          expectElementDoesntExist(() => cy.contains(mockRelatedEntries[0].name));
+        }
+      );
     });
 
     it('should prioritize entryList over sourcesList and context', () => {
-      const sourcesList = [{
-        id: 'source_1',
-        metadata: { name: 'Source Video' },
-        progressive: [{ mimetype: 'video/mp4', url: 'test.mp4' }]
-      }];
+      const sourcesList = [
+        {
+          id: 'source_1',
+          metadata: {name: 'Source Video'},
+          progressive: [{mimetype: 'video/mp4', url: 'test.mp4'}]
+        }
+      ];
 
-      setupAndExpect({
-        entryList: mockRelatedEntries,
-        sourcesList,
-        useContext: true
-      }, loadPlayerAndSetMedia, () => {
-        clickOnListToggle();
-        expectElementExists(getRelatedListElement);
-        expectElementContains(getRelatedListElement, [mockRelatedEntries[0].name]);
-        expectElementDoesntExist(() => cy.contains('Source Video'));
-      });
+      setupAndExpect(
+        {
+          entryList: mockRelatedEntries,
+          sourcesList,
+          useContext: true
+        },
+        loadPlayerAndSetMedia,
+        () => {
+          clickOnListToggle();
+          expectElementExists(getRelatedListElement);
+          expectElementContains(getRelatedListElement, [mockRelatedEntries[0].name]);
+          expectElementDoesntExist(() => cy.contains('Source Video'));
+        }
+      );
     });
   });
 
@@ -226,18 +231,14 @@ describe('Related plugin', () => {
     });
 
     it('should auto continue to next video after countdown', () => {
-      setupAndExpect(
-        {entryList: mockRelatedEntries, autoContinue: true, autoContinueTime: 1},
-        loadPlayerAndSetMedia,
-        player => {
-          player.currentTime = player.duration;
-          cy.wait(1500).then(() => {
-            cy.window().then(win => {
-              expect((win as any).KalturaPlayer.getPlayer().sources.id).to.equal(mockRelatedEntries[0].id);
-            });
+      setupAndExpect({entryList: mockRelatedEntries, autoContinue: true, autoContinueTime: 1}, loadPlayerAndSetMedia, player => {
+        player.currentTime = player.duration;
+        cy.wait(1500).then(() => {
+          cy.window().then(win => {
+            expect((win as any).KalturaPlayer.getPlayer().sources.id).to.equal(mockRelatedEntries[0].id);
           });
-        }
-      );
+        });
+      });
     });
   });
 

cypress/e2e/utils/expects.ts

@@ -31,4 +31,4 @@ export const expectRelatedListVisible = (pluginConfig: any) => {
   setupAndExpect(pluginConfig, loadPlayerAndSetMedia, () => {
     expectElementExists(getRelatedListElement);
   });
-};
+};

cypress/e2e/utils/setup.ts

@@ -12,15 +12,15 @@ export const mockRelatedEntries = [
   {
     id: '1',
     name: 'Test Video 1',
-    "poster": "./media/thumbnail1.jpg",
-    "mediaUrl": "./media/video1.mp4",
+    poster: './media/thumbnail1.jpg',
+    mediaUrl: './media/video1.mp4',
     duration: 120
   },
   {
     id: '2',
     name: 'Test Video 2',
-    "poster": "./media/thumbnail2.jpg",
-    "mediaUrl": "./media/video2.mp4",
+    poster: './media/thumbnail2.jpg',
+    mediaUrl: './media/video2.mp4',
     duration: 90
   }
 ];
@@ -77,6 +77,5 @@ export const loadPlayerAndSetMedia = (pluginConf: any, playbackConf: Record<stri
   });
 };
 
-let _player: any = null;
+const _player: any = null;
 export const getPlayer = () => _player;
-

cypress/e2e/utils/values.ts

@@ -1,2 +1,2 @@
 export const DEFAULT_COUNTDOWN_TIME = 5;
-export const DEFAULT_ENTRIES_LIMIT = 12;
+export const DEFAULT_ENTRIES_LIMIT = 12;

cypress/public/index.html

@@ -1,12 +1,12 @@
 <html>
-<head>
-  <script src="https://cdn.jsdelivr.net/npm/@playkit-js/kaltura-player-js@latest/dist/kaltura-ovp-player.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@playkit-js/ui-managers@canary/dist/playkit-ui-managers.js"></script>
-  <script src="./playkit-related.js"></script>
-  <title>Related plugin tests</title>
-  <style></style>
-</head>
-<body>
-<div id="player-placeholder"></div>
-</body>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/@playkit-js/kaltura-player-js@latest/dist/kaltura-ovp-player.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@playkit-js/ui-managers@canary/dist/playkit-ui-managers.js"></script>
+    <script src="./playkit-related.js"></script>
+    <title>Related plugin tests</title>
+    <style></style>
+  </head>
+  <body>
+    <div id="player-placeholder"></div>
+  </body>
 </html>

cypress/tsconfig.json

@@ -1,9 +1,6 @@
 {
   "extends": "../tsconfig.json",
-  "include": [
-    "../../node_modules/cypress",
-    "**/*.ts"
-  ],
+  "include": ["../../node_modules/cypress", "**/*.ts"],
   "compilerOptions": {
     "noEmit": false,
     "sourceMap": false,