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

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

describe('MonoColumnComp', () => {
  it('handle width and accept a default slot', async () => {
    const el = await fixture<MonoColumnComp>(
      html` <mono-column width="2/5">Hey there</mono-column> `,
    );

    expect(el.textContent).to.contain('Hey there');
    expect(el.width).to.equal('2/5');
  });

  it('width should be by default auto', async () => {
    const el = await fixture<MonoColumnComp>(html`<mono-column></mono-column>`);

    expect(el.width).to.equal('auto');
  });

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

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

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

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