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

package/assets/ts/modules/form.ts

@@ -0,0 +1,210 @@
+type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+interface FormCondition {
+  equals: string | number | boolean | null;
+  if: string;
+}
+
+interface CheckboxLimitDetail {
+  element: string;
+  limit: number;
+}
+
+const getConditions = (conditions: string | null): FormCondition[] => JSON.parse(conditions || '[]') as FormCondition[];
+
+const getFormControl = (form: HTMLElement, id: string): FormControlElement | null =>
+  form.querySelector<FormControlElement>(`#${id}`);
+
+export const isFormValid = (form: HTMLFormElement): boolean => {
+
+  if (form.querySelector(':invalid'))
+    return false;
+
+  if (form.querySelector('.pwd-checker[data-strength="1"]') || form.querySelector('.pwd-checker[data-strength="2"]'))
+    return false;
+
+  if (form.querySelector('iam-multiselect[data-is-required][data-error]'))
+    return false;
+
+  return true;
+};
+
+export const checkConditions = (conditions: string | null, form: HTMLElement): boolean => {
+
+  let meetsCondition = true;
+
+  getConditions(conditions).forEach((condition) => {
+    const input = getFormControl(form, condition.if);
+
+    if(input?.value != condition.equals)
+      meetsCondition = false;
+  });
+
+  return meetsCondition;
+}
+
+
+export const showIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-show-if]').forEach((element) => {
+
+    if(!checkConditions(element.getAttribute('data-show-if'), form))
+      element.classList.add('d-none');
+    else
+      element.classList.remove('d-none');
+
+  });
+}
+
+export const hideIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-hide-if]').forEach((element) => {
+
+    if(checkConditions(element.getAttribute('data-hide-if'), form))
+      element.classList.add('d-none');
+    else
+      element.classList.remove('d-none');
+
+  });
+}
+
+export const disabledIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-disabled-if]').forEach((element) => {
+
+    if(checkConditions(element.getAttribute('data-disabled-if'), form))
+      element.setAttribute('disabled','disabled');
+    else
+      element.removeAttribute('disabled');
+
+  });
+}
+
+export const enabledIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-enabled-if]').forEach((element) => {
+
+    if(!checkConditions(element.getAttribute('data-enabled-if'), form))
+      element.setAttribute('disabled','disabled');
+    else
+      element.removeAttribute('disabled');
+
+  });
+}
+
+export const requiredIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-required-if]').forEach((element) => {
+
+    if(checkConditions(element.getAttribute('data-required-if'), form))
+      element.setAttribute('required','required');
+    else
+      element.removeAttribute('required');
+
+  });
+}
+
+export const readonlyIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-readonly-if]').forEach((element) => {
+
+    if(checkConditions(element.getAttribute('data-readonly-if'), form))
+      element.setAttribute('readonly','readonly');
+    else
+      element.removeAttribute('readonly');
+
+  });
+}
+
+export const writeIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-write-if]').forEach((element) => {
+
+    if(!checkConditions(element.getAttribute('data-write-if'), form))
+      element.setAttribute('readonly','readonly');
+    else
+      element.removeAttribute('readonly');
+
+  });
+}
+
+export const emptyIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<FormControlElement>('[data-empty-if]').forEach((element) => {
+
+    if(checkConditions(element.getAttribute('data-empty-if'), form))
+      element.value = "";
+
+  });
+}
+
+export const getCheckboxLimit = (element: HTMLElement): number => {
+
+  const limit = parseInt(element.getAttribute('data-checkbox-limit') || '10', 10);
+
+  return !isNaN(limit) && limit > 0 ? limit : 10;
+}
+
+export const limitCheckboxes = (event: Event | null | undefined, root: HTMLElement): void => {
+
+  console.log(event);
+
+
+  const target = event?.target instanceof HTMLInputElement ? event.target : null;
+  const changedCheckbox = target?.matches('input[type="checkbox"]') ? target : null;
+  const checkboxLimitGroup = changedCheckbox?.closest<HTMLElement>('[data-checkbox-limit]');
+  const checkboxLimitGroups = checkboxLimitGroup
+    ? [checkboxLimitGroup]
+    : [
+        ...(root.hasAttribute('data-checkbox-limit') ? [root] : []),
+        ...Array.from(root.querySelectorAll<HTMLElement>('[data-checkbox-limit]')),
+      ];
+
+  checkboxLimitGroups.forEach((group) => {
+
+    const limit = getCheckboxLimit(group);
+    const checked = Array.from(group.querySelectorAll<HTMLInputElement>('input[type="checkbox"]:checked'));
+    const notChecked = Array.from(group.querySelectorAll<HTMLInputElement>('input[type="checkbox"]:not(:checked)'));
+
+    notChecked.forEach((checkbox) => {
+
+      checkbox.setAttribute('disabled','disabled');
+    });
+
+    if(checked.length < limit){
+      notChecked.forEach((checkbox) => {
+
+        checkbox.removeAttribute('disabled');
+      });
+
+      return;
+    }
+
+    if(checked.length == limit){
+
+      // Data layer Web component created
+
+      const eventDetails: CheckboxLimitDetail = {element: group.hasAttribute('id') ? `#${group.getAttribute('id')}` :'', limit: limit};
+      const changeEvent = new CustomEvent<CheckboxLimitDetail>('checkbox-limit-reached', { detail: eventDetails });
+
+      root.dispatchEvent(changeEvent);
+
+      const formWindow = window as WindowWithDataLayer;
+      formWindow.dataLayer = formWindow.dataLayer || [];
+      formWindow.dataLayer.push({'event': 'checkbox-limit-reached', ...eventDetails});
+
+      return;
+    }
+
+
+    if(changedCheckbox?.checked && group.contains(changedCheckbox)) {
+      changedCheckbox.checked = false;
+      return;
+    }
+
+    checked.slice(limit).forEach((checkbox) => {
+
+      checkbox.checked = false;
+    });
+  });
+}

