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

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

describe('MonoStackComp', () => {
  it('handle as, space, align-x and accept a default slot', async () => {
    const el = await fixture<MonoStackComp>(
      html`<mono-stack as="ul" space="gutter" align-x="right"
        >Hey there</mono-stack
      >`,
    );

    expect(el.textContent).to.equal('Hey there');
    expect(el.as).to.equal('ul');
    expect(el.space).to.equal('gutter');
    expect(el.alignX).to.equal('right');
  });

  it('align-x should be by default stretch', async () => {
    const el = await fixture<MonoStackComp>(html`<mono-stack></mono-stack>`);

    expect(el.alignX).to.equal('stretch');
  });

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

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

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

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

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

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