From 86cac0fae3d21752791f62a3d3422a50cd437084 Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Thu, 5 Nov 2020 19:15:40 +0530
Subject: [PATCH] Add test for showBindingPrompt function (#1566)

---
 .../CodeEditor/BindingPromptHelper.test.ts    | 40 +++++++++++++++++++
 .../CodeEditor/BindingPromptHelper.ts         | 11 +++++
 .../editorComponents/CodeEditor/index.tsx     | 11 ++---
 3 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.test.ts
 create mode 100644 app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.ts

diff --git a/app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.test.ts b/app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.test.ts
new file mode 100644
index 0000000000..d5d24a073b
--- /dev/null
+++ b/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();
+    });
+  });
+});
diff --git a/app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.ts b/app/client/src/components/editorComponents/CodeEditor/BindingPromptHelper.ts
new file mode 100644
index 0000000000..52bc0b6111
--- /dev/null
+++ b/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)
+  );
+};
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index 2df0dae1eb..5c3351d58a 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/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>