[Vue] reset segment state before update:modelValue… (#19276)

* reset segment state before update:modelValue so the parent component can decide to let the change go through

* fix test (make sure to wait after each individual change for vue logic to execute completely)

* fix another multiple input val change in UI test

1 files changed, 12 insertions, 10 deletions

diff --git a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
index e5a05fcf4a..d11aaea225 100644
--- a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
+++ b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
@@ -113,11 +113,12 @@ describe("SegmentSelectorEditorTest", function () {
     });
 
     it("should save a new segment and add it to the segment list when the form is filled out and the save button is clicked", async function() {
-        await page.evaluate(function () {
-            $('.metricValueBlock input').each(function (index, elem) {
-                $(elem).val('value ' + index).change();
-            });
-        });
+        for (let i = 0; i < 3; i += 1) {
+          await page.evaluate(function (i) {
+            $(`.metricValueBlock input:eq(${i})`).val('value ' + i).change();
+          }, i);
+          await page.waitFor(200);
+        }
 
         await page.type('input.edit_segment_name', 'new segment');
         await page.click('.segmentRow0 .segment-or'); // click somewhere else to save new name
@@ -160,11 +161,12 @@ describe("SegmentSelectorEditorTest", function () {
         await selectFieldValue('.segmentRow0 .segment-row:last .metricMatchBlock', 'Is not');
         await selectFieldValue('.segmentRow1 .segment-row .metricMatchBlock', 'Is not');
 
-        await page.evaluate(function () {
-            $('.metricValueBlock input').each(function (index) {
-                $(this).val('new value ' + index).change();
-            });
-        });
+        for (let i = 0; i < 3; i += 1) {
+          await page.evaluate(function (i) {
+            $(`.metricValueBlock input:eq(${i})`).val('new value ' + i).change();
+          }, i);
+          await page.waitFor(200);
+        }
 
         await page.waitFor(200);