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

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

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 { ResizeObserverMock } from "../../../util/resize-observer.mjs";

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

const global = getGlobal();

let html1 = `
    <div id="test1">
    </div>
`;

let html2 = `
    <div id="test2">
        <monster-message-state-button data-monster-option-labels-button="Save">
            Save
        </monster-message-state-button>
    </div>
`;

let MessageStateButton;

describe("MessageStateButton", function () {
	before(function (done) {
		initJSDOM().then(() => {
			import("element-internals-polyfill").catch((e) => done(e));

			if (!global.ResizeObserver) {
				global.ResizeObserver = ResizeObserverMock;
			}

			import("../../../../source/components/form/message-state-button.mjs")
				.then((m) => {
					MessageStateButton = m["MessageStateButton"];
					done();
				})
				.catch((e) => done(e));
		});
	});

	describe("new MessageStateButton", function () {
		beforeEach(() => {
			let mocks = document.getElementById("mocks");
			mocks.innerHTML = html1;
		});

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

		describe("create from template", function () {
			beforeEach(() => {
				let mocks = document.getElementById("mocks");
				mocks.innerHTML = html2;
			});

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

			it("should contain monster-message-state-button", function () {
				expect(document.getElementById("test2")).contain.html(
					"<monster-message-state-button",
				);
			});
		});

		describe("document.createElement", function () {
			it("should instance of message-state-button", function () {
				expect(document.createElement("monster-message-state-button")).is
					.instanceof(MessageStateButton);
			});
		});
	});

	describe("disabled toggle", function () {
		afterEach(() => {
			let mocks = document.getElementById("mocks");
			mocks.innerHTML = "";
		});

		it("should sync disabled attribute to inner button", function (done) {
			let mocks = document.getElementById("mocks");
			const button = document.createElement("monster-message-state-button");
			button.innerHTML = "Save";
			mocks.appendChild(button);

			setTimeout(() => {
				try {
					const inner = button.shadowRoot.querySelector(
						"monster-state-button",
					);
					expect(inner).to.exist;

					button.setAttribute("disabled", "");
					setTimeout(() => {
						try {
							expect(inner.hasAttribute("disabled")).to.be.true;

							button.removeAttribute("disabled");
							setTimeout(() => {
								try {
									expect(inner.hasAttribute("disabled")).to.be.false;

									button.setAttribute("disabled", "");
									setTimeout(() => {
										try {
											expect(inner.hasAttribute("disabled")).to.be.true;
											done();
										} catch (e) {
											done(e);
										}
									}, 0);
								} catch (e) {
									done(e);
								}
							}, 0);
						} catch (e) {
							done(e);
						}
					}, 0);
				} catch (e) {
					done(e);
				}
			}, 0);
		});
	});

	describe("lifecycle safety", function () {
		afterEach(() => {
			let mocks = document.getElementById("mocks");
			mocks.innerHTML = "";
		});

		it("should not throw when auto-hide fires after disconnect", function (done) {
			let mocks = document.getElementById("mocks");
			const button = document.createElement("monster-message-state-button");
			button.innerHTML = "Save";
			mocks.appendChild(button);

			const failures = [];
			const onError = (event) => {
				failures.push(event?.error || event);
			};
			window.addEventListener("error", onError);

			setTimeout(() => {
				try {
					button.setMessage("Saved").showMessage(10);
					mocks.removeChild(button);

					setTimeout(() => {
						window.removeEventListener("error", onError);
						try {
							expect(failures).to.have.length(0);
							done();
						} catch (e) {
							done(e);
						}
					}, 30);
				} catch (e) {
					window.removeEventListener("error", onError);
					done(e);
				}
			}, 0);
		});
	});

	describe("message content rendering", function () {
		afterEach(() => {
			let mocks = document.getElementById("mocks");
			mocks.innerHTML = "";
		});

		it("should mount HTMLElement message content without reparsing rich content", function (done) {
			let mocks = document.getElementById("mocks");
			const button = document.createElement("monster-message-state-button");
			button.innerHTML = "Save";
			mocks.appendChild(button);

			const wrapper = document.createElement("div");
			const strong = document.createElement("strong");
			const inlineControl = document.createElement("button");
			strong.textContent = "Saved";
			inlineControl.textContent = "Undo";
			wrapper.appendChild(strong);
			wrapper.appendChild(inlineControl);

			setTimeout(() => {
				try {
					button.setMessage(wrapper).showMessage();

					setTimeout(() => {
						try {
							const message = button.shadowRoot.querySelector(
								'[data-monster-role="message"]',
							);
							expect(message.firstElementChild).to.equal(wrapper);
							expect(wrapper.firstElementChild).to.equal(strong);
							expect(wrapper.lastElementChild).to.equal(inlineControl);
							expect(inlineControl.isConnected).to.equal(true);
							done();
						} catch (e) {
							done(e);
						}
					}, 0);
				} catch (e) {
					done(e);
				}
			}, 0);
		});
	});
});