@schukai/monster 4.125.3 → 4.126.0

package/source/monster.mjs

@@ -80,6 +80,7 @@ export * from "./components/form/tree-select.mjs";
 export * from "./components/form/popper-button.mjs";
 export * from "./components/form/quantity.mjs";
 export * from "./components/form/credential-button.mjs";
+export * from "./components/form/wizard.mjs";
 export * from "./components/form/input-group.mjs";
 export * from "./components/form/checklist.mjs";
 export * from "./components/form/shadow-reload.mjs";

package/test/cases/components/datatable/pagination.mjs

@@ -9,6 +9,7 @@ chai.use(chaiDom);
 let Pagination;
 
 describe('Pagination', function () {
+    this.timeout(10000);
 
     before(function (done) {
         initJSDOM().then(() => {
@@ -96,4 +97,3 @@ describe('Pagination', function () {
     });
 
 });
-

package/test/cases/components/form/wizard.mjs

@@ -0,0 +1,153 @@
+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";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+let html = `
+	<monster-wizard id="wizard-under-test">
+		<section
+			data-monster-option-navigation-id="account-email"
+			data-monster-option-navigation-label="Account"
+			data-monster-option-navigation-sub-label="Email"
+		>
+			<input id="wizard-email" type="email" required>
+		</section>
+		<section
+			data-monster-option-navigation-id="account-password"
+			data-monster-option-navigation-label="Account"
+			data-monster-option-navigation-sub-label="Password"
+		>
+			<input id="wizard-password" type="password" required>
+		</section>
+		<section
+			data-monster-option-navigation-id="profile"
+			data-monster-option-navigation-label="Profile"
+		>
+			<input id="wizard-name" type="text">
+		</section>
+	</monster-wizard>
+`;
+
+let Wizard;
+
+describe("Wizard", 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/form/wizard.mjs").then((m) => {
+					Wizard = m.Wizard;
+				}),
+			);
+
+			Promise.all(promises)
+				.then(() => done())
+				.catch((e) => done(e));
+		});
+	});
+
+	afterEach(() => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("should register monster-wizard", function () {
+		expect(document.createElement("monster-wizard")).is.instanceof(Wizard);
+	});
+
+	it("should build grouped navigation from panel labels", async function () {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = html;
+
+		await new Promise((resolve) => setTimeout(resolve, 30));
+
+		const wizard = document.getElementById("wizard-under-test");
+		expect(wizard.getCurrentIndex()).to.equal(0);
+
+		const nav = wizard.shadowRoot.querySelector("monster-wizard-navigation");
+		expect(nav).to.not.equal(null);
+
+		const items = nav.querySelectorAll("ol.wizard-steps > li.step");
+		expect(items.length).to.equal(2);
+		expect(items[0].querySelectorAll("ul li").length).to.equal(2);
+		expect(
+			wizard.querySelector('[data-monster-option-navigation-id="account-email"]')
+				.hidden,
+		).to.equal(false);
+		expect(
+			wizard.querySelector(
+				'[data-monster-option-navigation-id="account-password"]',
+			).hidden,
+		).to.equal(true);
+	});
+
+	it("should use panel-specific validation callbacks before moving forward", async function () {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = html;
+
+		await new Promise((resolve) => setTimeout(resolve, 20));
+
+		const wizard = document.getElementById("wizard-under-test");
+		wizard.setOption("validation.native", false);
+		wizard.setOption("validation.panels.account-email", () => false);
+
+		const moved = await wizard.next();
+		expect(moved).to.equal(false);
+		expect(wizard.getCurrentIndex()).to.equal(0);
+
+		wizard.setOption("validation.panels.account-email", () => true);
+		const movedAfter = await wizard.next();
+		expect(movedAfter).to.equal(true);
+		expect(wizard.getCurrentIndex()).to.equal(1);
+	});
+
+	it("should block backward navigation when disabled", async function () {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = html;
+
+		await new Promise((resolve) => setTimeout(resolve, 20));
+
+		const wizard = document.getElementById("wizard-under-test");
+		wizard.setOption("validation.native", false);
+		await wizard.goTo(1, { force: true });
+		wizard.setOption("features.allowBackNavigation", false);
+
+		const moved = await wizard.previous();
+		expect(moved).to.equal(false);
+		expect(wizard.getCurrentIndex()).to.equal(1);
+	});
+
+	it("should complete navigation on submit", async function () {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = html;
+
+		await new Promise((resolve) => setTimeout(resolve, 30));
+
+		const wizard = document.getElementById("wizard-under-test");
+		wizard.setOption("validation.native", false);
+		await wizard.goTo(2, { force: true });
+
+		const submitted = await wizard.submit();
+		expect(submitted).to.equal(true);
+
+		const navigation = wizard.shadowRoot.querySelector("monster-wizard-navigation");
+		expect(navigation.getCurrentStepIndex()).to.equal(-1);
+	});
+});