diff --git a/test/e2e/components/videoComponent.ts b/test/e2e/components/videoComponent.ts index c04473ead..09abc73ce 100644 --- a/test/e2e/components/videoComponent.ts +++ b/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 { + 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 }); + } } diff --git a/test/e2e/specs/NonESM/profileAndConfigAppletMockedColor.spec.ts b/test/e2e/specs/NonESM/profileAndConfigAppletMockedColor.spec.ts new file mode 100644 index 000000000..43e91c14b --- /dev/null +++ b/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); + } +); \ No newline at end of file diff --git a/test/e2e/specs/NonESM/profilesAndConfigAppletFetch.spec.ts b/test/e2e/specs/NonESM/profilesAndConfigAppletFetch.spec.ts new file mode 100644 index 000000000..f9f0d3b2f --- /dev/null +++ b/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); + } +); \ No newline at end of file diff --git a/test/e2e/specs/commonSpecs/profilesAndConfigAppletFetch.ts b/test/e2e/specs/commonSpecs/profilesAndConfigAppletFetch.ts new file mode 100644 index 000000000..05069d391 --- /dev/null +++ b/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$/ + ); + }); +} \ No newline at end of file diff --git a/test/e2e/specs/commonSpecs/profilesAndConfigAppletMockedColors.ts b/test/e2e/specs/commonSpecs/profilesAndConfigAppletMockedColors.ts new file mode 100644 index 000000000..14fce01d8 --- /dev/null +++ b/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); + }); +} \ No newline at end of file diff --git a/test/e2e/src/consts/appletRoutes.ts b/test/e2e/src/consts/appletRoutes.ts new file mode 100644 index 000000000..5b470d572 --- /dev/null +++ b/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*'; \ No newline at end of file