vp test: refactor to support ExampleLinkName enum

test/e2e/specs/highlightsGraphPageVideoIsPlaying.spec.ts

@@ -1,7 +1,8 @@
 import { vpTest } from '../fixtures/vpTest';
 import { expect, test } from '@playwright/test';
 import { waitForPageToLoadWithTimeout } from '../src/helpers/waitForPageToLoadWithTimeout';
-import { ExampleLinkName, getLinkByName } from '../testData/pageLinksData';
+import { getLinkByName } from '../testData/pageLinksData';
+import { ExampleLinkName } from '../testData/pagesName';
 
 // Link to AI Highlights Graph page
 const link = getLinkByName(ExampleLinkName.AIHighlightsGraph);

test/e2e/specs/linksConsolErros.spec.ts

@@ -3,6 +3,7 @@ import { vpTest } from '../fixtures/vpTest';
 import { LINKS } from '../testData/pageLinksData';
 import { waitForPageToLoadWithTimeout } from '../src/helpers/waitForPageToLoadWithTimeout';
 import { validatePageErrors } from '../src/helpers/validatePageErrors';
+import { ExampleLinkName } from '../testData/pagesName';
 
 /**
  * Console error test generated by LINKS object array data.
@@ -29,19 +30,19 @@ vpTest('Link count test', async ({ page }) => {
 /**
  * Helper function to handle common browser errors.
  */
