@tsed/react-formio 3.0.0-alpha.10 → 3.0.0-alpha.12

package/src/organisms/form/Form.stories.tsx

@@ -1,6 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { delay, http, HttpResponse } from "msw";
 import { useEffect, useState } from "react";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
 import { SubmissionType } from "../../interfaces";
 import { InputText } from "../../molecules/forms/input-text/InputText";
@@ -9,12 +10,6 @@ import formFirstname from "../__fixtures__/form-firstname.fixture.json";
 import { useEditForm } from "../__fixtures__/useEditForm";
 import { Form } from "./Form";
 
-async function delay(number: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, number);
-  });
-}
-
 /**
  * The form component is the primary component of the system. It is what takes the form definition (json) and renders the
  * form into html. There are multiple ways to send the form to the Form component. The two main ways are to pass the `src`
@@ -332,15 +327,15 @@ export const WithOnSubmit: Story = {
     expect(firstnameInput).toHaveValue("John");
     expect(lastNameInput).toHaveValue("Doe");
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -397,42 +392,20 @@ export const WithOnSubmit: Story = {
  * Form with custom validation hook
  */
 export const CustomValidation: Story = {
-  parameters: {
-    mockData: [
-      {
-        url: "https://test.dev/todos/1",
-        method: "GET",
-        status: 500,
-        response: {
-          message: "My custom message about this field",
-          type: "custom",
-          path: ["firstName"],
-          level: "error"
-        },
-        delay: 800
-      }
-    ]
-  },
+  parameters: {},
   args: {
     form: formFirstname as never,
     options: {
       hooks: {
         async customValidation(submission: SubmissionType, callback: (error: any) => void) {
-          const response = await fetch("https://test.dev/todos/1", {
-            headers: {
-              Accept: "application/json",
-              "Content-Type": "application/json"
-            },
-            method: "GET"
-          });
-
-          const responseData = await response.json();
-
-          if (response.ok) {
-            callback(null);
-          } else {
-            callback(responseData);
-          }
+          setTimeout(() => {
+            callback({
+              message: "My custom message about this field",
+              type: "custom",
+              path: ["firstName"],
+              level: "error"
+            });
+          }, 200);
         }
       }
     }
@@ -451,15 +424,15 @@ export const CustomValidation: Story = {
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -467,7 +440,7 @@ export const CustomValidation: Story = {
 
     let submitButton = canvas.getByRole("button", { name: "Submit" });
 
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
 
     await waitFor(async () => {
       expect(canvas.getByText("Please fix the following errors before submitting.")).toBeInTheDocument();
@@ -490,35 +463,29 @@ export const FetchSubmissionWithCustomAction: Story = {
     }
   },
   parameters: {
-    mockData: [
-      {
-        url: "https://local.dev/form/Test",
-        method: "GET",
-        status: 200,
-        response: formFirstname,
-        delay: 200
-      },
-      {
-        url: "https://local.dev/form/Test/submissions/1",
-        method: "GET",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      },
-      {
-        url: "https://local.dev/form/Test/submissions/1",
-        method: "PUT",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      }
-    ]
+    chromatic: { disableSnapshot: false },
+    msw: {
+      handlers: [
+        http.get("https://local.dev/form/Test", async () => {
+          await delay(200);
+          return HttpResponse.json(JSON.parse(JSON.stringify(formFirstname)));
+        }),
+        http.get("https://local.dev/form/Test/submissions/1", async () => {
+          await delay(300);
+          return HttpResponse.json({
+            firstName: "Jane",
+            lastName: "Doe"
+          });
+        }),
+        http.put("https://local.dev/form/Test/submissions/1", async () => {
+          await delay(800);
+          return HttpResponse.json({
+            firstName: "Jane",
+            lastName: "Doe"
+          });
+        })
+      ]
+    }
   },
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -562,15 +529,20 @@ export const FetchSubmissionWithCustomAction: Story = {
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+
+    await waitFor(() => {
+      expect(firstnameInput).toHaveValue("");
+    });
+
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -578,7 +550,7 @@ export const FetchSubmissionWithCustomAction: Story = {
 
     let submitButton = canvas.getByRole("button", { name: "Submit" });
 
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
 
     await delay(1000);
 
@@ -597,37 +569,36 @@ export const ErrorOnSubmitServer: Story = {
     }
   },
   parameters: {
-    mockData: [
-      {
-        url: "https://local.dev/form/Test2",
-        method: "GET",
-        status: 200,
-        response: formFirstname,
-        delay: 200
-      },
-      {
-        url: "https://local.dev/form/Test2/submissions/2",
-        method: "GET",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      },
-      {
-        url: "https://local.dev/form/Test2/submissions/2",
-        method: "PUT",
-        status: 400,
-        response: {
-          message: "My custom message about this field",
-          type: "custom",
-          path: ["firstName"],
-          level: "error"
-        },
-        delay: 800
-      }
-    ]
+    chromatic: { disableSnapshot: false },
+    msw: {
+      handlers: [
+        http.get("https://local.dev/form/Test2", async () => {
+          await delay(200);
+          return HttpResponse.json(JSON.parse(JSON.stringify(formFirstname)));
+        }),
+        http.get("https://local.dev/form/Test2/submissions/2", async () => {
+          await delay(300);
+          return HttpResponse.json({
+            firstName: "John",
+            lastName: "Doe"
+          });
+        }),
+        http.put("https://local.dev/form/Test2/submissions/2", async () => {
+          await delay(800);
+          return HttpResponse.json(
+            {
+              message: "My custom message about this field",
+              type: "custom",
+              path: ["firstName"],
+              level: "error"
+            },
+            {
+              status: 400
+            }
+          );
+        })
+      ]
+    }
   },
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -671,15 +642,20 @@ export const ErrorOnSubmitServer: Story = {
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+
+    await waitFor(() => {
+      expect(firstnameInput).toHaveValue("");
+    });
+
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -687,7 +663,7 @@ export const ErrorOnSubmitServer: Story = {
 
     let submitButton = canvas.getByRole("button", { name: "Submit" });
 
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
 
     await delay(1000);
 

package/src/organisms/form/access/FormAccess.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
 
 import { FormAccess } from "./FormAccess";