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 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);
});