@sealcode/sealgen 0.11.8 → 0.12.0

package/dist/forms/fields/regexp.test.js

@@ -0,0 +1,21 @@
+import assert from "assert";
+import { Fields } from "../../index.js";
+describe("regexp field", () => {
+  const ctx = {};
+  it("validation logic", async () => {
+    const field = new Fields.RegExpField(true, /^4/, "error");
+    assert.strictEqual((await field.isValueValid(ctx, "42")).valid, true);
+    assert.strictEqual((await field.isValueValid(ctx, "notvalid")).valid, false);
+    assert.strictEqual((await field.isValueValid(ctx, 42)).valid, false);
+  });
+  it("parse function", async () => {
+    const field = new Fields.RegExpField(true, /^4/, "error");
+    const string_response = await field.parse(ctx, "42");
+    const number_response = await field.parse(ctx, 42);
+    assert.strictEqual(string_response.parsable, true);
+    assert.strictEqual(string_response.parsed_value, "42");
+    assert.strictEqual(number_response.parsable, false);
+    assert.strictEqual(number_response.error, "Please enter a string");
+  });
+});
+//# sourceMappingURL=regexp.test.js.map

package/dist/forms/fields/reverse-single-reference.js

@@ -0,0 +1,17 @@
+import { FormField } from "./field.js";
+class ReverseSingleReference extends FormField {
+  constructor(required, sealious_field) {
+    super(required);
+    this.sealious_field = sealious_field;
+  }
+  async parse(ctx, raw_value) {
+    return { parsable: true, error: null, parsed_value: raw_value };
+  }
+  getEmptyValue() {
+    return [];
+  }
+}
+export {
+  ReverseSingleReference
+};
+//# sourceMappingURL=reverse-single-reference.js.map

package/dist/forms/fields/simple-form-field.js

@@ -0,0 +1,22 @@
+import { predicates } from "@sealcode/ts-predicates";
+import { FormField } from "./field.js";
+class SimpleFormField extends FormField {
+  constructor(required) {
+    super(required);
+    this.predicate = predicates.string;
+  }
+  async parse(_, raw_value) {
+    return {
+      parsed_value: (raw_value || "").toString(),
+      parsable: true,
+      error: null
+    };
+  }
+  getEmptyValue() {
+    return "";
+  }
+}
+export {
+  SimpleFormField
+};
+//# sourceMappingURL=simple-form-field.js.map

package/dist/forms/fields/structured-array.js

@@ -0,0 +1,21 @@
+import { FormField } from "./field.js";
+class StructuredArrayField extends FormField {
+  constructor(sealious_field) {
+    super(true);
+    this.sealious_field = sealious_field;
+  }
+  async parse(context, value) {
+    return {
+      parsable: true,
+      error: null,
+      parsed_value: value || []
+    };
+  }
+  getEmptyValue() {
+    return [];
+  }
+}
+export {
+  StructuredArrayField
+};
+//# sourceMappingURL=structured-array.js.map

package/dist/forms/form-types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=form-types.js.map

package/dist/forms/form.js

