import { newSpecPage } from '@stencil/core/testing';
import { BsDropdownOption } from '../bs-dropdown-option';
import { faker } from '@faker-js/faker';
import { fireEvent } from '@testing-library/dom';
describe('bs-dropdown-option', () => {
  describe('rendering', () => {
    // renders basic
    it('renders', async () => {
      const optionsId = faker.random.alphaNumeric(10);
      const content = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdownOption],
        html: `<bs-dropdown-option options-id="${optionsId}" index="0">${content}</bs-dropdown-option>`
      });
      expect(page.root).toEqualHtml(`<bs-dropdown-option
        index="0"
        options-id="${optionsId}"
      >
        <li id="${optionsId}-option-0" role="option" tabindex="-1">
          ${content}
        </li>
     </bs-dropdown-option>`);
    });
    // data-selected
    it('should have selected attributes when selected', async () => {
      const optionsId = faker.random.alphaNumeric(10);
      const content = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdownOption],
        html: `<bs-dropdown-option
          options-id="${optionsId}"
          index="0"
          selected
        >
          ${content}
        </bs-dropdown-option>`
      });
      const liEl = page.root.querySelector('li');
      expect(liEl.getAttribute('data-selected')).toBe('');
      expect(liEl.getAttribute('aria-selected')).toBe('true');
    });
    // data-variant
    it('should have variant attribute when variant provided', async () => {
      const optionsId = faker.random.alphaNumeric(10);
      const content = faker.random.alphaNumeric(10);
      const description = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdownOption],
        html: `<bs-dropdown-option
          options-id="${optionsId}"
          index="0"
          variant="description"
        >
          <span>${content}</span>
          <span>${description}</span>
        </bs-dropdown-option>`
      });
      const liEl = page.root.querySelector('li');
      expect(liEl.getAttribute('data-variant')).toBe('description');
    });
    // focused
    it('should focus the option when given', async () => {
      const optionsId = faker.random.alphaNumeric(10);
      const content = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdownOption],
        html: `<bs-dropdown-option options-id="${optionsId}" index="0">
          ${content}
        </bs-dropdown-option>`
      });
      const liEl = page.root.querySelector('li');
      const mockFocus = jest.fn();
      liEl.focus = mockFocus;
      page.root.setAttribute('focused', '');
      await page.waitForChanges();
      expect(mockFocus).toHaveBeenCalled();
    });
  });
  describe('event handling', () => {
    // keydown: space
    it('should emit with Space keydown', async () => {
      const optionsId = faker.random.alphaNumeric(10);
      const content = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdownOption],
        html: `<bs-dropdown-option
          options-id="${optionsId}"
          index="0"
        >
          ${content}
        </bs-dropdown-option>`
      });
      const mockEv = jest.fn();
      page.root.addEventListener('optselect', mockEv);
      fireEvent.keyDown(page.root, { key: ' ' });
      expect(mockEv).toHaveBeenCalled();
    });
    // keydown: enter
    it('should emit with Enter keydown', async () => {
      const optionsId = faker.random.alphaNumeric(10);
      const content = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdownOption],
        html: `<bs-dropdown-option
          options-id="${optionsId}"
          index="0"
        >
          ${content}
        </bs-dropdown-option>`
      });
      const mockEv = jest.fn();
      page.root.addEventListener('optselect', mockEv);
      fireEvent.keyDown(page.root, { key: 'Enter' });
      expect(mockEv).toHaveBeenCalled();
    });
    // keydown: numpad enter
    it('should emit with NumpadEnter keydown', async () => {
      const optionsId = faker.random.alphaNumeric(10);
      const content = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdownOption],
        html: `<bs-dropdown-option
          options-id="${optionsId}"
          index="0"
        >
          ${content}
        </bs-dropdown-option>`
      });
      const mockEv = jest.fn();
      page.root.addEventListener('optselect', mockEv);
      fireEvent.keyDown(page.root, { key: 'NumpadEnter' });
      expect(mockEv).toHaveBeenCalled();
    });
    // mouseenter
    it('should emit when mouse enters', async () => {
      const optionsId = faker.random.alphaNumeric(10);
      const content = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdownOption],
        html: `<bs-dropdown-option options-id="${optionsId}" index="0">
          ${content}
        </bs-dropdown-option>`
      });
      const mockEv = jest.fn();
      page.root.addEventListener('optmouseenter', mockEv);
      fireEvent.mouseEnter(page.root);
      expect(mockEv).toHaveBeenCalled();
    });
    // click
    it('should emit when clicking an option', async () => {
      const optionsId = faker.random.alphaNumeric(10);
      const content = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdownOption],
        html: `<bs-dropdown-option options-id="${optionsId}" index="0">
          ${content}
        </bs-dropdown-option>`
      });
      const mockEv = jest.fn();
      page.root.addEventListener('optselect', mockEv);
      fireEvent.click(page.root);
      expect(mockEv).toHaveBeenCalled();
    });
    // click with link
    it('should emit when clicking an option and click slotted link', async () => {
      const optionsId = faker.random.alphaNumeric(10);
      const content = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdownOption],
        html: `<bs-dropdown-option options-id="${optionsId}" index="0">
          <a>${content}</a>
        </bs-dropdown-option>`
      });
      const mockEv = jest.fn();
      page.root.addEventListener('optselect', mockEv);
      const mockAEv = jest.fn();
      const link = page.root.querySelector('a');
      link.addEventListener('click', mockAEv);
      fireEvent.click(page.root);
      expect(mockEv).toHaveBeenCalled();
      expect(mockAEv).toHaveBeenCalled();
    });
  });
});
//# sourceMappingURL=bs-dropdown-option.spec.js.map
