@schukai/monster/test/cases/components/form/button-bar.mjs

Monster is a simple library for creating fast, robust and lightweight websites.

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

const html = `
  <div id="test1">
    <monster-button-bar id="bar"></monster-button-bar>
    <monster-button-bar
      id="bar-right"
      data-monster-option-layout-alignment="right"
    ></monster-button-bar>
  </div>
`;

let ButtonBar;

describe("ButtonBar", function () {
  before(function (done) {
    this.timeout(5000);
    initJSDOM()
      .then(() => {
        import("../../../../source/components/form/button-bar.mjs")
          .then((m) => {
            ButtonBar = m.ButtonBar;
            done();
          })
          .catch((e) => done(e));
      })
      .catch((e) => done(e));
  });

  beforeEach(() => {
    const mocks = document.getElementById("mocks");
    mocks.innerHTML = html;
  });

  afterEach(() => {
    const mocks = document.getElementById("mocks");
    mocks.innerHTML = "";
  });

  it("should create a button bar element", function () {
    const bar = document.getElementById("bar");
    expect(bar).to.be.instanceof(ButtonBar);
  });

  it("should keep the popper switch hidden when no buttons are slotted", function (done) {
    const bar = document.getElementById("bar");

    setTimeout(() => {
      try {
        const switchButton = bar.shadowRoot.querySelector(
          '[data-monster-role="switch"]',
        );
        expect(switchButton).to.be.instanceof(HTMLButtonElement);
        expect(switchButton.hasAttribute("hidden")).to.be.true;
        expect(switchButton.classList.contains("hidden")).to.be.true;
        done();
      } catch (e) {
        done(e);
      }
    }, 50);
  });

  it("should default the button bar layout alignment to left", function () {
    const bar = document.getElementById("bar");
    const buttonBar = bar.shadowRoot.querySelector(
      '[data-monster-role="button-bar"]',
    );

    expect(buttonBar.getAttribute("data-monster-layout-alignment")).to.equal(
      "left",
    );
  });

  it("should allow configuring the button bar layout alignment to right", function (done) {
    const bar = document.getElementById("bar-right");

    setTimeout(() => {
      try {
        const buttonBar = bar.shadowRoot.querySelector(
          '[data-monster-role="button-bar"]',
        );

        expect(
          buttonBar.getAttribute("data-monster-layout-alignment"),
        ).to.equal("right");
        done();
      } catch (e) {
        done(e);
      }
    }, 50);
  });
});