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

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

describe('MonoBoxComp', () => {
  it('handle as, class props and accept a default slot', async () => {
    const el = await fixture<MonoBoxComp>(
      html`<mono-box as="h3" clsx="bg-red-300" grow>Hey there</mono-box>`,
    );

    expect(el.textContent).to.equal('Hey there');
    expect(el.as).to.equal('h3');
    expect(el.clsx).to.equal('bg-red-300');
    expect(el.grow).to.equal(true);
  });

  it('grow should be by default false', async () => {
    const el = await fixture<MonoBoxComp>(html`<mono-box></mono-box>`);

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

  it('should forward style prop', async () => {
    const el = await fixture<MonoBoxComp>(
      html`<mono-box style="color: red;"></mono-box>`,
    );

    expect(el.shadowRoot?.firstElementChild?.getAttribute('style')).to.equal(
      'color: red;',
    );
  });

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

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

  it('passes the a11y audit', async () => {
    const el = await fixture<MonoBoxComp>(html`<mono-box></mono-box>`);

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