@sealcode/sealgen 0.11.8 → 0.12.2

package/dist/forms/form.test.js

@@ -0,0 +1,316 @@
+import Router from "@koa/router";
+import { describe, it, beforeAll, afterAll, afterEach, beforeEach } from "vitest";
+import axios from "axios";
+import Koa from "koa";
+import { Controls, Fields, Form } from "../index.js";
+import { mount } from "../mount.js";
+import { locator_is_visible } from "../test_utils/locator_is_visible.js";
+import { getBrowser } from "../utils/browser-creator.js";
+import { assertThrowsAsync } from "../utils/utils.js";
+const fields = {
+  text: new Fields.SimpleFormField(true)
+};
+function form_factory(canAccessFun) {
+  const result = new class extends Form {
+    constructor() {
+      super(...arguments);
+      this.fields = fields;
+      this.submitButtonText = "Submit";
+      this.controls = [
+        new Controls.SimpleInput(fields.text, {
+          label: "This is a test:",
+          type: "password"
+        })
+      ];
+    }
+    async onSubmit() {
+      return;
+    }
+  }();
+  if (canAccessFun)
+    result.canAccess = canAccessFun;
+  return result;
+}
+describe("form test", () => {
+  let page;
+  beforeAll(async () => {
+    const browser = await getBrowser();
+    const context = await browser.newContext();
+    page = await context.newPage();
+  });
+  describe("basic tests", async () => {
+    let server;
+    beforeAll(async () => {
+      const app = new Koa();
+      const router = new Router();
+      mount(router, "/", form_factory(), true);
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(8080);
+      await page.goto("http://localhost:8080");
+    });
+    afterAll(async () => {
+      server.close();
+    });
+    it("does not allow to submit an empty form when there's a required field", async () => {
+      await page.getByRole("button", { name: "Submit", exact: true }).click();
+      await assertThrowsAsync(async () => {
+        return page.getByText("Done").click({ timeout: 500 });
+      });
+    });
+    it("allows to submit a form when all required fields have a value", async () => {
+      await page.getByPlaceholder("password").click();
+      await page.getByPlaceholder("password").fill("testpasswd");
+      await page.getByRole("button", { name: "Submit", exact: true }).click();
+      await page.getByText("Done").click();
+    });
+    it("does not allow submitting an empty form by circumventing HTML-based validation", async () => {
+      const res_axios = await axios.post(
+        "http://localhost:8080",
+        {
+          text: ""
+        },
+        {
+          validateStatus: (status) => {
+            if (status == 422)
+              return true;
+            return false;
+          }
+        }
+      );
+      if (!res_axios.data.includes("Some fields are invalid")) {
+        throw new Error("when sending a empty request with axios, the error didnt appear");
+      }
+    });
+  });
+  describe("canAccess tests", async () => {
+    let server;
+    afterEach(async () => {
+      server.close();
+    });
+    it("allows visit when configured when canAccess returns true", async () => {
+      const app = new Koa();
+      const router = new Router();
+      mount(
+        router,
+        "/",
+        form_factory(
+          async (ctx) => {
+            return { canAccess: true, message: "" };
+          }
+        ),
+        true
+      );
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(8080);
+      const response = await page.goto("http://localhost:8080");
+      if (response?.status() != 200) {
+        throw new Error(`Should return 200 status and it returns ${response?.status()}`);
+      }
+    });
+    describe("declines access when canAccess returns false", async () => {
+      const app = new Koa();
+      const router = new Router();
+      beforeAll(async () => {
+        mount(
+          router,
+          "/",
+          form_factory(
+            async (ctx) => {
+              console.log("CAN ACCESS? FALSE");
+              return { canAccess: false, message: "" };
+            }
+          ),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+      });
+      beforeEach(async () => {
+        server = app.listen(8080);
+      });
+      it("prevents the form from rendering", async () => {
+        console.log("CONSOLELOG TEST");
+        const response = await page.goto("http://localhost:8080");
+        if (response?.status() != 403) {
+          throw new Error(
+            `Should return 403 status and it returns ${response?.status()}`
+          );
+        }
+      });
+      it("does not allow submitting of the form through axios", async () => {
+        await axios.post(
+          "http://localhost:8080",
+          {
+            text: "sample"
+          },
+          {
+            validateStatus: (status) => {
+              if (status == 403)
+                return true;
+              return false;
+            }
+          }
+        );
+      });
+    });
+    it("passes the context to canAccess (false case)", async () => {
+      const app = new Koa();
+      const router = new Router();
+      mount(
+        router,
+        "/",
+        form_factory(
+          async (ctx) => {
+            return ctx.$context && ctx.$context.user_id ? { canAccess: true, message: "" } : { canAccess: false, message: "" };
+          }
+        ),
+        true
+      );
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(8080);
+      const response = await page.goto("http://localhost:8080");
+      if (response?.status() != 403) {
+        throw new Error(`Should return 403 status and it returns ${response?.status()}`);
+      }
+    });
+    it("passes the context to canAccess (true case)", async () => {
+      const app = new Koa();
+      const router = new Router();
+      router.use(async (ctx, next) => {
+        ctx.$context = {
+          user_id: "miguel"
+        };
+        await next();
+      });
+      mount(
+        router,
+        "/",
+        form_factory(
+          async (ctx) => {
+            return ctx.$context && ctx.$context.user_id ? { canAccess: true, message: "" } : { canAccess: false, message: "" };
+          }
+        ),
+        true
+      );
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(8080);
+      const response = await page.goto("http://localhost:8080");
+      if (response?.status() != 200) {
+        throw new Error(`Should return 200 status and it returns ${response?.status()}`);
+      }
+    });
+  });
+  describe("validation e2e", async () => {
+    describe("validation message", async () => {
+      let server;
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        mount(
+          router,
+          "/",
+          new class extends Form {
+            constructor() {
+              super(...arguments);
+              this.fields = fields;
+              this.submitButtonText = "Submit";
+              this.controls = [
+                new Controls.SimpleInput(fields.text, {
+                  label: "This is a test:",
+                  type: "password"
+                })
+              ];
+            }
+            async onSubmit() {
+              return;
+            }
+            async validateValues(ctx, data) {
+              if (data.text === "incorrect")
+                return {
+                  valid: false,
+                  error: "Incorrect input"
+                };
+              return { valid: true, error: "" };
+            }
+          }(),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(8080);
+        await page.goto("http://localhost:8080");
+      });
+      afterAll(async () => {
+        server.close();
+      });
+      it("shows up when incorrect input is given", async () => {
+        await page.getByPlaceholder("password").click();
+        await page.getByPlaceholder("password").fill("incorrect");
+        await page.getByRole("button", { name: "Submit" }).click();
+        if (!await locator_is_visible(page.getByText("Incorrect input")))
+          throw new Error("validation message doens't show up when input is incorrect");
+      });
+      it("doesn't show when correct input is given", async () => {
+        await page.getByPlaceholder("password").click();
+        await page.getByPlaceholder("password").fill("correct");
+        await page.getByRole("button", { name: "Submit" }).click();
+        await assertThrowsAsync(async () => {
+          return page.getByText("Incorrect input").click({ timeout: 500 });
+        });
+      });
+    });
+    describe("field specific validation message", async () => {
+      let server;
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        const fields2 = {
+          text: new Fields.EmailField(true)
+        };
+        mount(
+          router,
+          "/",
+          new class extends Form {
+            constructor() {
+              super(...arguments);
+              this.fields = fields2;
+              this.submitButtonText = "Submit";
+              this.controls = [
+                new Controls.SimpleInput(fields2.text, {
+                  label: "This is a test:",
+                  type: "text"
+                })
+              ];
+            }
+            async onSubmit() {
+              return;
+            }
+          }(),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(8080);
+        await page.goto("http://localhost:8080");
+      });
+      afterAll(async () => {
+        server.close();
+      });
+      it("shows up when incorrect input is given", async () => {
+        await page.getByPlaceholder("text").click();
+        await page.getByPlaceholder("text").fill("notanemail");
+        await page.getByRole("button", { name: "Submit" }).click();
+        await page.getByText("Please enter a proper email address").click();
+      });
+      it("doesn't show up when correct input is given", async () => {
+        await page.getByPlaceholder("text").click();
+        await page.getByPlaceholder("text").fill("yes@an.email");
+        await page.getByRole("button", { name: "Submit" }).click();
+        assertThrowsAsync(async () => {
+          return page.getByText("Please enter a proper email address").click({ timeout: 500 });
+        });
+      });
+    });
+  });
+});
+export {
+  form_factory
+};
+//# sourceMappingURL=form.test.js.map

