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="default hy-button">
       <span class="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 display 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.button-icon");
  expect(icon).toHaveClass("button-icon-left");
});

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.button-icon");
  expect(icons.length).toBe(2);
  expect(icons[0]).toHaveClass("button-icon-left");
  expect(icons[1]).toHaveClass("button-icon-right");
});