Skip to content

Commit 9a21749

Browse files
anthoulaanthoula
committed
MC-4293: Image Alignment Hard Coded to Center On Storefront When Rendered Through Dynamic Block
- add small image data - add selectors and action group to check right alignment - add new test for Block to check right alignment
1 parent c169ddb commit 9a21749

File tree

6 files changed

+141
-0
lines changed

6 files changed

+141
-0
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeBlockActionGroup.xml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,30 @@
3636
<seeElement selector="{{BlockOnStage.title(index,block.title)}}" stepKey="seeOptionMenuTitle"/>
3737
<see selector="{{BlockOnStage.content(index)}}" userInput="{{block.content}}" stepKey="seeBlockContentOnStage"/>
3838
</actionGroup>
39+
<actionGroup name="verifyAlignmentRightInBlock">
40+
<arguments>
41+
<argument name="block" defaultValue="BlockOnStorefront"/>
42+
<argument name="container"/>
43+
<argument name="content"/>
44+
<argument name="padding"/>
45+
<argument name="index" defaultValue="1" type="string"/>
46+
</arguments>
47+
<!-- Verify container width is larger than content width -->
48+
<comment userInput="Verify container width is larger than content width" stepKey="commentVerifyWidth"/>
49+
<executeJS function="return document.querySelectorAll('{{block.baseCSS}} {{container.innerCSS}}')[{{index}}-1].clientWidth;" stepKey="containerWidth"/>
50+
<executeJS function="return document.querySelectorAll('{{block.baseCSS}} {{content.baseCSS}}')[{{index}}-1].clientWidth;" stepKey="contentWidth"/>
51+
<assertGreaterThan stepKey="assertContainerHeightIsGreater">
52+
<expectedResult type="variable">contentWidth</expectedResult>
53+
<actualResult type="variable">containerWidth</actualResult>
54+
</assertGreaterThan>
55+
<!-- Verify position right of container matches content -->
56+
<comment userInput="Verify position right of container matches content" stepKey="commentVerifyRightPosition"/>
57+
<executeJS function="return document.querySelectorAll('{{block.baseCSS}} {{container.innerCSS}}')[{{index}}-1].getBoundingClientRect().right-{{padding.paddingRight}};" stepKey="containerRightMinusPadding"/>
58+
<executeJS function="return document.querySelectorAll('{{block.baseCSS}} {{content.baseCSS}}')[{{index}}-1].getBoundingClientRect().right;" stepKey="contentRight"/>
59+
<executeJS function="return Math.round(({$containerRightMinusPadding}/{$contentRight})*100)/100" stepKey="rightPositionRatio"/>
60+
<assertEquals stepKey="assertRightPositionRatio">
61+
<expectedResult type="int">1</expectedResult>
62+
<actualResult type="variable">rightPositionRatio</actualResult>
63+
</assertEquals>
64+
</actionGroup>
3965
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/Data/ImageData.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,16 @@
3333
<data key="extension">jpg</data>
3434
<data key="path">wysiwyg</data>
3535
</entity>
36+
<entity name="PageBuilderImageProperty_PNG" type="pagebuilder_image_property">
37+
<data key="name">Image</data>
38+
<data key="section">general</data>
39+
<data key="fieldName">image</data>
40+
<data key="value">magento-logo.png</data>
41+
<data key="file">magento-logo.png</data>
42+
<data key="fileName">magento-logo</data>
43+
<data key="extension">png</data>
44+
<data key="path">wysiwyg</data>
45+
</entity>
3646
<entity name="PageBuilderImageProperty_StageJPG" type="pagebuilder_image_property">
3747
<data key="name">Image</data>
3848
<data key="section">general</data>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBlockSection.xml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,10 @@
4343
<element name="selectBlockBtn" type="button" selector="(//div[contains(@class,'pagebuilder-block')]//button/span[text()='Select Block'])"/>
4444
</section>
4545
<section name="BlockOnStorefront">
46+
<element name="ancestor" type="text" selector="[ancestor::div[@data-role='block']]"/>
4647
<element name="html" type="text" selector="(//div[@data-role='html'])[{{arg1}}]//a[contains(@class,'pagebuilder-button-primary')]" parameterized="true"/>
4748
<element name="base" type="text" selector="(//div[@data-role='block'])[{{arg1}}]" parameterized="true"/>
49+
<element name="baseCSS" type="text" selector="[data-role=block]"/>
4850
<element name="hidden" type="text" selector="(//div[@data-role='block'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
4951
<element name="notHidden" type="text" selector="(//div[@data-role='block'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
5052
<element name="hr" type="button" selector="(//div[@data-role='block'])[{{arg1}}]/hr" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderImageSection.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
<element name="backgroundImageSource" type="text" selector="//div[contains(@style,'{{var1}}')]" parameterized="true"/>
4343
<element name="imageDisplay" type="button" selector="figure[data-role='image']"/>
4444
<element name="imageElement" type="button" selector="figure[data-role='image'] img:nth-child({{arg1}})" parameterized="true"/>
45+
<element name="baseCSS" type="text" selector="figure[data-role=image] img" parameterized="true"/>
4546
<element name="imageHasAltText" type="button" selector="img.pagebuilder-mobile-hidden[alt='{{arg1}}']" parameterized="true"/>
4647
<element name="imageHasCaption" type="button" selector="figcaption"/>
4748
<element name="imageHasTitleTag" type="button" selector="img.pagebuilder-mobile-hidden[title='{{arg1}}']" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderRowSection.xml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,15 @@
7474
<section name="RowOnStorefront">
7575
<element name="base" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div" parameterized="true"/>
7676
<element name="baseJS" type="text" selector="document.querySelectorAll('[data-role=row] > div')[{{arg1}} - 1]" parameterized="true"/>
77+
<element name="baseCSS" type="text" selector="[data-role=row]"/>
7778
<element name="hidden" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
7879
<element name="notHidden" type="text" selector="(//div[@data-role='row'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
7980
<element name="computedWidth" type="text" selector="parseInt(window.getComputedStyle(document.querySelector('[data-role=row]')).width)"/>
8081
<element name="rowStyle" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style, '{{arg2}}')]" parameterized="true"/>
8182
<element name="rowWidthJS" type="text" selector="document.querySelectorAll('[data-appearance=\'{{arg1}}\']')[{{arg2}}].clientWidth" parameterized="true"/>
8283
<element name="rowH2ChildWidthJS" type="text" selector="document.querySelectorAll('div[data-appearance~=\'{{arg1}}\'] h2')[{{arg2}}].clientWidth" parameterized="true"/>
8384
<element name="appearance" type="text" selector="(//div[@data-role='row'])[{{arg1}}][@data-appearance='{{arg2}}']" parameterized="true"/>
85+
<element name="innerCSS" type="text" selector="[data-role=row] [data-element=inner]"/>
8486
<!-- Background Configuration -->
8587
<element name="backgroundColor" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
8688
<element name="noBackgroundColor" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[not(contains(@style,'background-color:'))]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBlockTest.xml‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -975,6 +975,106 @@
975975
<seeElementInDOM selector="{{ImageOnStorefront.imageDisplay}}" stepKey="seeThatEmptyImageExistsInDomOnStorefront"/>
976976
<dontSeeElement selector="{{ImageOnStorefront.imageDisplay}}" stepKey="notSeeImageOnFrontend"/>
977977
</test>
978+
<test name="BlockImageIsRightAligned">
979+
<annotations>
980+
<features value="PageBuilder"/>
981+
<stories value="Block"/>
982+
<title value="Image Can Be Right Aligned In Block"/>
983+
<description value="A user can right align an image in a Block"/>
984+
<severity value="MAJOR"/>
985+
<testCaseId value="MC-4293"/>
986+
<useCaseId value="MC-5174"/>
987+
<group value="pagebuilder"/>
988+
<group value="pagebuilder-block"/>
989+
<group value="pagebuilder-image"/>
990+
</annotations>
991+
<before>
992+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
993+
<createData entity="_defaultBlock" stepKey="createPreReqBlock"/>
994+
<createData entity="_defaultCmsPage" stepKey="createCMSPage"/>
995+
<actionGroup ref="navigateToCreatedCMSBlockPage" stepKey="navigateToCreatedCMSBlockPage">
996+
<argument name="CMSBlockPage" value="$$createPreReqBlock$$"/>
997+
</actionGroup>
998+
</before>
999+
<after>
1000+
<deleteData createDataKey="createPreReqBlock" stepKey="deletePreReqBlock"/>
1001+
<deleteData createDataKey="createCMSPage" stepKey="deletePreReqCMSPage"/>
1002+
<actionGroup ref="navigateToMediaGallery" stepKey="navigateToMediaGallery"/>
1003+
<actionGroup ref="NavigateToMediaFolderActionGroup" stepKey="NavigateToFolder">
1004+
<argument name="FolderName" value="{{PageBuilderImageProperty_PNG.path}}"/>
1005+
</actionGroup>
1006+
<actionGroup ref="DeleteImageFromStorageActionGroup" stepKey="DeleteImageFromStorage">
1007+
<argument name="Image" value="PageBuilderImageProperty_PNG"/>
1008+
</actionGroup>
1009+
<actionGroup ref="logout" stepKey="logout"/>
1010+
</after>
1011+
<!-- Go to edit page of Block and configure Image -->
1012+
<comment userInput="Go to edit page of Block and configure image" stepKey="commentGoToBlockEditPage"/>
1013+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
1014+
<argument name="group" value="PageBuilderImageContentType"/>
1015+
</actionGroup>
1016+
<actionGroup ref="dragContentTypeToStage" stepKey="dragImageIntoStage">
1017+
<argument name="contentType" value="PageBuilderImageContentType"/>
1018+
</actionGroup>
1019+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
1020+
<argument name="contentType" value="PageBuilderImageContentType"/>
1021+
</actionGroup>
1022+
<actionGroup ref="attachFileSlideOutPropertyGeneral" stepKey="attachImageFile">
1023+
<argument name="property" value="PageBuilderImageProperty_PNG"/>
1024+
</actionGroup>
1025+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterImageCaptionProperty">
1026+
<argument name="property" value="PageBuilderImageCaptionProperty"/>
1027+
</actionGroup>
1028+
<actionGroup ref="chooseVisualSelectOption" stepKey="enterAlignment">
1029+
<argument name="property" value="PageBuilderAdvancedAlignmentPropertyRight"/>
1030+
</actionGroup>
1031+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettingsInBlock"/>
1032+
<click selector="{{BlockNewPagePageActionsSection.saveBlock}}" stepKey="clickSaveBlock"/>
1033+
<waitForPageLoad time="30" stepKey="waitForStageToLoad"/>
1034+
<!-- Go to CMS Page and choose Block -->
1035+
<comment userInput="Go to CMS Page and choose Block" stepKey="commentGoToCMSPage"/>
1036+
<actionGroup ref="navigateToCreatedCMSPage" stepKey="navigateToCreatedCMSPage">
1037+
<argument name="CMSPage" value="$$createCMSPage$$"/>
1038+
</actionGroup>
1039+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandGroupAddContent">
1040+
<argument name="group" value="PageBuilderBlockContentType"/>
1041+
</actionGroup>
1042+
<actionGroup ref="dragContentTypeToStageAndExpectEditPanel" stepKey="dragBlockIntoStage">
1043+
<argument name="contentType" value="PageBuilderBlockContentType"/>
1044+
</actionGroup>
1045+
<actionGroup ref="searchBlockInGrid" stepKey="searchBlockInGrid">
1046+
<argument name="block" value="$$createPreReqBlock$$"/>
1047+
</actionGroup>
1048+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
1049+
<!-- Verify Right Alignment On Stage - Before Save -->
1050+
<comment userInput="Verify right alignment on stage before save" stepKey="commentVerifyRightAlignmentOnStageBeforeSave"/>
1051+
<seeElement selector="({{ImageOnStorefront.alignment('1', PageBuilderAdvancedAlignmentPropertyRight.value)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeImageAlignmentRightBeforeSave"/>
1052+
<actionGroup ref="verifyAlignmentRightInBlock" stepKey="verifyAlignmentRightInBlockBeforeSave">
1053+
<argument name="container" value="RowOnStorefront"/>
1054+
<argument name="content" value="ImageOnStorefront"/>
1055+
<argument name="padding" value="PageBuilderPaddingProperty10"/>
1056+
</actionGroup>
1057+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
1058+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStageAfterSave"/>
1059+
<!-- Verify Right Alignment On Stage - After Save -->
1060+
<comment userInput="Verify right alignment on stage after save" stepKey="commentVerifyRightAlignmentOnStageAfterSave"/>
1061+
<seeElement selector="({{ImageOnStorefront.alignment('1', PageBuilderAdvancedAlignmentPropertyRight.value)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeImageAlignmentRightAfterSave"/>
1062+
<actionGroup ref="verifyAlignmentRightInBlock" stepKey="verifyAlignmentRightInBlockAfterSave">
1063+
<argument name="container" value="RowOnStorefront"/>
1064+
<argument name="content" value="ImageOnStorefront"/>
1065+
<argument name="padding" value="PageBuilderPaddingProperty10"/>
1066+
</actionGroup>
1067+
<amOnPage url="$$createCMSPage.identifier$$" stepKey="amOnStorefrontCMSPage" />
1068+
<waitForPageLoad stepKey="waitForCmsPageLoad"/>
1069+
<!-- Verify Right Alignment In Storefront -->
1070+
<comment userInput="Verify right alignment in storefront" stepKey="commentVerifyRightAlignmentInStorefront"/>
1071+
<seeElement selector="({{ImageOnStorefront.alignment('1', PageBuilderAdvancedAlignmentPropertyRight.value)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeImageAlignmentRightStorefront"/>
1072+
<actionGroup ref="verifyAlignmentRightInBlock" stepKey="verifyAlignmentRightInBlockStorefront">
1073+
<argument name="container" value="RowOnStorefront"/>
1074+
<argument name="content" value="ImageOnStorefront"/>
1075+
<argument name="padding" value="PageBuilderPaddingProperty10"/>
1076+
</actionGroup>
1077+
</test>
9781078
<test name="ValidateShowHideOnBlockDefaultState">
9791079
<annotations>
9801080
<features value="PageBuilder"/>

0 commit comments

Comments
 (0)