@sealcode/sealgen 0.15.22 → 0.15.24

package/lib/test_utils/test-on-real-app.js

@@ -0,0 +1,147 @@
+import { execAsync } from "./exec_async.js";
+import { spawn } from "child_process";
+import getPort from "get-port";
+import waitPort from "wait-port";
+import { promises as fs } from "fs";
+import _locreq from "locreq";
+import { module_dirname } from "../utils/module-dirname.js";
+import EventEmitter from "events";
+const locreq = _locreq(module_dirname(import.meta.url));
+const callSealgenBin = () => `node ${locreq.resolve("lib/cli.js")}`;
+const sealious_minimal_commit = "b0d5bf5";
+class RealAppTest {
+  constructor() {
+    this.emitter = new EventEmitter();
+  }
+  static async init() {
+    const test_app = new RealAppTest();
+    test_app.node_pid = 0;
+    const timestamp = Date.now();
+    test_app.app_path = `/tmp/sealious-minimal-${timestamp}`;
+    test_app.container_name = `sealgen-test-mongo-${timestamp}`;
+    console.log("	cloning sealious-minimal...");
+    await execAsync(
+      `git clone https://hub.sealcode.org/source/sealious-minimal.git ${test_app.app_path} && cd ${test_app.app_path} && git checkout ${sealious_minimal_commit}`
+    );
+    console.log("	installing dependencies and sealgen...");
+    await execAsync(
+      `cd ${test_app.app_path} && npm ci rm -rf node_modules/@sealcode/sealgen && ln -s $OLDPWD node_modules/@sealcode/sealgen && ${callSealgenBin()} make-env`
+    );
+    console.log(
+      "	starting the database...(if timeouts here, run 'docker pull mongo:4.4-bionic' to solve)"
+    );
+    test_app.app_port = await getPort();
+    return test_app;
+  }
+  async start() {
+    this.mongo_port = await getPort();
+    await execAsync(
+      `docker run -p ${this.mongo_port}:27017 --name ${this.container_name} -d mongo:4.4-bionic`
+    );
+    const env = {
+      ...process.env,
+      SEALIOUS_MONGO_PORT: this.mongo_port.toString(),
+      SEALIOUS_PORT: this.app_port.toString()
+    };
+    const node_args = [`${this.app_path}/dist/back/index.js`];
+    console.log(
+      "EXECUTING APP",
+      `${Object.entries(env).map(([key, value]) => `${key}=${value}`).join(" ")} node ${node_args.join(" ")}`
+    );
+    const app_start = spawn(`node`, node_args, {
+      env
+    });
+    app_start.stdout.on(
+      "data",
+      (data) => console.log("APP OUTPUT:", data.toString())
+    );
+    app_start.stderr.on("data", (data) => console.log(data.toString()));
+    app_start.on("exit", (code) => {
+      this.emitter.emit("exit", code);
+      this.emitter.emit("process_error");
+    });
+    if (app_start.pid == void 0)
+      throw new Error("node failed to start");
+    this.node_pid = app_start.pid;
+    await waitPort({
+      host: "localhost",
+      port: this.app_port,
+      output: "silent",
+      timeout: 6e3
+    });
+  }
+  async close() {
+    try {
+      if (this.node_pid != 0)
+        await execAsync(`kill -9 ${this.node_pid}`);
+    } catch (error) {
+      throw new Error(
+        "node process exited unexpectedly, please inspect the output"
+      );
+    }
+    await Promise.all([
+      fs.rm(this.app_path, { recursive: true, force: true }),
+      execAsync(`docker rm -f ${this.container_name}`)
+    ]);
+  }
+  async runSealgenCommand(command) {
+    await execAsync(
+      `cd ${this.app_path} && ${callSealgenBin()} ${command} && ${callSealgenBin()} build`
+    );
+  }
+  async throwIfItKillsTheApp(cb) {
+    let finished = false;
+    return new Promise(async (resolve, reject) => {
+      const error_handler = () => {
+        if (!finished) {
+          reject();
+        }
+        finished = true;
+      };
+      this.emitter.addListener("process_error", error_handler);
+      try {
+        const result = await cb();
+        if (!finished) {
+          resolve(result);
+          finished = true;
+        }
+      } catch (e) {
+        if (!finished) {
+          reject(e);
+          finished = true;
+        }
+      }
+      this.emitter.removeListener("process_error", error_handler);
+    });
+  }
+  async httpGet(path) {
+    return this.throwIfItKillsTheApp(async () => {
+      const ret = await fetch(`http://localhost:${this.app_port}${path}`);
+      const status = ret.status;
+      const response = await ret.text();
+      return { status, response };
+    });
+  }
+  async httpPOST(path, body) {
+    return this.throwIfItKillsTheApp(async () => {
+      const ret = await fetch(
+        `http://localhost:${this.app_port}${path}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body)
+        }
+      );
+      const status = ret.status;
+      const response = await ret.text();
+      console.log("request done!");
+      console.log({ response });
+      return { status, response };
+    });
+  }
+}
+export {
+  RealAppTest,
+  callSealgenBin
+};
+//# sourceMappingURL=test-on-real-app.js.map

package/lib/utils/input-wrapper.js

@@ -5,9 +5,11 @@ function getRequiredClass(isRequired) {
 function getModifierClasses(modifiers) {
   return modifiers.map((m) => "form-input__wrapper--" + m).join(" ");
 }
-function inputWrapper(modifiers, input) {
+function inputWrapper(type, modifiers, input) {
   return tempstream`<div
-		class="form-input form-input__wrapper ${getModifierClasses(modifiers)}"
+		class="form-input form-input--type-${type} form-input__wrapper ${getModifierClasses(
+    modifiers
+  )}"
 	>
 		${input}
 	</div>`;

package/package.json

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

package/src/add-collection.ts

@@ -1,20 +1,35 @@
 import { resolve } from "path";
 import _locreq from "locreq";
 import { promises as fs, existsSync } from "fs";
-import { question } from "./utils/question.js";
 import { collectionTemplate } from "./templates/collection.js";
 import { generateCollections } from "./generate-collections.js";
 import { toKebabCase, toPascalCase } from "js-convert-case";
 const target_locreq = _locreq(process.cwd());
+import prompts from "prompts";
 
-export async function addCollection(): Promise<void> {
-	const collection_name = toPascalCase(
-		await question(
-			"What's the name of the collection class: ",
-			(s: string) => s.length > 3
-		)
-	);
+export async function addCollection(
+	params: Record<string, string | boolean> = {}
+): Promise<void> {
+	prompts.override(params);
+	const response = await prompts([
+		{
+			type: "text",
+			name: "collection_name",
+			message: "What's the name of the collection class: ",
+			validate: (s: string) =>
+				s.length > 3 ? true : "Should be at least 3 characters long",
+			format: function (action: string) {
+				return toPascalCase(action);
+			},
+		},
+	]);
+
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+	const collection_name: string = response.collection_name;
 
+	if (!collection_name) {
+		throw new Error("Empty collection name, please try again");
+	}
 	const file_path = target_locreq.resolve(
 		`src/back/collections/${toKebabCase(collection_name)}.ts`
 	);

package/src/add-route.test.ts

@@ -1,106 +1,16 @@
-import { promises as fs } from "fs";
-import { exec, spawn } from "child_process";
-import axios from "axios";
-import waitPort from "wait-port";
-import getPort from "get-port";
-
-import _locreq from "locreq";
-import { module_dirname } from "./utils/module-dirname.js";
-const locreq = _locreq(module_dirname(import.meta.url));
-
-const execAsync = (cmd: string) => {
-	return new Promise<void>((resolve, reject) => {
-		const process = exec(cmd);
-
-		console.log("EXECUTING", cmd);
-
-		process?.stdout?.on("data", (data) => {
-			console.log(`stdout: ${data}`);
-		});
-
-		process?.stderr?.on("data", (data) => {
-			console.log(`stdout: ${data}`);
-		});
-
-		process.on("exit", (code) => {
-			if (code == 0) {
-				resolve();
-			} else {
-				reject();
-			}
-		});
-	});
-};
-
-const callSealgenBin = () => `node ${locreq.resolve("lib/cli.js")}`;
+import { RealAppTest } from "./test_utils/test-on-real-app.js";
 
 describe("add route test", () => {
-	let node_pid = 0;
-	const timestamp = Date.now();
-	const app_path = `/tmp/sealious-minimal-${timestamp}`;
-	const container_name = `sealgen-test-mongo-${timestamp}`;
-	afterEach(async function () {
-		try {
-			if (node_pid != 0) await execAsync(`kill -9 ${node_pid}`);
-		} catch (error) {
-			throw new Error("node process exited unexpectedly, please inspect the output");
-		}
-		await Promise.all([
-			fs.rm(app_path, { recursive: true, force: true }),
-			execAsync(`docker rm -f ${container_name}`),
-		]);
-	});
+	it("creates minimal sealious app and adds a simple route that works", async function () {
+		const test_app = await RealAppTest.init();
 
-	it("creates minimal sealious app", async function () {
-		console.log("\tcloning sealious-minimal...");
-		await execAsync(
-			`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout df8cccf`
-		);
-		console.log("\tinstalling dependencies and sealgen...");
-		await execAsync(
-			`cd ${app_path} && npm ci rm -rf node_modules/@sealcode/sealgen && ln -s $OLDPWD node_modules/@sealcode/sealgen && ${callSealgenBin()} make-env`
-		);
-		console.log("\trunning add-route and building app...");
-		await execAsync(
-			`cd ${app_path} && ${callSealgenBin()} add-route --url=/sample --action=Sample --mode=page && ${callSealgenBin()} build`
-		);
-		console.log(
-			"\tstarting the database...(if timeouts here, run 'docker pull mongo:4.4-bionic' to solve)"
-		);
-		const mongo_port = await getPort();
-		const app_port = await getPort();
-		await execAsync(
-			`docker run -p ${mongo_port}:27017 --name ${container_name} -d mongo:4.4-bionic`
-		);
-		console.log("\trunning app and making request to the generated url...");
-		const env = {
-			...process.env,
-			SEALIOUS_MONGO_PORT: mongo_port.toString(),
-			SEALIOUS_PORT: app_port.toString(),
-		};
-		const node_args = [`${app_path}/dist/back/index.js`];
-		console.log(
-			"EXECUTING APP",
-			`${Object.entries(env)
-				.map(([key, value]) => `${key}=${value}`)
-				.join(" ")} node ${node_args.join(" ")}`
-		);
-		let app_start = spawn(`node`, node_args, {
-			env,
-		});
-		app_start.stdout.on("data", (data) => console.log("APP OUTPUT:", data.toString()));
-		app_start.stderr.on("data", (data) => console.log(data.toString()));
-		if (app_start.pid == undefined) throw new Error("node failed to start");
-		node_pid = app_start.pid;
-		await waitPort({
-			host: "localhost",
-			port: app_port,
-			output: "silent",
-			timeout: 6000,
-		});
-		const res = await axios.get(`http://localhost:${app_port}/sample`);
+		const path = "/sample";
+		await test_app.runSealgenCommand(`add-route --url=${path} --action=Sample --mode=page`);
+		await test_app.start();
+		const res = await test_app.httpGet(path);
 		if (res.status != 200) {
-			throw new Error("url generated by add-route exists but doesnt return 200");
+			throw new Error("url generated by add-route exists but doesn't return 200");
 		}
+		await test_app.close();
 	}).timeout(100 * 1000);
 });

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,36 @@ 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(
+			"checkboxed-list",
+			[name, getRequiredClass(required)],
+			tempstream/* HTML */ `<label
+					>${this.options.label || this.field.name}</label
+				>${isVisible
+					? options.map(({ value, label }) =>
+							inputWrapper(
+								"checkbox",
+								[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/controls/multiple-files.ts

@@ -230,6 +230,7 @@ export class MultipleFiles extends FormFieldControl {
 		][];
 
 		return inputWrapper(
+			"multiple-files",
 			["multiple-files", this.field.name, ...this.getClassModifiers()],
 			tempstream/* HTML */ `
 				<label>${this.options.label || this.field.name}</label>

package/src/forms/controls/simple-input.ts

@@ -137,6 +137,7 @@ export class SimpleInput<
 			true
 		);
 		return inputWrapper(
+			"simple-input",
 			this.getWrapperModifiers(),
 			tempstream/* HTML */ `
 				${label ? `<label for="${id}">${label}</label>` : ""}

package/src/forms/controls/tickable.ts

@@ -85,6 +85,7 @@ export abstract class Tickable<T> extends FormFieldControl {
 		const required = this.field.required;
 
 		return inputWrapper(
+			this.type,
 			this.getWrapperClasses(fctx.ctx, fctx.data, parsed),
 
 			/* HTML */ `

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 } : {}),
 			};

