Add test for showBindingPrompt function (#1566)

app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.test.ts

@@ -0,0 +1,40 @@
+import { showBindingPrompt } from "./BindingPromptHelper";
+
+describe("Test to check conditons for showing binding prompt", () => {
+  it("Show binding prompt", () => {
+    const testCases = [
+      { showEvaluatedValue: true, inputValue: "{" },
+      { showEvaluatedValue: true, inputValue: "Some value" },
+      { showEvaluatedValue: true, inputValue: "1" },
+      { showEvaluatedValue: true, inputValue: "[1, 2, 3]" },
+      { showEvaluatedValue: true, inputValue: "" },
+      { showEvaluatedValue: true, inputValue: [1, 2, 3] },
+      { showEvaluatedValue: true, inputValue: 1 },
+      { showEvaluatedValue: true, inputValue: null },
+      { showEvaluatedValue: true, inputValue: undefined },
+    ];
+
+    testCases.forEach(testCase => {
+      expect(
+        showBindingPrompt(testCase.showEvaluatedValue, testCase.inputValue),
+      ).toBeTruthy();
+    });
+  });
+
+  it("Hide binding prompt", () => {
+    const testCases = [
+      { showEvaluatedValue: false, inputValue: "" },
+      { showEvaluatedValue: false, inputValue: 1 },
+      { showEvaluatedValue: false, inputValue: null },
+      { showEvaluatedValue: false, inputValue: undefined },
+      { showEvaluatedValue: true, inputValue: "Name: {{Widget.name}}" },
+      { showEvaluatedValue: true, inputValue: "{{}}" },
+    ];
+
+    testCases.forEach(testCase => {
+      expect(
+        showBindingPrompt(testCase.showEvaluatedValue, testCase.inputValue),
+      ).toBeFalsy();
+    });
+  });
+});

app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.ts

@@ -0,0 +1,11 @@
+import { isString } from "lodash";
+
+export const showBindingPrompt = (
+  showEvaluatedValue: boolean,
+  inputValue: any,
+): boolean => {
+  return (
+    showEvaluatedValue &&
+    (!isString(inputValue) || !inputValue?.includes("{{") || !inputValue)
+  );
+};

app/client/src/components/editorComponents/CodeEditor/index.tsx

@@ -37,6 +37,7 @@ import { bindingMarker } from "components/editorComponents/CodeEditor/markHelper
 import { bindingHint } from "components/editorComponents/CodeEditor/hintHelpers";
 import { retryPromise } from "utils/AppsmithUtils";
 import BindingPrompt from "./BindingPrompt";
+import { showBindingPrompt } from "./BindingPromptHelper";
 
 const LightningMenu = lazy(() =>
   retryPromise(() => import("components/editorComponents/LightningMenu")),
@@ -291,12 +292,6 @@ class CodeEditor extends Component<Props, State> {
       ("evaluatedValue" in this.props ||
         ("dataTreePath" in this.props && !!this.props.dataTreePath));
 
-    const showBindingPrompt =
-      showEvaluatedValue &&
-      (!_.isString(this.props.input.value) ||
-        !this.props.input.value?.includes("{{") ||
-        !this.props.input.value);
-
     return (
       <DynamicAutocompleteInputWrapper
         theme={this.props.theme}
@@ -373,7 +368,9 @@ class CodeEditor extends Component<Props, State> {
             {this.props.rightIcon && (
               <IconContainer>{this.props.rightIcon}</IconContainer>
             )}
-            <BindingPrompt isOpen={showBindingPrompt} />
+            <BindingPrompt
+              isOpen={showBindingPrompt(showEvaluatedValue, input.value)}
+            />
           </EditorWrapper>
         </EvaluatedValuePopup>
       </DynamicAutocompleteInputWrapper>