MC-843: Heading live edit should become unfocused on drag action

- Added test coverage for bug

Author: Hwashiang Yu

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

@@ -17,6 +17,7 @@
         <element name="headingOnStage" type="text" selector="(//{{arg1}}[contains(@data-bind,'heading_text')])[{{arg2}}]" parameterized="true"/>
         <element name="headingType" type="button" selector="(//{{arg1}})[{{arg2}}]" parameterized="true"/>
         <element name="headingEditableText" type="button" selector="(//div[contains(@class, 'pagebuilder-heading')])[{{arg1}}]//h2[contains(@contenteditable, 'true')]" parameterized="true"/>
+        <element name="headingToolbar" type="text" selector="(//div[contains(@class,'pagebuilder-heading')])//div[contains(@class, 'pagebuilder-toolbar-options')]"/>
         <element name="headingTypeToolbar" type="text" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//span[text()='{{arg2}}']" parameterized="true"/>
         <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"/>

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

@@ -1574,4 +1574,43 @@
             <expectedResult type="variable">actualLastButtonYPosition</expectedResult>
         </assertLessThan>
     </test>
+    <test name="HeadingToolbarHideOnDrag">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Heading"/>
+            <title value="Stage Edit - Heading Toolbar should hide on drag action"/>
+            <description value="Heading live edit should become unfocused on drag action"/>
+            <severity value="CRITICAL"/>
+            <useCaseId value="MC-843"/>
+            <testCaseId value="MC-3540"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-heading"/>
+            <group value="m"/>
+        </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="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
+            <argument name="group" value="PageBuilderHeadingContentType"/>
+        </actionGroup>
+        <actionGroup ref="dragContentTypeToStage" stepKey="dragHeadingIntoStage">
+            <argument name="contentType" value="PageBuilderHeadingContentType"/>
+        </actionGroup>
+        <waitForPageLoad stepKey="waitForAnimation" time="30"/>
+        <comment userInput="Validate Heading edit toolbar" stepKey="CommentHeadingEditToolbar"/>
+        <seeElement selector="{{HeadingOnStage.headingToolbar}}" stepKey="seeHeadingToolbar"/>
+        <comment userInput="When click on draggable content, heading input loses focus, toolbar disappears, and placeholder displays Enter Heading Text" stepKey="commentClickOnDraggable"/>
+        <click selector="{{PageBuilderPanel.draggableContentTypeInPanel(PageBuilderHeadingContentType.name)}}" stepKey="clickDraggableInPanel"/>
+        <dontSeeElement selector="{{HeadingOnStage.headingToolbar}}" stepKey="dontSeeHeadingToolbar"/>
+        <comment userInput="When click inside heading see heading input gain focus, placeholder disappears and WYSIWYG toolbar appears" stepKey="commentClickInsideHeading"/>
+        <actionGroup ref="clickInsideLiveEditHeading" stepKey="clickInsideLiveEditHeading">
+            <argument name="index" value="1"/>
+        </actionGroup>
+        <seeElement selector="{{HeadingOnStage.headingToolbar}}" stepKey="seeHeadingToolbar2"/>
+    </test>
 </tests>