import { newSpecPage } from "@stencil/core/testing";
import { KlevuColorSwatch } from "../klevu-color-swatch";
describe("klevu-color-swatch", () => {
  it("renders with red color swatch", async () => {
    var _a;
    const page = await newSpecPage({
      components: [KlevuColorSwatch],
      html: `<klevu-color-swatch name="colorFacet" color="red"></klevu-color-swatch>`,
    });
    if ((_a = page.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) {
      const spanEl = page.root.shadowRoot.querySelectorAll("span");
      expect(spanEl.length).toEqual(1);
      expect(spanEl[0].title).toEqual("colorFacet");
      expect(spanEl[0].style.getPropertyValue("background-color")).toEqual("red");
    }
  });
  it("renders with red color swatch which is selected", async () => {
    var _a;
    const page = await newSpecPage({
      components: [KlevuColorSwatch],
      html: `<klevu-color-swatch name="colorFacet" color="red" selected="true"></klevu-color-swatch>`,
    });
    if ((_a = page.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) {
      const spanEl = page.root.shadowRoot.querySelectorAll("span");
      expect(spanEl.length).toEqual(1);
      expect(spanEl[0].style.getPropertyValue("background-color")).toEqual("red");
      expect(spanEl[0].className).toContain("selected");
    }
  });
  it("renders with image url swatch", async () => {
    var _a;
    const page = await newSpecPage({
      components: [KlevuColorSwatch],
      html: `<klevu-color-swatch name="colorFacet" image-url="http://www.color.jpg"></klevu-color-swatch>`,
    });
    if ((_a = page.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) {
      const spanEl = page.root.shadowRoot.querySelectorAll("span");
      expect(spanEl.length).toEqual(1);
      expect(spanEl[0].style.getPropertyValue("background-image")).toContain("color.jpg");
    }
  });
});
//# sourceMappingURL=klevu-color-swatch.spec.js.map
