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

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

describe('MonoStrongComp', () => {
  it('handle size and tone', async () => {
    const el = await fixture<MonoSpinnerComp>(
      html`<mono-spinner size="xl" tone="neutral-3">Hey there</mono-spinner>`,
    );

    expect(el.size).to.equal('xl');
    expect(el.tone).to.equal('neutral-3');
  });

  it('size should be by default false', async () => {
    const el = await fixture<MonoSpinnerComp>(
      html`<mono-spinner></mono-spinner>`,
    );

    expect(el.size).to.equal('base');
  });

  it('tone should be by default undefined', async () => {
    const el = await fixture<MonoSpinnerComp>(
      html`<mono-spinner></mono-spinner>`,
    );

    expect(el.tone).to.equal(undefined);
  });

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

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

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

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