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

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

describe('MonoHeadingComp', () => {
  it('handle as, size, family, weight, tracking, tone, inline props', async () => {
    const el = await fixture<MonoHeadingComp>(
      html` <mono-heading
        as="h3"
        level="3"
        weight="bold"
        align-text="center"
        truncate
        >Hey there</mono-heading
      >`,
    );

    expect(el.textContent).to.equal('Hey there');
    expect(el.as).to.equal('h3');
    expect(el.level).to.equal('3');
    expect(el.weight).to.equal('bold');
    expect(el.alignText).to.equal('center');
    expect(el.truncate).to.equal(true);
  });

  it('should have sensitive defaults', async () => {
    const el = await fixture<MonoHeadingComp>(
      html`<mono-heading>Hey there</mono-heading>`,
    );

    expect(el.as).to.equal('h1');
    expect(el.level).to.equal('1');
    expect(el.weight).to.equal('medium');
    expect(el.alignText).to.equal(undefined);
    expect(el.truncate).to.equal(false);
  });

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

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

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

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

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

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