import { newSpecPage } from '@stencil/core/testing';
import { BsPill } from '../bs-pill';
import { faker } from '@faker-js/faker';
import { queryByText } from '@testing-library/dom';
const label = faker.random.word();
describe('bs-pill', () => {
  it('renders pill content via default slot', async () => {
    const page = await newSpecPage({
      components: [BsPill],
      html: `<bs-pill>${label}</bs-pill>`,
    });
    const pill = queryByText(page.root, label);
    expect(pill).toBeTruthy();
  });
  it('renders a <span> tag by default', async () => {
    const page = await newSpecPage({
      components: [BsPill],
      html: `<bs-pill>${label}</bs-pill>`,
    });
    const pill = page.root.querySelector('.bs-pill');
    expect(pill.tagName).toBe('SPAN');
  });
  it('renders an <a> tag when href prop exists', async () => {
    const page = await newSpecPage({
      components: [BsPill],
      html: `<bs-pill href="#">${label}</bs-pill>`,
    });
    const pill = page.root.querySelector('.bs-pill');
    expect(queryByText(page.root, label)).toBeTruthy();
    expect(pill.tagName).toBe('A');
  });
  it('renders a <button> tag when onclick exists', async () => {
    const page = await newSpecPage({
      components: [BsPill],
      html: `<bs-pill onclick="${Function}">${label}</bs-pill>`,
    });
    const pill = page.root.querySelector('.bs-pill');
    expect(queryByText(page.root, label)).toBeTruthy();
    expect(pill.tagName).toBe('BUTTON');
  });
  it('renders <button> tag with default "type" attr', async () => {
    const page = await newSpecPage({
      components: [BsPill],
      html: `<bs-pill onclick="${Function}">${label}</bs-pill>`,
    });
    const pill = page.root.querySelector('.bs-pill');
    expect(queryByText(page.root, label)).toBeTruthy();
    expect(pill.getAttribute('type')).toBe('button');
  });
  it('renders <button> tag with given "type" attr', async () => {
    const page = await newSpecPage({
      components: [BsPill],
      html: `<bs-pill onclick="${Function}" type="submit">${label}</bs-pill>`,
    });
    const pill = page.root.querySelector('.bs-pill');
    expect(queryByText(page.root, label)).toBeTruthy();
    expect(pill.getAttribute('type')).toBe('submit');
  });
  it('renders <button> tag with "disabled "attr', async () => {
    const page = await newSpecPage({
      components: [BsPill],
      html: `<bs-pill onclick="${Function}" disabled>${label}</bs-pill>`,
    });
    const pill = page.root.querySelector('.bs-pill');
    expect(queryByText(page.root, label)).toBeTruthy();
    expect(pill).toHaveAttribute('disabled');
  });
  it('does not render <a> tag with "type" attr', async () => {
    const page = await newSpecPage({
      components: [BsPill],
      html: `<bs-pill href="#" type="submit">${label}</bs-pill>`,
    });
    const pill = page.root.querySelector('.bs-pill');
    expect(queryByText(page.root, label)).toBeTruthy();
    expect(pill.getAttribute('type')).toBeNull();
  });
  it('properly disables <a> tag', async () => {
    const page = await newSpecPage({
      components: [BsPill],
      html: `<bs-pill href="#" disabled>${label}</bs-pill>`,
    });
    const pill = page.root.querySelector('.bs-pill');
    expect(queryByText(page.root, label)).toBeTruthy();
    expect(pill.getAttribute('disabled')).toBeNull();
    expect(pill.getAttribute('aria-disabled')).toBe('true');
    expect(pill.getAttribute('tabindex')).toBe('-1');
  });
  describe('css mappings', () => {
    it('maps status prop to data-status', async () => {
      const page = await newSpecPage({
        components: [BsPill],
        html: `<bs-pill status="complete">${label}</bs-pill>`,
      });
      const pill = page.root.querySelector('.bs-pill');
      expect(pill.getAttribute('data-status')).toBe('complete');
    });
    it('maps variant prop to data-variant', async () => {
      const page = await newSpecPage({
        components: [BsPill],
        html: `<bs-pill variant="live">${label}</bs-pill>`,
      });
      const pill = page.root.querySelector('.bs-pill');
      expect(pill.getAttribute('data-variant')).toBe('live');
    });
    it('maps active prop to data-active', async () => {
      const page = await newSpecPage({
        components: [BsPill],
        html: `<bs-pill active>${label}</bs-pill>`,
      });
      const pill = page.root.querySelector('.bs-pill');
      expect(pill).toHaveAttribute('data-active');
    });
  });
});
//# sourceMappingURL=bs-pill.spec.js.map
