MC-1263: Buttons of Image Content Block are not aligned correctly

- Added mftf assertions to verify new class behavior

Author: nathanjosiah

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

@@ -20,6 +20,7 @@
         <element name="columnResizeGridLine" type="block" selector=".resize-grid .grid-line:nth-child({{arg}})" parameterized="true"/>
         <element name="columnStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-column-group')])[1]/descendant::div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')][{{arg1}}][contains(@style, '{{arg2}}')]" parameterized="true"/>
         <element name="columnChildrenStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-column-group')])[{{arg1}}]/descendant::div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')][{{arg2}}]//div[contains(@class, 'element-children')][contains(@style, '{{arg3}}')]" parameterized="true"/>
+        <element name="columnByIndexAndWidthClass" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-column')])[{{arg1}}][contains(@class,'column-width-{{arg2}}')]" parameterized="true"/>
         <element name="displayLabel" type="button" selector='(//div[contains(@class, "pagebuilder-content-type") and contains(@class, "pagebuilder-column")])[{{arg1}}]/descendant::div[contains(@class, "pagebuilder-display-label")][contains(text(), "{{arg2}}")]' parameterized="true"/>
         <element name="columnMoveByIndex" type="button" selector='(//div[contains(@class, "pagebuilder-content-type") and contains(@class, "pagebuilder-column")])[{{arg1}}]//div[contains(@class,"pagebuilder-options-visible")]/descendant::*[@class="move-column"]' parameterized="true"/>
         <element name="displayLabelGridSize" type="button" selector='(//div[contains(@class, "pagebuilder-column-group")])[{{arg1}}]//div[contains(@class, "pagebuilder-display-label")][1][contains(text(), "/{{arg2}}")]' parameterized="true"/>

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

@@ -37,12 +37,18 @@
         <!-- Get 3/6 Column Width -->
         <comment userInput="Get 3/6 Column Width" stepKey="context1"/>
         <executeJS function="return document.querySelector('{{PageBuilderColumnSection.columnX('1')}}').clientWidth" stepKey="initalColumnWidth"/>
+        <!-- Assert the initial width classes are correct -->
+        <waitForElement selector="{{PageBuilderColumnSection.columnByIndexAndWidthClass('1','50')}}" stepKey="assertInitialWidthClass1"/>
+        <waitForElement selector="{{PageBuilderColumnSection.columnByIndexAndWidthClass('2','50')}}" stepKey="assertInitialWidthClass2"/>
         <!-- Change Columns To 6:0 Ratio -->
         <comment userInput="Change Columns To 6:0 Ratio" stepKey="context2"/>
         <actionGroup ref="removeContentTypeFromStageByIndex" stepKey="removeSecondColumn">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
             <argument name="contentTypeNumber" value="2"/>
         </actionGroup>
+        <!-- Assert the width class changed to 100 correctly on the first column -->
+        <waitForElement selector="{{PageBuilderColumnSection.columnByIndexAndWidthClass('1','100')}}" stepKey="assertWidthClass1"/>
+        <!-- Add a new column -->
         <actionGroup ref="dragContentTypeToContainer" stepKey="dragIntoStage">
             <argument name="contentType" value="PageBuilderDividerContentType"/>
             <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
@@ -116,6 +122,9 @@
         <!-- Change Columns To 5:1 Ratio -->
         <comment userInput="Change Columns To 5:1 Ratio" stepKey="context1"/>
         <dragAndDrop selector1="{{PageBuilderColumnSection.columnX('1')}} {{PageBuilderColumnSection.columnResizeHandle}}" selector2="{{PageBuilderColumnSection.columnResizeGridLine('10')}}" x="$guideWidth" stepKey="dragColumnOneToFive"/>
+        <!-- Assert the width classes are correct after manual resize -->
+        <waitForElement selector="{{PageBuilderColumnSection.columnByIndexAndWidthClass('1','90')}}" stepKey="assertWidthClass1"/>
+        <waitForElement selector="{{PageBuilderColumnSection.columnByIndexAndWidthClass('2','20')}}" stepKey="assertWidthClass2"/>
         <actionGroup ref="dragContentTypeToContainer" stepKey="dragIntoStage1">
             <argument name="contentType" value="PageBuilderDividerContentType"/>
             <argument name="containerTargetType" value="PageBuilderColumnContentType"/>