diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/RTE/RichTextEditor3_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/RTE/RichTextEditor3_spec.ts new file mode 100644 index 0000000000..5205cd5f93 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/RTE/RichTextEditor3_spec.ts @@ -0,0 +1,69 @@ +import { + agHelper, + locators, + entityExplorer, + propPane, +} from "../../../../../support/Objects/ObjectsCore"; + +describe("Rich Text Editor widget Tests", function () { + before(() => { + agHelper.AddDsl("richTextEditorDsl"); + entityExplorer.SelectEntityByName("RichTextEditor1", "Widgets"); + // entityExplorer.DragDropWidgetNVerify("richtexteditorwidget", 500, 200); + }); + + it("1. Verify deleting text in default text property, updates data in widget", function () { + propPane.UpdatePropertyFieldValue("Default value", ""); + agHelper + .GetElement( + locators._widgetInDeployed("richtexteditorwidget") + " iframe", + ) + .then(($iframe) => { + const $body = $iframe.contents().find("body"); + expect($body).to.contain(""); + }); + }); + + it("2. Verify changing style to Heading and pressing enter should change style to paragraph", function () { + agHelper.GetNClick(locators._richText_TitleBlock); + agHelper.GetNClick(locators._richText_Heading); + agHelper.AssertText(locators._richText_Label_Text, "text", "Heading 1"); + agHelper + .GetElement( + locators._widgetInDeployed("richtexteditorwidget") + " iframe", + ) + .then(($iframe) => { + const $body = $iframe.contents().find("body"); + agHelper.TypeText($body, "Test Heading"); + agHelper.GetElement($body).type("{enter}"); + }); + agHelper.AssertText(locators._richText_Label_Text, "text", "Paragraph"); + }); + + it("3. Verify applying style in one line should be observed in next line", function () { + agHelper.GetNClick(locators._richText_Text_Color); + agHelper.GetNClick(locators._richText_color("Red")); + agHelper + .GetElement( + locators._widgetInDeployed("richtexteditorwidget") + " iframe", + ) + .then(($iframe) => { + const iframe = $iframe.contents(); + const $body = $iframe.contents().find("body"); + agHelper.TypeText($body, "Test Red"); + agHelper.GetElement($body).type("{enter}"); + agHelper.TypeText($body, "Test Red 2"); + }); + agHelper + .GetElement( + locators._widgetInDeployed("richtexteditorwidget") + " iframe", + ) + .then(($iframe) => { + const iframe = $iframe.contents(); + + const $span = iframe.find(locators._richText_line); + agHelper.AssertAttribute($span, "style", "color: rgb(224, 62, 45);", 0); + agHelper.AssertAttribute($span, "style", "color: rgb(224, 62, 45);", 1); + }); + }); +}); diff --git a/app/client/cypress/fixtures/richTextEditorDsl.json b/app/client/cypress/fixtures/richTextEditorDsl.json new file mode 100644 index 0000000000..49fce6e5a8 --- /dev/null +++ b/app/client/cypress/fixtures/richTextEditorDsl.json @@ -0,0 +1,82 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 4896, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 380, + "containerStyle": "none", + "snapRows": 124, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 86, + "minHeight": 1292, + "dynamicTriggerPathList": [], + "parentColumnSpace": 1, + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", + "mobileBottomRow": 27, + "widgetName": "RichTextEditor1", + "displayName": "Rich Text Editor", + "iconSVG": "/static/media/icon.074d534389d0f6262ecfbd8e81539d08.svg", + "labelText": "Label", + "searchTags": [ + "input", + "rte" + ], + "topRow": 7, + "bottomRow": 38, + "parentRowSpace": 10, + "labelWidth": 5, + "type": "RICH_TEXT_EDITOR_WIDGET", + "hideCard": false, + "mobileRightColumn": 44, + "animateLoading": true, + "parentColumnSpace": 10.078125, + "leftColumn": 9, + "dynamicBindingPathList": [ + { + "key": "borderRadius" + }, + { + "key": "boxShadow" + } + ], + "labelPosition": "Top", + "inputType": "html", + "isDisabled": false, + "key": "4xb1pqir3y", + "isRequired": false, + "isDeprecated": false, + "rightColumn": 56, + "isDefaultClickDisabled": true, + "dynamicHeight": "FIXED", + "widgetId": "z67478an8a", + "minWidth": 450, + "isVisible": true, + "version": 1, + "parentId": "0", + "tags": [ + "Inputs" + ], + "labelAlignment": "left", + "renderMode": "CANVAS", + "isLoading": false, + "mobileTopRow": 7, + "responsiveBehavior": "fill", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "mobileLeftColumn": 20, + "maxDynamicHeight": 9000, + "defaultText": "This is the initial content of the editor", + "minDynamicHeight": 4 + } + ] + } +} \ No newline at end of file diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index 8879ba216c..7f18d629b3 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -307,4 +307,10 @@ export class CommonLocators { `.uppy-Informer p:contains('${msg}')`; _fileUploadAddMore = ".uppy-DashboardContent-addMore"; _buttonText = ".bp3-button-text"; + _richText_TitleBlock = "[title='Blocks']"; + _richText_Heading = "[title='Heading 1']"; + _richText_Label_Text = ".tox-tbtn__select-label"; + _richText_Text_Color = '[title="Text color"] .tox-split-button__chevron'; + _richText_color = (value: string) => `[title='${value}']`; + _richText_line = "#tinymce p span"; }