MC-4965: Text Wrapping Inside Inline WYSIWYG Editors Will Break On Words (Storefront as well for Slide & Banner)

- add new test for text content word wrap

Author: anthoula

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTextSection.xml

@@ -28,6 +28,8 @@
         <element name="emptyTextInImportantStyle" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//div[contains(normalize-space(@class), 'cms-content-important')]" parameterized="true"/>
         <element name="imageSource" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//img[contains(@src,'{{var1}}')]" parameterized="true"/>
         <element name="inlineWYSIWYGEditorWithTag" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//div[contains(@class,'inline-wysiwyg')]//{{arg2}}" parameterized="true"/>
+        <element name="wysiwyg" type="text" selector="(//div[@data-role='text'])[{{arg1}}][contains(@class,'inline-wysiwyg')]" parameterized="true"/>
+        <element name="contentJS" type="text" selector="document.querySelectorAll('div[data-role=text].inline-wysiwyg')[{{arg1}} - 1]" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div[contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
         <element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div[not(contains(@style,'text-align:'))]" parameterized="true"/>
@@ -79,6 +81,7 @@
         <element name="image" type="text" selector="//div[@data-role='text'][{{arg1}}]//img[contains(@src,'{{arg2}}')]" parameterized="true"/>
         <element name="textInImportantStyle" type="text" selector="//div[contains(normalize-space(@class), 'cms-content-important') and text()='{{arg1}}']" parameterized="true"/>
         <element name="emptyTextInImportantStyle" type="text" selector="//div[@data-role='text'][{{arg1}}]//div[@class='cms-content-important'][not(*)]" parameterized="true"/>
+        <element name="contentJS" type="text" selector="document.querySelectorAll('[data-role=text][data-element=main]')[{{arg1}} - 1]" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" selector="(//div[@data-role='text'])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
         <element name="noAlignment" type="text" selector="(//div[@data-role='text'])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest.xml

@@ -2393,6 +2393,50 @@
             <actualResult type="variable">columnOneTextHeight</actualResult>
         </assertGreaterThan>
     </test>
+    <test name="TextContentCanWordWrap" extends="BannerPosterContentCanWordWrap">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Text"/>
+            <title value="Text content can wrap words to multiple lines"/>
+            <description value="A user can see text content word wrap to multiple lines"/>
+            <severity value="CRITICAL"/>
+            <useCaseId value="MC-4965"/>
+            <testCaseId value="MC-5634"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-text"/>
+        </annotations>
+        <actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
+            <argument name="contentType" value="PageBuilderTextContentType"/>
+        </actionGroup>
+        <actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandGroupElements">
+            <argument name="group" value="PageBuilderTextContentType"/>
+        </actionGroup>
+        <actionGroup ref="dragContentTypeToContainer" stepKey="dragIntoStage">
+            <argument name="contentType" value="PageBuilderTextContentType"/>
+            <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
+        </actionGroup>
+        <fillField selector="{{TextOnStage.wysiwyg('1')}}" userInput="{{PageBuilderMessageProperty_WordBreak.value}}" after="dragIntoStage" stepKey="fillTextToTextarea"/>
+        <comment userInput="keyForRemoval" stepKey="inlineEdit"/>
+        <comment userInput="keyForRemoval" stepKey="openEditMenuOnStage"/>
+        <comment userInput="keyForRemoval" stepKey="enterAppearanceProperty"/>
+        <comment userInput="keyForRemoval" stepKey="saveEditPanelSettings"/>
+        <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('2')}}" x="$guideWidth" stepKey="resizeColumn"/>
+        <actionGroup ref="validateContentWordWrap" stepKey="validateContentWordWrapStage">
+            <argument name="page" value="TextOnStage"/>
+            <argument name="height" value="80"/>
+        </actionGroup>
+        <actionGroup ref="validateContentWordWrap" stepKey="validateContentWordWrapAfterSave">
+            <argument name="page" value="TextOnStage"/>
+            <argument name="height" value="110"/>
+        </actionGroup>
+        <actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
+            <argument name="contentType" value="PageBuilderTextContentType"/>
+        </actionGroup>
+        <actionGroup ref="validateContentWordWrap" stepKey="validateContentWordWrapStorefront">
+            <argument name="page" value="TextOnStorefront"/>
+            <argument name="height" value="80"/>
+        </actionGroup>
+    </test>
     <test name="TextInlineWYSIWYGWidgetAndVariableStyle">
         <annotations>
             <features value="PageBuilder"/>