import { newSpecPage } from '@stencil/core/testing';
import { faker } from '@faker-js/faker';
import { BsButton } from '../bs-button';
import { queryByText } from '@testing-library/dom';
const label = faker.random.word();
const variant = 'secondary';
const size = 'sm';
const href = faker.internet.url();
const title = faker.random.word();
describe('bs-button', () => {
  it('renders slotted content', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button>${label}</bs-button>`,
    });
    const btn = queryByText(page.root, label);
    expect(btn).toBeTruthy();
  });
  it('sets button data attributes from host attributes', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button size="${size}" variant="${variant}">${label}</bs-button>`,
    });
    const btn = queryByText(page.root, label);
    expect(btn.getAttribute('data-size')).toBe(size);
    expect(btn.getAttribute('data-variant')).toBe(variant);
  });
  it('renders <button> tag with default "type" attr', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button>${label}</bs-button>`,
    });
    const btn = queryByText(page.root, label);
    expect(btn.getAttribute('type')).toBe('button');
  });
  it('renders <button> tag with given "type" attr', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button type="submit">${label}</bs-button>`,
    });
    const btn = queryByText(page.root, label);
    expect(btn.getAttribute('type')).toBe('submit');
  });
  it('renders <button> tag with "disabled" attr', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button disabled>${label}</bs-button>`,
    });
    const btn = queryByText(page.root, label);
    expect(btn).toHaveAttribute('disabled');
  });
  // this isn't working as expected -- skipping for now but need to revisit.
  it.skip('disables pointer events on host tag when disabled', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button disabled="true">${label}</bs-button>`,
    });
    let clickHandler = jest.fn();
    let component = page.root;
    component.addEventListener('click', clickHandler);
    component.click();
    component.click();
    expect(clickHandler).toHaveBeenCalledTimes(0);
    component.disabled = false;
    await page.waitForChanges();
    component.click();
    expect(clickHandler).toHaveBeenCalledTimes(1);
  });
  it('renders an anchor tag if href prop is passed', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button href="${href}">${label}</bs-button>`,
    });
    const aTag = page.root.querySelector('a');
    expect(aTag).toBeTruthy();
    expect(aTag.getAttribute('href')).toBe(href);
    expect(queryByText(page.root, label));
  });
  it('does not render <a> tag with "type" attr', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button href="${href}" type="submit">${label}</bs-button>`,
    });
    const btn = queryByText(page.root, label);
    expect(btn.getAttribute('type')).toBeNull();
  });
  it('properly disables <a> tag', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button href="${href}" disabled>${label}</bs-button>`,
    });
    const btn = queryByText(page.root, label);
    expect(btn.getAttribute('disabled')).toBeNull();
    expect(btn.getAttribute('aria-disabled')).toBe('true');
    expect(btn.tabIndex).toBe(-1);
  });
  it('passes through attributes as needed', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button size="${size}"
        variant="${variant}"
        href="${href}"
        target="_blank"
        title="${title}"
      >
        ${label}
      </bs-button>`,
    });
    const aTag = page.root.querySelector('a');
    expect(aTag.getAttribute('data-size')).toBe(size);
    expect(aTag.getAttribute('data-variant')).toBe(variant);
    expect(aTag.getAttribute('href')).toBe(href);
    expect(aTag.getAttribute('target')).toBe('_blank');
    expect(aTag.getAttribute('title')).toBe(title);
    expect(queryByText(page.root, label));
  });
  it('emits click events from native button', async () => {
    const page = await newSpecPage({
      components: [BsButton],
      html: `<bs-button></bs-button>`,
    });
    let clickHandler = jest.fn();
    let component = page.doc.querySelector('bs-button');
    let childBtn = component.querySelector('button');
    component.addEventListener('click', clickHandler);
    childBtn.click();
    childBtn.click();
    expect(clickHandler).toHaveBeenCalledTimes(2);
  });
});
//# sourceMappingURL=bs-button.spec.js.map
