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

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

describe('MonoIconComp', () => {
  it('handle as, icon-name, size, stroke-width props', async () => {
    const el = await fixture<MonoIconComp>(
      html`<mono-icon
        as="h1"
        icon-name="phone"
        size="8"
        stroke-width="3"
      ></mono-icon>`,
    );

    expect(el.as).to.equal('h1');
    expect(el.iconName).to.equal('phone');
    expect(el.size).to.equal(8);
    expect(el.strokeWidth).to.equal(3);
  });

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

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

  it('icon-name should be by default menu', async () => {
    const el = await fixture<MonoIconComp>(html`<mono-icon></mono-icon>`);

    expect(el.iconName).to.equal('menu');
  });

  it('size should be by default 6', async () => {
    const el = await fixture<MonoIconComp>(html`<mono-icon></mono-icon>`);

    expect(el.size).to.equal(6);
  });

  it('stroke-width should be by default 1', async () => {
    const el = await fixture<MonoIconComp>(html`<mono-icon></mono-icon>`);

    expect(el.strokeWidth).to.equal(1);
  });

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

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

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

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

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

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