import { newSpecPage } from '@stencil/core/testing';
import { BsDropdownWithOptions } from '../bs-dropdown-with-options';
import { faker } from '@faker-js/faker';
import { fireEvent } from '@testing-library/dom';
describe('bs-dropdown-with-options', () => {
  describe('rendering', () => {
    let toggleId;
    let optionsId;
    let content;
    beforeEach(() => {
      toggleId = faker.random.alphaNumeric(10);
      optionsId = faker.random.alphaNumeric(10);
      content = faker.random.words(10);
    });
    // renders basic
    it('renders', async () => {
      const page = await newSpecPage({
        components: [BsDropdownWithOptions],
        html: `<bs-dropdown-with-options
          toggle-id="${toggleId}"
          options-id="${optionsId}"
        >
          ${content}
        </bs-dropdown-with-options>`
      });
      expect(page.root).toEqualHtml(`
        <bs-dropdown-with-options options-id="${optionsId}" toggle-id="${toggleId}">
          <bs-dropdown toggleid="${toggleId}">
            <bs-dropdown-option-list focusdelay=\"0\" optionsid="${optionsId}">
              ${content}
            </bs-dropdown-option-list>
          </bs-dropdown>
        </bs-dropdown-with-options>
      `);
    });
  });
  describe('event handling', () => {
    let toggleId;
    let optionsId;
    beforeEach(() => {
      toggleId = faker.random.alphaNumeric(10);
      optionsId = faker.random.alphaNumeric(10);
    });
    // enter end
    it('should emit when transition enter ends', async () => {
      const page = await newSpecPage({
        components: [BsDropdownWithOptions],
        html: `<bs-dropdown-with-options
          toggle-id="${toggleId}"
          options-id="${optionsId}"
        >
        </bs-dropdown-options>`
      });
      const handler = jest.fn();
      page.root.addEventListener('enterend', handler);
      const transition = page.root.querySelector('bs-dropdown');
      fireEvent(transition, new CustomEvent('enterend'));
      expect(handler).toHaveBeenCalled();
    });
    // leave end
    it('should emit when transition leave ends', async () => {
      const page = await newSpecPage({
        components: [BsDropdownWithOptions],
        html: `<bs-dropdown-with-options
          toggle-id="${toggleId}"
          options-id="${optionsId}"
        >
        </bs-dropdown-options>`
      });
      const handler = jest.fn();
      page.root.addEventListener('leaveend', handler);
      const transition = page.root.querySelector('bs-dropdown');
      fireEvent(transition, new CustomEvent('leaveend'));
      expect(handler).toHaveBeenCalled();
    });
    // close event from dropdown
    it('should emit when dropdown closes', async () => {
      const page = await newSpecPage({
        components: [BsDropdownWithOptions],
        html: `<bs-dropdown-with-options
          toggle-id="${toggleId}"
          options-id="${optionsId}"
        >
        </bs-dropdown-options>`
      });
      const handler = jest.fn();
      page.root.addEventListener('close', handler);
      page.rootInstance.isVisible = true;
      const transition = page.root.querySelector('bs-dropdown');
      fireEvent(transition, new CustomEvent('close'));
      expect(handler).toHaveBeenCalled();
    });
    // close event from option list
    it('should emit when option list closes', async () => {
      const page = await newSpecPage({
        components: [BsDropdownWithOptions],
        html: `<bs-dropdown-with-options
          toggle-id="${toggleId}"
          options-id="${optionsId}"
        >
        </bs-dropdown-options>`
      });
      const handler = jest.fn();
      page.root.addEventListener('close', handler);
      page.rootInstance.isVisible = true;
      const optionList = page.root.querySelector('bs-dropdown-option-list');
      fireEvent(optionList, new CustomEvent('close'));
      expect(handler).toHaveBeenCalled();
    });
    // option select
    it('should emit when option is selected', async () => {
      const optionValue = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdownWithOptions],
        html: `<bs-dropdown-with-options
          toggle-id="${toggleId}"
          options-id="${optionsId}"
        >
        </bs-dropdown-options>`
      });
      const handler = jest.fn();
      page.root.addEventListener('optselected', handler);
      const optionList = page.root.querySelector('bs-dropdown-option-list');
      const ev = new CustomEvent('optselected', { detail: optionValue });
      fireEvent(optionList, ev);
      expect(handler).toHaveBeenCalled();
    });
    it('should not emit when not visible and closing', async () => {
      const page = await newSpecPage({
        components: [BsDropdownWithOptions],
        html: `<bs-dropdown-with-options
          toggle-id="${toggleId}"
          options-id="${optionsId}"
        >
        </bs-dropdown-options>`
      });
      const handler = jest.fn();
      page.root.addEventListener('close', handler);
      page.rootInstance.isVisible = false;
      const optionList = page.root.querySelector('bs-dropdown-option-list');
      fireEvent(optionList, new CustomEvent('close'));
      expect(handler).not.toHaveBeenCalled();
    });
  });
});
//# sourceMappingURL=bs-dropdown-with-options.spec.js.map
