MAGETWO-91970: Enable wrapping of Heading toolbar menu

- add test to check for wrapping by button position assertion

Author: anthoula

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

@@ -19,6 +19,7 @@
         <element name="headingTypeToolbarSelected" type="text" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//a[contains(@class, 'toolbar-active')]//span[text()='{{arg2}}']" parameterized="true"/>
         <element name="headingTextAlignToolbar" type="button" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//i[contains(@class,'icon-pagebuilder-align-{{arg2}}')]" parameterized="true"/>
         <element name="headingTextAlignToolbarSelected" type="button" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//a[contains(@class, 'toolbar-active')]//i[contains(@class,'icon-pagebuilder-align-{{arg2}}')]" parameterized="true"/>
+        <element name="headingToolbarButtonViewportPositionTop" type="button" selector="return document.querySelector('.pagebuilder-toolbar-options-wrapper ul:{{arg1}}-child li:{{arg1}}-child').getBoundingClientRect().top;" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-heading')]//{{arg1}})[{{arg2}}][contains(@style,'text-align: {{arg3}};')]" parameterized="true"/>
         <element name="noAlignment" type="text" selector="(//{{arg1}})[{{arg2}}][not(contains(@style,'text-align:'))]" parameterized="true"/>

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

@@ -1501,4 +1501,53 @@
             <argument name="index" value="4"/>
         </actionGroup>
     </test>
+    <test name="HeadingToolbarButtonsCanWrap">
+        <annotations>
+            <features value="Pagebuilder"/>
+            <stories value="Heading"/>
+            <title value="Heading Toolbar Buttons Can Wrap"/>
+            <description value="Inline edit toolbar button items can wrap on multiple lines when in a one-sixth column"/>
+            <severity value="CRITICAL"/>
+            <useCaseId value="MAGETWO-88142"/>
+            <testCaseId value="MAGETWO-92000"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-heading"/>
+        </annotations>
+        <before>
+            <actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
+            <actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
+            <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        </before>
+        <after>
+            <actionGroup ref="logout" stepKey="logout"/>
+        </after>
+        <actionGroup ref="dragContentTypeToContainer" stepKey="dragFirstTwoColumns">
+            <argument name="contentType" value="PageBuilderColumnContentType"/>
+            <argument name="containerTargetType" value="PageBuilderRowContentType"/>
+            <argument name="containerTargetIndex" value="1"/>
+            <argument name="contentTypeIndex" value="1"/>
+        </actionGroup>
+        <actionGroup ref="dragContentTypeToContainer" stepKey="dragThirdColumn">
+            <argument name="contentType" value="PageBuilderColumnContentType"/>
+            <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
+            <argument name="containerTargetIndex" value="1" />
+            <argument name="contentTypeIndex" value="3"/>
+        </actionGroup>
+        <actionGroup ref="dragContentTypeToContainer" stepKey="dragHeading1ToFirstColumn">
+            <argument name="contentType" value="PageBuilderHeadingContentType"/>
+            <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
+            <argument name="containerTargetIndex" value="1"/>
+            <argument name="contentTypeIndex" value="1"/>
+        </actionGroup>
+        <resizeWindow width="767" height="1000" stepKey="resizeWindowToMobile"/>
+        <!-- Stage: Check toolbar buttons have wrapped -->
+        <comment userInput="Stage: Check toolbar buttons have wrapped" stepKey="commentStageCheckToolbarButtonsAreWrapped"/>
+        <executeJS function="{{HeadingOnStage.headingToolbarButtonViewportPositionTop('first')}}" stepKey="actualFirstButtonYPosition"/>
+        <executeJS function="{{HeadingOnStage.headingToolbarButtonViewportPositionTop('last')}}" stepKey="actualLastButtonYPosition"/>
+        <!-- Assert first button y-coordinate is less than last button y-coordinate -->
+        <assertLessThan message="AssertButtonPositions" stepKey="assertSecondButtonIsBelowFirstButton">
+            <actualResult type="variable">actualFirstButtonYPosition</actualResult>
+            <expectedResult type="variable">actualLastButtonYPosition</expectedResult>
+        </assertLessThan>
+    </test>
 </tests>