@schukai/monster 4.141.3 → 4.142.1

package/test/cases/components/layout/panel.mjs

@@ -1,83 +1,97 @@
-import {getGlobal} from "../../../../source/types/global.mjs";
-import * as chai from 'chai';
-import {chaiDom} from "../../../util/chai-dom.mjs";
-import {initJSDOM} from "../../../util/jsdom.mjs";
+import * as chai from "chai";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
 
-let expect = chai.expect;
+const expect = chai.expect;
 chai.use(chaiDom);
 
 const global = getGlobal();
 
-
 // language=html
-let html1 = `
+const html1 = `
     <monster-panel id="my-panel">
-       
+
     </monster-panel>
 `;
 
-let SplitScreen;
-
-describe('SplitScreen', function () {
-
-    before(function (done) {
-        initJSDOM().then(() => {
-
-            import("element-internals-polyfill").catch(e => done(e));
-            
-            let promises = []
-
-            if (!global['crypto']) {
-                promises.push(import("@peculiar/webcrypto").then((m) => {
-                    const Crypto = m['Crypto'];
-                    global['crypto'] = new Crypto();
-                }));
-            }
-
-            promises.push(import("../../../../source/components/layout/panel.mjs").then((m) => {
-                SplitScreen = m['Panel'];
-            }))
-
-            Promise.all(promises).then(()=>{
-                done();
-            }).catch(e => done(e))
-
-        });
-    })
-
-    describe('document.createElement()', function () {
-
-        afterEach(() => {
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = "";
-        })
-
-        it('should have buttons and SplitScreen', function (done) {
-
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = html1;
-
-            setTimeout(() => {
-                try {
-                    const SplitScreen = document.getElementById('my-panel')
-                    expect(SplitScreen).is.instanceof(HTMLElement);
-
-                    setTimeout(() => {
-                        let div = SplitScreen.shadowRoot.querySelector('div');
-                        expect(div.hasChildNodes()).to.be.true;
-                        done();
-                    }, 100)
-
-                } catch (e) {
-                    return done(e);
-                }
-
-            }, 0)
-
-
-        });
-
-    });
-
-
-});
+describe("SplitScreen", () => {
+	before((done) => {
+		initJSDOM().then(() => {
+			import("element-internals-polyfill").catch((e) => done(e));
+
+			const promises = [];
+
+			if (!global.crypto) {
+				promises.push(
+					import("@peculiar/webcrypto").then((m) => {
+						const Crypto = m.Crypto;
+						global.crypto = new Crypto();
+					}),
+				);
+			}
+
+			promises.push(import("../../../../source/components/layout/panel.mjs"));
+
+			Promise.all(promises)
+				.then(() => {
+					done();
+				})
+				.catch((e) => done(e));
+		});
+	});
+
+	describe("document.createElement()", () => {
+		afterEach(() => {
+			const mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
+
+		it("should have buttons and SplitScreen", (done) => {
+			const mocks = document.getElementById("mocks");
+			mocks.innerHTML = html1;
+
+			setTimeout(() => {
+				try {
+					const splitScreen = document.getElementById("my-panel");
+					expect(splitScreen).is.instanceof(HTMLElement);
+
+					setTimeout(() => {
+						const div = splitScreen.shadowRoot.querySelector("div");
+						expect(div.hasChildNodes()).to.be.true;
+						done();
+					}, 100);
+				} catch (e) {
+					return done(e);
+				}
+			}, 0);
+		});
+
+		it("should expose and apply the calculated maximum height", (done) => {
+			const mocks = document.getElementById("mocks");
+			mocks.innerHTML = html1;
+
+			setTimeout(() => {
+				try {
+					const panel = document.getElementById("my-panel");
+					panel.setOption("heightAdjustment", 8);
+					panel.getBoundingClientRect = () => ({ top: 120 });
+
+					Object.defineProperty(window, "innerHeight", {
+						value: 720,
+						configurable: true,
+					});
+
+					const height = panel.getMaximumHeight();
+
+					expect(height).to.equal(608);
+					expect(panel.recalculateHeight()).to.equal(panel);
+					expect(panel.style.height).to.equal("608px");
+					done();
+				} catch (e) {
+					return done(e);
+				}
+			}, 0);
+		});
+	});
+});

package/test/cases/components/layout/slit-panel.mjs

@@ -1,83 +1,131 @@
-import {getGlobal} from "../../../../source/types/global.mjs";
-import * as chai from 'chai';
-import {chaiDom} from "../../../util/chai-dom.mjs";
-import {initJSDOM} from "../../../util/jsdom.mjs";
+import * as chai from "chai";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
 
-let expect = chai.expect;
+const expect = chai.expect;
 chai.use(chaiDom);
 
 const global = getGlobal();
 
-
 // language=html
-let html1 = `
+const html1 = `
     <monster-split-panel id="my-split-panel">
-       
+
     </monster-split-panel>
 `;
 
