import { newSpecPage } from '@stencil/core/testing';
import { faker } from '@faker-js/faker';
import { queryByText } from '@testing-library/dom';
import { BsCircleButton } from '../bs-circle-button';
const label = faker.random.words();
const size = 'sm';
const href = faker.internet.url();
const title = faker.random.word();
const icons = ['color-youtube', 'color-wwt-logo', 'biplane', 'caret-right', 'caret-left'];
const icon = icons[Math.floor(Math.random() * icons.length)];
describe('bs-circle-button', () => {
  it('renders icon', async () => {
    const page = await newSpecPage({
      components: [BsCircleButton],
      html: `<bs-circle-button icon="${icon}"></bs-circle-button>`,
    });
    const renderedIcon = page.root.querySelector(`bs-icon-${icon}`);
    expect(renderedIcon).toBeTruthy();
  });
  it('renders icon with text', async () => {
    const page = await newSpecPage({
      components: [BsCircleButton],
      html: `<bs-circle-button
        icon="${icon}"
        label="${label}"
        text-btn="true"
      ></bs-circle-button>`,
    });
    expect(queryByText(page.root, label)).toBeTruthy();
    const renderedIcon = page.root.querySelector(`bs-icon-${icon}`);
    expect(renderedIcon).toBeTruthy();
  });
  it('renders icon on the correct side', async () => {
    const page = await newSpecPage({
      components: [BsCircleButton],
      html: `<bs-circle-button
        icon="${icon}"
        label="${label}" text-btn="true"></bs-circle-button>`,
    });
    const btn = page.root.firstElementChild;
    const btnChildren = btn.children;
    expect(btnChildren[0]).not.toHaveClass('bs-circle-button-icon');
    expect(btnChildren[1]).toHaveClass('bs-circle-button-icon');
    page.root.iconPosition = 'left';
    await page.waitForChanges();
    expect(btnChildren[0]).toHaveClass('bs-circle-button-icon');
    expect(btnChildren[1]).not.toHaveClass('bs-circle-button-icon');
    page.root.iconPosition = 'right';
    await page.waitForChanges();
    expect(btnChildren[0]).not.toHaveClass('bs-circle-button-icon');
    expect(btnChildren[1]).toHaveClass('bs-circle-button-icon');
  });
  it('sets button data attributes from host attributes', async () => {
    const page = await newSpecPage({
      components: [BsCircleButton],
      html: `<bs-circle-button
        size="${size}"
        label="${label}"
        text-btn="true"
        ghost-btn="true"
      ></bs-circle-button>`,
    });
    const btn = page.root.firstElementChild;
    expect(btn.getAttribute('data-size')).toBe(size);
    expect(btn).toHaveAttribute('data-ghost');
    expect(btn).toHaveAttribute('data-text');
    page.root.size = undefined;
    page.root.textBtn = false;
    page.root.ghostBtn = false;
    await page.waitForChanges();
    expect(btn).not.toHaveAttribute('data-size');
    expect(btn).not.toHaveAttribute('data-ghost');
    expect(btn).not.toHaveAttribute('data-text');
    expect(btn).toHaveAttribute('aria-label');
    expect(btn.getAttribute('aria-label')).toBe(label);
    expect(btn).not.toHaveAttribute('title');
    page.root.href = '#';
    await page.waitForChanges();
    const anchor = page.root.firstElementChild;
    expect(anchor).not.toHaveAttribute('aria-label');
    expect(anchor).toHaveAttribute('title');
    expect(anchor.getAttribute('title')).toBe(label);
  });
  it('renders <button> tag with default "type" attr', async () => {
    const page = await newSpecPage({
      components: [BsCircleButton],
      html: `<bs-circle-button>${label}</bs-circle-button>`,
    });
    const btn = page.root.firstElementChild;
    expect(btn.getAttribute('type')).toBe('button');
  });
  it('renders <button> tag with given "type" attr', async () => {
    const page = await newSpecPage({
      components: [BsCircleButton],
      html: `<bs-circle-button type="submit">${label}</bs-circle-button>`,
    });
    const btn = page.root.firstElementChild;
    expect(btn.getAttribute('type')).toBe('submit');
  });
  it('renders <button> tag with "disabled" attr', async () => {
    const page = await newSpecPage({
      components: [BsCircleButton],
      html: `<bs-circle-button disabled>${label}</bs-circle-button>`,
    });
    const btn = page.root.firstElementChild;
    expect(btn).toHaveAttribute('disabled');
  });
  it('renders an anchor tag if href prop is passed', async () => {
    const page = await newSpecPage({
      components: [BsCircleButton],
      html: `<bs-circle-button href="${href}" label="${label}" text-btn="true"></bs-circle-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: [BsCircleButton],
      html: `<bs-circle-button href="${href}" type="submit" label="${label}" text-btn="true"></bs-circle-button>`,
    });
    const btn = page.root.firstElementChild;
    expect(btn.getAttribute('type')).toBeNull();
  });
  it('properly disables <a> tag', async () => {
    const page = await newSpecPage({
      components: [BsCircleButton],
      html: `<bs-circle-button href="${href}" disabled label="${label}" text-btn="true"></bs-circle-button>`,
    });
    const anchor = page.root.firstElementChild;
    expect(anchor.getAttribute('disabled')).toBeNull();
    expect(anchor.getAttribute('aria-disabled')).toBe('true');
    expect(anchor.tabIndex).toBe(-1);
  });
  it('passes through attributes as needed', async () => {
    const page = await newSpecPage({
      components: [BsCircleButton],
      html: `<bs-circle-button size="${size}"
        href="${href}"
        target="_blank"
        title="${title}"
        label="${label}"
        text-btn="true"
      >
      </bs-circle-button>`,
    });
    const aTag = page.root.querySelector('a');
    expect(aTag.getAttribute('data-size')).toBe(size);
    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: [BsCircleButton],
      html: `<bs-circle-button></bs-circle-button>`,
    });
    let clickHandler = jest.fn();
    let component = page.doc.querySelector('bs-circle-button');
    let childBtn = component.querySelector('button');
    component.addEventListener('click', clickHandler);
    childBtn.click();
    childBtn.click();
    expect(clickHandler).toHaveBeenCalledTimes(2);
  });
});
//# sourceMappingURL=bs-circle-button.spec.js.map
