import { faker } from '@faker-js/faker';
import { newSpecPage } from '@stencil/core/testing';
import { BsSelect } from '../../bs-select/bs-select';
import { BsSelectField } from '../bs-select-field';
const fieldId = faker.datatype.uuid();
const fieldHint = faker.random.words();
const fieldLabel = faker.random.words();
const selectDataFunc = () => {
  const length = faker.datatype.number(10);
  const selectArr = [];
  for (let i = 0; i <= length; i++) {
    selectArr.push({ label: faker.random.word(), value: faker.random.word() });
  }
  return selectArr;
};
const selectData = selectDataFunc();
describe('bs-select-field', () => {
  it('renders the select only by default', async () => {
    const page = await newSpecPage({
      components: [BsSelectField],
      html: `<bs-select-field></bs-select-field>`,
    });
    expect(page.root.querySelector('bs-select')).toBeTruthy();
    expect(page.root.querySelector('bs-label')).toBeNull();
    expect(page.root.querySelector('bs-hint')).toBeNull();
  });
  it('handles label prop and input-id by rendering bs-label and passing inputId', async () => {
    const page = await newSpecPage({
      components: [BsSelectField],
      html: `<bs-select-field input-id="${fieldId}" label="${fieldLabel}"></bs-select-field>`,
    });
    const component = page.root;
    const bsLabel = component.querySelector('bs-label');
    expect(bsLabel.getAttribute('for')).toBe(fieldId);
  });
  it('handles hints prop by passing value to bs-field-details as \'hint\'', async () => {
    const page = await newSpecPage({
      components: [BsSelectField],
      html: `<bs-select-field hints="${fieldHint}"></bs-select-field>`,
    });
    const component = page.root;
    const bsField = component.querySelector('bs-field-details');
    expect(bsField.getAttribute('hint')).toBe(fieldHint);
  });
  it('handles hint prop by passing value to bs-field-details', async () => {
    const page = await newSpecPage({
      components: [BsSelectField],
      html: `<bs-select-field hint="${fieldHint}"></bs-select-field>`,
    });
    const component = page.root;
    const bsField = component.querySelector('bs-field-details');
    expect(bsField.getAttribute('hint')).toBe(fieldHint);
  });
  it('handles hints prop by generating and passing uuid to bs-select, bs-field-details', async () => {
    const page = await newSpecPage({
      components: [BsSelectField],
      html: `<bs-select-field hints="${fieldHint}"></bs-select-field>`,
    });
    const component = page.root;
    const bsField = component.querySelector('bs-field-details');
    const bsFieldHintId = bsField.getAttribute('hint-id');
    const bsSelect = component.querySelector('bs-select');
    const bsSelectHintId = bsSelect.getAttribute('hint-id');
    expect(bsFieldHintId).toBeTruthy();
    expect(bsSelectHintId).toBe(bsFieldHintId);
  });
  it('handles hint prop by generating and passing uuid to bs-select, bs-field-details', async () => {
    const page = await newSpecPage({
      components: [BsSelectField],
      html: `<bs-select-field hint="${fieldHint}"></bs-select-field>`,
    });
    const component = page.root;
    const bsField = component.querySelector('bs-field-details');
    const bsFieldHintId = bsField.getAttribute('hint-id');
    const bsSelect = component.querySelector('bs-select');
    const bsSelectHintId = bsSelect.getAttribute('hint-id');
    expect(bsFieldHintId).toBeTruthy();
    expect(bsSelectHintId).toBe(bsFieldHintId);
  });
  it('handles the placeholder prop', async () => {
    const placeholder = faker.random.words();
    const page = await newSpecPage({
      components: [BsSelectField, BsSelect],
      html: `<bs-select-field placeholder="${placeholder}"></bs-select-field>`,
    });
    const component = page.root;
    component.data = selectData;
    await page.waitForChanges();
    const fieldOptions = component.querySelectorAll('option');
    expect(fieldOptions[0]).toEqualText(placeholder);
  });
  it('outputs options when passed data', async () => {
    const page = await newSpecPage({
      components: [BsSelectField, BsSelect],
      html: `<bs-select-field></bs-select-field>`,
    });
    const component = page.root;
    component.data = selectData;
    await page.waitForChanges();
    const fieldOptions = component.querySelectorAll('option');
    expect(fieldOptions.length).toBe(selectData.length + 1);
  });
});
//# sourceMappingURL=bs-select-field.spec.js.map
