// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../../../../test/src/custom_typings/chai.d.ts" />
/* eslint-disable no-undef */
import { ZuiButtonGroup } from '@zywave/zui-button';
import { assert } from '@esm-bundle/chai';
import { constructHtml } from '../../../../test/src/util/helpers';

suite('zui-button-group', () => {
  let element: ZuiButtonGroup;

  setup(() => {
    element = document.createElement('zui-button-group') as ZuiButtonGroup;
    document.body.appendChild(element);
  });

  teardown(() => {
    document.body.removeChild(element);
  });

  test('initializes as a ZuiButtonGroup', () => {
    assert.instanceOf(element, ZuiButtonGroup);
  });

  test('ZuiButtonGroup properly slots in pieces', async () => {
    const buttonText = 'one';
    const buttonDropdownText = 'dropdown';
    const slotStr = `
      <zui-button>${buttonText}</zui-button>
      <zui-button-dropdown>${buttonDropdownText}</zui-button-dropdown>
    `;
    const slot = constructHtml(slotStr);
    element.appendChild(slot);
    await element.updateComplete;
    const slottedNodes = element.shadowRoot!.querySelector('slot').assignedNodes();
    const slottedButton = slottedNodes.find(
      (x) => x.nodeType === Node.ELEMENT_NODE && (x as HTMLElement).matches('zui-button')
    ) as HTMLElement | undefined;
    const slottedButtonDropdown = slottedNodes.find(
      (x) => x.nodeType === Node.ELEMENT_NODE && (x as HTMLElement).matches('zui-button-dropdown')
    ) as HTMLElement | undefined;
    assert.isDefined(slottedButton);
    assert.isDefined(slottedButtonDropdown);
  });
});