From 7ea7e97fdc27abd36478338e836227d24f934d67 Mon Sep 17 00:00:00 2001 From: Keyur Paralkar Date: Mon, 19 Jun 2023 22:35:32 +0530 Subject: [PATCH] fix: change to lodash wrapper (#24610) ## Description This issue is happening because we are getting lodash library as `undefined` when we pass it to` derived.value` function here. This is happening because of the following reason: * [Bundle optimisation PR](https://github.com/appsmithorg/appsmith/pull/21667) introduces a new plugin called: `babel-plugin-lodash`. It helps in transforming the imports. * But this plugin doesn't work on the following pattern: `import _ from "lodash"`. Here it replaces `_` with `undefined` [ This file](https://github.com/appsmithorg/appsmith/blob/3bc50d9632cf269935aed6657092ddb8b7e8c92f/app/client/src/workers/common/JSLibrary/lodash-wrapper.js#L1) explains the exact scenario that we are facing. There is also [an open bug](https://github.com/lodash/babel-plugin-lodash/issues/235) for this issue on the `babel-plugin-lodash` repository. This PR imports lodash from the lodash-wrapper instead of directly importing as follows: `import _ from "lodash"` > #### PR fixes following issue(s) Fixes #23671 #### Type of change - Bug fix (non-breaking change which fixes an issue) ## Testing > #### How Has This Been Tested? - [x] Manual - [ ] Jest - [x] Cypress - should check that value entered in currency field appears in the actual field > > #### 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 - [x] My code follows the style guidelines of this project - [x] 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 (cherry picked from commit f47b1c896d2a0a9b1958dd13bb7d62f3909f878f) --- .../JSONForm/JSONForm_CurrencyField_spec.ts | 30 +++++++++++++++++++ app/client/cypress/locators/WidgetLocators.ts | 1 + .../fields/CurrencyInputField.tsx | 2 +- 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_CurrencyField_spec.ts diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_CurrencyField_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_CurrencyField_spec.ts new file mode 100644 index 0000000000..42a3a5f0dc --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/JSONForm/JSONForm_CurrencyField_spec.ts @@ -0,0 +1,30 @@ +import { + entityExplorer, + propPane, + agHelper, + draggableWidgets, + deployMode, + table, + locators, +} from "../../../../../support/Objects/ObjectsCore"; + +describe("Modal Widget background color spec", () => { + before(() => { + // Add a JSON form widget and change field type of one of the fields + entityExplorer.DragDropWidgetNVerify(draggableWidgets.JSONFORM, 300, 100); + propPane.ChangeJsonFormFieldType("Employee Id", "Currency Input"); + }); + + it("1. should check that value entered in currency field appears in the actual field", () => { + /** + * This case is for checking the following bug: https://github.com/appsmithorg/appsmith/issues/23671 + * This issue introduced a behaviour by which for currency field type in JSON form, users where not able to enter/type any value into it. + **/ + agHelper + .GetElement(locators._jsonFormInputField("employee_id")) + .type("123"); + agHelper + .GetText(locators._jsonFormInputField("employee_id"), "val") + .should("be.equal", "1001123"); + }); +}); diff --git a/app/client/cypress/locators/WidgetLocators.ts b/app/client/cypress/locators/WidgetLocators.ts index 01cf01b134..1139deaa68 100644 --- a/app/client/cypress/locators/WidgetLocators.ts +++ b/app/client/cypress/locators/WidgetLocators.ts @@ -40,6 +40,7 @@ export const WIDGET = { ICONBUTTON: "iconbuttonwidget", IMAGE: "imagewidget", STATBOX: "statboxwidget", + JSONFORM: "jsonformwidget" } as const; // property pane element selector are maintained here diff --git a/app/client/src/widgets/JSONFormWidget/fields/CurrencyInputField.tsx b/app/client/src/widgets/JSONFormWidget/fields/CurrencyInputField.tsx index 8b37951fb5..6507339f31 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/CurrencyInputField.tsx +++ b/app/client/src/widgets/JSONFormWidget/fields/CurrencyInputField.tsx @@ -1,5 +1,5 @@ import * as Sentry from "@sentry/react"; -import _ from "lodash"; +import _ from "workers/common/JSLibrary/lodash-wrapper"; import moment from "moment"; import React, { useCallback, useContext, useMemo, useState } from "react";