Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #4452 from appsmithorg/fix--color-picker-in-form-widget

Browse Source 
fix: add color picker to form component
This commit is contained in:
Somangshu Goswami 2021-06-07 18:15:15 +05:30 committed by GitHub
commit 5bca743790
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js
View File

@ -1,5 +1,6 @@
const testdata = require("../../../../fixtures/testdata.json");
const apiwidget = require("../../../../locators/apiWidgetslocator.json");
const widgetsPage = require("../../../../locators/Widgets.json");
const explorer = require("../../../../locators/explorerlocators.json");
const commonlocators = require("../../../../locators/commonlocators.json");
const formWidgetsPage = require("../../../../locators/FormWidgets.json");
@ -30,10 +31,13 @@ describe("Entity explorer Drag and Drop widgets testcases", function() {
/**
* @param{Text} Random Colour
*/
cy.testCodeMirror(this.data.colour);
cy.get(widgetsPage.backgroundcolorPicker)
.first()
.click({ force: true });
cy.xpath(widgetsPage.greenColor).click();
cy.get(formWidgetsPage.formD)
.should("have.css", "background-color")
.and("eq", this.data.rgbValue);
.and("eq", "rgb(3, 179, 101)");
/**
* @param{toggleButton Css} Assert to be checked
*/

10
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormWidget_spec.js
View File

@ -3,6 +3,7 @@ const formWidgetsPage = require("../../../../locators/FormWidgets.json");
const publish = require("../../../../locators/publishWidgetspage.json");
const dsl = require("../../../../fixtures/formdsl.json");
const pages = require("../../../../locators/Pages.json");
const widgetsPage = require("../../../../locators/Widgets.json");
describe("Form Widget Functionality", function() {
before(() => {
@ -23,10 +24,13 @@ describe("Form Widget Functionality", function() {
/**
* @param{Text} Random Colour
*/
cy.testCodeMirror(this.data.colour);
cy.get(widgetsPage.backgroundcolorPicker)
.first()
.click({ force: true });
cy.xpath(widgetsPage.greenColor).click();
cy.get(formWidgetsPage.formD)
.should("have.css", "background-color")
.and("eq", this.data.rgbValue);
.and("eq", "rgb(3, 179, 101)");
/**
* @param{toggleButton Css} Assert to be checked
*/
@ -40,7 +44,7 @@ describe("Form Widget Functionality", function() {
it("Form Widget Functionality To Verify The Colour", function() {
cy.get(formWidgetsPage.formD)
.should("have.css", "background-color")
.and("eq", this.data.rgbValue);
.and("eq", "rgb(3, 179, 101)");
});
it("Form Widget Functionality To Unchecked Visible Widget", function() {
cy.get(publish.backToEditor).click();

2
app/client/src/widgets/FormWidget.tsx
View File

@ -19,7 +19,7 @@ class FormWidget extends ContainerWidget {
label: "Background Color",
helpText: "Use a html color name, HEX, RGB or RGBA value",
placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)",
controlType: "INPUT_TEXT",
controlType: "COLOR_PICKER",
isBindProperty: true,
isTriggerProperty: false,
validation: VALIDATION_TYPES.TEXT,