@sealcode/sealgen 0.15.22 → 0.15.23

package/lib/forms/controls/checkboxed-list-input.js

@@ -8,34 +8,41 @@ class CheckboxedListInput extends FormFieldControl {
     this.options = options;
   }
   async render(fctx) {
-    const { parsed: currentValue } = await this.field.getValue(
-      fctx.ctx,
-      fctx.data
-    );
+    const {
+      valid,
+      message,
+      parsed: currentValue
+    } = await this.field.getValue(fctx.ctx, fctx.data, true);
     const pickedValues = Object.entries(currentValue || {}).filter(([, is_on]) => is_on).map(([key]) => key);
     const [options, isVisible] = await Promise.all([
       this.field.generateOptions(fctx.ctx),
       this.field.isVisible(fctx.ctx)
     ]);
     const { name, required } = this.field;
-    return tempstream`${isVisible ? options.map(
-      ({ value, label }) => inputWrapper(
-        [name, getRequiredClass(required)],
-        /* HTML */
-        `
-							<input
-								type="checkbox"
-								id="${name}.${value}"
-								name="${name}.${value}"
-								${pickedValues.includes(value) ? "checked" : ""}
-								form=${fctx.form_id}
-							/>
-							<label for="${name}.${value}"
-								>${label || value}</label
-							>
-						`
-      )
-    ) : ""}`;
+    return inputWrapper(
+      [name, getRequiredClass(required)],
+      tempstream`<label
+					>${this.options.label || this.field.name}</label
+				>${isVisible ? options.map(
+        ({ value, label }) => inputWrapper(
+          [name],
+          /* HTML */
+          `
+									<input
+										type="checkbox"
+										id="${name}.${value}"
+										name="${name}.${value}"
+										${pickedValues.includes(value) ? "checked" : ""}
+										form=${fctx.form_id}
+									/>
+									<label for="${name}.${value}"
+										>${label || value}</label
+									>
+								`
+        )
+      ) : ""}
+				${~valid && fctx.validate ? `<div class="input__error">${message}</div>` : ""}`
+    );
   }
 }
 export {

package/lib/forms/controls/checkboxed-list-input.test.js

@@ -7,6 +7,7 @@ import { Form } from "../form.js";
 import { CheckboxedListInput } from "./checkboxed-list-input.js";
 import { getBrowser } from "../../utils/browser-creator.js";
 import assert from "assert";
+import { sleep } from "../../utils/sleep.js";
 describe("checkboxed-list", () => {
   describe("basic tests", async () => {
     let server;
@@ -58,6 +59,178 @@ describe("checkboxed-list", () => {
       await page.getByRole("button", { name: "Wy\u015Blij" }).click();
       assert.deepStrictEqual(received_values, { syllables: { co: "on", de: "on" } });
     });
+    describe("behavior with (non)required", () => {
+      it("allows to send a form when no value is selected and fiels is not required", async () => {
+        const port = await getPort();
+        console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+        const app = new Koa();
+        const router = new Router();
+        const fields = {
+          syllables: new CheckboxedListField(false, async () => {
+            await sleep(10);
+            return ["sa", "mple", "co", "de"].map((s) => ({
+              value: s,
+              label: s.toLocaleUpperCase()
+            }));
+          })
+        };
+        let submit_called = false;
+        mount(
+          router,
+          "/",
+          new class extends Form {
+            constructor() {
+              super(...arguments);
+              this.fields = fields;
+              this.controls = [new CheckboxedListInput(fields.syllables)];
+            }
+            async onSubmit(ctx) {
+              submit_called = true;
+            }
+            async canAccess(_) {
+              return { canAccess: true, message: "" };
+            }
+          }(),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(port);
+        browser = await getBrowser();
+        const context = await browser.newContext();
+        page = await context.newPage();
+        await page.goto(`http://localhost:${port}`);
+        await page.getByRole("button", { name: "Wy\u015Blij" }).click();
+        await sleep(100);
+        assert(submit_called);
+      });
+      it("does not allow to send a form when no value is selected and field IS required", async () => {
+        const port = await getPort();
+        console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+        const app = new Koa();
+        const router = new Router();
+        const fields = {
+          syllables: new CheckboxedListField(true, async () => {
+            await sleep(10);
+            return ["sa", "mple", "co", "de"].map((s) => ({
+              value: s,
+              label: s.toLocaleUpperCase()
+            }));
+          })
+        };
+        let submit_called = false;
+        mount(
+          router,
+          "/",
+          new class extends Form {
+            constructor() {
+              super(...arguments);
+              this.fields = fields;
+              this.controls = [new CheckboxedListInput(fields.syllables)];
+            }
+            async onSubmit(ctx) {
+              submit_called = true;
+            }
+            async canAccess(_) {
+              return { canAccess: true, message: "" };
+            }
+          }(),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(port);
+        browser = await getBrowser();
+        const context = await browser.newContext();
+        page = await context.newPage();
+        await page.goto(`http://localhost:${port}`);
+        await page.getByRole("button", { name: "Wy\u015Blij" }).click();
+        await sleep(100);
+        assert(submit_called == false);
+        await page.getByText(/empty value/).click({ timeout: 500 });
+      });
+      it("allows to send a form when no value is selected and field IS required", async () => {
+        const port = await getPort();
+        console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+        const app = new Koa();
+        const router = new Router();
+        const fields = {
+          syllables: new CheckboxedListField(true, async () => {
+            await sleep(10);
+            return ["sa", "mple", "co", "de"].map((s) => ({
+              value: s,
+              label: s.toLocaleUpperCase()
+            }));
+          })
+        };
+        let submit_called = false;
+        mount(
+          router,
+          "/",
+          new class extends Form {
+            constructor() {
+              super(...arguments);
+              this.fields = fields;
+              this.controls = [new CheckboxedListInput(fields.syllables)];
+            }
+            async onSubmit(ctx) {
+              submit_called = true;
+            }
+            async canAccess(_) {
+              return { canAccess: true, message: "" };
+            }
+          }(),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(port);
+        browser = await getBrowser();
+        const context = await browser.newContext();
+        page = await context.newPage();
+        await page.goto(`http://localhost:${port}`);
+        await page.getByLabel("DE").check();
+        await page.getByRole("button", { name: "Wy\u015Blij" }).click();
+        await sleep(100);
+        assert(submit_called);
+      });
+    });
+    it("renders the label", async () => {
+      const port = await getPort();
+      console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+      const app = new Koa();
+      const router = new Router();
+      const fields = {
+        syllables: new CheckboxedListField(true, async () => {
+          return ["sa", "mple", "co", "de"].map((s) => ({
+            value: s,
+            label: s.toLocaleUpperCase()
+          }));
+        })
+      };
+      mount(
+        router,
+        "/",
+        new class extends Form {
+          constructor() {
+            super(...arguments);
+            this.fields = fields;
+            this.controls = [new CheckboxedListInput(fields.syllables, { label: "ABC" })];
+          }
+          async onSubmit(ctx) {
+          }
+          async canAccess(_) {
+            return { canAccess: true, message: "" };
+          }
+        }(),
+        true
+      );
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(port);
+      browser = await getBrowser();
+      const context = await browser.newContext();
+      page = await context.newPage();
+      await page.goto(`http://localhost:${port}`);
+      await page.getByRole("button", { name: "Wy\u015Blij" }).click();
+      await page.getByText(/ABC/).click({ timeout: 500 });
+    });
   });
 });
 //# sourceMappingURL=checkboxed-list-input.test.js.map

package/lib/forms/fields/field.js

@@ -40,7 +40,7 @@ class FormField {
     if (raw == void 0 || raw == null || raw == "") {
       return {
         parsed: null,
-        message: this.required ? "empty value" : "",
+        message: this.required ? "empty value, but field is required" : "",
         raw,
         ...validate ? { valid: !this.required } : {}
       };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.15.22",
+	"version": "0.15.23",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",

package/src/forms/controls/checkboxed-list-input.test.ts

@@ -9,6 +9,7 @@ import { Form } from "../form.js";
 import { CheckboxedListInput } from "./checkboxed-list-input.js";
 import { getBrowser } from "../../utils/browser-creator.js";
 import assert from "assert";
+import { sleep } from "../../utils/sleep.js";
 
 describe("checkboxed-list", () => {
 	describe("basic tests", async () => {
@@ -66,5 +67,193 @@ describe("checkboxed-list", () => {
 			await page.getByRole("button", { name: "Wyślij" }).click();
 			assert.deepStrictEqual(received_values, { syllables: { co: "on", de: "on" } });
 		});
+
+		describe("behavior with (non)required", () => {
+			it("allows to send a form when no value is selected and fiels is not required", async () => {
+				const port = await getPort();
+				console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+				const app = new Koa();
+				const router = new Router();
+
+				const fields = {
+					syllables: new CheckboxedListField(false, async () => {
+						await sleep(10);
+						return ["sa", "mple", "co", "de"].map((s) => ({
+							value: s,
+							label: s.toLocaleUpperCase(),
+						}));
+					}),
+				};
+
+				let submit_called = false;
+
+				mount(
+					router,
+					"/",
+					new (class extends Form<typeof fields, unknown> {
+						fields = fields;
+						controls = [new CheckboxedListInput(fields.syllables)];
+
+						async onSubmit(ctx: Context) {
+							submit_called = true;
+						}
+
+						async canAccess(_: Context) {
+							return { canAccess: true, message: "" };
+						}
+					})(),
+					true
+				);
+				app.use(router.routes()).use(router.allowedMethods());
+				server = app.listen(port);
+
+				browser = await getBrowser();
+				const context = await browser.newContext();
+				page = await context.newPage();
+				await page.goto(`http://localhost:${port}`);
+				await page.getByRole("button", { name: "Wyślij" }).click();
+				await sleep(100);
+				assert(submit_called);
+			});
+
+			it("does not allow to send a form when no value is selected and field IS required", async () => {
+				const port = await getPort();
+				console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+				const app = new Koa();
+				const router = new Router();
+
+				const fields = {
+					syllables: new CheckboxedListField(true, async () => {
+						await sleep(10);
+						return ["sa", "mple", "co", "de"].map((s) => ({
+							value: s,
+							label: s.toLocaleUpperCase(),
+						}));
+					}),
+				};
+
+				let submit_called = false;
+
+				mount(
+					router,
+					"/",
+					new (class extends Form<typeof fields, unknown> {
+						fields = fields;
+						controls = [new CheckboxedListInput(fields.syllables)];
+
+						async onSubmit(ctx: Context) {
+							submit_called = true;
+						}
+
+						async canAccess(_: Context) {
+							return { canAccess: true, message: "" };
+						}
+					})(),
+					true
+				);
+				app.use(router.routes()).use(router.allowedMethods());
+				server = app.listen(port);
+
+				browser = await getBrowser();
+				const context = await browser.newContext();
+				page = await context.newPage();
+				await page.goto(`http://localhost:${port}`);
+				await page.getByRole("button", { name: "Wyślij" }).click();
+				await sleep(100);
+				assert(submit_called == false);
+				await page.getByText(/empty value/).click({ timeout: 500 }); // should display an error message for that field
+			});
+
+			it("allows to send a form when no value is selected and field IS required", async () => {
+				const port = await getPort();
+				console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+				const app = new Koa();
+				const router = new Router();
+
+				const fields = {
+					syllables: new CheckboxedListField(true, async () => {
+						await sleep(10);
+						return ["sa", "mple", "co", "de"].map((s) => ({
+							value: s,
+							label: s.toLocaleUpperCase(),
+						}));
+					}),
+				};
+
+				let submit_called = false;
+
+				mount(
+					router,
+					"/",
+					new (class extends Form<typeof fields, unknown> {
+						fields = fields;
+						controls = [new CheckboxedListInput(fields.syllables)];
+
+						async onSubmit(ctx: Context) {
+							submit_called = true;
+						}
+
+						async canAccess(_: Context) {
+							return { canAccess: true, message: "" };
+						}
+					})(),
+					true
+				);
+				app.use(router.routes()).use(router.allowedMethods());
+				server = app.listen(port);
+
+				browser = await getBrowser();
+				const context = await browser.newContext();
+				page = await context.newPage();
+				await page.goto(`http://localhost:${port}`);
+				await page.getByLabel("DE").check();
+				await page.getByRole("button", { name: "Wyślij" }).click();
+				await sleep(100);
+				assert(submit_called);
+			});
+		});
+
+		it("renders the label", async () => {
+			const port = await getPort();
+			console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+			const app = new Koa();
+			const router = new Router();
+
+			const fields = {
+				syllables: new CheckboxedListField(true, async () => {
+					return ["sa", "mple", "co", "de"].map((s) => ({
+						value: s,
+						label: s.toLocaleUpperCase(),
+					}));
+				}),
+			};
+
+			mount(
+				router,
+				"/",
+				new (class extends Form<typeof fields, unknown> {
+					fields = fields;
+					controls = [new CheckboxedListInput(fields.syllables, { label: "ABC" })];
+
+					async onSubmit(ctx: Context) {
+						// noop
+					}
+
+					async canAccess(_: Context) {
+						return { canAccess: true, message: "" };
+					}
+				})(),
+				true
+			);
+			app.use(router.routes()).use(router.allowedMethods());
+			server = app.listen(port);
+
+			browser = await getBrowser();
+			const context = await browser.newContext();
+			page = await context.newPage();
+			await page.goto(`http://localhost:${port}`);
+			await page.getByRole("button", { name: "Wyślij" }).click();
+			await page.getByText(/ABC/).click({ timeout: 500 }); // should display an error message for that field
+		});
 	});
 });

package/src/forms/controls/checkboxed-list-input.ts

@@ -13,10 +13,11 @@ export class CheckboxedListInput extends FormFieldControl {
 	}
 
 	async render(fctx: FormControlContext) {
-		const { parsed: currentValue } = await this.field.getValue(
-			fctx.ctx,
-			fctx.data
-		);
+		const {
+			valid,
+			message,
+			parsed: currentValue,
+		} = await this.field.getValue(fctx.ctx, fctx.data, true);
 		const pickedValues = Object.entries(currentValue || {})
 			.filter(([, is_on]) => is_on)
 			.map(([key]) => key);
@@ -26,24 +27,34 @@ export class CheckboxedListInput extends FormFieldControl {
 		]);
 
 		const { name, required } = this.field;
-		return tempstream/* HTML */ `${isVisible
-			? options.map(({ value, label }) =>
-					inputWrapper(
-						[name, getRequiredClass(required)],
-						/* HTML */ `
-							<input
-								type="checkbox"
-								id="${name}.${value}"
-								name="${name}.${value}"
-								${pickedValues.includes(value) ? "checked" : ""}
-								form=${fctx.form_id}
-							/>
-							<label for="${name}.${value}"
-								>${label || value}</label
-							>
-						`
-					)
-			  )
-			: ""}`;
+		return inputWrapper(
+			[name, getRequiredClass(required)],
+			tempstream/* HTML */ `<label
+					>${this.options.label || this.field.name}</label
+				>${isVisible
+					? options.map(({ value, label }) =>
+							inputWrapper(
+								[name],
+								/* HTML */ `
+									<input
+										type="checkbox"
+										id="${name}.${value}"
+										name="${name}.${value}"
+										${pickedValues.includes(value)
+											? "checked"
+											: ""}
+										form=${fctx.form_id}
+									/>
+									<label for="${name}.${value}"
+										>${label || value}</label
+									>
+								`
+							)
+					  )
+					: ""}
+				${~valid && fctx.validate
+					? `<div class="input__error">${message}</div>`
+					: ""}`
+		);
 	}
 }

package/src/forms/fields/field.ts

@@ -130,7 +130,9 @@ export abstract class FormField<
 		if (raw == undefined || raw == null || raw == "") {
 			return {
 				parsed: null,
-				message: this.required ? "empty value" : "",
+				message: this.required
+					? "empty value, but field is required"
+					: "",
 				raw,
 				...(validate ? { valid: !this.required } : {}),
 			};