import { faker } from '@faker-js/faker';
import { newSpecPage } from '@stencil/core/testing';
import { BsSelect } from '../bs-select';
describe('bs-select', () => {
  it('is not disabled or required by default', async () => {
    const page = await newSpecPage({
      components: [BsSelect],
      html: `<bs-select></bs-select>`,
    });
    const component = page.root;
    const select = component.querySelector('select');
    expect(select).not.toHaveAttribute('disabled');
    expect(select).not.toHaveAttribute('required');
  });
  it('disables the select when the disabled prop is passed in', async () => {
    const page = await newSpecPage({
      components: [BsSelect],
      html: `<bs-select disabled="true"></bs-select>`,
    });
    const component = page.root;
    const select = component.querySelector('select');
    expect(select).toHaveAttribute('disabled');
    component.disabled = false;
    await page.waitForChanges();
    expect(select).not.toHaveAttribute('disabled');
    component.disabled = undefined;
    await page.waitForChanges();
    expect(select).not.toHaveAttribute('disabled');
  });
  it('accepts the required attribute', async () => {
    const page = await newSpecPage({
      components: [BsSelect],
      html: `<bs-select required="true"></bs-select>`,
    });
    const component = page.root;
    const select = component.querySelector('select');
    expect(select).toHaveAttribute('required');
    component.required = false;
    await page.waitForChanges();
    expect(select).not.toHaveAttribute('required');
    component.required = undefined;
    await page.waitForChanges();
    expect(select).not.toHaveAttribute('required');
  });
  it('adds the data-error attribute when error is passed through', async () => {
    const page = await newSpecPage({
      components: [BsSelect],
      html: `<bs-select error="true"></bs-select>`,
    });
    const component = page.root;
    const select = component.querySelector('select');
    expect(select).toHaveAttribute('data-error');
    component.error = false;
    await page.waitForChanges();
    expect(select).not.toHaveAttribute('data-error');
  });
  it('takes in a hint id to associate with the hint if an error exists', async () => {
    const hintId = faker.datatype.uuid();
    const page = await newSpecPage({
      components: [BsSelect],
      html: `<bs-select error hint-id="${hintId}"></bs-select>`,
    });
    const component = page.root;
    const select = component.querySelector('select');
    expect(select).toHaveAttribute('data-error');
    expect(select).toHaveAttribute('aria-errormessage');
  });
  it('takes in a hint id to associate with a hint', async () => {
    const hintId = faker.datatype.uuid();
    const page = await newSpecPage({
      components: [BsSelect],
      html: `<bs-select hint-id="${hintId}"></bs-select>`,
    });
    const component = page.root;
    const select = component.querySelector('select');
    expect(select).not.toHaveAttribute('data-error');
    expect(select).toHaveAttribute('aria-describedby');
  });
  it('passes any allowed attributes to the <select>', async () => {
    const attribute = faker.helpers.arrayElement([
      'autocomplete',
      'multiple',
      'id',
      'name',
      'size',
    ]);
    const page = await newSpecPage({
      components: [BsSelect],
      html: `<bs-select ${attribute}></bs-select>`,
    });
    const component = page.root;
    const select = component.querySelector('select');
    expect(select).toHaveAttribute(attribute);
  });
});
//# sourceMappingURL=bs-select.spec.js.map