package/dist/forms/multiform.js

@@ -0,0 +1,200 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { tempstream } from "tempstream";
+import { MountableWithFields } from "../page/mountable-with-fields.js";
+import { attribute } from "../sanitize.js";
+const FIELD_PREFIX_SEPARATOR = "___";
+class Multiform extends MountableWithFields {
+  constructor() {
+    super(...arguments);
+    this.controls = [];
+  }
+  init() {
+    super.init();
+    for (const [key, form] of Object.entries(this.forms)) {
+      if (key !== attribute(key)) {
+        throw new Error(
+          `Form name "${key}" is not url-safe. Try: "${attribute(
+            key
+          )}"`
+        );
+      }
+      form.makeOpenFormTag = () => `<div>`;
+      form.makeCloseFormTag = () => `</div>`;
+      form.field_names_prefix = key + FIELD_PREFIX_SEPARATOR;
+      form.form_id = this.name;
+      form.action = "./" + key;
+      form.init();
+      form.extractRawValues = async (context) => this.getSubformRawValues(context, key);
+      const submit_button_id = this.name + "_" + key + "_submit";
+      form.makeSubmitButton = () => (
+        /* HTML */
+        `<input
+				type="submit"
+				value="${form.submitButtonText}"
+				formaction="${form.action}"
+				id="${submit_button_id}"
+				${form.form_id ? `form="${form.form_id}"` : ""}
+			/> `
+      );
+    }
+    for (const form of Object.values(this.forms)) {
+      for (const field of Object.values(form.fields)) {
+        if (field.name.includes(FIELD_PREFIX_SEPARATOR)) {
+          throw new Error(
+            `A field name within multiform cannot contain '${FIELD_PREFIX_SEPARATOR}'`
+          );
+        }
+      }
+    }
+  }
+  async extractRawValues(ctx) {
+    return ctx.$body || {};
+  }
+  async canAccess() {
+    return {
+      canAccess: true,
+      message: "this view includes multiple forms and each of them have their unique access rules"
+    };
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getSubformsToRender(ctx) {
+    const requested_frame = ctx.headers["turbo-frame"];
+    if (!is(
+      requested_frame,
+      predicates.or(predicates.undefined, predicates.string)
+    )) {
+      throw new Error("Wrong turbo-frame header value type");
+    }
+    const forms_to_render = requested_frame && this.forms[requested_frame] ? [[requested_frame, this.forms[requested_frame]]] : Object.entries(this.forms);
+    return forms_to_render;
+  }
+  async renderSubform(ctx, sub_form_name, show_field_errors) {
+    const form = this.forms[sub_form_name];
+    const result = await form.canAccess(ctx);
+    if (!result.canAccess) {
+      return result.message;
+    }
+    return form.render(
+      ctx,
+      {
+        raw_values: await this.getSubformRawValues(ctx, sub_form_name),
+        messages: []
+      },
+      show_field_errors
+    );
+  }
+  async getSubformRawValues(ctx, sub_form_name) {
+    const result = Object.fromEntries(
+      Object.entries(await this.extractRawValues(ctx)).filter(
+        ([key]) => key.startsWith(sub_form_name + FIELD_PREFIX_SEPARATOR)
+      ).map(([key, value]) => [
+        key.slice((sub_form_name + FIELD_PREFIX_SEPARATOR).length),
+        value
+      ])
+    );
+    return result;
+  }
+  async render(ctx, messages, prerenderedForms = {}, show_field_errors) {
+    return tempstream`${this.renderMessages(ctx, {
+      raw_values: {},
+      messages
+    })}
+			<div class="forms">
+				<form
+					id="${this.name}"
+					novalidate
+					${/* novalidate is here because all the subforms are actually one form and errors in one will prevent submitting all of the forms */
+    ""}
+					method="POST"
+				></form>
+				${this.getSubformsToRender(ctx).map(([form_name]) => {
+      const frame_form_id = this.name + "_" + form_name + "_frame_form";
+      return tempstream`<turbo-frame
+						id="${form_name}"
+						contains-subform
+						subform-id="${frame_form_id}"
+					>
+						${prerenderedForms[form_name] || this.renderSubform(ctx, form_name, show_field_errors)}
+						<form id="${frame_form_id}" method="POST"></form>
+					</turbo-frame>`;
+    })}
+			</div>
+			${this.makeBottomScript()}`;
+  }
+  makeBottomScript() {
+    return (
+      /* HTML */
+      ` <script>
+			(function () {
+				if (!window.subform_handlers) {
+					window.subform_handlers = {};
+				}
+				if (window.subform_handlers["${this.name}"]) {
+					return;
+				}
+				const handler = () => {
+					document
+						.querySelectorAll("turbo-frame[contains-subform]")
+						.forEach((frame) => {
+							frame_form_id = frame.getAttribute("subform-id");
+							frame.querySelectorAll("input").forEach((input) => {
+								input.setAttribute("form", frame_form_id);
+							});
+						});
+				};
+				window.subform_handlers["${this.name}"] = handler;
+				document.documentElement.addEventListener(
+					"turbo:load",
+					handler
+				);
+				document.documentElement.addEventListener(
+					"turbo:frame-render",
+					handler
+				);
+			})();
+		</script>`
+    );
+  }
+  mount(router, path) {
+    router.get(path, async (ctx) => {
+      ctx.type = "html";
+      ctx.body = await this.render(ctx, [], {}, false);
+    });
+    for (const [key, form] of Object.entries(this.forms)) {
+      router.post(
+        path + (path.endsWith("/") ? "" : "/") + key,
+        async (ctx) => {
+          const result = await form.canAccess(ctx);
+          if (!result.canAccess) {
+            ctx.body = this.renderError(ctx, {
+              type: "access",
+              message: result.message
+            });
+            ctx.status = 403;
+            return;
+          }
+          const reaction = await form.handlePost(ctx);
+          if (reaction.action == "stay") {
+            ctx.status = 422;
+            const form_content = reaction.content;
+            ctx.body = this.render(
+              ctx,
+              [],
+              {
+                [key]: form_content
+              },
+              true
+            );
+          } else if (reaction.action == "redirect") {
+            ctx.status = 303;
+            ctx.redirect(reaction.url);
+          }
+        }
+      );
+    }
+  }
+}
+export {
+  Multiform
+};
+//# sourceMappingURL=multiform.js.map