import {newSpecPage} from '@stencil/core/testing';
import {HyKeyHighlightGroup} from '../hy-key-highlight-group';

describe('hy-key-highlight-group', () => {
  it('renders', async () => {
    const page = await newSpecPage({
      components: [HyKeyHighlightGroup],
      html: `<hy-key-highlight-group  data-items='[{"heading":"a","description":"b"}]'></hy-key-highlight-group>`
    });
    expect(page.root).toEqualHtml(`
      <hy-key-highlight-group data-items="[{&quot;heading&quot;:&quot;a&quot;,&quot;description&quot;:&quot;b&quot;}]">
        <mock:shadow-root>
          <div class="big hy-key-highlight-group">
            <hy-key-highlight class="box" description="b" heading="a" variant="big"></hy-key-highlight>
          </div>
        </mock:shadow-root>
      </hy-key-highlight-group>
    `);
  });
});