@schukai/monster 4.129.0 → 4.129.1

package/test/cases/components/form/popper-button.mjs

@@ -0,0 +1,89 @@
+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 PopperButton;
+
+describe("PopperButton", function () {
+	before(function (done) {
+		initJSDOM()
+			.then(() => {
+				return import("../../../../source/components/form/popper-button.mjs");
+			})
+			.then((m) => {
+				PopperButton = m["PopperButton"];
+				done();
+			})
+			.catch((e) => done(e));
+	});
+
+	afterEach(() => {
+		let mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("should instance of popper-button", function () {
+		expect(document.createElement("monster-popper-button")).is.instanceof(
+			PopperButton,
+		);
+	});
+
+	it("should apply content overflow mode to the rendered content wrapper", function (done) {
+		let mocks = document.getElementById("mocks");
+		const button = document.createElement("monster-popper-button");
+		mocks.appendChild(button);
+
+		setTimeout(() => {
+			try {
+				const content = button.shadowRoot.querySelector('[part="content"]');
+				expect(content).to.exist;
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"both",
+				);
+
+				button.setOption("popper.contentOverflow", "horizontal");
+
+				setTimeout(() => {
+					try {
+						expect(
+							content.getAttribute("data-monster-overflow-mode"),
+						).to.equal("horizontal");
+						done();
+					} catch (e) {
+						done(e);
+					}
+				}, 0);
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+
+	it("should apply content overflow mode from the HTML attribute", function (done) {
+		let mocks = document.getElementById("mocks");
+		mocks.innerHTML = `
+            <monster-popper-button
+                data-monster-option-popper-content-overflow="horizontal"
+            ></monster-popper-button>
+        `;
+
+		setTimeout(() => {
+			try {
+				const button = mocks.querySelector("monster-popper-button");
+				const content = button.shadowRoot.querySelector('[part="content"]');
+				expect(button.getOption("popper.contentOverflow")).to.equal(
+					"horizontal",
+				);
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"horizontal",
+				);
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+});

package/test/cases/dom/util/extract-keys.mjs

@@ -13,16 +13,14 @@ describe('extractKeys', () => {
             },
         };
 
-        const expected = new Map([
-            ['firstname', 'firstName'],
-            ['lastname', 'lastName'],
-            ['address-street', 'address.street'],
-            ['address-city', 'address.city'],
-        ]);
-
         const result = extractKeys(obj);
 
-        expect(JSON.stringify(Array.from(result))).to.equal(JSON.stringify(Array.from(expected)));
+        expect(result.get('firstname')).to.equal('firstName');
+        expect(result.get('first-name')).to.equal('firstName');
+        expect(result.get('lastname')).to.equal('lastName');
+        expect(result.get('last-name')).to.equal('lastName');
+        expect(result.get('address-street')).to.equal('address.street');
+        expect(result.get('address-city')).to.equal('address.city');
     });
 
     it('should use custom key and value separators', () => {
@@ -31,14 +29,12 @@ describe('extractKeys', () => {
             lastName: 'Doe',
         };
 
-        const expected = new Map([
-            ['prefix+firstname', 'prefix+firstName'],
-            ['prefix+lastname', 'prefix+lastName'],
-        ]);
-
         const result = extractKeys(obj, 'prefix', '+', '+');
 
-        expect(JSON.stringify(Array.from(result))).to.equal(JSON.stringify(Array.from(expected)));
+        expect(result.get('prefix+firstname')).to.equal('prefix+firstName');
+        expect(result.get('prefix+first-name')).to.equal('prefix+firstName');
+        expect(result.get('prefix+lastname')).to.equal('prefix+lastName');
+        expect(result.get('prefix+last-name')).to.equal('prefix+lastName');
     });
 
     it('check if value is null', () => {
@@ -48,17 +44,32 @@ describe('extractKeys', () => {
             address: null,
         };
 
-        const expected = new Map([
-            ['firstname', 'firstName'],
-            ['lastname', 'lastName'],
-            ['address', 'address'],
-            
-        ]);
-
         const result = extractKeys(obj);
 
-        expect(JSON.stringify(Array.from(result))).to.equal(JSON.stringify(Array.from(expected)));
+        expect(result.get('firstname')).to.equal('firstName');
+        expect(result.get('first-name')).to.equal('firstName');
+        expect(result.get('lastname')).to.equal('lastName');
+        expect(result.get('last-name')).to.equal('lastName');
+        expect(result.get('address')).to.equal('address');
     });
 
-    // Add more test cases as needed
+    it('should expose kebab-case aliases for camelCase nested keys', () => {
+        const obj = {
+            popper: {
+                contentOverflow: 'both',
+            },
+            message: {
+                width: {
+                    viewportRatio: 0.7,
+                },
+            },
+        };
+
+        const result = extractKeys(obj);
+
+        expect(result.get('popper-contentoverflow')).to.equal('popper.contentOverflow');
+        expect(result.get('popper-content-overflow')).to.equal('popper.contentOverflow');
+        expect(result.get('message-width-viewportratio')).to.equal('message.width.viewportRatio');
+        expect(result.get('message-width-viewport-ratio')).to.equal('message.width.viewportRatio');
+    });
 });

package/test/cases/dom/util/init-options-from-attributes.mjs

@@ -164,4 +164,25 @@ describe('initOptionsFromAttributes', () => {
         expect(result.key.caseSensitive).to.equal(false);
     });
 
+    it('should support kebab-case aliases for camelCase option names', () => {
+        options = {
+            popper: {
+                contentOverflow: 'both',
+            },
+            message: {
+                width: {
+                    viewportRatio: 0.7,
+                },
+            },
+        };
+
+        element.setAttribute('data-monster-option-popper-content-overflow', 'horizontal');
+        element.setAttribute('data-monster-option-message-width-viewport-ratio', '0.9');
+
+        const result = initOptionsFromAttributes(element, options);
+
+        expect(result.popper.contentOverflow).to.equal('horizontal');
+        expect(result.message.width.viewportRatio).to.equal(0.9);
+    });
+
 });