import { html, fixture, expect } from '@open-wc/testing';

import type { MonoAlertComp } from '../src/MonoAlertComp';
import '../src/MonoAlertComp';

describe('MonoAlertComp', () => {
  it('handle label, value, options, id, error', async () => {
    const el = await fixture<MonoAlertComp>(
      html`<mono-alert type="success" hidden>
        <div slot="icon">Hello</div>
        Some super long alert
      </mono-alert>`,
    );

    expect(el.type).to.equal('success');
    expect(el.hidden).to.equal(true);

    const iconSlot = Array.from(el.children).find(
      (child) => child.slot === 'icon',
    );
    expect(iconSlot?.textContent).to.equal('Hello');
  });

  it('type shoud be by default error', async () => {
    const el = await fixture<MonoAlertComp>(html`<mono-alert></mono-alert>`);

    expect(el.type).to.equal('error');
  });

  it('hidden shoud be by default false', async () => {
    const el = await fixture<MonoAlertComp>(html`<mono-alert></mono-alert>`);

    expect(el.hidden).to.equal(false);
  });

  it('should spreads other attributes', async () => {
    const el = await fixture<MonoAlertComp>(
      html`<mono-alert fake="test"></mono-alert>`,
    );

    expect(el.shadowRoot?.firstElementChild?.getAttribute('fake')).to.equal(
      'test',
    );
  });

  it('passes the a11y audit', async () => {
    const el = await fixture<MonoAlertComp>(
      html`<mono-alert type="success"> Some super long alert </mono-alert>`,
    );

    await expect(el).shadowDom.to.be.accessible();
  });
});