test(video-20810): smoke test for profiles and config applet (#1033)

* test(video-20810): smoke test for profiles and config applet

* test(video-20810): smoke test for profiles and config applet

Author: ShayLevi

test/e2e/components/videoComponent.ts

@@ -52,4 +52,29 @@ export class VideoComponent extends BaseComponent {
             expect(isPaused).not.toEqual(expectedPlaying);
         }).toPass({ intervals: [500], timeout });
     }
+
+   /**
+ * Validates theme CSS custom properties on the `.cld-video-player` wrapper ancestor.
+ */
+public async validateColors(
+    expectedColors: { base: string; accent: string; text: string },
+    timeout: number = 10000
+  ): Promise<void> {
+    const wrapperLocator = this.locator.locator('xpath=ancestor::div[contains(@class, "cld-video-player")]');
+  
+    await expect(async () => {
+      const colors = await wrapperLocator.evaluate((el) => {
+        const styles = getComputedStyle(el as HTMLElement);
+        return {
+          base: styles.getPropertyValue('--color-base').trim(),
+          accent: styles.getPropertyValue('--color-accent').trim(),
+          text: styles.getPropertyValue('--color-text').trim(),
+        };
+      });
+  
+      expect(colors.base.toLowerCase()).toBe(expectedColors.base.toLowerCase());
+      expect(colors.accent.toLowerCase()).toBe(expectedColors.accent.toLowerCase());
+      expect(colors.text.toLowerCase()).toBe(expectedColors.text.toLowerCase());
+    }).toPass({ intervals: [500], timeout });
+  }
 }

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

@@ -0,0 +1,12 @@
+import { vpTest } from '../../fixtures/vpTest';
+import { getLinkByName } from '../../testData/pageLinksData';
+import { ExampleLinkName } from '../../testData/ExampleLinkNames';
+import { testProfileAndConfigAppletMockedColors } from '../commonSpecs/profilesAndConfigAppletMockedColors';
+
+const link = getLinkByName(ExampleLinkName.Profiles);
+
+vpTest('Profile and config mocked colors are applied to the players',
+  async ({ page, pomPages }) => {
+    await testProfileAndConfigAppletMockedColors(page, pomPages, link);
+  }
+);

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

@@ -0,0 +1,12 @@
+import { vpTest } from '../../fixtures/vpTest';
+import { getLinkByName } from '../../testData/pageLinksData';
+import { ExampleLinkName } from '../../testData/ExampleLinkNames';
+import { testProfileAndConfigAppletUrlsFetch } from '../commonSpecs/profilesAndConfigAppletFetch';
+
+const link = getLinkByName(ExampleLinkName.Profiles);
+
+vpTest('Profile and config requests are sent with correct URLs',
+  async ({ page, pomPages }) => {
+    await testProfileAndConfigAppletUrlsFetch(page, pomPages, link);
+  }
+);

test/e2e/specs/commonSpecs/profilesAndConfigAppletFetch.ts

@@ -0,0 +1,47 @@
+import { Page, test, expect, Request } from '@playwright/test';
+import { waitForPageToLoadWithTimeout } from '../../src/helpers/waitForPageToLoadWithTimeout';
+import PageManager from '../../src/pom/PageManager';
+import { ExampleLinkType } from '../../types/exampleLinkType';
+import { PROFILE_ROUTE_PATTERN, CONFIG_ROUTE_PATTERN } from '../../src/consts/appletRoutes';
+
+
+export async function testProfileAndConfigAppletUrlsFetch(page: Page, pomPages: PageManager,link: ExampleLinkType
+) {
+  const profileRequests: Request[] = [];
+  const configRequests: Request[] = [];
+
+  await test.step('Track profile and config requests', async () => {
+    await page.route(PROFILE_ROUTE_PATTERN, (route) => {
+      profileRequests.push(route.request());
+      return route.continue();
+    });
+
+    await page.route(CONFIG_ROUTE_PATTERN, (route) => {
+      configRequests.push(route.request());
+      return route.continue();
+    });
+  });
+
+  await test.step('Navigate to profiles page', async () => {
+    await pomPages.mainPage.clickLinkByName(link.name);
+    await waitForPageToLoadWithTimeout(page, 5000);
+  });
+
+  await test.step('Validate profile request URL', async () => {
+    expect(profileRequests.length, 'Expected at least one profile request').toBeGreaterThanOrEqual(1);
+
+    const profileUrl = new URL(profileRequests[0].url());
+    expect(profileUrl.pathname).toMatch(
+      /\/_applet_\/video_service\/video_player_profiles\/[^/]+\.json$/
+    );
+  });
+
+  await test.step('Validate config request URL', async () => {
+    expect(configRequests.length, 'Expected at least one config request').toBeGreaterThanOrEqual(1);
+
+    const configUrl = new URL(configRequests[0].url());
+    expect(configUrl.pathname).toMatch(
+      /\/_applet_\/video_service\/video_player_config\/video\/[^/]+\/[^/]+\.json$/
+    );
+  });
+}

test/e2e/specs/commonSpecs/profilesAndConfigAppletMockedColors.ts

@@ -0,0 +1,49 @@
+import { Page, test, expect, Request } from '@playwright/test';
+import { waitForPageToLoadWithTimeout } from '../../src/helpers/waitForPageToLoadWithTimeout';
+import PageManager from '../../src/pom/PageManager';
+import { ExampleLinkType } from '../../types/exampleLinkType';
+import { PROFILE_ROUTE_PATTERN, CONFIG_ROUTE_PATTERN } from '../../src/consts/appletRoutes';
+
+export async function testProfileAndConfigAppletMockedColors(page: Page, pomPages: PageManager,link: ExampleLinkType
+) {
+
+  const profileMockColors = { base: '#FF0000', accent: '#00FF00', text: '#0000FF' };
+  const configMockColors = { base: '#AA0000', accent: '#00AA00', text: '#0000AA' };
+
+  await test.step('Mock profile and config responses with custom colors', async () => {
+    await page.route(PROFILE_ROUTE_PATTERN, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          playerOptions: { colors: profileMockColors },
+          sourceOptions: {},
+        }),
+      });
+    });
+
+    await page.route(CONFIG_ROUTE_PATTERN, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          playerOptions: { colors: configMockColors },
+          sourceOptions: {},
+        }),
+      });
+    });
+  });
+
+  await test.step('Navigate to profiles page', async () => {
+    await pomPages.mainPage.clickLinkByName(link.name);
+    await waitForPageToLoadWithTimeout(page, 5000);
+  });
+
+  await test.step('Validate mocked profile colors are applied', async () => {
+    await pomPages.profilesPage.profilesCustomProfileVideoComponent.validateColors(profileMockColors);
+  });
+
+  await test.step('Validate mocked config colors are applied', async () => {
+    await pomPages.profilesPage.profilesAssetConfigVideoComponent.validateColors(configMockColors);
+  });
+}

test/e2e/src/consts/appletRoutes.ts

@@ -0,0 +1,2 @@
+export const PROFILE_ROUTE_PATTERN = '**/_applet_/video_service/video_player_profiles/*.json*';
+export const CONFIG_ROUTE_PATTERN = '**/_applet_/video_service/video_player_config/**/*.json*';