package/assets/ts/modules/nav.ts

@@ -74,8 +74,9 @@ export const populateLinks = (data):void => {
 
 export const loadNavData = async(Cookies): any => {
 
-  //const ajaxURL = 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
-  const ajaxURL = '/nav.json';
+  const ajaxURL = 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
+
+  //const ajaxURL = '/nav.json';
 
   // Setup controller vars if not already set
   if (!window.controller) window.controller = [];
@@ -145,7 +146,15 @@ export const loadUserData = async(Cookies): any => {
 
 export const setEnabledLinks = (component,data):void => {
 
-  component.querySelectorAll(`[data-product][data-feature]`).forEach((element) => {
+  const selector = `[data-product][data-feature]`;
+  const elements = component
+    ? [
+      ...component.querySelectorAll(selector),
+      ...(component.shadowRoot ? component.shadowRoot.querySelectorAll(selector) : []),
+    ]
+    : document.querySelectorAll(`iam-nav ${selector}`);
+
+  elements.forEach((element) => {
     const isEnabled = data.attributes.products[element.getAttribute('data-product')].features[element.getAttribute('data-feature')];
     element.setAttribute('data-is-enabled',isEnabled);
     if(isEnabled && element.getAttribute('data-enabled')){

package/assets/ts/modules/search.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import search, { datalistSelectOption, filterDatalist } from './search.ts';
+
+installTestDom();
+
+if (typeof globalThis.CustomEvent === 'undefined') {
+  globalThis.CustomEvent = class extends Event {
+    detail;
+
+    constructor(type, options = {}) {
+      super(type, options);
+      this.detail = options.detail;
+    }
+  };
+}
+
+describe('Search module', () => {
+  it('fetches GET results, builds datalist options and filters them by the search term', async () => {
+    let requestedUrl = '';
+    let requestedOptions;
+
+    globalThis.fetch = (url, options) => {
+      requestedUrl = url;
+      requestedOptions = options;
+
+      return Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            data: [
+              { value: 'alpha-id', label: 'Alpha\nTeam' },
+              { id: 'beta-id', title: 'Beta Team' },
+            ],
+          }),
+      });
+    };
+
+    const component = createElement('iam-search', { dataUrl: '/results' });
+    const input = createElement('input', { name: 'q', value: 'alpha & beta' });
+    const datalist = createElement('datalist');
+    append(component, input, datalist);
+
+    await search(component, datalist, 'alpha');
+
+    expect(requestedUrl === '/results?q=alpha%20%26%20beta');
+    expect(requestedOptions.method === 'GET');
+    expect(datalist.options.length === 2);
+    expect(datalist.options[0].value === 'alpha-id');
+    expect(datalist.options[0].textContent === 'Alpha, Team');
+    expect(!datalist.options[0].classList.contains('js-hide'));
+    expect(datalist.options[1].classList.contains('js-hide'));
+  });
+
+  it('posts form values and renders grouped response options with custom schemas', async () => {
+    let requestedUrl = '';
+    let requestedOptions;
+
+    globalThis.fetch = (url, options) => {
+      requestedUrl = url;
+      requestedOptions = options;
+
+      return Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            results: {
+              groups: {
+                Products: [{ code: 'eco', name: 'Ecosystem' }],
+                Learning: [{ code: 'guide', name: 'Guide' }],
+              },
+            },
+          }),
+      });
+    };
+
+    const component = createElement('iam-search', {
+      dataDisplaySchema: 'name',
+      dataMethod: 'POST',
+      dataSchema: 'results.groups',
+      dataUrl: '/lookup',
+      dataValueSchema: 'code',
+    });
+    const input = createElement('input', { name: 'market', value: 'auction' });
+    const select = createElement('select', { name: 'status', value: 'active' });
+    const datalist = createElement('datalist');
+    append(component, input, select, datalist);
+
+    await search(component, datalist, 'guide');
+
+    expect(requestedUrl === '/lookup');
+    expect(requestedOptions.method === 'POST');
+    expect(requestedOptions.body === '{"market":"auction","status":"active"}');
+    expect(datalist.options.length === 2);
+    expect(datalist.options[0].value === 'eco');
+    expect(datalist.options[0].textContent === 'Products: Ecosystem');
+    expect(datalist.options[0].classList.contains('js-hide'));
+    expect(datalist.options[1].textContent === 'Learning: Guide');
+    expect(!datalist.options[1].classList.contains('js-hide'));
+  });
+
+  it('filters datalist options using visible text before value', () => {
+    const datalist = createElement('datalist');
+    const visibleMatch = createElement('option', { value: 'hidden-value' }, 'Matching label');
+    const valueMatch = createElement('option', { value: 'value match' });
+    const noMatch = createElement('option', { value: 'elsewhere' }, 'Different label');
+    append(datalist, visibleMatch, valueMatch, noMatch);
+
+    filterDatalist(datalist, 'match');
+
+    expect(!visibleMatch.classList.contains('js-hide'));
+    expect(!valueMatch.classList.contains('js-hide'));
+    expect(noMatch.classList.contains('js-hide'));
+  });
+
+  it('selects a datalist option, stores alternate values and dispatches selection details', () => {
+    const component = createElement('iam-search');
+    const input = createElement('input', { name: 'product' });
+    const datalist = createElement('datalist');
+    const inactiveOption = createElement('option', { value: 'inactive-id' }, 'Inactive');
+    const option = createElement('option', { dataUrl: '/products/alpha', value: 'alpha-id' }, 'Alpha');
+    let selectedDetail;
+
+    component.addEventListener('option-selected', (event) => {
+      selectedDetail = event.detail;
+    });
+
+    append(datalist, inactiveOption, option);
+    append(component, input, datalist);
+
+    datalistSelectOption(component, input, option);
+
+    expect(input.value === 'Alpha');
+    expect(input.getAttribute('data-value') === 'Alpha');
+    expect(input.getAttribute('placeholder') === 'Alpha');
+    expect(component.innerHTML.includes('name="productAlt" value="alpha-id"'));
+    expect(option.classList.contains('active'));
+    expect(!inactiveOption.classList.contains('active'));
+    expect(selectedDetail.title === 'Alpha');
+    expect(selectedDetail.value === 'alpha-id');
+    expect(selectedDetail.url === '/products/alpha');
+  });
+});

package/assets/ts/modules/search.ts

@@ -0,0 +1,206 @@
+import { resolvePath, isTraversable } from './helpers';
+
+type SearchComponent = HTMLElement;
+type SearchFormControl = HTMLInputElement | HTMLSelectElement;
+type SearchResultItem = Record<string, unknown> | string | number | boolean | null | undefined;
+type SearchResponse = Record<string, unknown>;
+type WindowWithControllers = Window & {
+  controller?: Record<string, AbortController>;
+};
+
+interface OptionSelectedDetail {
+  title: string;
+  value: string;
+  url: string;
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === 'object' && !Array.isArray(value);
+
+const getResultValue = (item: SearchResultItem, key: string): unknown => (isRecord(item) ? item[key] : undefined);
+
+const toOptionText = (value: unknown): string => String(value ?? '').replace('\n', ', ');
+
+const appendDatalistOption = (
+  datalistElement: HTMLDataListElement,
+  item: SearchResultItem,
+  valueSchema: string,
+  displaySchema: string,
+  groupLabel = ''
+): void => {
+  const resolvedValue = resolvePath(item, valueSchema, undefined);
+  const resolvedDisplay = resolvePath(item, displaySchema, undefined);
+  const fallbackValue = isTraversable(item) ? '' : item;
+  const actualValue =
+    resolvedValue ??
+    getResultValue(item, 'value') ??
+    getResultValue(item, 'id') ??
+    resolvedDisplay ??
+    getResultValue(item, 'title') ??
+    getResultValue(item, 'label') ??
+    fallbackValue;
+  const displayValue = toOptionText(
+    resolvedDisplay ?? getResultValue(item, 'title') ?? getResultValue(item, 'label') ?? actualValue
+  );
+
+  if (!displayValue) return;
+
+  const optionElement = document.createElement('option');
+  optionElement.value = String(actualValue);
+  optionElement.textContent = `${groupLabel}${displayValue}`;
+  datalistElement.appendChild(optionElement);
+};
+
+const getFormControls = (component: SearchComponent): SearchFormControl[] =>
+  Array.from(component.querySelectorAll<SearchFormControl>('input,select'));
+
+const getSearchSchema = (component: SearchComponent, attributeName: string, fallback: string): string =>
+  component.hasAttribute(attributeName) ? component.getAttribute(attributeName) || '' : fallback;
+
+const search = async (
+  component: SearchComponent,
+  datalistElement: HTMLDataListElement,
+  searchTerm: string
+): Promise<void> => {
+  let url = component.getAttribute('data-url');
+
+  if (!url) return;
+
+  const method = component.getAttribute('data-method') || 'GET';
+  const body: Record<string, string> = {};
+  const searchWindow = window as WindowWithControllers;
+
+  // Setup controller vars if not already set
+  if (!searchWindow.controller) searchWindow.controller = {};
+
+  // Abort if controller already present for this url
+  if (searchWindow.controller[url]) searchWindow.controller[url].abort();
+
+  // Create a new controller so it can be aborted if new fetch made
+  searchWindow.controller[url] = new AbortController();
+  const { signal } = searchWindow.controller[url];
+
+  const requestOptions: RequestInit = {
+    signal,
+    method,
+    headers: new Headers({
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    }),
+  };
+
+  if (method.toUpperCase() === 'GET') {
+    getFormControls(component).forEach((input) => {
+      const name = input.getAttribute('name');
+      const value = input.value;
+
+      if (name && value) {
+        url += `${url.includes('?') ? '&' : '?'}${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+      }
+    });
+  } else {
+    getFormControls(component).forEach((input) => {
+      const name = input.getAttribute('name');
+      const value = input.value;
+
+      if (name && value) {
+        body[name] = value;
+      }
+    });
+
+    requestOptions['body'] = JSON.stringify(body);
+  }
+
+  try {
+    const response = await fetch(url, requestOptions);
+    const responseData = (await response.json()) as SearchResponse;
+    const loopSchema = getSearchSchema(component, 'data-schema', 'data');
+    const valueSchema = getSearchSchema(component, 'data-value-schema', 'value');
+    const displaySchema = getSearchSchema(component, 'data-display-schema', 'label');
+    const loopValues = resolvePath(responseData, loopSchema, []);
+
+    if (Array.isArray(loopValues)) {
+      loopValues.forEach((item: SearchResultItem) => {
+        appendDatalistOption(datalistElement, item, valueSchema, displaySchema);
+      });
+    } else if (isRecord(loopValues)) {
+      Object.entries(loopValues).forEach(([key, value]) => {
+        if (Array.isArray(value)) {
+          value.forEach((item: SearchResultItem) => {
+            appendDatalistOption(datalistElement, item, valueSchema, displaySchema, `${key}: `);
+          });
+        }
+      });
+    }
+
+    filterDatalist(datalistElement, searchTerm);
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const filterDatalist = (datalistElement: HTMLDataListElement, searchTerm: string): void => {
+  for (const optionElement of datalistElement.options) {
+    const optionText = optionElement.textContent?.trim() || optionElement.value;
+    if (optionText.toLowerCase().includes(searchTerm.toLowerCase())) {
+      optionElement.classList.remove('js-hide');
+    } else {
+      optionElement.classList.add('js-hide');
+    }
+  }
+};
+
+export const datalistSelectOption = (
+  component: SearchComponent,
+  inputElement: HTMLInputElement,
+  optionElement: HTMLOptionElement
+): void => {
+  const datalistElement = optionElement.closest<HTMLDataListElement>('datalist');
+  const optionText = optionElement.textContent?.trim() || optionElement.value;
+  const inputName = inputElement.getAttribute('name') || '';
+  const alternateInputName = `${inputName}Alt`;
+
+  inputElement.value = optionText;
+  inputElement.setAttribute('data-value', optionText);
+  //inputElement.setAttribute('data-placeholder', optionText);
+  inputElement.setAttribute('placeholder', optionText);
+
+  // Make sure the value of the option is passed when in a form
+  if (optionElement.value && optionElement.value !== optionText) {
+
+
+    const alternateInput = component.querySelector<HTMLInputElement>(`input[name="${alternateInputName}"]`);
+
+    if (!alternateInput)
+      component.insertAdjacentHTML(
+        'beforeend',
+        `<input type="hidden" name="${alternateInputName}" value="${optionElement.value}">`
+      );
+    else alternateInput.value = optionElement.value;
+  } else {
+
+    const alternateInput = component.querySelector<HTMLInputElement>(`input[name="${alternateInputName}"]`);
+
+    if (alternateInput) alternateInput.remove();
+  }
+
+  // Set the active value on the datalist option
+  if (!datalistElement) return;
+  for (const optionLoopElement of datalistElement.options) {
+    if (optionLoopElement === optionElement) optionLoopElement.classList.add('active');
+    else optionLoopElement.classList.remove('active');
+  }
+
+
+  const customEvent = new CustomEvent<OptionSelectedDetail>('option-selected', {
+    detail: {
+      title: optionText,
+      value: optionElement.value || '',
+      url: optionElement.hasAttribute('data-url') ? optionElement.getAttribute('data-url') || '' : '',
+    },
+  });
+
+  component.dispatchEvent(customEvent);
+};
+
+export default search;

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