import { newSpecPage } from '@stencil/core/testing';
import { BsDropdown } from '../bs-dropdown';
import { faker } from '@faker-js/faker';
import { fireEvent } from '@testing-library/dom';
describe('bs-dropdown', () => {
  describe('rendering', () => {
    // renders basic
    it('renders', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}">
          ${content}
        </bs-dropdown>`
      });
      expect(page.root).toEqualHtml(`
        <bs-dropdown toggle-id="${toggleId}">
          <div style="position: relative;">
            <bs-transition enterattribute="data-shown" enterduration="75">
              <div class="bs-dropdown" style="--dropdown-wscreen-top: 8px; --dropdown-wscreen-bottom: auto; --dropdown-wscreen-left: 0px;">
                ${content}
              </div>
            </bs-transition>
          </div>
        </bs-dropdown>
      `);
    });
    // renders width
    it('should render with width', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}" width="sm">
          ${content}
        </bs-dropdown>`
      });
      const bsDropdownDiv = page.root.querySelector('.bs-dropdown');
      expect(bsDropdownDiv.getAttribute('data-width')).toBe('sm');
    });
    // renders no width on toggle
    it('should not show width on `toggle` width', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}" width="toggle">
          ${content}
        </bs-dropdown>`
      });
      const bsDropdownDiv = page.root.querySelector('.bs-dropdown');
      expect(bsDropdownDiv.getAttribute('data-width')).toBeNull();
    });
    // container ID
    it('should render with a defined container ID', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const containerId = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}" container-id="${containerId}">
          ${content}
        </bs-dropdown>
        <div id=${containerId}></div>`
      });
      expect(page.root).toEqualHtml(`
        <bs-dropdown container-id="${containerId}" toggle-id="${toggleId}">
          <bs-transition enterattribute="data-shown" enterduration="75">
            <div
              class="bs-dropdown"
              style="--dropdown-wscreen-top: 8px; --dropdown-wscreen-bottom: auto; --dropdown-wscreen-left: 0px;"
            >
              ${content}
            </div>
          </bs-transition>
        </bs-dropdown>
      `);
    });
    // top
    it('should render when top is set', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}" top>
          ${content}
        </bs-dropdown>`
      });
      expect(page.root).toEqualHtml(`
        <bs-dropdown toggle-id="${toggleId}" top="">
          <div style="position: relative;">
            <bs-transition enterattribute="data-shown" enterduration="75">
              <div
                class="bs-dropdown"
                style="--dropdown-wscreen-top: auto; --dropdown-wscreen-bottom: 8px; --dropdown-wscreen-left: 0px;"
              >
                ${content}
              </div>
            </bs-transition>
          </div>
        </bs-dropdown>
      `);
    });
    // center
    it('should render when center is set', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}" center>
          ${content}
        </bs-dropdown>`
      });
      expect(page.root).toEqualHtml(`
        <bs-dropdown toggle-id="${toggleId}" center="">
          <div style="position: relative;">
            <bs-transition enterattribute="data-shown" enterduration="75">
              <div
                class="bs-dropdown"
                style="--dropdown-wscreen-top: 8px; --dropdown-wscreen-bottom: auto; --dropdown-wscreen-left: 0px;"
              >
                ${content}
              </div>
            </bs-transition>
          </div>
        </bs-dropdown>
      `);
    });
    // header
    it('should render when header is set', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const header = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}" helper-text="${header}">
          ${content}
        </bs-dropdown>`
      });
      expect(page.root).toEqualHtml(`
        <bs-dropdown helper-text="${header}" toggle-id="${toggleId}">
          <div style="position: relative;">
            <bs-transition enterattribute="data-shown" enterduration="75">
              <div class="bs-dropdown" style="--dropdown-wscreen-top: 8px; --dropdown-wscreen-bottom: auto; --dropdown-wscreen-left: 0px;">
                <header>
                  <h3>
                    ${header}
                  </h3>
                </header>
                ${content}
              </div>
            </bs-transition>
          </div>
        </bs-dropdown>
      `);
    });
    // header description
    it('should render when header is set', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const header = faker.random.alphaNumeric(10);
      const headerDescription = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown
          toggle-id="${toggleId}"
          helper-text="${header}"
          helper-description="${headerDescription}"
        >
          ${content}
        </bs-dropdown>`
      });
      expect(page.root).toEqualHtml(`
        <bs-dropdown helper-description="${headerDescription}" helper-text="${header}" toggle-id="${toggleId}">
          <div style="position: relative;">
            <bs-transition enterattribute="data-shown" enterduration="75">
              <div class="bs-dropdown" style="--dropdown-wscreen-top: 8px; --dropdown-wscreen-bottom: auto; --dropdown-wscreen-left: 0px;">
                <header>
                  <h3>
                    ${header}
                  </h3>
                  <p>
                    ${headerDescription}
                  </p>
                </header>
                ${content}
              </div>
            </bs-transition>
          </div>
        </bs-dropdown>
      `);
    });
  });
  describe('event handling', () => {
    // any key
    it('should not emit when visible and a non-escape key pressed', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}">
          ${content}
        </bs-dropdown>`
      });
      page.rootInstance.isVisible = true;
      const handler = jest.fn();
      page.root.addEventListener('close', handler);
      fireEvent.keyDown(window, { key: 'Enter' });
      expect(handler).not.toHaveBeenCalled();
    });
    // escape key
    it('should emit when visible and escape key pressed', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}">
          ${content}
        </bs-dropdown>`
      });
      page.rootInstance.isVisible = true;
      const handler = jest.fn();
      page.root.addEventListener('close', handler);
      fireEvent.keyDown(window, { key: 'Escape' });
      expect(handler).toHaveBeenCalled();
    });
    // escape key not visible
    it('should not emit when not visible and escape key pressed', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}">
          ${content}
        </bs-dropdown>`
      });
      page.rootInstance.isVisible = false;
      const handler = jest.fn();
      page.root.addEventListener('close', handler);
      fireEvent.keyDown(window, { key: 'Escape' });
      expect(handler).not.toHaveBeenCalled();
    });
    // click outside
    it('should emit when visible and clicking outside', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}">
          ${content}
        </bs-dropdown>
        <div id="other-area"></div>`
      });
      page.rootInstance.isVisible = true;
      const handler = jest.fn();
      page.root.addEventListener('close', handler);
      const otherArea = page.doc.getElementById('other-area');
      fireEvent.click(otherArea);
      expect(handler).toHaveBeenCalled();
    });
    // click inside
    it('should not emit when visible and clicking inside', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}">
          ${content}
        </bs-dropdown>
        <div id="other-area"></div>`
      });
      page.rootInstance.isVisible = false;
      const handler = jest.fn();
      page.root.addEventListener('close', handler);
      const innerArea = page.root.querySelector('.bs-dropdown');
      fireEvent.click(innerArea);
      expect(handler).not.toHaveBeenCalled();
    });
    // click toggle
    it('should not emit when visible and clicking the toggle', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}">
          ${content}
        </bs-dropdown>
        <div id="other-area"></div>`
      });
      page.rootInstance.isVisible = true;
      const handler = jest.fn();
      page.root.addEventListener('close', handler);
      const innerArea = page.doc.getElementById(toggleId);
      fireEvent.click(innerArea);
      expect(handler).not.toHaveBeenCalled();
    });
    // click when not visible
    it('should not emit when not visible and clicking outside', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}">
          ${content}
        </bs-dropdown>
        <div id="other-area"></div>`
      });
      page.rootInstance.isVisible = false;
      const handler = jest.fn();
      page.root.addEventListener('close', handler);
      const otherArea = page.doc.getElementById('other-area');
      fireEvent.click(otherArea);
      expect(handler).not.toHaveBeenCalled();
    });
    // enter end
    it('should emit and set visible when transition enter ends', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}">
          ${content}
        </bs-dropdown>
        <div id="other-area"></div>`
      });
      const handler = jest.fn();
      page.root.addEventListener('enterend', handler);
      const transition = page.root.querySelector('bs-transition');
      fireEvent(transition, new CustomEvent('enterend'));
      expect(handler).toHaveBeenCalled();
      expect(page.rootInstance.isVisible).toBe(true);
    });
    // leave end
    it('should emit when transition leave ends', async () => {
      const toggleId = faker.random.alphaNumeric(10);
      const content = faker.random.words(10);
      const page = await newSpecPage({
        components: [BsDropdown],
        html: `<button type="button" id="${toggleId}">
          Show Content...
        </button>
        <bs-dropdown toggle-id="${toggleId}">
          ${content}
        </bs-dropdown>
        <div id="other-area"></div>`
      });
      const handler = jest.fn();
      page.root.addEventListener('leaveend', handler);
      const transition = page.root.querySelector('bs-transition');
      fireEvent(transition, new CustomEvent('leaveend'));
      expect(handler).toHaveBeenCalled();
    });
  });
});
//# sourceMappingURL=bs-dropdown.spec.js.map
