From 2ed0b1067972ee23164a29edc9fa8cda044dc0dc Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 6 Jan 2025 15:59:29 -0300
Subject: [PATCH] fix(nightly): refactor freeze-path feature test (#5557)

---
 .../components/sliderComponent/index.tsx      |  1 +
 .../tests/core/features/freeze-path.spec.ts   | 27 ++++++++++++++-----
 .../evaluate-input-react-state-changes.ts     | 25 +++++++++++++++++
 3 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 src/frontend/tests/utils/evaluate-input-react-state-changes.ts

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx
index 3bf71dcc8..21d90940a 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx
@@ -216,6 +216,7 @@ export default function SliderComponent({
                 onKeyDown={handleKeyDown}
                 className="relative bottom-[1px] w-full cursor-text rounded-sm bg-transparent text-center font-mono text-[0.88rem] arrow-hide"
                 autoFocus
+                data-testid="slider_input"
               />
             ) : (
               <span
diff --git a/src/frontend/tests/core/features/freeze-path.spec.ts b/src/frontend/tests/core/features/freeze-path.spec.ts
index 85ddd54ed..26a83b6d9 100644
--- a/src/frontend/tests/core/features/freeze-path.spec.ts
+++ b/src/frontend/tests/core/features/freeze-path.spec.ts
@@ -2,6 +2,7 @@ import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { evaluateReactStateChanges } from "../../utils/evaluate-input-react-state-changes";
 import { initialGPTsetup } from "../../utils/initialGPTsetup";
 
 test(
@@ -35,11 +36,22 @@ test(
     await page.getByTestId("dropdown_str_model_name").click();
     await page.getByTestId("gpt-4o-1-option").click();
 
-    await page.waitForSelector('[data-testid="float_float_temperature"]', {
+    await page.waitForSelector('[data-testid="default_slider_display_value"]', {
       timeout: 1000,
     });
 
-    await page.getByTestId("float_float_temperature").fill("1.0");
+    await page.getByTestId("fit_view").click();
+    await page
+      .getByTestId("default_slider_display_value")
+      .click({ force: true });
+
+    await evaluateReactStateChanges(
+      page,
+      '[data-testid="slider_input"]',
+      "1.0",
+    );
+
+    await page.keyboard.press("Enter");
 
     await page.waitForSelector('[data-testid="button_run_chat output"]', {
       timeout: 1000,
@@ -62,12 +74,15 @@ test(
 
     await page.getByText("Close").first().click();
 
-    await page.waitForSelector('[data-testid="float_float_temperature"]', {
-      timeout: 3000,
+    await page.waitForSelector('[data-testid="default_slider_display_value"]', {
+      timeout: 1000,
     });
 
-    await page.getByTestId("float_float_temperature").fill("");
-    await page.getByTestId("float_float_temperature").fill("1.2");
+    await evaluateReactStateChanges(
+      page,
+      '[data-testid="slider_input"]',
+      "1.2",
+    );
 
     await page.waitForSelector('[data-testid="button_run_chat output"]', {
       timeout: 1000,
diff --git a/src/frontend/tests/utils/evaluate-input-react-state-changes.ts b/src/frontend/tests/utils/evaluate-input-react-state-changes.ts
new file mode 100644
index 000000000..f529d5d4e
--- /dev/null
+++ b/src/frontend/tests/utils/evaluate-input-react-state-changes.ts
@@ -0,0 +1,25 @@
+import { Page } from "playwright/test";
+
+export const evaluateReactStateChanges = async (
+  page: Page,
+  selector: string,
+  value: string,
+) => {
+  await page.evaluate(
+    ({ selector, value }) => {
+      const inputElement = document.querySelector(selector) as HTMLInputElement;
+      if (inputElement) {
+        const prototype = Object.getPrototypeOf(inputElement);
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+          prototype,
+          "value",
+        )?.set;
+        if (nativeInputValueSetter) {
+          nativeInputValueSetter.call(inputElement, value);
+          inputElement.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+      }
+    },
+    { selector, value },
+  );
+};