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

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

describe('MonoCardLayoutComp', () => {
  it('handle width and accept a default slot', async () => {
    const el = await fixture<MonoCardLayoutComp>(
      html`
        <mono-card-layout background-image="/blah.jpg" divider-style="none">
          Hey there
        </mono-card-layout>
      `,
    );

    expect(el.textContent).to.contain('Hey there');
    expect(el.backgroundImage).to.equal('/blah.jpg');
    expect(el.dividerStyle).to.equal('none');
  });

  it('accept a secondary slot', async () => {
    const el = await fixture<MonoCardLayoutComp>(
      html`
        <mono-card-layout background-image="/blah.jpg">
          <span slot="secondary">Hey there</span>
        </mono-card-layout>
      `,
    );

    const slotSecondary = Array.from(el.children).find(
      (child) => child.slot === 'secondary',
    );
    expect(slotSecondary?.textContent).to.equal('Hey there');
  });

  it('background-image should be by default empty', async () => {
    const el = await fixture<MonoCardLayoutComp>(
      html`<mono-card-layout></mono-card-layout>`,
    );

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

  it('divider-style should be by default gradient', async () => {
    const el = await fixture<MonoCardLayoutComp>(
      html`<mono-card-layout></mono-card-layout>`,
    );

    expect(el.dividerStyle).to.equal('gradient');
  });

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

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

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

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