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

- rename action group
- move banner selectors
- add banner group values
- remove column resizing on banners

Author: anthoula

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/WYSIWYGActionGroup.xml

@@ -161,16 +161,16 @@
             <actualResult type="variable">textareaValue</actualResult>
         </assertEquals>
     </actionGroup>
-    <actionGroup name="validateContentWordWrap">
+    <actionGroup name="validateContentWordHeight">
         <arguments>
             <argument name="page"/>
             <argument name="height" type="string"/>
             <argument name="index" defaultValue="1" type="string"/>
         </arguments>
         <!-- Validate content height -->
         <comment userInput="Validate content height" stepKey="commentValidateContentHeight"/>
-        <executeJS function="return {{page.contentJS(index)}}.getBoundingClientRect().height" stepKey="elHeight"/>
-        <executeJS function="return Math.round(({$elHeight}/{{height}})*100)/100" stepKey="contentHeightRatio"/>
+        <executeJS function="return {{page.contentJS(index)}}.getBoundingClientRect().height" stepKey="elementContentHeight"/>
+        <executeJS function="return Math.round(({$elementContentHeight}/{{height}})*100)/100" stepKey="contentHeightRatio"/>
         <assertEquals stepKey="assertContentHeightRatio">
             <expectedResult type="int">1</expectedResult>
             <actualResult type="variable">contentHeightRatio</actualResult>

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

@@ -78,7 +78,6 @@
         <element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//*[contains(@class, 'magento-variable magento-placeholder')]" parameterized="true"/>
         <element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//*[contains(@class, 'magento-placeholder magento-widget')]" parameterized="true"/>
         <element name="tinymce" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>
-        <element name="contentJS" type="text" selector="document.querySelectorAll('[data-role=banner] div.inline-wysiwyg')[{{arg1}} - 1]" parameterized="true"/>
         <!-- Appearance Configuration -->
         <element name="appearance" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}][@data-appearance='{{arg2}}']" parameterized="true"/>
         <element name="posterMinimumHeight" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='overlay'][contains(@style,'min-height: {{arg2}}px;')]" parameterized="true"/>
@@ -93,6 +92,7 @@
         <element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
         <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='wrapper'][not(contains(@style,'background-image:'))]" parameterized="true"/>
         <!-- Content Configuration -->
+        <element name="contentJS" type="text" selector="document.querySelectorAll('[data-role=banner] div.inline-wysiwyg')[{{arg1}} - 1]" parameterized="true"/>
         <element name="messageContent" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='content']//p[.='{{arg2}}']" parameterized="true"/>
         <element name="noMessageContent" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='content'][.='Edit Banner Text'][not(*)]" parameterized="true"/>
         <element name="messageContentText" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg1}}]/div//div[contains(@class, 'pagebuilder-banner-text-content')]//*[contains(.,'{{arg2}}') and contains(@class, 'inline-wysiwyg')]" parameterized="true"/>

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

@@ -316,11 +316,13 @@
             <testCaseId value="MC-5632"/>
             <group value="pagebuilder"/>
             <group value="pagebuilder-banner"/>
+            <group value="pagebuilder-bannerCollageLeft"/>
+            <group value="pagebuilder-wordWrap"/>
         </annotations>
         <actionGroup ref="chooseVisualSelectOption" stepKey="enterAppearanceProperty">
             <argument name="property" value="PageBuilderAppearance_CollageLeft"/>
         </actionGroup>
-        <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('6')}}" x="$guideWidth" stepKey="resizeColumn"/>
+        <comment userInput="keyForRemoval" stepKey="duplicateColumn"/>
     </test>
     <test name="BannerCollageLeftButtonNeverShow">
         <annotations>

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

@@ -466,6 +466,8 @@
             <testCaseId value="MC-5631"/>
             <group value="pagebuilder"/>
             <group value="pagebuilder-banner"/>
+            <group value="pagebuilder-bannerPoster"/>
+            <group value="pagebuilder-wordWrap"/>
         </annotations>
         <before>
             <resizeWindow width="1280" height="1024" stepKey="resetWindowToDesktopBefore"/>
@@ -485,6 +487,15 @@
         <actionGroup ref="dragContentTypeToStage" stepKey="dragColumnIntoStage">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
         </actionGroup>
+        <!-- Duplicate Column to create small width -->
+        <comment userInput="Duplicate Column to create small width" stepKey="commentDuplicateColumnToCreateSmallWidth"/>
+        <actionGroup ref="duplicateContentType" stepKey="duplicateColumn">
+            <argument name="contentType" value="PageBuilderColumnContentType"/>
+            <argument name="targetIndex" value="1"/>
+            <argument name="expectedIndex" value="2"/>
+            <argument name="contentTypeXCoordinate" value="10"/>
+            <argument name="contentTypeYCoordinate" value="0"/>
+        </actionGroup>
         <!-- Add content type to Column -->
         <comment userInput="Add content type to Column" stepKey="addContentTypeToColumn"/>
         <actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandGroupElements">
@@ -506,22 +517,17 @@
         </actionGroup>
         <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
         <click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusEditor"/>
-        <!-- Resize Columns -->
-        <comment userInput="Resize Columns" stepKey="commentResizeColumns"/>
-        <executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
-        <dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('3')}}" x="$guideWidth" stepKey="resizeColumn"/>
-        <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <!-- Validate Height Before Save -->
         <comment userInput="Validate Height Before Save" stepKey="commentValidateBeforeSave"/>
-        <actionGroup ref="validateContentWordWrap" stepKey="validateContentWordWrapStage">
+        <actionGroup ref="validateContentWordHeight" stepKey="validateContentWordHeightStage">
             <argument name="page" value="BannerOnBackend"/>
             <argument name="height" value="110"/>
         </actionGroup>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage2"/>
         <!-- Validate Height After Save -->
         <comment userInput="Validate Height After Save" stepKey="commentValidateAfterSave"/>
-        <actionGroup ref="validateContentWordWrap" stepKey="validateContentWordWrapAfterSave">
+        <actionGroup ref="validateContentWordHeight" stepKey="validateContentWordHeightAfterSave">
             <argument name="page" value="BannerOnBackend"/>
             <argument name="height" value="110"/>
         </actionGroup>
@@ -530,7 +536,7 @@
         </actionGroup>
         <!-- Validate Height Storefront -->
         <comment userInput="Validate Height Storefront" stepKey="commentValidateStorefront"/>
-        <actionGroup ref="validateContentWordWrap" stepKey="validateContentWordWrapStorefront">
+        <actionGroup ref="validateContentWordHeight" stepKey="validateContentWordHeightStorefront">
             <argument name="page" value="BannerOnFrontend"/>
             <argument name="height" value="50"/>
         </actionGroup>