import { newSpecPage } from '@stencil/core/testing';
import { BsTextareaField } from '../bs-textarea-field';
import { faker } from '@faker-js/faker';
const id = faker.random.word();
const label = faker.random.words();
const hint = faker.random.words();
const max = faker.datatype.number();
describe('bs-textarea-field', () => {
  it('handles inputId correctly', async () => {
    const page = await newSpecPage({
      components: [BsTextareaField],
      html: `<bs-textarea-field input-id="${id}"></bs-textarea-field>`,
    });
    const component = page.root;
    const textarea = component.querySelector('bs-textarea');
    expect(textarea.getAttribute('input-id')).toBe(id);
  });
  it('handles the charMax prop', async () => {
    const page = await newSpecPage({
      components: [BsTextareaField],
      html: `<bs-textarea-field></bs-textarea-field>`,
    });
    const component = page.root;
    component.charMax = max;
    await page.waitForChanges();
    const field = component.querySelector('bs-field-details');
    expect(field.getAttribute('char-max')).toBe(`${max}`);
  });
  it('handles the disabled prop', async () => {
    const page = await newSpecPage({
      components: [BsTextareaField],
      html: `<bs-textarea-field
        id="${id}"
        label="${label}"
        disabled="true"
      ></bs-textarea-field>`,
    });
    const component = page.root;
    let textarea = component.querySelector('bs-textarea');
    let bsLabel = component.querySelector('bs-label');
    expect(textarea).toHaveAttribute('disabled');
    expect(bsLabel).toHaveAttribute('disabled');
    component.disabled = false;
    await page.waitForChanges();
    expect(textarea).not.toHaveAttribute('disabled');
    expect(bsLabel).not.toHaveAttribute('disabled');
  });
  it('handles the error prop', async () => {
    const page = await newSpecPage({
      components: [BsTextareaField],
      html: `<bs-textarea-field
        id="${id}"
        label="${label}"
        error="true"
      ></bs-textarea-field>`,
    });
    const component = page.root;
    const textarea = component.querySelector('bs-textarea');
    expect(textarea).toHaveAttribute('error');
    component.error = false;
    await page.waitForChanges();
    expect(textarea).not.toHaveAttribute('error');
  });
  // this should work, it works on the actual component
  it('handles the hints prop', async () => {
    const page = await newSpecPage({
      components: [BsTextareaField],
      html: `<bs-textarea-field hints="${hint}"></bs-textarea-field>`,
    });
    const component = page.root;
    const field = component.querySelector('bs-field-details');
    const textarea = component.querySelector('bs-textarea');
    expect(field.getAttribute('hint')).toBe(hint);
    expect(field.getAttribute('hint-id')).toBeTruthy();
    expect(field.getAttribute('hint-id')).toBe(textarea.getAttribute('hint-id'));
  });
  it('handles the hint prop', async () => {
    const page = await newSpecPage({
      components: [BsTextareaField],
      html: `<bs-textarea-field hint="${hint}"></bs-textarea-field>`,
    });
    const component = page.root;
    const field = component.querySelector('bs-field-details');
    const textarea = component.querySelector('bs-textarea');
    expect(field.getAttribute('hint')).toBe(hint);
    expect(field.getAttribute('hint-id')).toBeTruthy();
    expect(field.getAttribute('hint-id')).toBe(textarea.getAttribute('hint-id'));
  });
  it('handles the label prop', async () => {
    const page = await newSpecPage({
      components: [BsTextareaField],
      html: `<bs-textarea-field
        id="${id}"
        label="${label}"
      ></bs-textarea-field>`,
    });
    const component = page.root;
    const bsLabel = component.querySelector('bs-label');
    expect(bsLabel).toBeTruthy();
  });
  it('handles the required prop', async () => {
    const page = await newSpecPage({
      components: [BsTextareaField],
      html: `<bs-textarea-field
        id="${id}"
        label="${label}"
        required="true"
      ></bs-textarea-field>`,
    });
    const component = page.root;
    const textarea = component.querySelector('bs-textarea');
    const bsLabel = component.querySelector('bs-label');
    expect(textarea).toHaveAttribute('required');
    expect(bsLabel).toHaveAttribute('required');
    component.required = false;
    await page.waitForChanges();
    expect(textarea).not.toHaveAttribute('required');
    expect(bsLabel).not.toHaveAttribute('required');
  });
});
//# sourceMappingURL=bs-textarea-field.spec.js.map