-function handleCommonBrowsersErrors(linkName: string, consoleErrors: ConsoleMessage[]) {
+function handleCommonBrowsersErrors(linkName: ExampleLinkName, consoleErrors: ConsoleMessage[]) {
     switch (linkName) {
-        case 'Custom Errors':
+        case ExampleLinkName.CustomErrors:
             validatePageErrors(
                 consoleErrors,
                 ['(CODE:999 undefined) My custom error message'],
                 ['No compatible source was found for this media', 'Video cannot be played Public ID snow_horses not found', 'the server responded with a status of 404', 'Cannot read properties of undefined']
             );
             break;
-        case 'Debug mode':
+        case ExampleLinkName.DebugMode:
             validatePageErrors(consoleErrors, ['invalid player configuration', `cloudinary video player: \'fluid\' should be a boolean`], []);
             break;
-        case 'VAST & VPAID Support':
+        case ExampleLinkName.VASTAndVPAIDSupport:
             validatePageErrors(consoleErrors, ['The Cross-Origin-Opener-Policy header'], ["Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set"]);
             break;
         default:

test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts

@@ -4,6 +4,7 @@ import { ESM_LINKS } from '../testData/esmPageLinksData';
 import { waitForPageToLoadWithTimeout } from '../src/helpers/waitForPageToLoadWithTimeout';
 import { validatePageErrors } from '../src/helpers/validatePageErrors';
 import { ExampleLinkType } from '../types/exampleLinkType';
+import { ExampleLinkName } from '../testData/pagesName';
 
 const EDGE_ESM_URL = 'https://cld-vp-esm-pages.netlify.app/';
 // On PR level it will use the preview deploy URL and locally it will use the latest EDGE.
@@ -41,16 +42,16 @@ vpTest('ESM page Link count test', async ({ page }) => {
 /**
  * Helper function to handle common browser errors.
  */
-function handleCommonEsmBrowsersErrors(linkName: string, consoleErrors: ConsoleMessage[]) {
+function handleCommonEsmBrowsersErrors(linkName: ExampleLinkName, consoleErrors: ConsoleMessage[]) {
     switch (linkName) {
-        case 'Custom Errors':
+        case ExampleLinkName.CustomErrors:
             validatePageErrors(
                 consoleErrors,
                 ['(CODE:999 undefined) My custom error message'],
                 ['No compatible source was found for this media', 'Video cannot be played Public ID snow_horses not found', 'the server responded with a status of 404', 'Cannot read properties of undefined']
             );
             break;
-        case 'VAST & VPAID Support':
+        case ExampleLinkName.VASTAndVPAIDSupport:
             validatePageErrors(consoleErrors, [], ["Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set", 'the server responded with a status of 404']);
             break;
         default:

test/e2e/testData/esmPageLinksData.ts

@@ -1,39 +1,47 @@
 import { ExampleLinkType } from '../types/exampleLinkType';
+import { ExampleLinkName } from './pagesName';
 
 /**
  * Array of all the examples pages names and links on ESM import page.
  */
 export const ESM_LINKS: ExampleLinkType[] = [
-    { name: 'Adaptive Streaming', endpoint: 'adaptive-streaming' },
-    { name: 'Analytics', endpoint: 'analytics' },
-    { name: 'API and Events', endpoint: 'api' },
-    { name: 'Audio Player', endpoint: 'audio' },
-    { name: 'Autoplay on Scroll', endpoint: 'autoplay-on-scroll' },
-    { name: 'Chapters', endpoint: 'chapters' },
-    { name: 'Cloudinary Analytics', endpoint: 'cloudinary-analytics' },
-    { name: 'Codecs and formats', endpoint: 'codec-formats' },
-    { name: 'Colors API', endpoint: 'colors' },
-    { name: 'Components', endpoint: 'components' },
-    { name: 'Custom Errors', endpoint: 'custom-cld-errors' },
-    { name: 'Display Configurations', endpoint: 'ui-config' },
-    { name: 'Debug', endpoint: 'debug' },
-    { name: 'Floating Player', endpoint: 'floating-player' },
-    { name: 'Fluid Layouts', endpoint: 'fluid' },
-    { name: 'Force HLS Subtitles', endpoint: 'force-hls-subtitles' },
-    { name: 'Highlights Graph', endpoint: 'highlights-graph' },
-    { name: 'Interaction Area', endpoint: 'interaction-area' },
-    { name: 'Multiple Players', endpoint: 'multiple-players' },
-    { name: 'Playlist', endpoint: 'playlist' },
-    { name: 'Playlist by Tag', endpoint: 'playlist-by-tag' },
-    { name: 'Poster Options', endpoint: 'poster' },
-    { name: 'Profiles', endpoint: 'profiles' },
-    { name: 'Raw URL', endpoint: 'raw-url' },
-    { name: 'Recommendations', endpoint: 'recommendations' },
-    { name: 'Seek Thumbnails', endpoint: 'seek-thumbs' },
-    { name: 'Shoppable Videos', endpoint: 'shoppable' },
-    { name: 'Subtitles & Captions', endpoint: 'subtitles-and-captions' },
-    { name: 'Video Transformations', endpoint: 'transformations' },
-    { name: 'UI Config', endpoint: 'ui-config' },
-    { name: 'VAST & VPAID Support', endpoint: 'vast-vpaid' },
-    { name: 'VR/360 Videos', endpoint: '360' },
+    { name: ExampleLinkName.AdaptiveStreaming, endpoint: 'adaptive-streaming' },
+    { name: ExampleLinkName.Analytics, endpoint: 'analytics' },
+    { name: ExampleLinkName.APIAndEvents, endpoint: 'api' },
+    { name: ExampleLinkName.AudioPlayer, endpoint: 'audio' },
+    { name: ExampleLinkName.AutoplayOnScroll, endpoint: 'autoplay-on-scroll' },
+    { name: ExampleLinkName.Chapters, endpoint: 'chapters' },
+    { name: ExampleLinkName.CloudinaryAnalytics, endpoint: 'cloudinary-analytics' },
+    { name: ExampleLinkName.CodecsAndFormats, endpoint: 'codec-formats' },
+    { name: ExampleLinkName.ColorsAPI, endpoint: 'colors' },
+    { name: ExampleLinkName.Components, endpoint: 'components' },
+    { name: ExampleLinkName.CustomErrors, endpoint: 'custom-cld-errors' },
+    { name: ExampleLinkName.DisplayConfigurations, endpoint: 'ui-config' },
+    { name: ExampleLinkName.ESMDebugMode, endpoint: 'debug' },
+    { name: ExampleLinkName.FloatingPlayer, endpoint: 'floating-player' },
+    { name: ExampleLinkName.FluidLayouts, endpoint: 'fluid' },
+    { name: ExampleLinkName.ForceHLSSubtitles, endpoint: 'force-hls-subtitles' },
+    { name: ExampleLinkName.HighlightsGraph, endpoint: 'highlights-graph' },
+    { name: ExampleLinkName.InteractionArea, endpoint: 'interaction-area' },
+    { name: ExampleLinkName.MultiplePlayers, endpoint: 'multiple-players' },
+    { name: ExampleLinkName.Playlist, endpoint: 'playlist' },
+    { name: ExampleLinkName.PlaylistByTag, endpoint: 'playlist-by-tag' },
+    { name: ExampleLinkName.PosterOptions, endpoint: 'poster' },
+    { name: ExampleLinkName.Profiles, endpoint: 'profiles' },
+    { name: ExampleLinkName.RawURL, endpoint: 'raw-url' },
+    { name: ExampleLinkName.Recommendations, endpoint: 'recommendations' },
+    { name: ExampleLinkName.SeekThumbnails, endpoint: 'seek-thumbs' },
+    { name: ExampleLinkName.ShoppableVideos, endpoint: 'shoppable' },
+    { name: ExampleLinkName.SubtitlesAndCaptions, endpoint: 'subtitles-and-captions' },
+    { name: ExampleLinkName.VideoTransformations, endpoint: 'transformations' },
+    { name: ExampleLinkName.UIConfig, endpoint: 'ui-config' },
+    { name: ExampleLinkName.VASTAndVPAIDSupport, endpoint: 'vast-vpaid' },
+    { name: ExampleLinkName.VR360Videos, endpoint: '360' },
 ];
+
+/**
+ * Retrieves an example link object from the `ESM_LINKS` array based on a given name.
+ */
+export function getEsmLinkByName(name: ExampleLinkName): ExampleLinkType {
+    return ESM_LINKS.find((link) => link.name === name);
+}

test/e2e/testData/pageLinksData.ts

@@ -1,46 +1,5 @@
 import { ExampleLinkType } from '../types/exampleLinkType';
-
-/**
- * Enum representing the names of example pages.
- */
-export enum ExampleLinkName {
-    AdaptiveStreaming = 'Adaptive Streaming',
-    AIHighlightsGraph = 'AI Highlights Graph',
-    Analytics = 'Analytics',
-    APIAndEvents = 'API and Events',
-    AudioPlayer = 'Audio Player',
-    AutoplayOnScroll = 'Autoplay on Scroll',
-    Chapters = 'Chapters',
-    CloudinaryAnalytics = 'Cloudinary Analytics',
-    CodecsAndFormats = 'Codecs and formats',
-    ColorsAPI = 'Colors API',
-    Components = 'Components',
-    CustomErrors = 'Custom Errors',
-    DisplayConfigurations = 'Display Configurations',
-    DebugMode = 'Debug mode',
-    ESModuleImports = 'ES Module Imports',
-    FloatingPlayer = 'Floating Player',
-    FluidLayouts = 'Fluid Layouts',
-    ForceHLSSubtitles = 'Force HLS Subtitles',
-    HighlightsGraph = 'Highlights Graph',
-    InteractionArea = 'Interaction Area',
-    MultiplePlayers = 'Multiple Players',
-    Playlist = 'Playlist',
-    PlaylistByTag = 'Playlist by Tag',
-    PosterOptions = 'Poster Options',
-    Profiles = 'Profiles',
-    RawURL = 'Raw URL',
-    Recommendations = 'Recommendations',
-    SeekThumbnails = 'Seek Thumbnails',
-    ShoppableVideos = 'Shoppable Videos',
-    SubtitlesAndCaptions = 'Subtitles & Captions',
-    VideoTransformations = 'Video Transformations',
-    UIConfig = 'UI Config',
-    VASTAndVPAIDSupport = 'VAST & VPAID Support',
-    VR360Videos = 'VR/360 Videos',
-    EmbeddedIframePlayer = 'Embedded (iframe) player',
-    ESMImports = 'ESM Imports',
-}
+import { ExampleLinkName } from './pagesName';
 
 /**
  * Array of all the examples pages names and links.

test/e2e/testData/pagesName.ts

@@ -0,0 +1,42 @@
+/**
+ * Enum representing the names of example pages.
+ */
+export enum ExampleLinkName {
+    AdaptiveStreaming = 'Adaptive Streaming',
+    AIHighlightsGraph = 'AI Highlights Graph',
+    Analytics = 'Analytics',
+    APIAndEvents = 'API and Events',
+    AudioPlayer = 'Audio Player',
+    AutoplayOnScroll = 'Autoplay on Scroll',
+    Chapters = 'Chapters',
+    CloudinaryAnalytics = 'Cloudinary Analytics',
+    CodecsAndFormats = 'Codecs and formats',
+    ColorsAPI = 'Colors API',
+    Components = 'Components',
+    CustomErrors = 'Custom Errors',
+    DisplayConfigurations = 'Display Configurations',
+    DebugMode = 'Debug mode',
+    ESMDebugMode = 'Debug',
+    ESModuleImports = 'ES Module Imports',
+    FloatingPlayer = 'Floating Player',
+    FluidLayouts = 'Fluid Layouts',
+    ForceHLSSubtitles = 'Force HLS Subtitles',
+    HighlightsGraph = 'Highlights Graph',
+    InteractionArea = 'Interaction Area',
+    MultiplePlayers = 'Multiple Players',
+    Playlist = 'Playlist',
+    PlaylistByTag = 'Playlist by Tag',
+    PosterOptions = 'Poster Options',
+    Profiles = 'Profiles',
+    RawURL = 'Raw URL',
+    Recommendations = 'Recommendations',
+    SeekThumbnails = 'Seek Thumbnails',
+    ShoppableVideos = 'Shoppable Videos',
+    SubtitlesAndCaptions = 'Subtitles & Captions',
+    VideoTransformations = 'Video Transformations',
+    UIConfig = 'UI Config',
+    VASTAndVPAIDSupport = 'VAST & VPAID Support',
+    VR360Videos = 'VR/360 Videos',
+    EmbeddedIframePlayer = 'Embedded (iframe) player',
+    ESMImports = 'ESM Imports',
+}

test/e2e/types/exampleLinkType.ts

@@ -1,4 +1,4 @@
-import { ExampleLinkName } from '../testData/pageLinksData';
+import { ExampleLinkName } from '../testData/pagesName';
 
 /**
  * Example links type