@iamproperty/components 7.8.2--beta3 → 7.8.2--beta5

package/assets/ts/modules/test-dom.ts

@@ -443,6 +443,11 @@ export class TestElement extends EventTarget {
     return null;
   }
 
+  contains(element) {
+    if (element === this) return true;
+    return this.children.some((child) => child.contains(element));
+  }
+
   matches(selector) {
     return matchesSelector(this, selector);
   }

package/assets/ts/modules/testimonial.test.ts

@@ -5,13 +5,52 @@ import testimonial from './testimonial.ts';
 
 installTestDom();
 
+const createTestimonial = (imageCount) => {
+  const component = createElement('section');
+  const images = createElement('div', { class: 'testimonial__images' });
+  const previousButton = createElement('button', { class: 'btn-prev' });
+  const nextButton = createElement('button', { class: 'btn-next' });
+
+  for (let index = 0; index < imageCount; index++) {
+    append(images, createElement('img', { alt: `Person ${index + 1}` }));
+  }
+
+  append(component, images, previousButton, nextButton);
+
+  return { component, images, nextButton, previousButton };
+};
+
+const dispatchClickFrom = (component, target) => {
+  const event = new Event('click', { bubbles: true, cancelable: true });
+  Object.defineProperty(event, 'target', { value: target });
+  component.dispatchEvent(event);
+};
+
 describe('Testimonial module', () => {
-  it('does not wire testimonial controls for a single image', () => {
-    const testimonialElement = createElement('div');
-    const images = createElement('div', { class: 'testimonial__images' });
-    append(images, createElement('img'));
-    append(testimonialElement, images);
+  it('does not enable carousel behaviour for a single testimonial', () => {
+    const { component } = createTestimonial(1);
+
+    const result = testimonial(component);
+
+    expect(result === false);
+    expect(!component.classList.contains('testimonial--multi'));
+  });
+
+  it('enables multi-testimonial controls and updates state after scrolling', async () => {
+    const { component, images, nextButton, previousButton } = createTestimonial(2);
+    images.scrollWidth = 400;
+    images.scrollHeight = 100;
+    nextButton.setAttribute('data-go', '2');
+
+    testimonial(component);
+    dispatchClickFrom(component, nextButton);
+
+    await new Promise((resolve) => setTimeout(resolve, 350));
 
-    expect(testimonial(testimonialElement) === false);
+    expect(component.classList.contains('testimonial--multi'));
+    expect(images.scrollLeft === 200);
+    expect(component.getAttribute('data-show') === '2');
+    expect(previousButton.getAttribute('data-go') === '1');
+    expect(nextButton.hasAttribute('disabled'));
   });
 });

package/assets/ts/modules/videos.test.ts

@@ -1,33 +1,93 @@
-/* eslint-disable */
-
 import { describe, expect, it } from './test.ts';
 import { createElement, installTestDom } from './test-dom.ts';
-import { append } from './test-utils.ts';
-import { createYoutTubeVideo, openVimeoVideo } from './videos.ts';
+import { append, silenceConsole } from './test-utils.ts';
+import { createYoutTubeVideo, loadYouTubeScripts, openVimeoVideo, videoHTML } from './videos.ts';
+
+const { document, window } = installTestDom();
+
+if (typeof globalThis.CustomEvent === 'undefined') {
+  globalThis.CustomEvent = class extends Event {
+    detail;
 
-const { window } = installTestDom();
+    constructor(type, options = {}) {
+      super(type, options);
+      this.detail = options.detail;
+    }
+  };
+}
 
 describe('Videos module', () => {
-  it('reuses existing YouTube players and renders Vimeo embeds', async () => {
+  it('provides the expected base video markup', () => {
+    expect(videoHTML.includes('<slot name="video"></slot>'));
+    expect(videoHTML.includes('fa-play'));
+  });
+
+  it('loads the YouTube iframe script once the favicon probe succeeds', async () => {
+    append(document.body, createElement('script'));
+
+    await loadYouTubeScripts();
+
+    expect(document.body.classList.contains('youtubeLoaded'));
+    expect(document.getElementsByTagName('script').length === 2);
+  });
+
+  it('reuses an existing YouTube player instead of creating another one', async () => {
     let played = false;
     window.player = {
-      abc123: {
+      existing: {
         pauseVideo: () => {},
         playVideo: () => {
           played = true;
         },
       },
     };
+
+    const result = await createYoutTubeVideo(createElement('div'), 'existing');
+
+    expect(result === false);
+    expect(played);
+  });
+
+  it('creates a YouTube player and marks the embed ready when playback starts', async () => {
+    const embed = createElement('div', { id: 'youtube-alpha' });
+    append(document.body, embed);
+    window.player = undefined;
+    globalThis.YT = {
+      PlayerState: { PLAYING: 1 },
+      Player: class {
+        constructor(id, config) {
+          this.id = id;
+          this.config = config;
+          setTimeout(() => {
+            config.events.onReady({ target: { playVideo: () => {} } });
+            config.events.onStateChange({ data: 1 });
+          }, 0);
+        }
+      },
+    };
+
+    await silenceConsole(() => createYoutTubeVideo(embed, 'youtube-alpha'));
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    expect(window.player['youtube-alpha']);
+    expect(embed.classList.contains('player-ready'));
+  });
+
+  it('opens a Vimeo iframe and dispatches video analytics details', async () => {
     window.dataLayer = [];
-    const embed = createElement('div', { id: 'abc123' });
-    const youtubeResult = await createYoutTubeVideo(embed, 'abc123');
+    const component = createElement('iam-video', { dataVimeo: '12345' });
+    const embed = createElement('div', { class: 'embed' });
+    let selectedDetail;
+    component.addEventListener('play-video', (event) => {
+      selectedDetail = event.detail;
+    });
+    append(component, embed);
 
-    const component = createElement('iam-video', { dataVimeo: '98765' });
-    append(component, createElement('div', { class: 'embed' }));
     await openVimeoVideo(component);
 
-    expect(youtubeResult === false);
-    expect(played);
-    expect(component.querySelector('.embed').innerHTML.includes('player.vimeo.com/video/98765'));
+    expect(embed.innerHTML.includes('https://player.vimeo.com/video/12345?autoplay=1'));
+    expect(selectedDetail['Video Type'] === 'Vimeo');
+    expect(selectedDetail.ID === '12345');
+    expect(window.dataLayer[0].ID === '12345');
   });
 });