@tsed/react-formio 1.10.10 → 1.10.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.10.10",
+  "version": "1.10.11",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.ts",
@@ -13,7 +13,7 @@
     "prettier": "prettier '{src,test}/**/*.{ts,tsx}' --write"
   },
   "dependencies": {
-    "@tsed/redux-utils": "1.10.10",
+    "@tsed/redux-utils": "1.10.11",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -28,8 +28,8 @@
     "tooltip.js": "^1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.10.10",
-    "@tsed/tailwind-formio": "1.10.10",
+    "@tsed/tailwind": "1.10.11",
+    "@tsed/tailwind-formio": "1.10.11",
     "eslint-plugin-jsx-a11y": "^6.5.1"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",

package/src/components/actions-table/actionsTable.component.spec.tsx

@@ -8,32 +8,30 @@ describe("ActionsTable", () => {
   it("should render the table actions", async () => {
     const onAddAction = jest.fn();
 
-    const { getByTestId, getAllByRole } = render(
+    const { getByRole, getAllByRole } = render(
       <Sandbox {...Sandbox.args} onAddAction={onAddAction} />
     );
 
-    const btn = getByTestId("submit");
+    const btn = getByRole("button", { name: /add action/i });
     const cells = getAllByRole("cell");
-    const select = getByTestId("select");
+    const options = getAllByRole("option");
 
-    expect(btn).toHaveAttribute("disabled");
-    expect(btn).toHaveTextContent("Add action");
-    expect(cells[0]).toHaveTextContent("Save Submission");
-    expect(select.children.length).toEqual(
-      Sandbox.args.availableActions.length + 1
-    );
+    expect(btn).toHaveProperty("disabled");
+    expect(btn.innerHTML).toMatch("Add action");
+    expect(cells[0].innerHTML).toMatch("Save Submission");
+    expect(options.length).toEqual(Sandbox.args.availableActions.length + 1);
 
-    expect(select.children[0]).toHaveTextContent("Select an action");
-    expect(select.children[1]).toHaveTextContent("Email");
+    expect(options[0].innerHTML).toMatch("Select an action");
+    expect(options[1].innerHTML).toMatch("Email");
   });
   it("should not call addAction when the default item is selected", async () => {
     const onAddAction = jest.fn();
 
-    const { getByTestId } = render(
+    const { getByRole } = render(
       <Sandbox {...Sandbox.args} onAddAction={onAddAction} />
     );
 
-    const btn = getByTestId("submit");
+    const btn = getByRole("button", { name: /add action/i });
 
     await fireEvent.click(btn);
     expect(onAddAction).not.toHaveBeenCalled();
@@ -41,12 +39,12 @@ describe("ActionsTable", () => {
   it("should call addAction with the selected action", async () => {
     const onAddAction = jest.fn();
 
-    const { getByTestId } = render(
+    const { getByRole } = render(
       <Sandbox {...Sandbox.args} onAddAction={onAddAction} />
     );
 
-    const btn = getByTestId("submit");
-    const select = getByTestId("select");
+    const btn = getByRole("button", { name: /add action/i });
+    const select = getByRole("combobox");
 
     await userEvent.selectOptions(
       select,
@@ -55,7 +53,7 @@ describe("ActionsTable", () => {
 
     await fireEvent.click(btn);
 
-    expect(btn).not.toHaveAttribute("disabled");
+    expect(btn).not.toHaveProperty("disabled", true);
     expect(onAddAction).toHaveBeenCalledWith("webhook");
   });
 });

package/src/components/actions-table/actionsTable.component.tsx

@@ -53,6 +53,7 @@ export function ActionsTable({
             disabled={currentAction === ""}
             className={"btn btn-success"}
             onClick={() => currentAction && onAddAction(currentAction)}
+            type={"submit"}
           >
             <i className={classnames(iconClass(undefined, "plus"), "mr-1")} />{" "}
             {i18n("Add action")}

package/src/components/form-settings/formSettings.component.tsx

@@ -84,6 +84,7 @@ export function FormSettings(props: FormSettingsProps) {
         disabled={!isValid}
         className={"mt-5 btn btn-primary"}
         onClick={onSubmit}
+        type={"submit"}
       >
         {i18n("Save settings")}
       </button>

package/src/components/input-text/inputText.component.tsx

@@ -56,7 +56,7 @@ export function InputText<T = any>({
       <input
         type={type || "text"}
         {...props}
-        data-testid={"input"}
+        data-testid={`input_${name}`}
         className={classnames("form-control", size && `form-control-${size}`)}
         id={name}
         required={required}

package/src/components/loader/loader.component.spec.tsx

@@ -6,7 +6,7 @@ describe("Loader", () => {
   it("should render a component (with isActive = true)", () => {
     const { getByTestId } = render(<Loader isActive={true} />);
 
-    const icon = getByTestId("icon");
+    const icon = getByTestId("icon_radio-circle");
 
     expect(icon).toBeTruthy();
   });
@@ -14,7 +14,7 @@ describe("Loader", () => {
   it("should render a component (with isActive = false)", () => {
     const { queryByTestId } = render(<Loader isActive={false} />);
 
-    const icon = queryByTestId("icon");
+    const icon = queryByTestId("icon_radio-circle");
 
     expect(icon).toBeFalsy();
   });

package/src/components/loader/loader.component.tsx

@@ -25,7 +25,7 @@ export function Loader({
         )}
       >
         <span
-          data-testid={"icon"}
+          data-testid={`icon_${icon}`}
           color={color}
           className={`text-11xl ${iconClass(undefined, icon, true)}`}
         />

package/src/components/select/select.component.tsx

@@ -71,7 +71,7 @@ export function Select<T = any>({
       <select
         ref={ref}
         {...props}
-        data-testid={"select"}
+        data-testid={`select_${name}`}
         className={classnames("form-control", size && `form-control-${size}`)}
         name={name}
         id={name}

package/src/components/table/filters/defaultColumnFilter.component.spec.tsx

@@ -12,13 +12,13 @@ describe("DefaultColumnFilter", () => {
       column: { id: "id", filterValue: "", setFilter: jest.fn() }
     };
 
-    const { getByTestId } = render(
+    const { getByRole } = render(
       // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
       // @ts-ignore
       <DefaultColumnFilter {...props} />
     );
 
-    const input = getByTestId("input");
+    const input = getByRole("textbox");
 
     await act(async () => {
       fireEvent.change(input, { target: { value: "value-test" } });