import * as chai from "chai";
import { chaiDom } from "../../../util/chai-dom.mjs";
import { initJSDOM } from "../../../util/jsdom.mjs";

let expect = chai.expect;
chai.use(chaiDom);

let ControlBarSpacer;

describe("ControlBarSpacer", function () {
  before(function (done) {
    initJSDOM()
      .then(() =>
        import("../../../../source/components/form/control-bar-spacer.mjs"),
      )
      .then((m) => {
        ControlBarSpacer = m.ControlBarSpacer;
        done();
      })
      .catch((e) => done(e));
  });

  it("should create a control bar spacer element", function () {
    const spacer = document.createElement("monster-control-bar-spacer");

    expect(spacer).to.be.instanceof(ControlBarSpacer);
  });

  it("should render a non-interactive separator line", function () {
    const spacer = document.createElement("monster-control-bar-spacer");
    document.getElementById("mocks").appendChild(spacer);

    const separator = spacer.shadowRoot.querySelector(
      '[data-monster-role="separator"]',
    );

    expect(separator).to.be.instanceof(HTMLDivElement);
    expect(spacer.getAttribute("aria-hidden")).to.equal("true");
  });

  it("should define spacer dimensions through css variables", function () {
    const cssText = ControlBarSpacer.getCSSStyleSheet()
      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
      .map((rule) => rule.cssText)
      .join("\n");

    expect(cssText).to.contain("--monster-control-bar-spacer-inline-size");
    expect(cssText).to.contain("--monster-control-bar-spacer-block-size");
    expect(cssText).to.contain("pointer-events: none");
  });
});
