add debounced FormText handling in jests that set values for it

Author: ahmedhamidawan

client/src/components/Workflow/Editor/Forms/FormOutputLabel.test.js

@@ -1,4 +1,5 @@
 import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
 import { createPinia, PiniaVuePlugin, setActivePinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 
@@ -45,6 +46,13 @@ describe("FormOutputLabel", () => {
         stepStore = useWorkflowStepStore("mock-workflow");
         stepStore.addStep(stepOne);
         stepStore.addStep(stepTwo);
+
+        // Use fake timers for debounced `FormText`
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
     });
 
     it("check initial value and value change", async () => {
@@ -54,13 +62,25 @@ describe("FormOutputLabel", () => {
         expect(title.text()).toBe("Label for: 'output-name'");
         const input = wrapper.find("input");
         const inputOther = wrapperOther.find("input");
+
         await input.setValue("new-label");
+        jest.runAllTimers();
+        await flushPromises();
+
         expect(wrapper.find(".ui-form-error").exists()).toBe(false);
         expect(wrapperOther.find(".ui-form-error").exists()).toBe(false);
+
         await inputOther.setValue("other-label");
+        jest.runAllTimers();
+        await flushPromises();
+
         expect(wrapper.find(".ui-form-error").exists()).toBe(false);
         expect(wrapperOther.find(".ui-form-error").exists()).toBe(false);
+
         await input.setValue("other-label");
+        jest.runAllTimers();
+        await flushPromises();
+
         expect(wrapper.find(".ui-form-error").text()).toBe("Duplicate output label 'other-label' will be ignored.");
         expect(wrapperOther.find(".ui-form-error").exists()).toBe(false);
         expect(stepStore.workflowOutputs["new-label"].outputName).toBe("output-name");

client/src/components/admin/Notifications/BroadcastForm.test.ts

@@ -80,6 +80,10 @@ describe("BroadcastForm.vue", () => {
             await wrapper.find("#broadcast-action-link-link-0").setValue("https://test.link");
         }
 
+        // Wait for `FormInput` debounce to complete
+        jest.runAllTimers();
+        await flushPromises();
+
         expectSubmitButton(wrapper, true);
 
         await wrapper.find(SUBMIT_BUTTON_SELECTOR).trigger("click");
@@ -90,6 +94,14 @@ describe("BroadcastForm.vue", () => {
         expect(mockRouter.push).toHaveBeenCalledWith("/admin/notifications");
     }
 
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
     it("should render form with empty fields and submit button disabled", async () => {
         const { wrapper } = await mountBroadcastForm();