button.spec.ts

import {Button} from './button';
import {newSpecPage} from '@stencil/core/testing';

it('should render correctly without attributes', async () => {
  const page = await newSpecPage({
    components: [Button],
    html: `<hy-button>Hello tests!</hy-button>`,
  });
  expect(page.root).toEqualHtml(`
  <hy-button>
     <button type="submit" class="hy-button primary enabled size-normal">
       <span class="hy-button__text">
         Hello tests!
       </span>
     </button>
    </hy-button>
  `);
});

it('should have classname matching the variant', async () => {
  const page = await newSpecPage({
    components: [Button],
    html: `<hy-button variant="secondary">Hello icons!<hy-button>`,
  });
  const button = page.doc.querySelector('button.secondary');
  expect(button).toBeTruthy();
});

it('should have classname matching the state', async () => {
  const page = await newSpecPage({
    components: [Button],
    html: `<hy-button disabled>I am disabled!<hy-button>`,
  });
  const button = page.doc.querySelector('button');
  expect(button).toHaveAttribute('disabled');
});

it('should display an arrow element', async () => {
  const page = await newSpecPage({
    components: [Button],
    html: `<hy-button
      icon="hy-icon-arrow-left"
      >Hello icons!<hy-button>`,
  });
  const icon = page.doc.querySelector('span.hy-button__icon');
  expect(icon).toHaveClass('hy-button__icon');
});

it('supports icons on both sides', async () => {
  const page = await newSpecPage({
    components: [Button],
    html: `<hy-button
      variant="secondary"
      icon="hy-icon-arrow-left"
      icon-right="hy-icon-arrow-right">Hello icons!<hy-button>`,
  });
  const icons = page.doc.querySelectorAll('span.hy-button__icon');
  expect(icons.length).toBe(2);
});