import { newSpecPage } from '@stencil/core/testing';
import { BsInputSearch } from '../bs-input-search';
import { faker } from '@faker-js/faker';
import { BsInput } from '../../bs-input/bs-input';
describe('bs-input-search', () => {
  describe('rendering', () => {
    // renders basic
    it('renders', async () => {
      const page = await newSpecPage({
        components: [BsInputSearch],
        html: `<bs-input-search />`
      });
      expect(page.root).toEqualHtml(`
        <bs-input-search>
          <bs-input-addon>
            <bs-icon-search></bs-icon-search>
            <bs-input
              aria-label="Search Items"
              data-autowidth
              pass-attrs="aria-label,"
              placeholder="Search Items"
              value=""
            ></bs-input>
            <button title="Clear" type="button">
              <bs-icon-close size="sm"></bs-icon-close>
            </button>
          </bs-input-addon>
        </bs-input-search>
      `);
    });
    // renders disabled
    it('should render disabled', async () => {
      const page = await newSpecPage({
        components: [BsInputSearch],
        html: `<bs-input-search disabled />`
      });
      const bsInputAddon = page.root.querySelector('bs-input-addon');
      expect(bsInputAddon.getAttribute('disabled')).toBe('');
      expect(bsInputAddon.querySelector('bs-input').getAttribute('disabled')).toBe('');
      expect(bsInputAddon.querySelector('button')).toBeNull();
    });
    // pass down an attr or two
    it('should pass down some attributes', async () => {
      const maxlen = faker.datatype.number(100);
      const name = faker.random.word();
      const page = await newSpecPage({
        components: [BsInputSearch],
        html: `<bs-input-search maxlength="${maxlen}" name="${name}" />`
      });
      const input = page.root.querySelector('bs-input-addon bs-input');
      expect(input.getAttribute('maxlength')).toBe(maxlen.toString());
      expect(input.getAttribute('name')).toBe(name);
    });
    it('should pass down the inputId', async () => {
      const id = faker.random.alphaNumeric(10);
      const page = await newSpecPage({
        components: [BsInputSearch],
        html: `<bs-input-search input-id="${id}" />`
      });
      const input = page.root.querySelector('bs-input');
      expect(input.getAttribute('input-id')).toBe(id);
    });
  });
  describe('event handling', () => {
    it('should emit event on clear button click', async () => {
      const page = await newSpecPage({
        components: [BsInputSearch, BsInput],
        html: `<bs-input-search />`
      });
      const handler = jest.fn();
      page.root.addEventListener('clear', handler);
      const button = page.root.querySelector('bs-input-addon button');
      button.click();
      expect(handler).toHaveBeenCalled();
    });
  });
});
//# sourceMappingURL=bs-input-search.spec.js.map
