test(esl-media): e2e testing

e2e/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env']
+};

e2e/jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
   preset: 'jest-puppeteer',
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.feature$': './transformer/gherkin.js'
   },
   roots: ['./tests/'],

e2e/package.json

@@ -14,6 +14,8 @@
     "test": "eslint"
   },
   "dependencies": {
+    "@babel/preset-env": "^7.26.0",
+    "@exadel/esl": "../",
     "@types/jest-environment-puppeteer": "^5.0.6",
     "@types/jest-image-snapshot": "^6.4.0",
     "@types/puppeteer": "^7.0.4",

e2e/tests/modules/esl-media/esl-media-iframe.test.ts

@@ -0,0 +1,37 @@
+import {goTo} from '../../../setup/scenarios.page';
+import {createMediaElement} from './utils/utils';
+
+import type {ESLMedia} from '@exadel/esl/modules/esl-media/core/esl-media';
+
+const createIframeMedia = async (props: Partial<ESLMedia> = {}) => {
+  await createMediaElement(Object.assign({'media-type': 'iframe', 'media-src': 'https://player.vimeo.com/video/1084537'}, props));
+  await new Promise((resolve) => setTimeout(resolve, 3000));
+
+  const $media = await page.$('esl-media');
+  return {
+    $media,
+    $video: await $media!.$('iframe'),
+  };
+};
+
+describe('esl-media: abstract iframe', () => {
+
+  beforeAll(() => goTo('/test/test-page'));
+
+  afterEach(async () => {
+    const $media = await page.$('esl-media');
+    await page.evaluate(($el: ESLMedia) => $el.remove(), $media);
+  });
+
+  test('Media iframe present', async () => {
+    const {$video} = await createIframeMedia();
+    expect($video).not.toBeNull();
+  });
+
+  test('Media playsinline attribute present', async () => {
+    const {$video} = await createIframeMedia({playsinline: true});
+    const iframeSrc = await page.evaluate(($el) => $el?.hasAttribute('playsinline'), $video);
+
+    expect(iframeSrc).toBe(true);
+  });
+});

e2e/tests/modules/esl-media/esl-media-video.test.ts

@@ -0,0 +1,100 @@
+import {promisifyTimeout} from '@exadel/esl/modules/esl-utils/async';
+import {goTo} from '../../../setup/scenarios.page';
+import {createMediaElement} from './utils/utils';
+
+import type {ESLMedia} from '@exadel/esl/modules/esl-media/core/esl-media';
+
+const createVideoMedia = async (props: Partial<ESLMedia> = {}) => {
+  await createMediaElement(Object.assign({mediaType: 'video', mediaSrc: '/assets/media/video_1.mp4'}, props));
+  await promisifyTimeout(1000);
+
+  const $media = await page.$('esl-media');
+  return {
+    $media,
+    $video: await $media!.$('video'),
+  };
+};
+
+const cleanUp = async () => {
+  const $media = await page.$('esl-media');
+  await page.evaluate(($el) => $el?.remove(), $media);
+};
+
+describe('esl-media: HTML video', () => {
+
+  beforeAll(() => goTo('/test/test-page'));
+
+  describe('Video element', () => {
+    afterEach(async () => cleanUp());
+
+    test('Media iframe present', async () => {
+      const {$video} = await createVideoMedia();
+
+      expect($video).not.toBeNull();
+    });
+
+    test('Media playsinline parameter', async () => {
+      const {$video} = await createVideoMedia({playsinline: true});
+      const isInline = await page.evaluate(($el) => $el?.playsInline, $video);
+
+      expect(isInline).toBe(true);
+    });
+
+    test('Media muted parameter', async () => {
+      const {$video} = await createVideoMedia({muted: true});
+      const isMuted = await page.evaluate(($el) => $el?.muted, $video);
+
+      expect(isMuted).toBe(true);
+    });
+  });
+
+  describe('Video provider', () => {
+    afterEach(async () => cleanUp());
+
+    test('Media autoplay parameter', async () => {
+      const {$media} = await createVideoMedia({autoplay: true});
+      await promisifyTimeout(1000);
+
+      expect(await page.evaluate(($el) => $el.currentTime, $media)).toBeGreaterThan(0);
+    });
+
+    test('Media play', async () => {
+      const {$media} = await createVideoMedia();
+
+      expect(await page.evaluate(($el) => $el.currentTime, $media)).toBe(0);
+
+      await page.evaluate(($el) => $el.play(), $media);
+      await promisifyTimeout(1000);
+
+      expect(await page.evaluate(($el) => $el.currentTime, $media)).toBeGreaterThan(0);
+    });
+
+    test('Media pause', async () => {
+      const {$media} = await createVideoMedia();
+
+      await page.evaluate(($el) => $el.play(), $media);
+      await promisifyTimeout(1000);
+
+      const playtime = await page.evaluate(($el) => {
+        $el.pause();
+        return $el.currentTime;
+      }, $media);
+      await promisifyTimeout(1000);
+
+      const pausedTime = await page.evaluate(($el) => $el.currentTime, $media);
+
+      expect(pausedTime.toFixed(1)).toEqual(playtime.toFixed(1));
+    });
+
+    test('Media stop', async () => {
+      const {$media} = await createVideoMedia();
+      await page.evaluate(($el) => $el.play(), $media);
+      await promisifyTimeout(1000);
+
+      await page.evaluate(($el) => $el.stop(), $media);
+      await promisifyTimeout(1000);
+
+      expect(await page.evaluate(($el) => $el.currentTime, $media)).toBe(0);
+    });
+  });
+});

e2e/tests/modules/esl-media/esl-media-youtube.test.ts

@@ -0,0 +1,120 @@
+import {promisifyTimeout} from '@exadel/esl/modules/esl-utils/async';
+import {goTo} from '../../../setup/scenarios.page';
+import {createMediaElement} from './utils/utils';
+
+import type {ESLMedia} from '@exadel/esl/modules/esl-media/core/esl-media';
+
+const createYTMedia = async (props: Partial<ESLMedia> = {}) => {
+  await createMediaElement(Object.assign({mediaType: 'youtube', mediaId: '5ryf1AVl8Wg'}, props));
+  await promisifyTimeout(1000);
+
+  const $media = await page.$('esl-media');
+  return {
+    $media,
+    $video: await $media!.$('iframe'),
+  };
+};
+
+const cleanUp = async () => {
+  const $media = await page.$('esl-media');
+  await page.evaluate(($el: ESLMedia) => $el?.remove(), $media);
+};
+
+describe('esl-media: Youtube iframe', () => {
+
+  beforeAll(() => goTo('/test/test-page'));
+
+  describe('Youtube api', () => {
+    afterEach(async () => cleanUp());
+
+    test('YouTube API is present', async () => {
+      await createYTMedia();
+      const isYTAvailable = await page.evaluate(() => typeof YT !== 'undefined');
+      expect(isYTAvailable).toBe(true);
+    });
+
+    test('YouTube API recognized the video', async () => {
+      const {$media} = await createYTMedia();
+      const mediaId = await page.evaluate(($el) => $el.getAttribute('media-id'), $media);
+      const ytUrl = await page.evaluate(($el) => {
+        const id = $el.querySelector('iframe')?.getAttribute('id');
+        return (YT as any).get(id).getVideoUrl();
+      }, $media);
+      expect(ytUrl).toBe(`https://www.youtube.com/watch?v=${mediaId}`);
+    });
+
+    test('Media muted parameter', async () => {
+      const {$media} = await createYTMedia({muted: true});
+      const isMuted = await page.evaluate(($el) => {
+        const id = $el.querySelector('iframe')?.getAttribute('id');
+        const player = (YT as any).get(id);
+        return player ? player.isMuted() : false;
+      }, $media);
+
+      expect(isMuted).toBe(true);
+    });
+  });
+
+  describe('Youtube provider', () => {
+    afterEach(async () => cleanUp());
+
+    test('Media iframe present', async () => {
+      const {$media, $video} = await createYTMedia();
+      const ytID = await page.evaluate(($el) => $el.getAttribute('media-id'), $media);
+      const iframeSrc = await page.evaluate(($el) => $el?.src, $video);
+
+      expect(iframeSrc).toContain(`youtube.com/embed/${ytID}`);
+    });
+
+    test('Media playsinline parameter', async () => {
+      const {$video} = await createYTMedia({playsinline: true});
+      const iframeSrc = await page.evaluate(($el) => $el?.src, $video);
+
+      expect(iframeSrc).toContain('playsinline=1');
+    });
+
+    test('Media autoplay parameter', async () => {
+      const {$media} = await createYTMedia({autoplay: true});
+      await promisifyTimeout(1000);
+
+      expect(await page.evaluate(($el) => $el.currentTime, $media)).toBeGreaterThan(0);
+    });
+
+    test('Media play', async () => {
+      const {$media} = await createYTMedia();
+      expect(await page.evaluate(($el) => $el.currentTime, $media)).toBe(0);
+
+      await page.evaluate(($el) => $el.play(), $media);
+      await promisifyTimeout(1000);
+
+      expect(await page.evaluate(($el) => $el.currentTime, $media)).toBeGreaterThan(0);
+    });
+
+    test('Media pause', async () => {
+      const {$media} = await createYTMedia();
+
+      await page.evaluate(($el) => $el.play(), $media);
+      await promisifyTimeout(1000);
+
+      const playtime = await page.evaluate(($el) => {
+        $el.pause();
+        return $el.currentTime;
+      }, $media);
+      await promisifyTimeout(1000);
+
+      const pausedTime = await page.evaluate(($el) => $el.currentTime, $media);
+      expect(pausedTime.toFixed(1)).toEqual(playtime.toFixed(1));
+    });
+
+    test('Media stop', async () => {
+      const {$media} = await createYTMedia();
+      await page.evaluate(($el) => $el.play(), $media);
+      await promisifyTimeout(1000);
+
+      await page.evaluate(($el) => $el.stop(), $media);
+      await promisifyTimeout(1000);
+
+      expect(await page.evaluate(($el) => $el.currentTime, $media)).toBe(0);
+    });
+  });
+});

e2e/tests/modules/esl-media/utils/utils.ts

@@ -0,0 +1,16 @@
+import {toKebabCase} from '@exadel/esl/modules/esl-utils/misc/format';
+import type {ESLMedia} from '@exadel/esl/modules/esl-media/core/esl-media';
+import type {JSHandle} from 'puppeteer';
+
+export const createMediaElement = async (props: Partial<ESLMedia>): Promise<JSHandle<ESLMedia>> => {
+  return page.evaluate((pr: Partial<ESLMedia>, toKebabCaseStr: string) => {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    const toKebabCaseFn = new Function('return ' + toKebabCaseStr)();
+    const $media = document.createElement('esl-media');
+    Object.entries(pr).forEach(([attr, value]) => {
+      $media.setAttribute(toKebabCaseFn(attr), value?.toString() || '');
+    });
+    document.body.appendChild($media);
+    return $media;
+  }, JSON.parse(JSON.stringify(props)), toKebabCase.toString()) as unknown as JSHandle<ESLMedia>;
+};