import { newSpecPage } from '@stencil/core/testing';
import { BsInputField } from '../bs-input-field';
import { faker } from '@faker-js/faker';
const hint = faker.random.words();
const id = faker.datatype.uuid();
const label = faker.random.words();
describe('bs-input-field', () => {
  it('renders input only by default', async () => {
    const page = await newSpecPage({
      components: [BsInputField],
      html: `<bs-input-field></bs-input-field>`,
    });
    expect(page.root.querySelector('bs-input')).toBeTruthy();
    expect(page.root.querySelector('bs-label')).toBeNull();
    expect(page.root.querySelector('bs-hint')).toBeNull();
  });
  it('handles label prop by rendering bs-label', async () => {
    const page = await newSpecPage({
      components: [BsInputField],
      html: `<bs-input-field label="${label}"></bs-input-field>`,
    });
    const component = page.root;
    const bsLabel = component.querySelector('bs-label');
    expect(bsLabel).toBeTruthy();
  });
  it('handles inputId prop by passing to bs-input, bs-label', async () => {
    const page = await newSpecPage({
      components: [BsInputField],
      html: `<bs-input-field input-id="${id}" label="${label}"></bs-input-field>`,
    });
    const component = page.root;
    const bsLabel = component.querySelector('bs-label');
    const bsLabelInputId = bsLabel.getAttribute('for');
    const bsInput = component.querySelector('bs-input');
    const bsInputInputId = bsInput.getAttribute('input-id');
    expect(bsLabelInputId).toBeTruthy();
    expect(bsInputInputId).toBe(bsLabelInputId);
  });
  it('handles hints prop by rendering bs-field-details', async () => {
    const page = await newSpecPage({
      components: [BsInputField],
      html: `<bs-input-field hints="${hint}"></bs-input-field>`,
    });
    const component = page.root;
    const bsField = component.querySelector('bs-field-details');
    expect(bsField).toBeTruthy();
  });
  // TODO: Remove this test when deprecated hints prop is removed
  it('handles hints prop by generating and passing uuid to bs-input, bs-field-details', async () => {
    const page = await newSpecPage({
      components: [BsInputField],
      html: `<bs-input-field hints="${hint}"></bs-input-field>`,
    });
    const component = page.root;
    const bsField = component.querySelector('bs-field-details');
    const bsFieldHintId = bsField.getAttribute('hint-id');
    const bsInput = component.querySelector('bs-input');
    const bsInputHintId = bsInput.getAttribute('hint-id');
    expect(bsFieldHintId).toBeTruthy();
    expect(bsInputHintId).toBe(bsFieldHintId);
  });
  it('handles hint prop by generating and passing uuid to bs-input, bs-field-details', async () => {
    const page = await newSpecPage({
      components: [BsInputField],
      html: `<bs-input-field hint="${hint}"></bs-input-field>`,
    });
    const component = page.root;
    const bsField = component.querySelector('bs-field-details');
    const bsFieldHintId = bsField.getAttribute('hint-id');
    const bsInput = component.querySelector('bs-input');
    const bsInputHintId = bsInput.getAttribute('hint-id');
    expect(bsFieldHintId).toBeTruthy();
    expect(bsInputHintId).toBe(bsFieldHintId);
  });
});
//# sourceMappingURL=bs-input-field.spec.js.map