package/src/page/list.ts

@@ -14,7 +14,7 @@ import { FormDataValue } from "../forms/form-types.js";
 export const BasePagePropsShape = <const>{};
 export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
 
-const DEFAULT_ITEMS_PER_PAGE = 12;
+export const DEFAULT_ITEMS_PER_PAGE = 12;
 
 export const BaseListPageFields = <const>{
 	page: new NumberField(false, 1),

package/src/page/sealious-list.test.ts

@@ -0,0 +1,25 @@
+import assert from "assert";
+import { RealAppTest } from "../test_utils/test-on-real-app.js";
+
+describe("sealious-list test", () => {
+	it("creates minimal sealious app and adds a simple route that works", async function () {
+		const test_app = await RealAppTest.init();
+
+		const url = "/list";
+		await test_app.runSealgenCommand(`add-collection --collection_name=samples`);
+		await test_app.runSealgenCommand(
+			`add-route --url=${url} --action=List --mode=list --collection=samples`
+		);
+		await test_app.start();
+		const res_post = await test_app.httpPOST("/api/v1/collections/samples", {
+			content: "some-content",
+		});
+		assert(res_post.status == 201);
+		const res = await test_app.httpGet(url);
+		if (res.status != 200) {
+			throw new Error("url generated by add-route exists but doesn't return 200");
+		}
+		assert(res.response.includes("some-content"));
+		await test_app.close();
+	}).timeout(100 * 1000);
+});