@iamproperty/components 7.8.2--beta2 → 7.8.2--beta4

package/assets/ts/modules/tabs.test.ts

@@ -1,27 +1,94 @@
 import { describe, expect, it } from './test.ts';
 import { createElement, installTestDom } from './test-dom.ts';
 import { append } from './test-utils.ts';
-import { openFirstTab, toggleTab } from './tabs.ts';
+import { createTabsLinks, openFirstTab, setTabsEventHandlers, toggleTab } from './tabs.ts';
 
-installTestDom();
+const { window } = installTestDom();
+
+const createDetail = (id, title, isOpen = false) => {
+  const detail = createElement('details', { id });
+  const summary = createElement('summary', {}, title);
+
+  if (isOpen) detail.setAttribute('open', 'true');
+
+  append(detail, summary, createElement('p', {}, `${title} content`));
+
+  return detail;
+};
 
 describe('Tabs module', () => {
-  it('toggles tabs and opens the first tab by default', () => {
+  it('creates tab buttons and dropdown options from direct details', () => {
+    const tabs = createElement('iam-tabs', { class: 'tabs--toggle-tags' });
+    const first = createDetail('first', 'First tab', true);
+    const second = createDetail('second', 'Second tab');
+    append(tabs, first, second);
+
+    createTabsLinks(tabs);
+
+    const buttons = tabs.querySelectorAll('.tabs__links > button');
+    const options = tabs.querySelectorAll('.tabs__dropdown > option');
+
+    expect(buttons.length === 2);
+    expect(buttons[0].textContent === 'First tab');
+    expect(buttons[0].getAttribute('aria-pressed') === 'true');
+    expect(buttons[0].classList.contains('tag'));
+    expect(buttons[0].getAttribute('data-id') === 'first');
+    expect(first.getAttribute('tabindex') === '-1');
+    expect(first.querySelector('summary').classList.contains('visually-hidden'));
+    expect(options[0].value === 'first-tab');
+  });
+
+  it('toggles matching detail panels and records tab open events', () => {
+    window.dataLayer = [];
+    const tabs = createElement('iam-tabs');
+    const first = createDetail('first', 'First tab', true);
+    const second = createDetail('second', 'Second tab');
+    const linksWrapper = createElement('div');
+    const links = createElement('div', { class: 'tabs__links' });
+    const dropdownWrapper = createElement('div');
+    const dropdown = createElement('select', { class: 'tabs__dropdown' });
+    append(links, createElement('button', { ariaPressed: 'true', dataIndex: '0' }, 'First tab'));
+    append(links, createElement('button', { dataIndex: '1' }, 'Second tab'));
+    append(linksWrapper, links);
+    append(dropdownWrapper, dropdown);
+    append(tabs, linksWrapper, dropdownWrapper, first, second);
+
+    setTabsEventHandlers(tabs);
+
+    const buttons = tabs.querySelectorAll('.tabs__links > button');
+    buttons[1].click();
+
+    expect(!first.hasAttribute('open'));
+    expect(second.getAttribute('open') === 'true');
+    expect(buttons[1].getAttribute('aria-pressed') === 'true');
+    expect(window.dataLayer[0].event === 'openTab');
+    expect(window.dataLayer[0].tabTitle === 'Second tab');
+  });
+
+  it('opens the tab matching the current location hash', () => {
     const tabs = createElement('iam-tabs');
-    const first = createElement('details');
-    const second = createElement('details');
-    const buttonOne = createElement('button', { dataIndex: '0' });
-    const buttonTwo = createElement('button', { dataIndex: '1' });
     tabs.shadowRoot = createElement('shadow-root');
     const links = createElement('div', { class: 'tabs__links' });
-    append(links, buttonOne, buttonTwo);
+    append(links, createElement('button', { dataId: 'first' }), createElement('button', { dataId: 'second' }));
     append(tabs.shadowRoot, links);
-    append(tabs, first, second);
+    append(tabs, createDetail('first', 'First tab'), createDetail('second', 'Second tab'));
+    window.location.hash = '#second';
 
-    toggleTab([first, second], buttonTwo);
     openFirstTab(tabs);
 
-    expect(!first.hasAttribute('open'));
-    expect(second.hasAttribute('open'));
+    expect(tabs.querySelector('details[id="second"]').getAttribute('open') === 'true');
+    expect(tabs.shadowRoot.querySelector('[data-id="second"]').getAttribute('aria-pressed') === 'true');
+
+    window.location.hash = '';
+  });
+
+  it('toggles detail panels directly from a selected tab button', () => {
+    const details = [createDetail('first', 'First tab'), createDetail('second', 'Second tab')];
+    const button = createElement('button', { dataIndex: '1' });
+
+    toggleTab(details, button);
+
+    expect(!details[0].hasAttribute('open'));
+    expect(details[1].getAttribute('open') === 'true');
   });
 });

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');
   });
 });