@schukai/monster 4.137.8 → 4.138.0

package/test/cases/components/form/control-bar.mjs

@@ -0,0 +1,230 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const html = `
+  <div id="test1">
+    <monster-control-bar id="bar">
+      <input id="query" type="search">
+      <select id="mode"><option>All</option></select>
+      <button id="apply">Apply</button>
+    </monster-control-bar>
+    <monster-control-bar
+      id="bar-right"
+      data-monster-option-layout-alignment="right"
+    ></monster-control-bar>
+  </div>
+`;
+
+let ControlBar;
+
+describe("ControlBar", function () {
+  before(function (done) {
+    this.timeout(5000);
+    initJSDOM()
+      .then(() => {
+        import("../../../../source/components/form/control-bar.mjs")
+          .then((m) => {
+            ControlBar = m.ControlBar;
+            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 control bar element", function () {
+    const bar = document.getElementById("bar");
+    expect(bar).to.be.instanceof(ControlBar);
+  });
+
+  it("should keep the popper switch hidden when no controls are slotted", function (done) {
+    const bar = document.getElementById("bar-right");
+
+    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 control bar layout alignment to left", function () {
+    const bar = document.getElementById("bar");
+    const controlBar = bar.shadowRoot.querySelector(
+      '[data-monster-role="control-bar"]',
+    );
+
+    expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+      "left",
+    );
+  });
+
+  it("should allow configuring the control bar layout alignment to right", function (done) {
+    const bar = document.getElementById("bar-right");
+
+    setTimeout(() => {
+      try {
+        const controlBar = bar.shadowRoot.querySelector(
+          '[data-monster-role="control-bar"]',
+        );
+
+        expect(
+          controlBar.getAttribute("data-monster-layout-alignment"),
+        ).to.equal("right");
+        done();
+      } catch (e) {
+        done(e);
+      }
+    }, 50);
+  });
+
+  it("should map popper position attributes to the popper placement option", function () {
+    const bar = document.getElementById("bar");
+
+    bar.setAttribute("data-monster-popper-position", "bottom");
+
+    expect(bar.getOption("popper.placement")).to.equal("bottom");
+  });
+
+  it("should render mixed controls with joined heights and popper layout styles", function () {
+    const cssText = ControlBar.getCSSStyleSheet()
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join("\n");
+
+    expect(cssText).to.contain("--monster-control-bar-height");
+    expect(cssText).to.contain("slot[name=popper]");
+    expect(cssText).to.contain("align-items: stretch");
+    expect(cssText).to.contain("margin-right");
+    expect(cssText).to.contain("margin-top");
+  });
+
+  it("should move overflowing mixed controls into the popper", async function () {
+    const OriginalResizeObserver = window.ResizeObserver;
+    const originalGlobalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    class TrackingResizeObserver extends ResizeObserverMock {
+      static instances = [];
+
+      constructor(callback) {
+        super(callback);
+        TrackingResizeObserver.instances.push(this);
+      }
+    }
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.ResizeObserver = TrackingResizeObserver;
+      globalThis.ResizeObserver = TrackingResizeObserver;
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="control-bar-wrapper">
+          <monster-control-bar id="overflow-bar">
+            <input id="overflow-input" type="search">
+            <select id="overflow-select"><option>One</option></select>
+            <button id="overflow-button">Run</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("control-bar-wrapper");
+      const bar = document.getElementById("overflow-bar");
+      const controls = [
+        document.getElementById("overflow-input"),
+        document.getElementById("overflow-select"),
+        document.getElementById("overflow-button"),
+      ];
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "90px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 90,
+      });
+
+      for (const control of controls) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 50,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 50,
+          height: 30,
+          top: 0,
+          right: 50,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(switchButton.hasAttribute("hidden")).to.be.false;
+      expect(document.getElementById("overflow-input").hasAttribute("slot")).to
+        .be.false;
+      expect(document.getElementById("overflow-select").getAttribute("slot")).to
+        .equal("popper");
+      expect(document.getElementById("overflow-button").getAttribute("slot")).to
+        .equal("popper");
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+});