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

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

describe('MonoColumnsComp', () => {
  it('handle space, align-x, align-y, collapse-below and accept a default slot', async () => {
    const el = await fixture<MonoColumnsComp>(
      html`
        <mono-columns
          space="gutter"
          align-x="right"
          align-y="bottom"
          collapse-below="sm"
          columns-have-container
        >
          <mono-column>Hey there</mono-column>
          <mono-column>Hey again</mono-column>
        </mono-columns>
      `,
    );

    expect(el.textContent).to.contain('Hey there');
    expect(el.textContent).to.contain('Hey again');
    expect(el.space).to.equal('gutter');
    expect(el.alignX).to.equal('right');
    expect(el.alignY).to.equal('bottom');
    expect(el.collapseBelow).to.equal('sm');
    expect(el.columnsHaveContainer).to.equal(true);
  });

  it('align-x, align-y, collapse-below, columns-have-container should be by default undefined', async () => {
    const el = await fixture<MonoColumnsComp>(
      html`<mono-columns></mono-columns>`,
    );

    expect(el.alignX).to.equal(undefined);
    expect(el.alignY).to.equal(undefined);
    expect(el.collapseBelow).to.equal(undefined);
    expect(el.columnsHaveContainer).to.equal(undefined);
  });

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

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

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

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