From 0bd595551596a529a5fe8d4d1c60815e68ddedc9 Mon Sep 17 00:00:00 2001 From: Ravi Kumar Prasad Date: Mon, 22 May 2023 16:21:57 +0530 Subject: [PATCH] fix: moustache brackets not showing up in bold (#23245) ## Description This fixes an issue where the moustache brackets `{{` or `}}` were not being shown in bold. #### PR fixes following issue(s) Fixes #7113 #### Media Before|After ---|--- Screenshot 2023-05-12 at 1 09 14 AM|Screenshot 2023-05-12 at 1 08 34 AM #### Type of change - Bug fix (non-breaking change which fixes an issue) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] Jest - [x] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --- .../ClientSide/BugTests/Bug7113_Spec.ts | 25 ++++++++ .../MarkHelpers/bindingMarker.test.ts | 64 +++++++++++++++++++ app/client/src/constants/BindingsConstants.ts | 2 +- 3 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug7113_Spec.ts create mode 100644 app/client/src/components/editorComponents/CodeEditor/MarkHelpers/bindingMarker.test.ts diff --git a/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug7113_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug7113_Spec.ts new file mode 100644 index 0000000000..a9ce93d9ab --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug7113_Spec.ts @@ -0,0 +1,25 @@ +import { WIDGET } from "../../../../locators/WidgetLocators"; +import * as _ from "../../../../support/Objects/ObjectsCore"; + +const { entityExplorer, propPane } = _; + +describe("Bug 7113 - Moustache brackets in bold", () => { + it("1. should show {{ }} in bold", () => { + entityExplorer.DragDropWidgetNVerify(WIDGET.BUTTON, 200, 200); + + entityExplorer.SelectEntityByName("Button1", "Widgets"); + + propPane.EnterJSContext( + "onClick", + `{{Api1.run({ + "key": Button1.text + }).then(() => { + storeValue('my-secret-key', Button3.text); + Query1.run(); + }).catch(() => {});const a = { a: "key"} }}`, + ); + + cy.get("span").contains("{{").should("have.class", "binding-brackets"); + cy.get("span").contains("}}").should("have.class", "binding-brackets"); + }); +}); diff --git a/app/client/src/components/editorComponents/CodeEditor/MarkHelpers/bindingMarker.test.ts b/app/client/src/components/editorComponents/CodeEditor/MarkHelpers/bindingMarker.test.ts new file mode 100644 index 0000000000..e1e96e789c --- /dev/null +++ b/app/client/src/components/editorComponents/CodeEditor/MarkHelpers/bindingMarker.test.ts @@ -0,0 +1,64 @@ +import { AUTOCOMPLETE_MATCH_REGEX } from "constants/BindingsConstants"; + +describe("AUTOCOMPLETE_MATCH_REGEX match", () => { + it("1. should match all valid {{ }} bindings", () => { + const tests = [ + { + value: `Hello {{appsmith.mode}}A{{Button1.text}} {{{ a: 2 }}}A`, + matches: [ + { start: 6, end: 8 }, + { start: 21, end: 23 }, + { start: 24, end: 26 }, + { start: 38, end: 40 }, + { start: 41, end: 43 }, + { start: 51, end: 53 }, + ], + }, + { + value: `{{Api1.run().then(() => { + showAlert("", ''); + });}}`, + matches: [ + { start: 0, end: 2 }, + { start: 58, end: 60 }, + ], + }, + { + value: `{{(() => { const a = "}"; return a;})()}}`, + matches: [ + { start: 0, end: 2 }, + { start: 39, end: 41 }, + ], + }, + { + value: `{{Api1.run().then(() => { + Api1.run(); + }).catch(() => { + showAlert("", ''); + });}}`, + matches: [ + { start: 0, end: 2 }, + { start: 97, end: 99 }, + ], + }, + { + value: `{{ FilePicker.files[0] ? FilePicker.files[0] : {}}}`, + matches: [ + { start: 0, end: 2 }, + { start: 49, end: 51 }, + ], + }, + ]; + + test.each( + tests.map(({ matches, value }) => { + let match; + while ((match = AUTOCOMPLETE_MATCH_REGEX.exec(value)) != null) { + expect(match.index).toBe(matches[0].start); + expect(AUTOCOMPLETE_MATCH_REGEX.lastIndex).toBe(matches[0].end); + matches.shift(); + } + }), + ); + }); +}); diff --git a/app/client/src/constants/BindingsConstants.ts b/app/client/src/constants/BindingsConstants.ts index 325bb59e7e..0bf4ea3985 100644 --- a/app/client/src/constants/BindingsConstants.ts +++ b/app/client/src/constants/BindingsConstants.ts @@ -1,4 +1,4 @@ export const DATA_BIND_REGEX = /{{([\s\S]*?)}}/; export const DATA_BIND_REGEX_GLOBAL = /{{([\s\S]*?)}}/g; -export const AUTOCOMPLETE_MATCH_REGEX = /{{\s*.*?\s*}}/g; +export const AUTOCOMPLETE_MATCH_REGEX = /(?