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

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

describe('MonoCardComp', () => {
  it('handle as, rounded, rounded-above and accept a default slot', async () => {
    const el = await fixture<MonoCardComp>(
      html`
        <mono-card as="article" rounded rounded-above="sm">Hey there</mono-card>
      `,
    );

    expect(el.textContent).to.contain('Hey there');
    expect(el.as).to.equal('article');
    expect(el.rounded).to.equal(true);
    expect(el.roundedAbove).to.equal('sm');
  });

  it('as should be by default div', async () => {
    const el = await fixture<MonoCardComp>(html`<mono-card></mono-card>`);

    expect(el.as).to.equal('div');
  });

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

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

  it('rounded-above should be by default undefined', async () => {
    const el = await fixture<MonoCardComp>(html`<mono-card></mono-card>`);

    expect(el.roundedAbove).to.equal(undefined);
  });

  it('as will throw if not allowed tag name', async () => {
    let caught = false;
    try {
      await fixture<MonoCardComp>(
        html`<mono-card as="fake">Hey there</mono-card>`,
      );
    } catch (_e) {
      caught = true;
    }

    expect(caught).to.equal(true);
  });

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

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

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

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