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

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

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

    expect(el.textContent).to.equal('Hey there');
    expect(el.href).to.equal('/hello');
    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.alignText).to.equal('right');
  });

  it('href should be by default empty', async () => {
    const el = await fixture<MonoTextLinkComp>(
      html`<mono-text-link>Hey there</mono-text-link>`,
    );

    expect(el.href).to.equal('');
  });

  it('tone should be by default highlight-2', async () => {
    const el = await fixture<MonoTextLinkComp>(
      html`<mono-text-link>Hey there</mono-text-link>`,
    );

    expect(el.tone).to.equal('highlight-2');
  });

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

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

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

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

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

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

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

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