import { faker } from '@faker-js/faker';
import { newSpecPage } from '@stencil/core/testing';
import { queryByText } from '@testing-library/dom';
import { BsAccordion } from '../bs-accordion';
const textLong = faker.random.words(100);
const textShort = faker.random.words();
const icons = ['briefcase', 'catalog', 'circle-check', 'circle-info', 'comment-fill'];
describe('bs-accordion', () => {
  it('renders slotted content', async () => {
    const page = await newSpecPage({
      components: [BsAccordion],
      html: `<bs-accordion>${textLong}</bs-accordion>`,
    });
    expect(queryByText(page.root, textLong)).toBeTruthy();
  });
  it('autogenerates an id if necessary', async () => {
    const page = await newSpecPage({
      components: [BsAccordion],
      html: `<bs-accordion>${textLong}</bs-accordion>`,
    });
    const componentId = page.root.getAttribute('id');
    const headerBtn = page.root.querySelector('header button');
    const content = page.root.querySelector('.bs-accordion-content');
    expect(componentId).toBeTruthy();
    expect(headerBtn.querySelector(`#${componentId}-title`)).toBeTruthy();
    expect(content.getAttribute('aria-labelledby')).toBe(`${componentId}-title`);
  });
  it('handles icon prop by rendering associated icon', async () => {
    const icon = icons[faker.datatype.number(4)];
    const page = await newSpecPage({
      components: [BsAccordion],
      html: `<bs-accordion icon="${icon}">${textLong}</bs-accordion>`,
    });
    expect(page.root.querySelector(`header bs-icon-${icon}`)).toBeTruthy();
  });
  it('handles stacked prop by setting/unsetting data-stacked on host element', async () => {
    const page = await newSpecPage({
      components: [BsAccordion],
      html: `<bs-accordion stacked="true">${textLong}</bs-accordion>`,
    });
    expect(page.root).toHaveAttribute('data-stacked');
    page.root.stacked = false;
    await page.waitForChanges();
    expect(page.root).not.toHaveAttribute('data-stacked');
  });
  it('handles headerText prop by setting text content in the header', async () => {
    const page = await newSpecPage({
      components: [BsAccordion],
      html: `<bs-accordion header-text="${textShort}">${textLong}</bs-accordion>`,
    });
    const header = page.root.querySelector('header');
    expect(queryByText(header, textShort)).toBeTruthy();
  });
  it('handles headerTextTag prop by setting header title tag', async () => {
    const tag = faker.datatype.number(3);
    const page = await newSpecPage({
      components: [BsAccordion],
      html: `<bs-accordion heading-level="${tag}">${textLong}</bs-accordion>`,
    });
    const headingId = `${page.root.getAttribute('id')}-title`;
    const headerSpan = page.root.querySelector(`#${headingId}`);
    expect(headerSpan.getAttribute('aria-level')).toBe(`${tag}`);
  });
  describe('toggle actions are handled correctly by', () => {
    let page;
    let component;
    let header;
    let content;
    let toggler;
    beforeEach(async () => {
      page = await newSpecPage({
        components: [BsAccordion],
        html: `<bs-accordion header-text="${textShort}">${textLong}</bs-accordion>`,
      });
      component = page.root;
      header = page.root.querySelector('header');
      content = page.root.querySelector('.bs-accordion-content');
      toggler = header.querySelector('button');
    });
    it('emits the toggled event with the accordion id', async () => {
      const toggleHandler = jest.fn(e => e.detail);
      component.addEventListener('toggled', toggleHandler);
      toggler.click();
      await page.waitForChanges();
      expect(toggleHandler.mock.results[0].value).toBe(component.getAttribute('id'));
    });
    it('allows self-toggle open/closed when not controlled', async () => {
      toggler.click();
      await page.waitForChanges();
      expect(header).toHaveAttribute('data-open');
      expect(content).toHaveAttribute('data-open');
      toggler.click();
      await page.waitForChanges();
      expect(header).not.toHaveAttribute('data-open');
      expect(content).not.toHaveAttribute('data-open');
    });
    it('prevents self-toggle when controlled', async () => {
      component.controlled = true;
      await page.waitForChanges();
      toggler.click();
      await page.waitForChanges();
      expect(header).not.toHaveAttribute('data-open');
      expect(content).not.toHaveAttribute('data-open');
    });
    it('openItem by itself should have no effect', async () => {
      component.openItem = true;
      await page.waitForChanges();
      expect(header).not.toHaveAttribute('data-open');
      expect(content).not.toHaveAttribute('data-open');
    });
    it('openItem + controlled should open accordion if id matches', async () => {
      component.openItem = true;
      component.controlled = true;
      await page.waitForChanges();
      expect(header).toHaveAttribute('data-open');
      expect(content).toHaveAttribute('data-open');
      // simulate openItem being toggled off
      component.openItem = false;
      await page.waitForChanges();
      expect(header).not.toHaveAttribute('data-open');
      expect(content).not.toHaveAttribute('data-open');
      // set back to on
      component.openItem = true;
      await page.waitForChanges();
      expect(header).toHaveAttribute('data-open');
      expect(content).toHaveAttribute('data-open');
    });
  });
});
//# sourceMappingURL=bs-accordion.spec.js.map
