@sealcode/sealgen 0.8.44 → 0.8.48

package/src/forms/multiform.test.ts

@@ -1,540 +0,0 @@
-import Router from "@koa/router";
-import Koa from "koa";
-import axios from "axios";
-import { Browser, firefox, Page } from "playwright";
-import { expect } from "@playwright/test";
-import { FlatTemplatable, tempstream } from "tempstream";
-import { Controls, Fields, Form, Mountable } from "..";
-import { mount } from "../mount";
-import { FormDataValue, FormMessage } from "./form";
-import { Multiform } from "./multiform";
-import { assertThrowsAsync } from "../utils/utils";
-import { form_factory } from "./form.test";
-import { getBrowser } from "../utils/browser-creator";
-
-const fields1 = {
-	email: new Fields.SimpleFormField(true),
-};
-
-const form1 = new (class extends Form<typeof fields1, void> {
-	defaultSuccessMessage = "Form1 done!";
-	controls = [new Controls.FormHeader("form1"), new Controls.SimpleInput(fields1.email)];
-	fields = fields1;
-	onSubmit() {
-		return;
-	}
-})();
-
-const fields2 = {
-	name: new Fields.SimpleFormField(true),
-};
-
-const form2 = new (class extends Form<Record<never, unknown>, void> {
-	defaultSuccessMessage = "Form2 done!";
-	controls = [new Controls.FormHeader("form2"), new Controls.SimpleInput(fields2.name)];
-	fields = fields2;
-	onSubmit() {
-		return;
-	}
-})();
-
-function multiform_factory(
-	canAccessFun1?: Mountable["canAccess"],
-	canAccessFun2?: Mountable["canAccess"]
-): Multiform {
-	return new (class extends Multiform {
-		name = "multiform_test";
-		forms = {
-			form1: form_factory(canAccessFun1),
-			form2: form_factory(canAccessFun2),
-		};
-		async render(...args: Parameters<Multiform["render"]>): Promise<FlatTemplatable> {
-			return tempstream/* HTML */ `<!DOCTYPE html>
-				<html>
-					<head>
-						<title>Multiform Test - Sealgen</title>
-						<script type="module">
-							import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
-						</script>
-					</head>
-					<body>
-						${super.render(...args)}
-					</body>
-				</html>`;
-		}
-	})();
-}
-
-async function tests(js_enabled: boolean) {
-	let page: Page;
-
-	before(async () => {
-		const browser = await getBrowser();
-		const context = await browser.newContext({
-			javaScriptEnabled: js_enabled,
-		});
-		page = await context.newPage();
-		await page.goto("http://localhost:8080");
-		await page.getByLabel("email").click();
-		await page.getByLabel("email").fill("sample1");
-		await page.getByLabel("name").click();
-		await page.getByLabel("name").fill("sample2");
-		await page.locator("#multiform_test_form1_submit").click();
-	});
-
-	it("checking whether only one submit handler is run", async () => {
-		await page.getByText("Form1 done!").click();
-		await assertThrowsAsync(async () => {
-			return page.getByText("Form2 done!").click({ timeout: 500 });
-		});
-	});
-
-	it("checking whether the input in the not submitted form prevails", async () => {
-		await expect(page.getByLabel("name")).toHaveValue("sample2");
-	});
-}
-
-async function general_form_validation_e2e_tests(js_enabled: boolean) {
-	let browser: Browser;
-	let page: Page;
-
-	browser = await getBrowser();
-	const context = await browser.newContext({
-		javaScriptEnabled: js_enabled,
-	});
-	page = await context.newPage();
-	await page.goto("http://localhost:8080");
-	await page.getByPlaceholder("text").click();
-	await page.getByPlaceholder("text").fill("incorrect");
-	await page.getByPlaceholder("password").click();
-	await page.getByPlaceholder("password").fill("test");
-	await page.locator("#multiform_test_form2_submit").click();
-	assertThrowsAsync(async () => {
-		page.getByText("Incorrect input").click({ timeout: 500 });
-	});
-}
-
-async function individual_field_validation_e2e_tests(javaScriptEnabled: boolean) {
-	let browser: Browser;
-	let page: Page;
-
-	before(async () => {
-		browser = await getBrowser();
-		const context = await browser.newContext({
-			javaScriptEnabled,
-		});
-		page = await context.newPage();
-		await page.goto("http://localhost:8080");
-	});
-
-	it("validation message shows when incorrect input is given", async () => {
-		await page.getByPlaceholder("text").click();
-		await page.getByPlaceholder("text").fill("notanemail");
-		await page.locator("#multiform_test_form1_submit").click();
-		await page.getByText("Please enter a proper email address").click();
-	});
-
-	it("validation message doesn't show when correct input is given", async () => {
-		await page.getByPlaceholder("text").click();
-		await page.getByPlaceholder("text").fill("yes@an.email");
-		await page.locator("#multiform_test_form1_submit").click();
-		assertThrowsAsync(async () => {
-			return page.getByText("Please enter a proper email address").click({ timeout: 500 });
-		});
-	});
-}
-
-describe("multiform test", () => {
-	describe("basic tests", async () => {
-		let server: ReturnType<Koa["listen"]>;
-
-		before(async () => {
-			const app = new Koa();
-			const router = new Router();
-
-			mount(
-				router,
-				"/",
-				new (class extends Multiform {
-					name = "multiform_test";
-					forms = { form1, form2 };
-					async render(
-						ctx: Koa.Context,
-						messages: FormMessage[],
-						prerenderedForms?: Record<string, FlatTemplatable | undefined>,
-						show_field_errors = true
-					): Promise<FlatTemplatable> {
-						return tempstream/* HTML */ `<!DOCTYPE html>
-							<html>
-								<head>
-									<title>Multiform Test - Sealgen</title>
-									<script type="module">
-										import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
-									</script>
-								</head>
-								<body>
-									${super.render(
-										ctx,
-										messages,
-										prerenderedForms,
-										show_field_errors
-									)}
-								</body>
-							</html>`;
-					}
-				})(),
-				true
-			);
-			app.use(router.routes()).use(router.allowedMethods());
-			server = app.listen(8080);
-		});
-
-		after(() => {
-			server.close();
-		});
-
-		describe("turbolinks + js enabled", async () => tests(true));
-		describe("turbolinks + js disabled", async () => tests(false));
-	});
-
-	describe("canAccess", async () => {
-		let page: Page;
-		let server: ReturnType<Koa["listen"]>;
-
-		describe("allow access to both forms when both canAccess return true", async () => {
-			before(async () => {
-				const app = new Koa();
-				const router = new Router();
-
-				mount(
-					router,
-					"/",
-					multiform_factory(
-						async (
-							ctx: Koa.Context
-						): Promise<{ canAccess: boolean; message: string }> => {
-							return { canAccess: true, message: "" };
-						},
-						async (
-							ctx: Koa.Context
-						): Promise<{ canAccess: boolean; message: string }> => {
-							return { canAccess: true, message: "" };
-						}
-					),
-					true
-				);
-				app.use(router.routes()).use(router.allowedMethods());
-				server = app.listen(8080);
-				const browser = await getBrowser();
-				const context = await browser.newContext();
-				page = await context.newPage();
-			});
-
-			after(async () => {
-				server.close();
-			});
-
-			it("check wether it renders", async () => {
-				const response = await page.goto("http://localhost:8080");
-
-				if (response?.status() != 200) {
-					throw new Error(
-						`Should return 200 status and it returns ${response?.status()}`
-					);
-				}
-				await page.locator("#form1").getByText("This is a test:").click();
-				await page.locator("#form2").getByText("This is a test:").click();
-			});
-
-			it("check wether you can submit through http (axios)", async () => {
-				await axios.post(
-					"http://localhost:8080/form2",
-					{
-						form2__text: "pass",
-					},
-					{
-						validateStatus: (status: number) => {
-							if (status == 422) return true;
-							return false;
-						},
-					}
-				);
-			});
-		});
-
-		describe("deny access to both forms", async () => {
-			before(async () => {
-				const app = new Koa();
-				const router = new Router();
-
-				mount(
-					router,
-					"/",
-					multiform_factory(
-						async (
-							ctx: Koa.Context
-						): Promise<{ canAccess: boolean; message: string }> => {
-							return { canAccess: false, message: "" };
-						},
-						async (
-							ctx: Koa.Context
-						): Promise<{ canAccess: boolean; message: string }> => {
-							return { canAccess: false, message: "" };
-						}
-					),
-					true
-				);
-				app.use(router.routes()).use(router.allowedMethods());
-				server = app.listen(8080);
-				const browser = await getBrowser();
-				const context = await browser.newContext();
-				page = await context.newPage();
-			});
-
-			after(async () => {
-				server.close();
-			});
-
-			it("check wether forms didnt render", async () => {
-				await page.goto("http://localhost:8080");
-				await assertThrowsAsync(async () => {
-					return page
-						.locator("#form1")
-						.getByText("This is a test:")
-						.click({ timeout: 300 });
-				});
-			});
-
-			it("check wether it's possible to submit through http", async () => {
-				await axios.post(
-					"http://localhost:8080/form2",
-					{
-						form2__text: "pass",
-					},
-					{
-						validateStatus: (status: number) => {
-							if (status == 403) return true;
-							return false;
-						},
-					}
-				);
-			});
-		});
-
-		describe("allow access to one form, deny to the other", async () => {
-			before(async () => {
-				const app = new Koa();
-				const router = new Router();
-
-				mount(
-					router,
-					"/",
-					multiform_factory(
-						async (
-							ctx: Koa.Context
-						): Promise<{ canAccess: boolean; message: string }> => {
-							return { canAccess: true, message: "" };
-						},
-						async (
-							ctx: Koa.Context
-						): Promise<{ canAccess: boolean; message: string }> => {
-							return { canAccess: false, message: "" };
-						}
-					),
-					true
-				);
-				app.use(router.routes()).use(router.allowedMethods());
-				server = app.listen(8080);
-				const browser = await getBrowser();
-				const context = await browser.newContext({});
-				page = await context.newPage();
-			});
-
-			after(async () => {
-				server.close();
-			});
-
-			it("check wether form1 renders", async () => {
-				await page.goto("http://localhost:8080");
-				await page.locator("#form1").getByText("This is a test:").click({ timeout: 300 });
-			});
-
-			it("check wether it's possible to submit to form1 through http", async () => {
-				await axios.post(
-					"http://localhost:8080/form1",
-					{
-						form1__text: "pass",
-					},
-					{
-						validateStatus: (status: number) => {
-							if (status == 422) return true;
-							return false;
-						},
-					}
-				);
-			});
-
-			it("check wether form2 does not render", async () => {
-				await page.goto("http://localhost:8080");
-				await assertThrowsAsync(async () => {
-					return page
-						.locator("#form2")
-						.getByText("This is a test:")
-						.click({ timeout: 300 });
-				});
-			});
-
-			it("check wether it's possible to submit to form2 through http", async () => {
-				await axios.post(
-					"http://localhost:8080/form2",
-					{
-						form2__text: "pass",
-					},
-					{
-						validateStatus: (status: number) => {
-							if (status == 403) return true;
-							return false;
-						},
-					}
-				);
-			});
-		});
-	});
-
-	describe("validation e2e", async () => {
-		describe("basic tests", async () => {
-			let server: ReturnType<Koa["listen"]>;
-
-			before(async () => {
-				const app = new Koa();
-				const router = new Router();
-
-				mount(
-					router,
-					"/",
-					new (class extends Multiform {
-						name = "multiform_test";
-						forms = {
-							form1: new (class extends Form<typeof fields1, void> {
-								fields = fields1;
-								submitButtonText = "Submit";
-								controls = [
-									new Controls.SimpleInput(fields1.email, {
-										label: "This is a test:",
-										type: "text",
-									}),
-								];
-
-								async onSubmit() {
-									return;
-								}
-
-								async validateValues(
-									ctx: Koa.Context,
-									data: Record<string, FormDataValue>
-								): Promise<{ valid: boolean; error: string }> {
-									if (data.email === "incorrect")
-										return {
-											valid: false,
-											error: "Incorrect input",
-										};
-									return { valid: true, error: "" };
-								}
-							})(),
-							form2: form_factory(),
-						};
-						async render(
-							...args: Parameters<Multiform["render"]>
-						): Promise<FlatTemplatable> {
-							return tempstream/* HTML */ `<!DOCTYPE html>
-								<html>
-									<head>
-										<title>Multiform Test - Sealgen</title>
-										<script type="module">
-											import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
-										</script>
-									</head>
-									<body>
-										${super.render(...args)}
-									</body>
-								</html>`;
-						}
-					})(),
-					true
-				);
-				app.use(router.routes()).use(router.allowedMethods());
-				server = app.listen(8080);
-			});
-
-			after(async () => {
-				server.close();
-			});
-
-			it("js enabled", async () => general_form_validation_e2e_tests(true));
-			it("js disabled", async () => general_form_validation_e2e_tests(false));
-		});
-
-		describe("field specific validation", async () => {
-			let server: ReturnType<Koa["listen"]>;
-
-			before(async () => {
-				const app = new Koa();
-				const router = new Router();
-				const fields = {
-					text: new Fields.EmailField(true),
-				};
-
-				mount(
-					router,
-					"/",
-					new (class extends Multiform {
-						name = "multiform_test";
-						forms = {
-							form1: new (class extends Form<typeof fields, void> {
-								fields = fields;
-								submitButtonText = "Submit";
-								controls = [
-									new Controls.SimpleInput(fields.text, {
-										label: "This is a test:",
-										type: "text",
-									}),
-								];
-
-								async onSubmit() {
-									return;
-								}
-							})(),
-							form2: form_factory(),
-						};
-						async render(
-							...args: Parameters<Multiform["render"]>
-						): Promise<FlatTemplatable> {
-							return tempstream/* HTML */ `<!DOCTYPE html>
-								<html>
-									<head>
-										<title>Multiform Test - Sealgen</title>
-										<script type="module">
-											import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
-										</script>
-									</head>
-									<body>
-										${super.render(...args)}
-									</body>
-								</html>`;
-						}
-					})(),
-					true
-				);
-				app.use(router.routes()).use(router.allowedMethods());
-				server = app.listen(8080);
-			});
-
-			after(async () => {
-				server.close();
-			});
-
-			describe("js enabled", async () => individual_field_validation_e2e_tests(true));
-			describe("js disabled", async () => individual_field_validation_e2e_tests(false));
-		});
-	});
-});