import { newSpecPage } from '@stencil/core/testing';
import { BsLabel } from '../../bs-label/bs-label';
import { within } from '@testing-library/dom';
const label = 'hello from label';
describe('bs-label', () => {
  it('renders slotted text', async () => {
    const page = await newSpecPage({
      components: [BsLabel],
      html: `<bs-label>${label}</bs-label>`,
    });
    expect(page.root.firstElementChild.tagName.toLowerCase()).toBe('label');
    expect(page.root).toEqualText(label);
  });
  it('renders slotted html', async () => {
    const page = await newSpecPage({
      components: [BsLabel],
      html: `<bs-label><span>${label}</span></bs-label>`,
    });
    const firstChild = page.root.firstElementChild;
    const inner = firstChild.firstElementChild;
    expect(firstChild.tagName.toLowerCase()).toBe('label');
    expect(inner.tagName.toLowerCase()).toBe('span');
    expect(inner.firstElementChild.tagName.toLowerCase()).toBe('span');
    expect(inner).toEqualText(label);
  });
  it('handles disabled prop by applying disabled styles', async () => {
    const page = await newSpecPage({
      components: [BsLabel],
      html: `<bs-label disabled="true">${label}</bs-label>`,
    });
    const component = page.root;
    const labelEl = component.querySelector('label');
    expect(labelEl).toHaveAttribute('data-disabled');
    component.disabled = false;
    await page.waitForChanges();
    expect(labelEl).not.toHaveAttribute('data-disabled');
  });
  it('handles required prop by appending required asterisk', async () => {
    const page = await newSpecPage({
      components: [BsLabel],
      html: `<bs-label required="true">${label}</bs-label>`,
    });
    const component = page.root;
    const labelEl = component.querySelector('label');
    expect(labelEl).toEqualText(label + ' *required');
    expect(labelEl.firstChild.nodeName.toLowerCase()).toBe('span');
    const asteriskEl = within(labelEl).queryByText('*');
    expect(asteriskEl.nodeName.toLowerCase()).toBe('span');
    expect(asteriskEl.getAttribute('aria-hidden')).toBeTruthy();
    const visuallyHiddenEl = within(labelEl).queryByText('required');
    expect(visuallyHiddenEl.nodeName.toLowerCase()).toBe('span');
    expect(visuallyHiddenEl.classList.contains('visually-hidden')).toBeTruthy();
    component.required = false;
    await page.waitForChanges();
    expect(labelEl).toEqualText(label);
  });
  it('handles hide prop by applying visually-hidden class', async () => {
    const page = await newSpecPage({
      components: [BsLabel],
      html: `<bs-label hide="true">${label}</bs-label>`,
    });
    expect(page.root).toHaveClass('visually-hidden');
    page.root.hide = false;
    await page.waitForChanges();
    expect(page.root).not.toHaveClass('visually-hidden');
  });
});
//# sourceMappingURL=bs-label.spec.js.map
