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

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

describe('MonoTextComp', () => {
  it('handle as, size, family, weight, tracking, tone, inline props and accept a default slot', async () => {
    const el = await fixture<MonoTextComp>(
      html`<mono-text
        as="h3"
        size="xl"
        family="mono"
        weight="bold"
        tracking="wider"
        tone="neutral-2"
        inline
        truncate
        align-text="right"
        >Hey there</mono-text
      >`,
    );

    expect(el.textContent).to.equal('Hey there');
    expect(el.as).to.equal('h3');
    expect(el.size).to.equal('xl');
    expect(el.family).to.equal('mono');
    expect(el.weight).to.equal('bold');
    expect(el.tracking).to.equal('wider');
    expect(el.tone).to.equal('neutral-2');
    expect(el.inline).to.equal(true);
    expect(el.truncate).to.equal(true);
    expect(el.alignText).to.equal('right');
  });

  it('inline and truncate should be by default false', async () => {
    const el = await fixture<MonoTextComp>(
      html`<mono-text>Hey there</mono-text>`,
    );

    expect(el.inline).to.equal(false);
    expect(el.truncate).to.equal(false);
  });

  it('alignText should be by default not set', async () => {
    const el = await fixture<MonoTextComp>(
      html`<mono-text>Hey there</mono-text>`,
    );

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

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

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

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

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

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

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