diff --git a/app/client/cypress/fixtures/ThemeAppdsl.json b/app/client/cypress/fixtures/ThemeAppdsl.json new file mode 100644 index 0000000000..7131871a00 --- /dev/null +++ b/app/client/cypress/fixtures/ThemeAppdsl.json @@ -0,0 +1,1099 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 4896, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 5120, + "containerStyle": "none", + "snapRows": 128, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 58, + "minHeight": 1292, + "parentColumnSpace": 1, + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "widgetName": "Form1", + "backgroundColor": "white", + "rightColumn": 32, + "widgetId": "wbo3g8llkl", + "topRow": 0, + "bottomRow": 52, + "parentRowSpace": 40, + "isVisible": true, + "type": "FORM_WIDGET", + "parentId": "0", + "blueprint": { + "view": [ + { + "type": "CANVAS_WIDGET", + "position": { + "top": 0, + "left": 0 + }, + "props": { + "containerStyle": "none", + "canExtend": false, + "detachFromLayout": true, + "children": [], + "blueprint": { + "view": [ + { + "type": "TEXT_WIDGET", + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "type": "FORM_BUTTON_WIDGET", + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "props": { + "text": "Submit", + "buttonStyle": "PRIMARY_BUTTON", + "disabledWhenInvalid": true, + "resetFormOnClick": true + } + }, + { + "type": "FORM_BUTTON_WIDGET", + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "props": { + "text": "Reset", + "buttonStyle": "SECONDARY_BUTTON", + "disabledWhenInvalid": false, + "resetFormOnClick": true + } + } + ] + } + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 2072, + "detachFromLayout": true, + "widgetId": "4lvpg75cy5", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 2080, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "wbo3g8llkl", + "blueprint": { + "view": [ + { + "type": "TEXT_WIDGET", + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "type": "FORM_BUTTON_WIDGET", + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "props": { + "text": "Submit", + "buttonStyle": "PRIMARY_BUTTON", + "disabledWhenInvalid": true, + "resetFormOnClick": true + } + }, + { + "type": "FORM_BUTTON_WIDGET", + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "props": { + "text": "Reset", + "buttonStyle": "SECONDARY_BUTTON", + "disabledWhenInvalid": false, + "resetFormOnClick": true + } + } + ] + }, + "minHeight": 520, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 48, + "textAlign": "LEFT", + "widgetId": "9td4cv935h", + "topRow": 0, + "bottomRow": 4, + "isVisible": true, + "type": "TEXT_WIDGET", + "parentId": "4lvpg75cy5", + "isLoading": false, + "leftColumn": 0, + "text": "Form", + "version": 1, + "dynamicBindingPathList": [], + "fontSize": "1.5rem", + "fontStyle": "BOLD", + "textColor": "#231F20", + "overflow": "NONE", + "borderRadius": "0px", + "boxShadow": "none", + "dynamicPropertyPathList": [ + { + "key": "fontSize" + } + ], + "labelTextSize": "0.875rem" + }, + { + "resetFormOnClick": true, + "widgetName": "FormButton1", + "rightColumn": 64, + "isDefaultClickDisabled": true, + "widgetId": "d520h86aol", + "topRow": 44, + "bottomRow": 48, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "parentId": "4lvpg75cy5", + "isLoading": false, + "disabledWhenInvalid": true, + "leftColumn": 48, + "text": "Submit", + "version": 1, + "dynamicBindingPathList": [], + "buttonColor": "#03B365", + "buttonVariant": "PRIMARY", + "recaptchaType": "V3", + "borderRadius": "0px", + "boxShadow": "none", + "labelTextSize": "0.875rem" + }, + { + "resetFormOnClick": true, + "widgetName": "FormButton2", + "rightColumn": 48, + "isDefaultClickDisabled": true, + "widgetId": "2vqmk6ca6e", + "topRow": 44, + "bottomRow": 48, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "parentId": "4lvpg75cy5", + "isLoading": false, + "disabledWhenInvalid": false, + "leftColumn": 32, + "text": "Reset", + "version": 1, + "dynamicBindingPathList": [], + "buttonColor": "#03B365", + "buttonVariant": "PRIMARY", + "recaptchaType": "V3", + "borderRadius": "0px", + "boxShadow": "none", + "labelTextSize": "0.875rem" + }, + { + "widgetName": "Input1", + "rightColumn": 24, + "widgetId": "a7hpuqqo8r", + "topRow": 4, + "bottomRow": 8, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET_V2", + "parentId": "4lvpg75cy5", + "isLoading": false, + "parentColumnSpace": 29.875, + "leftColumn": 4, + "dynamicBindingPathList": [ + { + "key": "accentColor" + }, + { + "key": "defaultText" + } + ], + "inputType": "TEXT", + "defaultText": "{{Table1.selectedRow.id}}", + "version": 1, + "borderRadius": "0px", + "boxShadow": "none", + "labelTextSize": "0.875rem", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "dynamicTriggerPathList": [] + }, + { + "widgetName": "Input2", + "rightColumn": 24, + "widgetId": "vwe9oyg9x1", + "topRow": 12, + "bottomRow": 16, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET_V2", + "parentId": "4lvpg75cy5", + "isLoading": false, + "parentColumnSpace": 29.875, + "leftColumn": 4, + "dynamicBindingPathList": [ + { + "key": "defaultText" + }, + { + "key": "accentColor" + } + ], + "inputType": "TEXT", + "defaultText": "{{Input1.text}}", + "version": 1, + "borderRadius": "0px", + "boxShadow": "none", + "labelTextSize": "0.875rem", + "accentColor": "{{appsmith.theme.colors.primaryColor}}" + } + ], + "version": 1, + "dynamicBindingPathList": [], + "borderRadius": "0px", + "boxShadow": "none", + "labelTextSize": "0.875rem" + } + ], + "version": 1, + "dynamicBindingPathList": [], + "borderRadius": "0px", + "boxShadow": "none", + "labelTextSize": "0.875rem" + }, + { + "widgetName": "Table1", + "rightColumn": 64, + "widgetId": "tmkhgmgtzp", + "topRow": 12, + "bottomRow": 40, + "parentRowSpace": 10, + "tableData": "{{[\n {\n \"id\": 2381224,\n \"email\": \"michael.lawson@reqres.in\",\n \"userName\": \"Michael Lawson\",\n \"productName\": \"Chicken Sandwich\",\n \"orderAmount\": 4.99\n },\n {\n \"id\": 2736212,\n \"email\": \"lindsay.ferguson@reqres.in\",\n \"userName\": \"Lindsay Ferguson\",\n \"productName\": \"Tuna Salad\",\n \"orderAmount\": 9.99\n },\n {\n \"id\": 6788734,\n \"email\": \"tobias.funke@reqres.in\",\n \"userName\": \"Tobias Funke\",\n \"productName\": \"Beef steak\",\n \"orderAmount\": 19.99\n }\n]}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 32, + "dynamicBindingPathList": [ + { + "key": "tableData" + }, + { + "key": "accentColor" + }, + { + "key": "primaryColumns.id.computedValue" + }, + { + "key": "primaryColumns.email.computedValue" + }, + { + "key": "primaryColumns.userName.computedValue" + }, + { + "key": "primaryColumns.productName.computedValue" + }, + { + "key": "primaryColumns.orderAmount.computedValue" + } + ], + "migrated": true, + "primaryColumns": { + "id": { + "index": 0, + "width": 150, + "id": "id", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textColor": "", + "textSize": "0.875rem", + "fontStyle": "REGULAR", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellVisible": true, + "isDerived": false, + "label": "id", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}", + "cellBackground": "" + }, + "email": { + "index": 1, + "width": 150, + "id": "email", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textColor": "", + "textSize": "0.875rem", + "fontStyle": "REGULAR", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellVisible": true, + "isDerived": false, + "label": "email", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.email))}}", + "cellBackground": "" + }, + "userName": { + "index": 2, + "width": 150, + "id": "userName", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textColor": "", + "textSize": "0.875rem", + "fontStyle": "REGULAR", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellVisible": true, + "isDerived": false, + "label": "userName", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.userName))}}", + "cellBackground": "" + }, + "productName": { + "index": 3, + "width": 150, + "id": "productName", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textColor": "", + "textSize": "0.875rem", + "fontStyle": "REGULAR", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellVisible": true, + "isDerived": false, + "label": "productName", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.productName))}}", + "cellBackground": "" + }, + "orderAmount": { + "index": 4, + "width": 150, + "id": "orderAmount", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textColor": "", + "textSize": "0.875rem", + "fontStyle": "REGULAR", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellVisible": true, + "isDerived": false, + "label": "orderAmount", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.orderAmount))}}", + "cellBackground": "" + } + }, + "dynamicTriggerPathList": [], + "textSize": "0.875rem", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "fontStyle": "REGULAR", + "derivedColumns": {}, + "version": 3, + "isVisibleSearch": true, + "isVisibleFilters": true, + "isVisibleDownload": true, + "isVisiblePagination": true, + "delimiter": ",", + "columnOrder": [ + "id", + "email", + "userName", + "productName", + "orderAmount" + ], + "isSortable": true, + "borderRadius": "0px", + "boxShadow": "none", + "labelTextSize": "0.875rem", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "childStylesheet": { + "button": { + "buttonColor": "{{appsmith.theme.colors.primaryColor}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "boxShadow": "none" + }, + "menuButton": { + "menuColor": "{{appsmith.theme.colors.primaryColor}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "boxShadow": "none" + }, + "iconButton": { + "menuColor": "{{appsmith.theme.colors.primaryColor}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "boxShadow": "none" + } + } + }, + { + "isVisible": true, + "backgroundColor": "transparent", + "itemBackgroundColor": "#FFFFFF", + "animateLoading": true, + "gridType": "vertical", + "template": { + "Image1": { + "isVisible": true, + "defaultImage": "https://assets.appsmith.com/widgets/default.png", + "imageShape": "RECTANGLE", + "maxZoomLevel": 1, + "enableRotation": false, + "enableDownload": false, + "objectFit": "cover", + "image": "{{List1.listData.map((currentItem) => currentItem.img)}}", + "widgetName": "Image1", + "version": 1, + "animateLoading": true, + "type": "IMAGE_WIDGET", + "hideCard": false, + "displayName": "Image", + "key": "hhsksa1xfd", + "iconSVG": "/static/media/icon.52d8fb96.svg", + "boxShadow": "none", + "dynamicBindingPathList": [ + { + "key": "image" + }, + { + "key": "borderRadius" + }, + { + "key": "fontFamily" + } + ], + "dynamicTriggerPathList": [], + "widgetId": "wvqnxtv64v", + "renderMode": "CANVAS", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", + "isLoading": false, + "leftColumn": 0, + "rightColumn": 16, + "topRow": 0, + "bottomRow": 8, + "parentId": "dc5k61m9ju" + }, + "Text2": { + "isVisible": true, + "text": "{{List1.listData.map((currentItem) => currentItem.name)}}", + "fontSize": "1rem", + "fontStyle": "BOLD", + "textAlign": "LEFT", + "textColor": "#231F20", + "truncateButtonColor": "#FFC13D", + "widgetName": "Text2", + "shouldTruncate": false, + "overflow": "NONE", + "version": 1, + "animateLoading": true, + "type": "TEXT_WIDGET", + "hideCard": false, + "displayName": "Text", + "key": "3w4tjd913f", + "iconSVG": "/static/media/icon.97c59b52.svg", + "textStyle": "HEADING", + "boxShadow": "none", + "dynamicBindingPathList": [ + { + "key": "text" + }, + { + "key": "borderRadius" + } + ], + "dynamicTriggerPathList": [], + "widgetId": "egjawkzn9v", + "renderMode": "CANVAS", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "isLoading": false, + "leftColumn": 16, + "rightColumn": 28, + "topRow": 0, + "bottomRow": 4, + "parentId": "dc5k61m9ju" + }, + "Text3": { + "isVisible": true, + "text": "{{List1.listData.map((currentItem) => currentItem.id)}}", + "fontSize": "1rem", + "fontStyle": "BOLD", + "textAlign": "LEFT", + "textColor": "#231F20", + "truncateButtonColor": "#FFC13D", + "widgetName": "Text3", + "shouldTruncate": false, + "overflow": "NONE", + "version": 1, + "animateLoading": true, + "type": "TEXT_WIDGET", + "hideCard": false, + "displayName": "Text", + "key": "3w4tjd913f", + "iconSVG": "/static/media/icon.97c59b52.svg", + "textStyle": "BODY", + "boxShadow": "none", + "dynamicBindingPathList": [ + { + "key": "text" + }, + { + "key": "borderRadius" + } + ], + "dynamicTriggerPathList": [], + "widgetId": "nga5glnz0u", + "renderMode": "CANVAS", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "isLoading": false, + "leftColumn": 16, + "rightColumn": 24, + "topRow": 4, + "bottomRow": 8, + "parentId": "dc5k61m9ju" + } + }, + "enhancements": true, + "gridGap": 0, + "listData": [ + { + "id": "001", + "name": "Blue", + "img": "https://assets.appsmith.com/widgets/default.png" + }, + { + "id": "002", + "name": "Green", + "img": "https://assets.appsmith.com/widgets/default.png" + }, + { + "id": "003", + "name": "Red", + "img": "https://assets.appsmith.com/widgets/default.png" + } + ], + "widgetName": "List1", + "children": [ + { + "isVisible": true, + "widgetName": "Canvas2", + "version": 1, + "detachFromLayout": true, + "type": "CANVAS_WIDGET", + "hideCard": true, + "displayName": "Canvas", + "key": "sljjzahlk7", + "containerStyle": "none", + "canExtend": false, + "dropDisabled": true, + "openParentPropertyPane": true, + "noPad": true, + "children": [ + { + "isVisible": true, + "backgroundColor": "white", + "widgetName": "Container1", + "containerStyle": "card", + "borderColor": "transparent", + "borderWidth": "0", + "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", + "animateLoading": true, + "children": [ + { + "isVisible": true, + "widgetName": "Canvas3", + "version": 1, + "detachFromLayout": true, + "type": "CANVAS_WIDGET", + "hideCard": true, + "displayName": "Canvas", + "key": "sljjzahlk7", + "containerStyle": "none", + "canExtend": false, + "children": [ + { + "isVisible": true, + "defaultImage": "https://assets.appsmith.com/widgets/default.png", + "imageShape": "RECTANGLE", + "maxZoomLevel": 1, + "enableRotation": false, + "enableDownload": false, + "objectFit": "cover", + "image": "{{currentItem.img}}", + "widgetName": "Image1", + "version": 1, + "animateLoading": true, + "type": "IMAGE_WIDGET", + "hideCard": false, + "displayName": "Image", + "key": "hhsksa1xfd", + "iconSVG": "/static/media/icon.52d8fb96.svg", + "boxShadow": "none", + "dynamicBindingPathList": [ + { + "key": "image" + }, + { + "key": "borderRadius" + }, + { + "key": "fontFamily" + } + ], + "dynamicTriggerPathList": [], + "widgetId": "wvqnxtv64v", + "renderMode": "CANVAS", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", + "isLoading": false, + "leftColumn": 0, + "rightColumn": 16, + "topRow": 0, + "bottomRow": 8, + "parentId": "dc5k61m9ju", + "logBlackList": { + "isVisible": true, + "defaultImage": true, + "imageShape": true, + "maxZoomLevel": true, + "enableRotation": true, + "enableDownload": true, + "objectFit": true, + "image": true, + "widgetName": true, + "version": true, + "animateLoading": true, + "type": true, + "hideCard": true, + "displayName": true, + "key": true, + "iconSVG": true, + "isCanvas": true, + "boxShadow": true, + "dynamicBindingPathList": true, + "dynamicTriggerPathList": true, + "minHeight": true, + "widgetId": true, + "renderMode": true, + "borderRadius": true, + "fontFamily": true, + "isLoading": true, + "parentColumnSpace": true, + "parentRowSpace": true, + "leftColumn": true, + "rightColumn": true, + "topRow": true, + "bottomRow": true, + "parentId": true + } + }, + { + "isVisible": true, + "text": "{{currentItem.name}}", + "fontSize": "1rem", + "fontStyle": "BOLD", + "textAlign": "LEFT", + "textColor": "#231F20", + "truncateButtonColor": "#FFC13D", + "widgetName": "Text2", + "shouldTruncate": false, + "overflow": "NONE", + "version": 1, + "animateLoading": true, + "type": "TEXT_WIDGET", + "hideCard": false, + "displayName": "Text", + "key": "3w4tjd913f", + "iconSVG": "/static/media/icon.97c59b52.svg", + "textStyle": "HEADING", + "boxShadow": "none", + "dynamicBindingPathList": [ + { + "key": "text" + }, + { + "key": "borderRadius" + } + ], + "dynamicTriggerPathList": [], + "widgetId": "egjawkzn9v", + "renderMode": "CANVAS", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "isLoading": false, + "leftColumn": 16, + "rightColumn": 28, + "topRow": 0, + "bottomRow": 4, + "parentId": "dc5k61m9ju", + "logBlackList": { + "isVisible": true, + "text": true, + "fontSize": true, + "fontStyle": true, + "textAlign": true, + "textColor": true, + "truncateButtonColor": true, + "widgetName": true, + "shouldTruncate": true, + "overflow": true, + "version": true, + "animateLoading": true, + "type": true, + "hideCard": true, + "displayName": true, + "key": true, + "iconSVG": true, + "isCanvas": true, + "textStyle": true, + "boxShadow": true, + "dynamicBindingPathList": true, + "dynamicTriggerPathList": true, + "minHeight": true, + "widgetId": true, + "renderMode": true, + "borderRadius": true, + "isLoading": true, + "parentColumnSpace": true, + "parentRowSpace": true, + "leftColumn": true, + "rightColumn": true, + "topRow": true, + "bottomRow": true, + "parentId": true + } + }, + { + "isVisible": true, + "text": "{{currentItem.id}}", + "fontSize": "1rem", + "fontStyle": "BOLD", + "textAlign": "LEFT", + "textColor": "#231F20", + "truncateButtonColor": "#FFC13D", + "widgetName": "Text3", + "shouldTruncate": false, + "overflow": "NONE", + "version": 1, + "animateLoading": true, + "type": "TEXT_WIDGET", + "hideCard": false, + "displayName": "Text", + "key": "3w4tjd913f", + "iconSVG": "/static/media/icon.97c59b52.svg", + "textStyle": "BODY", + "boxShadow": "none", + "dynamicBindingPathList": [ + { + "key": "text" + }, + { + "key": "borderRadius" + } + ], + "dynamicTriggerPathList": [], + "widgetId": "nga5glnz0u", + "renderMode": "CANVAS", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "isLoading": false, + "leftColumn": 16, + "rightColumn": 24, + "topRow": 4, + "bottomRow": 8, + "parentId": "dc5k61m9ju", + "logBlackList": { + "isVisible": true, + "text": true, + "fontSize": true, + "fontStyle": true, + "textAlign": true, + "textColor": true, + "truncateButtonColor": true, + "widgetName": true, + "shouldTruncate": true, + "overflow": true, + "version": true, + "animateLoading": true, + "type": true, + "hideCard": true, + "displayName": true, + "key": true, + "iconSVG": true, + "isCanvas": true, + "textStyle": true, + "boxShadow": true, + "dynamicBindingPathList": true, + "dynamicTriggerPathList": true, + "minHeight": true, + "widgetId": true, + "renderMode": true, + "borderRadius": true, + "isLoading": true, + "parentColumnSpace": true, + "parentRowSpace": true, + "leftColumn": true, + "rightColumn": true, + "topRow": true, + "bottomRow": true, + "parentId": true + } + } + ], + "minHeight": null, + "widgetId": "dc5k61m9ju", + "renderMode": "CANVAS", + "boxShadow": "none", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": null, + "topRow": 0, + "bottomRow": null, + "parentId": "jarbabtyl3", + "dynamicBindingPathList": [ + { + "key": "borderRadius" + }, + { + "key": "accentColor" + } + ] + } + ], + "version": 1, + "type": "CONTAINER_WIDGET", + "hideCard": false, + "displayName": "Container", + "key": "d2mn2fri94", + "iconSVG": "/static/media/icon.1977dca3.svg", + "isCanvas": true, + "dragDisabled": true, + "isDeletable": false, + "disallowCopy": true, + "disablePropertyPane": true, + "openParentPropertyPane": true, + "widgetId": "jarbabtyl3", + "renderMode": "CANVAS", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "isLoading": false, + "leftColumn": 0, + "rightColumn": 64, + "topRow": 0, + "bottomRow": 12, + "parentId": "hxdm31vfo8", + "dynamicBindingPathList": [ + { + "key": "borderRadius" + }, + { + "key": "boxShadow" + } + ] + } + ], + "minHeight": 400, + "widgetId": "hxdm31vfo8", + "renderMode": "CANVAS", + "boxShadow": "none", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 286.5, + "topRow": 0, + "bottomRow": 400, + "parentId": "g2pkscp895", + "dynamicBindingPathList": [ + { + "key": "borderRadius" + }, + { + "key": "accentColor" + } + ] + } + ], + "type": "LIST_WIDGET", + "hideCard": false, + "displayName": "List", + "key": "9uwg26hg8f", + "iconSVG": "/static/media/icon.9925ee17.svg", + "isCanvas": true, + "widgetId": "g2pkscp895", + "renderMode": "CANVAS", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", + "isLoading": false, + "parentColumnSpace": 11.9375, + "parentRowSpace": 10, + "leftColumn": 5, + "rightColumn": 29, + "topRow": 55, + "bottomRow": 95, + "parentId": "0", + "dynamicBindingPathList": [ + { + "key": "accentColor" + }, + { + "key": "borderRadius" + }, + { + "key": "boxShadow" + }, + { + "key": "template.Image1.image" + }, + { + "key": "template.Text2.text" + }, + { + "key": "template.Text3.text" + } + ], + "privateWidgets": { + "Image1": true, + "Text2": true, + "Text3": true + }, + "dynamicTriggerPathList": [] + }, + { + "isVisible": true, + "animateLoading": true, + "label": "Label", + "labelPosition": "Left", + "labelAlignment": "left", + "labelWidth": 5, + "options": [ + { + "label": "Yes", + "value": "Y" + }, + { + "label": "No", + "value": "N" + } + ], + "defaultOptionValue": "Y", + "isRequired": false, + "isDisabled": false, + "isInline": true, + "alignment": "left", + "widgetName": "RadioGroup1", + "version": 1, + "type": "RADIO_GROUP_WIDGET", + "hideCard": false, + "displayName": "Radio Group", + "key": "ysmkt4litb", + "iconSVG": "/static/media/icon.ba2b2ee0.svg", + "widgetId": "e31lpxhpg3", + "renderMode": "CANVAS", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "boxShadow": "none", + "isLoading": false, + "parentColumnSpace": 11.9375, + "parentRowSpace": 10, + "leftColumn": 39, + "rightColumn": 59, + "topRow": 2, + "bottomRow": 10, + "parentId": "0", + "dynamicBindingPathList": [ + { + "key": "accentColor" + } + ] + } + ] + } +} \ No newline at end of file diff --git a/app/client/cypress/fixtures/fontData.json b/app/client/cypress/fixtures/fontData.json new file mode 100644 index 0000000000..b8f7ade2bd --- /dev/null +++ b/app/client/cypress/fixtures/fontData.json @@ -0,0 +1,15 @@ +{ + "dropdownValues": [ + "System Default", + "System Default", + "Nunito Sans", + "Poppins", + "Inter", + "Montserrat", + "Noto Sans", + "Open Sans", + "Roboto", + "Rubik", + "Ubuntu" + ] +} \ No newline at end of file diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_Default_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_Default_spec.js new file mode 100644 index 0000000000..f9b4e8cc9a --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_Default_spec.js @@ -0,0 +1,121 @@ +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"); +const publish = require("../../../../locators/publishWidgetspage.json"); +const themelocator = require("../../../../locators/ThemeLocators.json"); + +let themeBackgroudColor; +let themeFont; + +describe("Theme validation for default data", function() { + it("Drag and drop form widget and validate Default color/font/shadow/border and list of font validation", function() { + cy.log("Login Successful"); + cy.reload(); // To remove the rename tooltip + cy.get(explorer.addWidget).click(); + cy.get(commonlocators.entityExplorersearch).should("be.visible"); + cy.get(commonlocators.entityExplorersearch) + .clear() + .type("form"); + cy.dragAndDropToCanvas("formwidget", { x: 300, y: 80 }); + cy.wait("@updateLayout").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); + cy.wait(3000); + cy.get(themelocator.canvas).click({ force: true }); + cy.wait(2000); + + //Border validation + //cy.contains("Border").click({ force: true }); + cy.get(themelocator.border).should("have.length", "3"); + cy.borderMouseover(0, "none"); + cy.borderMouseover(1, "md"); + cy.borderMouseover(2, "lg"); + cy.contains("Border").click({ force: true }); + + //Shadow validation + //cy.contains("Shadow").click({ force: true }); + cy.wait(2000); + cy.shadowMouseover(0, "none"); + cy.shadowMouseover(1, "sm"); + cy.shadowMouseover(2, "md"); + cy.shadowMouseover(3, "lg"); + cy.contains("Shadow").click({ force: true }); + + //Font + //cy.contains("Font").click({ force: true }); + cy.get("span[name='expand-more']").then(($elem) => { + cy.get($elem).click({ force: true }); + cy.wait(250); + + cy.get(themelocator.fontsSelected) + .eq(0) + .should("have.text", "System Default"); + }); + cy.contains("Font").click({ force: true }); + + //Color + //cy.contains("Color").click({ force: true }); + cy.wait(2000); + cy.colorMouseover(0, "Primary Color"); + cy.validateColor(0, "#16a34a"); + cy.colorMouseover(1, "Background Color"); + cy.validateColor(1, "#F6F6F6"); + }); + + it("Validate Default Theme change across application", function() { + cy.get(formWidgetsPage.formD).click(); + cy.widgetText( + "FormTest", + formWidgetsPage.formWidget, + formWidgetsPage.formInner, + ); + cy.get(widgetsPage.backgroundcolorPickerNew) + .first() + .click({ force: true }); + cy.get("[style='background-color: rgb(21, 128, 61);']") + .last() + .click(); + cy.wait(2000); + cy.get(formWidgetsPage.formD) + .should("have.css", "background-color") + .and("eq", "rgb(21, 128, 61)"); + cy.get("#canvas-selection-0").click({ force: true }); + //Change the Theme + cy.get(commonlocators.changeThemeBtn) + .should("be.visible") + .click({ force: true }); + cy.get(".cursor-pointer:contains('Current Theme')").click({ force: true }); + cy.get(".t--theme-card main > main") + .first() + .invoke("css", "background-color") + .then((CurrentBackgroudColor) => { + cy.get(".bp3-button:contains('Submit')") + .last() + .invoke("css", "background-color") + .then((selectedBackgroudColor) => { + expect(CurrentBackgroudColor).to.equal(selectedBackgroudColor); + themeBackgroudColor = CurrentBackgroudColor; + }); + }); + }); + + it("Publish the App and validate Default Theme across the app", function() { + cy.PublishtheApp(); + cy.get(".bp3-button:contains('Submit')") + .invoke("css", "background-color") + .then((CurrentBackgroudColor) => { + cy.get(".bp3-button:contains('Edit App')") + .invoke("css", "background-color") + .then((selectedBackgroudColor) => { + expect(CurrentBackgroudColor).to.equal(selectedBackgroudColor); + expect(CurrentBackgroudColor).to.equal(themeBackgroudColor); + expect(selectedBackgroudColor).to.equal(themeBackgroudColor); + }); + }); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_MultiSelectWidget_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_MultiSelectWidget_spec.js new file mode 100644 index 0000000000..22c66e0d7a --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_MultiSelectWidget_spec.js @@ -0,0 +1,181 @@ +const commonlocators = require("../../../../locators/commonlocators.json"); +const dsl = require("../../../../fixtures/ThemeAppdsl.json"); +const widgetsPage = require("../../../../locators/Widgets.json"); +const testdata = require("../../../../fixtures/testdata.json"); +const apiwidget = require("../../../../locators/apiWidgetslocator.json"); +const explorer = require("../../../../locators/explorerlocators.json"); +const formWidgetsPage = require("../../../../locators/FormWidgets.json"); +const publish = require("../../../../locators/publishWidgetspage.json"); +const themelocator = require("../../../../locators/ThemeLocators.json"); + +let themeBackgroudColor; +let themeFont; +let themeColour; + +describe("Theme validation usecase for multi-select widget", function() { + it("Drag and drop multi-select widget and validate Default font and list of font validation", function() { + cy.log("Login Successful"); + cy.reload(); // To remove the rename tooltip + cy.get(explorer.addWidget).click(); + cy.get(commonlocators.entityExplorersearch).should("be.visible"); + cy.get(commonlocators.entityExplorersearch) + .clear() + .type("multiselect"); + cy.dragAndDropToCanvas("multiselectwidgetv2", { x: 300, y: 80 }); + cy.wait("@updateLayout").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); + cy.wait(3000); + cy.get(themelocator.canvas).click({ force: true }); + cy.wait(2000); + + //Border validation + //cy.contains("Border").click({ force: true }); + cy.get(themelocator.border).should("have.length", "3"); + cy.borderMouseover(0, "none"); + cy.borderMouseover(1, "md"); + cy.borderMouseover(2, "lg"); + cy.get(themelocator.border) + .eq(1) + .click({ force: true }); + cy.wait("@updateTheme").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); + cy.wait(5000); + cy.contains("Border").click({ force: true }); + + //Shadow validation + //cy.contains("Shadow").click({ force: true }); + cy.wait(2000); + cy.shadowMouseover(0, "none"); + cy.shadowMouseover(1, "sm"); + cy.shadowMouseover(2, "md"); + cy.shadowMouseover(3, "lg"); + cy.xpath(themelocator.shadow) + .eq(3) + .click({ force: true }); + cy.wait("@updateTheme").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); + cy.wait(5000); + cy.contains("Shadow").click({ force: true }); + + //Font + cy.get("span[name='expand-more']").then(($elem) => { + cy.get($elem).click({ force: true }); + cy.wait(250); + cy.fixture("fontData").then(function(testdata) { + this.testdata = testdata; + }); + + cy.get(themelocator.fontsSelected) + .eq(0) + .should("have.text", "System Default"); + + cy.get(themelocator.fontsSelected).each(($ele, i) => { + //cy.log($ele); + expect($ele).to.have.text(this.testdata.dropdownValues[i]); + }); + cy.get(".ads-dropdown-options-wrapper div") + .children() + .eq(2) + .then(($childElem) => { + cy.get($childElem).click({ force: true }); + cy.get(".t--draggable-multiselectwidgetv2:contains('more')").should( + "have.css", + "font-family", + $childElem + .children() + .last() + .text(), + ); + themeFont = $childElem + .children() + .last() + .text(); + }); + }); + cy.contains("Font").click({ force: true }); + + //Color + cy.wait(3000); + cy.get(themelocator.color) + .eq(0) + .click({ force: true }); + cy.get(themelocator.inputColor).clear(); + cy.get(themelocator.inputColor).type("purple"); + cy.get(themelocator.inputColor).should("have.value", "purple"); + cy.get(themelocator.color) + .eq(1) + .click({ force: true }); + cy.get(themelocator.inputColor).clear(); + cy.get(themelocator.inputColor).type("brown"); + cy.get(themelocator.inputColor).should("have.value", "brown"); + cy.wait(2000); + cy.contains("Color").click({ force: true }); + }); + + it("Publish the App and validate Font across the app", function() { + cy.PublishtheApp(); + cy.get(".rc-select-selection-item > .rc-select-selection-item-content") + .first() + .should("have.css", "font-family", themeFont); + cy.get(".rc-select-selection-item > .rc-select-selection-item-content") + .last() + .should("have.css", "font-family", themeFont); + cy.get(".bp3-button:contains('Edit App')").should( + "have.css", + "font-family", + themeFont, + ); + cy.get(".bp3-button:contains('Share')").should( + "have.css", + "font-family", + themeFont, + ); + }); + + it("Validate Default Theme change across application", function() { + cy.goToEditFromPublish(); + cy.get("#canvas-selection-0").click({ force: true }); + //Change the Theme + cy.get(commonlocators.changeThemeBtn) + .should("be.visible") + .click({ force: true }); + cy.get(themelocator.currentTheme).click({ force: true }); + cy.get(".t--theme-card main > main") + .first() + .invoke("css", "background-color") + .then((CurrentBackgroudColor) => { + cy.get(".t--draggable-multiselectwidgetv2:contains('more')") + .last() + .invoke("css", "background-color") + .then((selectedBackgroudColor) => { + expect("rgba(0, 0, 0, 0)").to.equal(selectedBackgroudColor); + themeBackgroudColor = CurrentBackgroudColor; + themeColour = selectedBackgroudColor; + }); + }); + }); + + it("Publish the App and validate Default Theme across the app", function() { + cy.PublishtheApp(); + cy.get(".rc-select-selection-item > .rc-select-selection-item-content") + .first() + .invoke("css", "background-color") + .then((CurrentBackgroudColor) => { + cy.get(".bp3-button:contains('Edit App')") + .invoke("css", "background-color") + .then((selectedBackgroudColor) => { + expect(CurrentBackgroudColor).to.equal(themeColour); + expect(selectedBackgroudColor).to.equal(themeBackgroudColor); + }); + }); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_spec.js new file mode 100644 index 0000000000..3ee63dcd09 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_spec.js @@ -0,0 +1,335 @@ +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"); +const publish = require("../../../../locators/publishWidgetspage.json"); +const themelocator = require("../../../../locators/ThemeLocators.json"); + +let themeBackgroudColor; +let themeFont; + +describe("Theme validation usecases", function() { + it("Drag and drop form widget and validate Default font and list of font validation", function() { + cy.log("Login Successful"); + cy.reload(); // To remove the rename tooltip + cy.get(explorer.addWidget).click(); + cy.get(commonlocators.entityExplorersearch).should("be.visible"); + cy.get(commonlocators.entityExplorersearch) + .clear() + .type("form"); + cy.dragAndDropToCanvas("formwidget", { x: 300, y: 80 }); + cy.wait("@updateLayout").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); + cy.wait(3000); + cy.get(themelocator.canvas).click({ force: true }); + cy.wait(2000); + + //Border validation + //cy.contains("Border").click({ force: true }); + cy.get(themelocator.border).should("have.length", "3"); + cy.borderMouseover(0, "none"); + cy.borderMouseover(1, "md"); + cy.borderMouseover(2, "lg"); + cy.get(themelocator.border) + .eq(2) + .click({ force: true }); + cy.wait("@updateTheme").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); + cy.wait(5000); + cy.contains("Border").click({ force: true }); + + //Shadow validation + //cy.contains("Shadow").click({ force: true }); + cy.shadowMouseover(0, "none"); + cy.shadowMouseover(1, "sm"); + cy.shadowMouseover(2, "md"); + cy.shadowMouseover(3, "lg"); + cy.xpath(themelocator.shadow) + .eq(3) + .click({ force: true }); + cy.wait("@updateTheme").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); + cy.wait(5000); + cy.contains("Shadow").click({ force: true }); + + //Font + cy.get("span[name='expand-more']").then(($elem) => { + cy.get($elem).click({ force: true }); + cy.wait(250); + cy.fixture("fontData").then(function(testdata) { + this.testdata = testdata; + }); + + cy.get(themelocator.fontsSelected) + .eq(0) + .should("have.text", "System Default"); + + cy.get(themelocator.fontsSelected).each(($ele, i) => { + //cy.log($ele); + expect($ele).to.have.text(this.testdata.dropdownValues[i]); + }); + cy.get(".ads-dropdown-options-wrapper div") + .children() + .eq(2) + .then(($childElem) => { + cy.get($childElem).click({ force: true }); + cy.get( + ".t--draggable-formbuttonwidget button :contains('Submit')", + ).should( + "have.css", + "font-family", + $childElem + .children() + .last() + .text(), + ); + themeFont = $childElem + .children() + .last() + .text(); + }); + }); + cy.contains("Font").click({ force: true }); + + //Color + //cy.contains("Color").click({ force: true }); + cy.wait(2000); + cy.colorMouseover(0, "Primary Color"); + cy.validateColor(0, "#16a34a"); + cy.colorMouseover(1, "Background Color"); + cy.validateColor(1, "#F6F6F6"); + + cy.get(themelocator.inputColor).click({ force: true }); + cy.chooseColor(0, themelocator.greenColor); + + cy.get(themelocator.inputColor).should("have.value", "#15803d"); + cy.get(themelocator.inputColor).clear({ force: true }); + cy.wait(2000); + cy.get(themelocator.inputColor).type("red"); + cy.get(themelocator.inputColor).should("have.value", "red"); + cy.wait(2000); + + cy.get(themelocator.inputColor) + .eq(0) + .click({ force: true }); + cy.get(themelocator.inputColor).click({ force: true }); + cy.get('[data-testid="color-picker"]') + .first() + .click({ force: true }); + cy.get("[style='background-color: rgb(21, 128, 61);']") + .last() + .click(); + cy.wait(2000); + cy.get(themelocator.inputColor).should("have.value", "#15803d"); + cy.get(themelocator.inputColor).clear({ force: true }); + cy.wait(2000); + cy.get(themelocator.inputColor).type("Black"); + cy.get(themelocator.inputColor).should("have.value", "Black"); + cy.wait(2000); + cy.contains("Color").click({ force: true }); + }); + + it("Publish the App and validate Font across the app", function() { + cy.PublishtheApp(); + cy.get(".bp3-button:contains('Submit')").should( + "have.css", + "font-family", + themeFont, + ); + cy.get(".bp3-button:contains('Edit App')").should( + "have.css", + "font-family", + themeFont, + ); + cy.get(".bp3-button:contains('Share')").should( + "have.css", + "font-family", + themeFont, + ); + cy.get(".bp3-button:contains('Reset')").should( + "have.css", + "font-family", + themeFont, + ); + }); + + it("Validate Default Theme change across application", function() { + cy.goToEditFromPublish(); + cy.get(formWidgetsPage.formD).click(); + cy.widgetText( + "FormTest", + formWidgetsPage.formWidget, + formWidgetsPage.formInner, + ); + cy.get(widgetsPage.backgroundcolorPickerNew) + .first() + .click({ force: true }); + cy.get("[style='background-color: rgb(21, 128, 61);']") + .last() + .click(); + cy.wait(2000); + cy.get(formWidgetsPage.formD) + .should("have.css", "background-color") + .and("eq", "rgb(21, 128, 61)"); + cy.get("#canvas-selection-0").click({ force: true }); + //Change the Theme + cy.get(commonlocators.changeThemeBtn) + .should("be.visible") + .click({ force: true }); + cy.get(themelocator.currentTheme).click({ force: true }); + cy.get(".t--theme-card main > main") + .first() + .invoke("css", "background-color") + .then((CurrentBackgroudColor) => { + cy.get(".bp3-button:contains('Submit')") + .last() + .invoke("css", "background-color") + .then((selectedBackgroudColor) => { + expect(CurrentBackgroudColor).to.equal(selectedBackgroudColor); + themeBackgroudColor = CurrentBackgroudColor; + }); + }); + }); + + it("Publish the App and validate Default Theme across the app", function() { + cy.PublishtheApp(); + /* Bug Form backgroud colour reset in Publish mode + cy.get(formWidgetsPage.formD) + .should("have.css", "background-color") + .and("eq", "rgb(21, 128, 61)"); + */ + cy.get(".bp3-button:contains('Submit')") + .invoke("css", "background-color") + .then((CurrentBackgroudColor) => { + cy.get(".bp3-button:contains('Edit App')") + .invoke("css", "background-color") + .then((selectedBackgroudColor) => { + expect(CurrentBackgroudColor).to.equal(selectedBackgroudColor); + expect(CurrentBackgroudColor).to.equal(themeBackgroudColor); + expect(selectedBackgroudColor).to.equal(themeBackgroudColor); + }); + }); + }); + + it("Validate Theme change across application", function() { + cy.goToEditFromPublish(); + cy.get(formWidgetsPage.formD).click(); + cy.widgetText( + "FormTest", + formWidgetsPage.formWidget, + formWidgetsPage.formInner, + ); + cy.get(widgetsPage.backgroundcolorPickerNew) + .first() + .click({ force: true }); + cy.get("[style='background-color: rgb(21, 128, 61);']") + .last() + .click(); + cy.wait(2000); + cy.get(formWidgetsPage.formD) + .should("have.css", "background-color") + .and("eq", "rgb(21, 128, 61)"); + + cy.get("#canvas-selection-0").click({ force: true }); + + //Change the Theme + cy.get(commonlocators.changeThemeBtn) + .should("be.visible") + .click({ force: true }); + // select a theme + cy.get(commonlocators.themeCard) + .last() + .click({ force: true }); + + // check for alert + cy.get(`${commonlocators.themeCard}`) + .last() + .siblings("div") + .first() + .invoke("text") + .then((text) => { + cy.get(commonlocators.toastmsg).contains(`Theme ${text} Applied`); + }); + cy.get(`${commonlocators.themeCard} > main`) + .last() + .invoke("css", "background-color") + .then((backgroudColor) => { + cy.get(commonlocators.canvas).should( + "have.css", + "background-color", + backgroudColor, + ); + }); + cy.get(themelocator.currentTheme).click({ force: true }); + cy.get(".t--theme-card > main") + .first() + .invoke("css", "background-color") + .then((backgroudColor) => { + cy.get(commonlocators.canvas).should( + "have.css", + "background-color", + backgroudColor, + ); + }); + cy.get(".t--theme-card main > main") + .first() + .invoke("css", "background-color") + .then((CurrentBackgroudColor) => { + cy.get(".t--theme-card main > main") + .last() + .invoke("css", "background-color") + .then((selectedBackgroudColor) => { + expect(CurrentBackgroudColor).to.equal(selectedBackgroudColor); + themeBackgroudColor = CurrentBackgroudColor; + }); + }); + cy.get(formWidgetsPage.formD).click(); + cy.widgetText( + "FormTest", + formWidgetsPage.formWidget, + formWidgetsPage.formInner, + ); + cy.get(widgetsPage.backgroundcolorPickerNew) + .first() + .click({ force: true }); + cy.get("[style='background-color: rgb(255, 193, 61);']") + .last() + .click(); + cy.wait(2000); + cy.get(formWidgetsPage.formD) + .should("have.css", "background-color") + .and("eq", "rgb(255, 193, 61)"); + }); + + it("Publish the App and validate Theme across the app", function() { + cy.PublishtheApp(); + //Bug Form backgroud colour reset in Publish mode + /* + cy.get(formWidgetsPage.formD) + .should("have.css", "background-color") + .and("eq", "rgb(255, 193, 61)"); + */ + cy.get(".bp3-button:contains('Submit')") + .invoke("css", "background-color") + .then((CurrentBackgroudColor) => { + cy.get(".bp3-button:contains('Edit App')") + .invoke("css", "background-color") + .then((selectedBackgroudColor) => { + expect(CurrentBackgroudColor).to.equal(selectedBackgroudColor); + expect(CurrentBackgroudColor).to.equal(themeBackgroudColor); + expect(selectedBackgroudColor).to.equal(themeBackgroudColor); + }); + }); + }); +}); diff --git a/app/client/cypress/locators/ThemeLocators.json b/app/client/cypress/locators/ThemeLocators.json new file mode 100644 index 0000000000..a0dca21fb3 --- /dev/null +++ b/app/client/cypress/locators/ThemeLocators.json @@ -0,0 +1,13 @@ +{ + "canvas": "#canvas-selection-0", + "border": ".t--theme-appBorderRadius", + "popover": ".bp3-popover-content", + "shadow": "//h3[contains(text(),'Shadow')]/following-sibling::div//button", + "color": ".t--property-pane-sidebar .bp3-popover-target .cursor-pointer", + "inputColor": ".t--colorpicker-v2-popover input", + "colorPicker": "[data-testid='color-picker']", + "greenColor": "[style='background-color: rgb(21, 128, 61);']", + "fontsSelected": ".leading-normal", + "currentTheme": ".cursor-pointer:contains('Current Theme')", + "purpleColor": "[style='background-color: rgb(107,114,128);']" +} \ No newline at end of file diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index 5356427ca9..1c6e433b5a 100644 --- a/app/client/cypress/support/commands.js +++ b/app/client/cypress/support/commands.js @@ -36,6 +36,7 @@ import commentsLocators from "../locators/CommentsLocators"; const queryLocators = require("../locators/QueryEditor.json"); const welcomePage = require("../locators/welcomePage.json"); const publishWidgetspage = require("../locators/publishWidgetspage.json"); +const themelocator = require("../locators/ThemeLocators.json"); import gitSyncLocators from "../locators/gitSyncLocators"; let pageidcopy = " "; @@ -865,6 +866,7 @@ Cypress.Commands.add("startRoutesForDatasource", () => { Cypress.Commands.add("startServerAndRoutes", () => { //To update route with intercept after working on alias wrt wait and alias cy.server(); + cy.route("PUT", "/api/v1/themes/applications/*").as("updateTheme"); cy.route("POST", "/api/v1/datasources/test").as("testDatasource"); cy.route("PUT", "/api/v1/datasources/*").as("saveDatasource"); cy.route("GET", "/api/v1/applications/new").as("applications"); diff --git a/app/client/cypress/support/index.js b/app/client/cypress/support/index.js index e8f0024268..3d04e88475 100644 --- a/app/client/cypress/support/index.js +++ b/app/client/cypress/support/index.js @@ -28,6 +28,7 @@ import { initLocalstorageRegistry } from "./Objects/Registry"; import "./OrgCommands"; import "./queryCommands"; import "./widgetCommands"; +import "./themeCommands"; import "./AdminSettingsCommands"; /// diff --git a/app/client/cypress/support/themeCommands.js b/app/client/cypress/support/themeCommands.js new file mode 100644 index 0000000000..649a83bd48 --- /dev/null +++ b/app/client/cypress/support/themeCommands.js @@ -0,0 +1,50 @@ +/* eslint-disable cypress/no-unnecessary-waiting */ +/* eslint-disable cypress/no-assigning-return-values */ +/* Contains all methods related to Organisation features*/ + +require("cy-verify-downloads").addCustomCommand(); +require("cypress-file-upload"); +const themelocator = require("../locators/ThemeLocators.json"); + +Cypress.Commands.add("borderMouseover", (index, text) => { + cy.get(themelocator.border) + .eq(index) + .trigger("mouseover"); + cy.wait(2000); + cy.get(themelocator.popover).contains(text); +}); + +Cypress.Commands.add("shadowMouseover", (index, text) => { + cy.xpath(themelocator.shadow) + .eq(index) + .trigger("mouseover"); + cy.wait(2000); + cy.get(themelocator.popover).contains(text); +}); + +Cypress.Commands.add("colorMouseover", (index, text) => { + cy.get(themelocator.color) + .eq(index) + .trigger("mouseover"); + cy.wait(2000); + cy.get(themelocator.popover).contains(text); +}); + +Cypress.Commands.add("validateColor", (index, text) => { + cy.get(themelocator.color) + .eq(index) + .click({ force: true }); + cy.wait(1000); + cy.get(themelocator.inputColor).should("have.value", text); + cy.wait(1000); +}); + +Cypress.Commands.add("chooseColor", (index, color) => { + cy.get(themelocator.colorPicker) + .eq(index) + .click({ force: true }); + cy.get(color) + .last() + .click(); + cy.wait(2000); +});