@@ -0,0 +1,203 @@
+import { randomUUID } from "crypto";
+import Router from "@koa/router";
+import { tempstream } from "tempstream";
+import {
+  hasFieldOfType,
+  hasShape,
+  is,
+  predicates
+} from "@sealcode/ts-predicates";
+import {
+  MountableWithFields
+} from "../page/mountable-with-fields.js";
+class Form extends MountableWithFields {
+  constructor() {
+    super(...arguments);
+    this.defaultSuccessMessage = "Done";
+    this.submitButtonText = "Wy\u015Blij";
+    this.action = "./";
+    this.useTurbo = true;
+    this.form_id = randomUUID();
+  }
+  async canAccess(_) {
+    return { canAccess: true, message: "" };
+  }
+  async renderError(_, error) {
+    return tempstream`<div>${error.message}</div>`;
+  }
+  makeSubmitButton() {
+    return (
+      /* HTML */
+      `<input
+			type="submit"
+			value="${this.submitButtonText}"
+			formaction="${this.action}"
+			${this.form_id ? `form="${this.form_id}"` : ""}
+		/>`
+    );
+  }
+  async render(ctx, data, show_field_errors) {
+    return tempstream`<div class="form-container">
+			${this.makeOpenFormTag(ctx)}
+			${!this.controls.some((control) => control.role == "messages") ? this.renderMessages(ctx, data) : ""}
+			${this.renderControls(
+      this.makeFormControlContext(ctx, data, show_field_errors)
+    )}
+			${this.controls.some((control) => control.role == "submit") ? "" : this.makeSubmitButton()}
+			${this.makeCloseFormTag()}
+		</div>`;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async makeFormClasses(_ctx) {
+    return [];
+  }
+  makeOpenFormTag(ctx) {
+    return tempstream`<form enctype="multipart/form-data" method="POST" id="${this.form_id}" action="${this.action}" class="${this.makeFormClasses(ctx).then(
+      (classes) => classes.join(" ")
+    )}" ${this.useTurbo ? "" : `data-turbo="false"`}></form><div class="form">`;
+  }
+  makeCloseFormTag() {
+    return `</div>`;
+  }
+  async onValuesInvalid(ctx, form_messages, _field_errors) {
+    const messages = form_messages.length ? form_messages : [{ type: "error", text: "Some fields are invalid" }];
+    return {
+      action: "stay",
+      content: await this.render(
+        ctx,
+        {
+          raw_values: await this.extractRawValues(ctx),
+          messages
+        },
+        true
+      ),
+      messages
+    };
+  }
+  async onError(ctx, data, error) {
+    let error_message = "Unknown error has occured";
+    if (is(error, predicates.object) && hasShape({ message: predicates.string }, error)) {
+      error_message = error.message;
+    }
+    const messages = [{ type: "error", text: error_message }];
+    return {
+      action: "stay",
+      content: await this.render(
+        ctx,
+        {
+          raw_values: data.raw_values,
+          messages
+        },
+        true
+      )
+    };
+  }
+  async onSuccess(ctx, data, _submitResult) {
+    const messages = [
+      { type: "success", text: this.defaultSuccessMessage }
+    ];
+    return {
+      action: "stay",
+      content: await this.render(
+        ctx,
+        {
+          raw_values: data.raw_values,
+          messages
+        },
+        false
+      ),
+      messages
+    };
+  }
+  async getRawValuesOnSuccess(ctx) {
+    return this.extractRawValues(ctx);
+  }
+  async handlePost(ctx) {
+    const raw_values = await this.extractRawValues(ctx);
+    const { valid, form_messages, field_errors } = await this.validate(
+      ctx,
+      raw_values
+    );
+    if (!valid) {
+      return this.onValuesInvalid(ctx, form_messages, field_errors);
+    }
+    try {
+      ctx.status = 303;
+      const result = await this.onSubmit(ctx, {
+        raw_values,
+        messages: []
+      });
+      return this.onSuccess(
+        ctx,
+        {
+          raw_values: await this.getRawValuesOnSuccess(ctx),
+          messages: []
+        },
+        result
+      );
+    } catch (e) {
+      console.dir(e, { depth: 5 });
+      const message = is(e, predicates.object) && hasFieldOfType(e, "message", predicates.string) ? e?.message : is(e, predicates.string) ? e : "Wyst\u0105pi\u0142 b\u0142\u0105d";
+      return this.onError(
+        ctx,
+        {
+          raw_values,
+          messages: [
+            {
+              type: "error",
+              text: message
+            }
+          ]
+        },
+        e
+      );
+    }
+  }
+  mount(router, path) {
+    router.use(path, async (ctx, next) => {
+      const result = await this.canAccess(ctx);
+      if (!result.canAccess) {
+        ctx.body = this.renderError(ctx, {
+          type: "access",
+          message: result.message
+        });
+        ctx.status = 403;
+        return;
+      }
+      await next();
+    });
+    router.get(path, async (ctx) => {
+      ctx.type = "html";
+      ctx.body = await this.render(
+        ctx,
+        {
+          raw_values: await this.extractRawValues(ctx),
+          messages: []
+        },
+        false
+      );
+    });
+    router.post(path, async (ctx) => {
+      const reaction = await this.handlePost(ctx);
+      if (reaction.action == "stay") {
+        ctx.status = 422;
+        ctx.body = reaction.content;
+      } else if (reaction.action == "redirect") {
+        ctx.status = 303;
+        ctx.redirect(reaction.url);
+      }
+    });
+    const subrouter = new Router();
+    for (const control of this.controls) {
+      control.mount(subrouter);
+    }
+    router.use(path, subrouter.routes(), subrouter.allowedMethods());
+  }
+  async extractRawValues(ctx) {
+    return ctx.$body;
+  }
+}
+export {
+  Form
+};
+//# sourceMappingURL=form.js.map

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