From 74a85333d8fc2fc56d058a1b6042458e96a9d62f Mon Sep 17 00:00:00 2001 From: Favour Ohanekwu Date: Thu, 16 Nov 2023 20:52:38 +0100 Subject: [PATCH] fix: lint editor after input value is updated (#28884) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description This PR ensures that the editor's input value is updated before code is linted. #### PR fixes following issue(s) Fixes #28764 > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## 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 - [ ] JUnit - [ ] Jest - [ ] 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/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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/Bug28764_Spec.ts | 74 +++++++++++++++++++ .../editorComponents/CodeEditor/index.tsx | 7 +- 2 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28764_Spec.ts diff --git a/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28764_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28764_Spec.ts new file mode 100644 index 0000000000..d2759c4ae6 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28764_Spec.ts @@ -0,0 +1,74 @@ +import { + agHelper, + locators, + entityExplorer, + jsEditor, +} from "../../../../support/Objects/ObjectsCore"; + +describe("JS Function Execution", function () { + before(() => { + entityExplorer.NavigateToSwitcher("Explorer"); + }); + + it("Retains lint errors after navigation", function () { + // JS Object 1 + jsEditor.CreateJSObject( + `export default { + myVar1: [], + myVar2: {}, + myFun1 () { + // write code here + // this.myVar1 = [1,2,3] + }, + async myFun2 () { + // use async-await or promises + // Lint Error + fff + } + }`, + { + paste: true, + completeReplace: true, + toRun: false, + shouldCreateNewJSObj: true, + prettify: false, + }, + ); + // JS Object 2 + jsEditor.CreateJSObject( + `export default { + myVar1: [], + myVar2: {}, + myFun1 () { + // write code here + // this.myVar1 = [1,2,3] + }, + async myFun2 () { + // use async-await or promises + } + }`, + { + paste: true, + completeReplace: true, + toRun: false, + shouldCreateNewJSObj: true, + prettify: false, + }, + ); + + entityExplorer.SelectEntityByName("JSObject1", "Queries/JS"); + // Assert lint error + agHelper.AssertElementLength(locators._lintErrorElement, 1); + agHelper.HoverElement(locators._lintErrorElement); + agHelper.AssertContains(`'fff' is not defined`); + + entityExplorer.SelectEntityByName("JSObject2", "Queries/JS"); + agHelper.AssertElementAbsence(locators._lintErrorElement); + + entityExplorer.SelectEntityByName("JSObject1", "Queries/JS"); + // Assert lint error + agHelper.AssertElementLength(locators._lintErrorElement, 1); + agHelper.HoverElement(locators._lintErrorElement); + agHelper.AssertContains(`'fff' is not defined`); + }); +}); diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx index fedf143147..ebd5c8273c 100644 --- a/app/client/src/components/editorComponents/CodeEditor/index.tsx +++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx @@ -594,10 +594,6 @@ class CodeEditor extends Component { } this.editor.operation(() => { - if (prevProps.lintErrors !== this.props.lintErrors) { - this.lintCode(this.editor); - } - const editorValue = this.editor.getValue(); // Safe update of value of the editor when value updated outside the editor const inputValue = getInputValue(this.props.input.value); @@ -643,6 +639,9 @@ class CodeEditor extends Component { this.props.entitiesForNavigation, ); } + if (prevProps.lintErrors !== this.props.lintErrors) { + this.lintCode(this.editor); + } if (this.props.datasourceTableKeys !== prevProps.datasourceTableKeys) { sqlHint.setDatasourceTableKeys(this.props.datasourceTableKeys); }