Merge branch 'ME-19132-private-asset-poster' of https://github.com/cloudinary/cloudinary-video-player into ME-19132-private-asset-poster

Author: tsi

src/assets/styles/main.scss

@@ -38,7 +38,7 @@ $icon-font-path: '../icon-font' !default;
     &:focus,
     &:focus:before {
       outline: none;
-      text-shadow: 
+      text-shadow:
         0 0 0.1em var(--color-accent),
         0 0 0.2em var(--color-accent),
         0 0 0.3em var(--color-accent),

test/e2e/specs/ESM/esmCldAnalyticsPage.spec.ts

@@ -0,0 +1,12 @@
+import { vpTest } from '../../fixtures/vpTest';
+import { ExampleLinkName } from '../../testData/ExampleLinkNames';
+import { testCldAnalyticsPageVideoIsPlaying } from '../commonSpecs/cldAnalyticsPageVideoPlaying';
+import { getEsmLinkByName } from '../../testData/esmPageLinksData';
+import { ESM_URL } from '../../testData/esmUrl';
+
+const link = getEsmLinkByName(ExampleLinkName.CloudinaryAnalytics);
+
+vpTest(`Test if 4 videos on ESM Cloudinary analytics page are playing as expected`, async ({ page, pomPages }) => {
+    await page.goto(ESM_URL);
+    await testCldAnalyticsPageVideoIsPlaying(page, pomPages, link);
+});

test/e2e/specs/NonESM/cldAnalyticsPage.spec.ts

@@ -1,32 +1,10 @@
 import { vpTest } from '../../fixtures/vpTest';
-import { test } from '@playwright/test';
-import { waitForPageToLoadWithTimeout } from '../../src/helpers/waitForPageToLoadWithTimeout';
 import { getLinkByName } from '../../testData/pageLinksData';
 import { ExampleLinkName } from '../../testData/ExampleLinkNames';
+import { testCldAnalyticsPageVideoIsPlaying } from '../commonSpecs/cldAnalyticsPageVideoPlaying';
 
 const link = getLinkByName(ExampleLinkName.CloudinaryAnalytics);
 
 vpTest(`Test if 4 videos on Cloudinary analytics page are playing as expected`, async ({ page, pomPages }) => {
-    await test.step('Navigate to Cloudinary analytics page by clicking on link', async () => {
-        await pomPages.mainPage.clickLinkByName(link.name);
-        await waitForPageToLoadWithTimeout(page, 5000);
-    });
-    await test.step('Validating that Cloudinary analytics video is playing', async () => {
-        await pomPages.cldAnalyticsPage.cldAnalyticsVideoComponent.validateVideoIsPlaying(true);
-    });
-    await test.step('Validating that Cloudinary analytics ADP video is playing', async () => {
-        await pomPages.cldAnalyticsPage.cldAnalyticsAdpVideoComponent.validateVideoIsPlaying(true);
-    });
-    await test.step('Scroll until Cloudinary analytics custom data object video element is visible', async () => {
-        await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataObjectVideoComponent.locator.scrollIntoViewIfNeeded();
-    });
-    await test.step('Validating that Cloudinary analytics custom data object video is playing', async () => {
-        await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataObjectVideoComponent.validateVideoIsPlaying(true);
-    });
-    await test.step('Scroll until Cloudinary analytics custom data function video element is visible', async () => {
-        await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataFunctionVideoComponent.locator.scrollIntoViewIfNeeded();
-    });
-    await test.step('Validating that Cloudinary analytics custom data function video is playing', async () => {
-        await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataFunctionVideoComponent.validateVideoIsPlaying(true);
-    });
+    await testCldAnalyticsPageVideoIsPlaying(page, pomPages, link);
 });

test/e2e/specs/commonSpecs/cldAnalyticsPageVideoPlaying.ts

@@ -0,0 +1,29 @@
+import { Page, test } from '@playwright/test';
+import { waitForPageToLoadWithTimeout } from '../../src/helpers/waitForPageToLoadWithTimeout';
+import PageManager from '../../src/pom/PageManager';
+import { ExampleLinkType } from '../../types/exampleLinkType';
+
+export async function testCldAnalyticsPageVideoIsPlaying(page: Page, pomPages: PageManager, link: ExampleLinkType) {
+    await test.step('Navigate to Cloudinary analytics page by clicking on link', async () => {
+        await pomPages.mainPage.clickLinkByName(link.name);
+        await waitForPageToLoadWithTimeout(page, 5000);
+    });
+    await test.step('Validating that Cloudinary analytics video is playing', async () => {
+        await pomPages.cldAnalyticsPage.cldAnalyticsVideoComponent.validateVideoIsPlaying(true);
+    });
+    await test.step('Validating that Cloudinary analytics ADP video is playing', async () => {
+        await pomPages.cldAnalyticsPage.cldAnalyticsAdpVideoComponent.validateVideoIsPlaying(true);
+    });
+    await test.step('Scroll until Cloudinary analytics custom data object video element is visible', async () => {
+        await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataObjectVideoComponent.locator.scrollIntoViewIfNeeded();
+    });
+    await test.step('Validating that Cloudinary analytics custom data object video is playing', async () => {
+        await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataObjectVideoComponent.validateVideoIsPlaying(true);
+    });
+    await test.step('Scroll until Cloudinary analytics custom data function video element is visible', async () => {
+        await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataFunctionVideoComponent.locator.scrollIntoViewIfNeeded();
+    });
+    await test.step('Validating that Cloudinary analytics custom data function video is playing', async () => {
+        await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataFunctionVideoComponent.validateVideoIsPlaying(true);
+    });
+}