-let SplitScreen;
-
-describe('SplitScreen', function () {
-
-    before(function (done) {
-        initJSDOM().then(() => {
-
-            import("element-internals-polyfill").catch(e => done(e));
-            
-            let promises = []
-
-            if (!global['crypto']) {
-                promises.push(import("@peculiar/webcrypto").then((m) => {
-                    const Crypto = m['Crypto'];
-                    global['crypto'] = new Crypto();
-                }));
-            }
-
-            promises.push(import("../../../../source/components/layout/split-panel.mjs").then((m) => {
-                SplitScreen = m['SplitPanel'];
-            }))
-
-            Promise.all(promises).then(()=>{
-                done();
-            }).catch(e => done(e))
-
-        });
-    })
-
-    describe('document.createElement()', function () {
-
-        afterEach(() => {
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = "";
-        })
-
-        it('should have buttons and SplitScreen', function (done) {
-
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = html1;
-
-            setTimeout(() => {
-                try {
-                    const SplitScreen = document.getElementById('my-split-panel')
-                    expect(SplitScreen).is.instanceof(HTMLElement);
-
-                    setTimeout(() => {
-                        let div = SplitScreen.shadowRoot.querySelector('div');
-                        expect(div.hasChildNodes()).to.be.true;
-                        done();
-                    }, 100)
-
-                } catch (e) {
-                    return done(e);
-                }
-
-            }, 0)
-
-
-        });
-
-    });
-
-
-});
+describe("SplitScreen", () => {
+	before((done) => {
+		initJSDOM().then(() => {
+			import("element-internals-polyfill").catch((e) => done(e));
+
+			const promises = [];
+
+			if (!global.crypto) {
+				promises.push(
+					import("@peculiar/webcrypto").then((m) => {
+						const Crypto = m.Crypto;
+						global.crypto = new Crypto();
+					}),
+				);
+			}
+
+			promises.push(
+				import("../../../../source/components/layout/split-panel.mjs"),
+			);
+
+			Promise.all(promises)
+				.then(() => {
+					done();
+				})
+				.catch((e) => done(e));
+		});
+	});
+
+	describe("document.createElement()", () => {
+		afterEach(() => {
+			const mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
+
+		it("should have buttons and SplitScreen", (done) => {
+			const mocks = document.getElementById("mocks");
+			mocks.innerHTML = html1;
+
+			setTimeout(() => {
+				try {
+					const splitScreen = document.getElementById("my-split-panel");
+					expect(splitScreen).is.instanceof(HTMLElement);
+
+					setTimeout(() => {
+						const div = splitScreen.shadowRoot.querySelector("div");
+						expect(div.hasChildNodes()).to.be.true;
+						done();
+					}, 100);
+				} catch (e) {
+					return done(e);
+				}
+			}, 0);
+		});
+
+		it("should use the configured dragger width for vertical panel dimensions", (done) => {
+			const mocks = document.getElementById("mocks");
+			mocks.innerHTML = html1;
+
+			setTimeout(() => {
+				try {
+					const splitPanel = document.getElementById("my-split-panel");
+					const dragger = splitPanel.shadowRoot.querySelector(
+						"[data-monster-role=dragger]",
+					);
+					const startPanel = splitPanel.shadowRoot.querySelector(
+						"[data-monster-role=startPanel]",
+					);
+					const endPanel = splitPanel.shadowRoot.querySelector(
+						"[data-monster-role=endPanel]",
+					);
+
+					dragger.style.setProperty("--monster-dragger-width", "12px");
+					splitPanel.setDimension("40%");
+
+					expect(startPanel.style.width).to.equal("40%");
+					expect(endPanel.style.width).to.equal("calc(60% - 12px)");
+					done();
+				} catch (e) {
+					return done(e);
+				}
+			}, 0);
+		});
+
+		it("should use the configured dragger width for horizontal panel dimensions", (done) => {
+			const mocks = document.getElementById("mocks");
+			mocks.innerHTML = html1;
+
+			setTimeout(() => {
+				try {
+					const splitPanel = document.getElementById("my-split-panel");
+					const dragger = splitPanel.shadowRoot.querySelector(
+						"[data-monster-role=dragger]",
+					);
+					const startPanel = splitPanel.shadowRoot.querySelector(
+						"[data-monster-role=startPanel]",
+					);
+					const endPanel = splitPanel.shadowRoot.querySelector(
+						"[data-monster-role=endPanel]",
+					);
+
+					dragger.style.setProperty("--monster-dragger-width", "14px");
+					splitPanel.setOption("splitType", "horizontal");
+					splitPanel.setDimension("35%");
+
+					expect(startPanel.style.height).to.equal("35%");
+					expect(endPanel.style.height).to.equal("calc(65% - 14px)");
+					done();
+				} catch (e) {
+					return done(e);
+				}
+			}, 0);
+		});
+	});
+});