Skip to content

Commit bd6f100

Browse files
author
Hwashiang Yu
committed
MC-4150: Widget placeholder and variable placeholder styling is broken on inline editing
- Added ui.css styles to _typography.less - Added test coverage for placeholder styles
1 parent 5da3bf7 commit bd6f100

File tree

6 files changed

+209
-0
lines changed

6 files changed

+209
-0
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@
3838
<!-- Content Configuration -->
3939
<element name="messageContent" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='desktop_image']//div[@data-element='content']//p[.='{{arg2}}']" parameterized="true"/>
4040
<element name="noMessageContent" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='desktop_image']//div[@data-element='content'][.='Edit Banner Text'][not(*)]" parameterized="true"/>
41+
<element name="messageContentTextAreaTextWidget" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>
42+
<element name="text" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//*[contains(text(),'{{arg2}}')]" parameterized="true"/>
4143
<element name="messageContentTextArea" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='desktop_image']//div[@data-element='content'][.='{{arg2}}']" parameterized="true"/>
4244
<element name="messageContentHeightJS" type="text" selector="return document.evaluate(&quot;(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='content']//div[contains(text(),'{{arg2}}')]&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.clientHeight;" parameterized="true"/>
4345
<element name="linkUrl" type="button" selector="(//div[@data-role='banner'])[{{arg1}}]/a[contains(@href,'{{arg2}}')]" parameterized="true"/>
@@ -82,6 +84,9 @@
8284
<element name="editableButtonOnStage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and contains(@class,'pagebuilder-content-type')])[{{arg1}}]//button//span[@contenteditable='true']" parameterized="true"/>
8385
<element name="wysiwygLinkUrl" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and contains(@class,'pagebuilder-content-type')])[{{arg1}}]//a[@href='{{arg2}}']" parameterized="true"/>
8486
<element name="imageOnStage" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and contains(@class,'pagebuilder-content-type')])[{{arg1}}]//img[contains(@src,'{{var1}}')]" parameterized="true"/>
87+
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//*[contains(@class, 'magento-variable magento-placeholder')]" parameterized="true"/>
88+
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//*[contains(@class, 'magento-placeholder magento-widget')]" parameterized="true"/>
89+
<element name="tinymce" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>
8590
<!-- Appearance Configuration -->
8691
<element name="appearance" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}][@data-appearance='{{arg2}}']" parameterized="true"/>
8792
<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"/>
@@ -98,6 +103,7 @@
98103
<!-- Content Configuration -->
99104
<element name="messageContent" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='content']//p[.='{{arg2}}']" parameterized="true"/>
100105
<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"/>
106+
<element name="text" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg1}}]/div//*[contains(.,'{{arg2}}')]" parameterized="true"/>
101107
<element name="button" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//button[@data-element='button']" parameterized="true"/>
102108
<element name="showButton" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}][@data-show-button='{{arg2}}']" parameterized="true"/>
103109
<element name="buttonType" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//button[contains(@class,'{{arg2}}')]" parameterized="true"/>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@
9494
<element name="mobileBackgroundAttachment" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='mobile_image'][contains(@style,'background-attachment: {{arg2}};')]" parameterized="true"/>
9595
<!-- Content Configuration -->
9696
<element name="messageContent" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content']//p[.='{{arg2}}']" parameterized="true"/>
97+
<element name="messageContentTextAreaTextWidget" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>
98+
<element name="text" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//*[contains(text(),'{{arg2}}')]" parameterized="true"/>
9799
<element name="noMessageContent" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image']//div[@data-element='content'][not(*)]" parameterized="true"/>
98100
<element name="messageContentTextArea" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image']//div[@data-element='content'][.='{{arg2}}']" parameterized="true"/>
99101
<element name="messageContentHeightJS" type="text" selector="return document.evaluate(&quot;(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content']//*[contains(text(),'{{arg2}}')]&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.clientHeight;" parameterized="true"/>
@@ -147,6 +149,9 @@
147149
<element name="optionsMenuButton" type="button" selector="(//div[contains(@class,'navigation-dot')])[{{arg1}}]//li[contains(@class,'pagebuilder-options-link')]//a[contains(@class,'{{arg2}}')]" parameterized="true"/>
148150
<element name="optionsMenuButtonDisabled" type="button" selector="(//div[contains(@class,'navigation-dot')])[{{arg1}}]//li[contains(@class,'pagebuilder-options-link')]//a[contains(@class,'{{arg2}}') and contains(@class,'disabled')]" parameterized="true"/>
149151
<element name="optionsMenuTitle" type="button" selector="(//div[contains(@class,'navigation-dot')])[{{arg1}}]//li[contains(@class,'pagebuilder-options-link')]//div[contains(@class,'option-title')]" parameterized="true"/>
152+
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg}}]//*[contains(@class, 'magento-variable magento-placeholder')]" parameterized="true"/>
153+
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg}}]//*[contains(@class, 'magento-placeholder magento-widget')]" parameterized="true"/>
154+
<element name="tinymce" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>
150155
<!-- Appearance Configuration -->
151156
<element name="appearance" type="text" selector="(//div[@data-role='slide'])[{{arg1}}][@data-appearance='{{arg2}}']" parameterized="true"/>
152157
<element name="slideName" type="button" selector="(//div[@data-role='slide'])[{{arg1}}][@data-slide-name='{{arg2}}']" parameterized="true"/>
@@ -162,6 +167,7 @@
162167
<element name="backgroundRepeat" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]/div[contains(@style,'background-repeat: {{arg2}};')]" parameterized="true"/>
163168
<element name="backgroundAttachment" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]/div[contains(@style,'background-attachment: {{arg2}};')]" parameterized="true"/>
164169
<!-- Content Configuration -->
170+
<element name="text" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg1}}]/div//*[contains(.,'{{arg2}}')]" parameterized="true"/>
165171
<element name="messageContent" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content']//p[text()='{{arg2}}']" parameterized="true"/>
166172
<element name="noMessageContent" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content'][.='Edit Slide Text'][not(*)]" parameterized="true"/>
167173
<element name="button" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//a[@data-element='button']" parameterized="true"/>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2229,4 +2229,34 @@
22292229
<actualResult type="variable">columnOneTextHeight</actualResult>
22302230
</assertGreaterThan>
22312231
</test>
2232+
<test name="BannerInlineWYSIWYGWidgetAndVariableStyle" extends="TextInlineWYSIWYGWidgetAndVariableStyle">
2233+
<annotations>
2234+
<features value="PageBuilder"/>
2235+
<stories value="Banner"/>
2236+
<title value="Banner widget placeholder and variable placeholder styling works on inline editing"/>
2237+
<description value="Verify that widget placeholder and variable placeholder styling works on inline editing"/>
2238+
<severity value="CRITICAL"/>
2239+
<useCaseId value="MC-4150"/>
2240+
<testCaseId value="MC-4947"/>
2241+
<group value="pagebuilder"/>
2242+
<group value="pagebuilder-banner"/>
2243+
</annotations>
2244+
<!-- Add Banner -->
2245+
<comment userInput="Add Banner" stepKey="commentAddBanner" />
2246+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
2247+
<argument name="group" value="PageBuilderBannerContentType"/>
2248+
</actionGroup>
2249+
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeIntoStage">
2250+
<argument name="contentType" value="PageBuilderBannerContentType"/>
2251+
</actionGroup>
2252+
<click selector="{{BannerOnBackend.tinymce('1')}}" stepKey="focusOnEditorArea1"/>
2253+
<waitForElementVisible selector="{{BannerOnBackend.text('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="waitForVariableBaseURLStage"/>
2254+
<waitForElementVisible selector="{{BannerOnBackend.text('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="waitForWidgetStage"/>
2255+
<executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.variablePlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getVariableStyle" />
2256+
<executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.widgetPlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getWidgetStyle" />
2257+
<executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.variablePlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getVariableStyleAfterSave" />
2258+
<executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.widgetPlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getWidgetStyleAfterSave" />
2259+
<seeElement selector="{{BannerOnFrontend.text('1', _ENV.MAGENTO_BASE_URL)}}" stepKey="waitForVariableStorefront"/>
2260+
<seeElement selector="{{BannerOnFrontend.messageContentTextAreaTextWidget('1', _ENV.MAGENTO_BASE_URL, $$createCMSPageB.identifier$$)}}" stepKey="waitForWidgetStorefront"/>
2261+
</test>
22322262
</tests>

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1552,4 +1552,36 @@
15521552
<click selector="{{SliderOnStage.slideNavigationDot('1', '1')}}" stepKey="clickSliderDot3"/>
15531553
<waitForElementVisible selector="{{SlideOnBackend.base('1')}}" stepKey="waitForSlideOneVisible"/>
15541554
</test>
1555+
<test name="SlideInlineWYSIWYGWidgetAndVariableStyle" extends="TextInlineWYSIWYGWidgetAndVariableStyle">
1556+
<annotations>
1557+
<features value="PageBuilder"/>
1558+
<stories value="Slider"/>
1559+
<title value="Slide widget placeholder and variable placeholder styling works on inline editing"/>
1560+
<description value="Verify that widget placeholder and variable placeholder styling works on inline editing"/>
1561+
<severity value="CRITICAL"/>
1562+
<useCaseId value="MC-4150"/>
1563+
<testCaseId value="MC-4948"/>
1564+
<group value="pagebuilder"/>
1565+
<group value="pagebuilder-slide"/>
1566+
<group value="pagebuilder-slider"/>
1567+
</annotations>
1568+
<!-- Add Slider -->
1569+
<comment userInput="Add Slider" stepKey="commentAddSlider" />
1570+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
1571+
<argument name="group" value="PageBuilderSliderContentType"/>
1572+
</actionGroup>
1573+
<actionGroup ref="dragContentTypeToStageAndExpectEditPanel" stepKey="dragContentTypeIntoStage">
1574+
<argument name="contentType" value="PageBuilderSliderContentType"/>
1575+
</actionGroup>
1576+
<actionGroup ref="saveEditPanelSettings" after="dragContentTypeIntoStage" stepKey="saveEditPanelSettings"/>
1577+
<click selector="{{SlideOnBackend.tinymce('1')}}" stepKey="focusOnEditorArea1"/>
1578+
<waitForElementVisible selector="{{SlideOnBackend.text('1', TinyMCEVariableBaseURL.editPanelValue)}}" stepKey="waitForVariableBaseURLStage"/>
1579+
<waitForElementVisible selector="{{SlideOnBackend.text('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="waitForWidgetStage"/>
1580+
<executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{SlideOnBackend.variablePlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getVariableStyle" />
1581+
<executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{SlideOnBackend.widgetPlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getWidgetStyle" />
1582+
<executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{SlideOnBackend.variablePlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getVariableStyleAfterSave" />
1583+
<executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{SlideOnBackend.widgetPlaceholder('1')}}&quot;, document.body).iterateNext()).getPropertyValue('background-color')" stepKey="getWidgetStyleAfterSave" />
1584+
<seeElement selector="{{SlideOnFrontend.text('1', _ENV.MAGENTO_BASE_URL)}}" stepKey="waitForVariableStorefront"/>
1585+
<seeElement selector="{{SlideOnFrontend.messageContentTextAreaTextWidget('1', _ENV.MAGENTO_BASE_URL, $$createCMSPageB.identifier$$)}}" stepKey="waitForWidgetStorefront"/>
1586+
</test>
15551587
</tests>

0 commit comments

Comments
 (0)