import { faker } from '@faker-js/faker';
import { newSpecPage } from '@stencil/core/testing';
import { BsFieldLayout } from '../bs-field-layout';
const hint = faker.random.words();
const hints = Array(faker.random.words().split(' '));
const id = faker.datatype.uuid();
const label = faker.random.words();
const count = faker.datatype.number();
const max = faker.datatype.number();
describe('bs-field-layout', () => {
  it('is empty by default', async () => {
    const page = await newSpecPage({
      components: [BsFieldLayout],
      html: `<bs-field-layout></bs-field-layout>`,
    });
    expect(page.root.childElementCount).toBe(0);
  });
  it('renders bs-label if prop is passed', async () => {
    const page = await newSpecPage({
      components: [BsFieldLayout],
      html: `<bs-field-layout label="${label}"></bs-field-layout>`,
    });
    const component = page.root;
    const labelEl = component.querySelector('bs-label');
    expect(labelEl).toBeTruthy();
    expect(labelEl).toEqualText(label);
  });
  it('renders bs-hint if prop is passed', async () => {
    const page = await newSpecPage({
      components: [BsFieldLayout],
      html: `<bs-field-layout hints="${hint}"></bs-field-layout>`,
    });
    const component = page.root;
    let bsHint = component.querySelector('bs-hint');
    expect(bsHint).toBeTruthy();
    expect(bsHint.getAttribute('hints')).toBe(hint);
    component.hints = undefined;
    await page.waitForChanges();
    bsHint = component.querySelector('bs-hint');
    expect(bsHint).toBe(null);
  });
  it('renders <bs-character-count> if charMax prop is passed', async () => {
    const page = await newSpecPage({
      components: [BsFieldLayout],
      html: `<bs-field-layout char-max="${max}"></bs-field-layout>`,
    });
    const component = page.root;
    let bsCharCount = component.querySelector('bs-character-count');
    expect(bsCharCount).toBeTruthy();
    expect(bsCharCount.getAttribute('charMax')).toBe(max.toString());
    component.charMax = undefined;
    await page.waitForChanges();
    bsCharCount = component.querySelector('bs-character-count');
    expect(bsCharCount).toBe(null);
  });
  it('updates character count if charCount prop is updated', async () => {
    const page = await newSpecPage({
      components: [BsFieldLayout],
      html: `<bs-field-layout char-count="${count}" char-max="${max}"></bs-field-layout>`,
    });
    const component = page.root;
    let bsCharCount = component.querySelector('bs-character-count');
    expect(bsCharCount).toBeTruthy();
    expect(bsCharCount.getAttribute('charCount')).toBe(count.toString());
    component.charCount = count + max;
    await page.waitForChanges();
    expect(bsCharCount.getAttribute('charCount')).toBe((count + max).toString());
  });
  it('renders slotted items correctly', async () => {
    const page = await newSpecPage({
      components: [BsFieldLayout],
      html: `<bs-field-layout label="${label}" hints="${hint}">
        <bs-input id="${id}"></bs-input>
      </bs-field-layout>`,
    });
    const component = page.root;
    expect(component.childElementCount).toBe(3);
    expect(component.children[0].tagName.toLowerCase()).toBe('bs-label');
    expect(component.children[1].tagName.toLowerCase()).toBe('bs-input');
  });
  it('handles disabled prop by passing value to bs-label', async () => {
    const page = await newSpecPage({
      components: [BsFieldLayout],
      html: `<bs-field-layout disabled="true" label="${label}"></bs-field-layout>`,
    });
    const component = page.root;
    const bsLabel = component.querySelector('bs-label');
    expect(bsLabel).toHaveAttribute('disabled');
    component.disabled = false;
    await page.waitForChanges();
    expect(bsLabel).not.toHaveAttribute('disabled');
  });
  it('handles error prop by passing value to bs-hint', async () => {
    const page = await newSpecPage({
      components: [BsFieldLayout],
      html: `<bs-field-layout error="true"></bs-field-layout>`,
    });
    const component = page.root;
    component.hints = hints;
    await page.waitForChanges();
    const bsHint = component.querySelector('bs-hint');
    expect(bsHint).toHaveAttribute('error');
    component.error = false;
    await page.waitForChanges();
    expect(bsHint).not.toHaveAttribute('error');
  });
});
//# sourceMappingURL=bs-field-layout.spec.js.map
