Skip to content

Commit f5e2db7

Browse files
bluemwhitewbluemwhitew
committed
#558: Content Types Output Style Attribute Removal
- Extending MFTF Tests for CSS Responsive Styling - Removing Heading Type in CSS Specificity
1 parent e40ceb0 commit f5e2db7

File tree

4 files changed

+153
-3
lines changed

4 files changed

+153
-3
lines changed

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,12 @@
317317
<data key="fieldName">css_classes</data>
318318
<data key="value">css__specificity</data>
319319
</entity>
320+
<entity name="PageBuilderAdvancedCssClassesPropertyCssResponsiveStyling" type="pagebuilder_advanced_css_classes_property">
321+
<data key="name">CSS Classes</data>
322+
<data key="section">advanced</data>
323+
<data key="fieldName">css_classes</data>
324+
<data key="value">css__responsive-styling</data>
325+
</entity>
320326
<entity name="PageBuilderAdvancedCssClassesProperty_Invalid_GreaterThan" type="pagebuilder_advanced_css_classes_property">
321327
<data key="name">CSS Classes</data>
322328
<data key="section">advanced</data>
@@ -344,6 +350,41 @@
344350
<data key="fieldName">color</data>
345351
<data key="value">#ffffff</data>
346352
</entity>
353+
<entity name="PageBuilderAdvancedTextColorProperty_CadetBlue" type="pagebuilder_advanced_color_property">
354+
<data key="name">Text Color</data>
355+
<data key="section">advanced</data>
356+
<data key="fieldName">color</data>
357+
<data key="value">#5f9ea0</data>
358+
<data key="rgb">rgb(95, 158, 160)</data>
359+
</entity>
360+
<entity name="PageBuilderAdvancedTextColorProperty_CornflowerBlue" type="pagebuilder_advanced_color_property">
361+
<data key="name">Text Color</data>
362+
<data key="section">advanced</data>
363+
<data key="fieldName">color</data>
364+
<data key="value">#6495ed</data>
365+
<data key="rgb">rgb(100, 149, 237)</data>
366+
</entity>
367+
<entity name="PageBuilderAdvancedTextColorProperty_DarkOrchid" type="pagebuilder_advanced_color_property">
368+
<data key="name">Text Color</data>
369+
<data key="section">advanced</data>
370+
<data key="fieldName">color</data>
371+
<data key="value">#9932cc</data>
372+
<data key="rgb">rgb(153, 50, 204)</data>
373+
</entity>
374+
<entity name="PageBuilderAdvancedTextColorProperty_DeepPink" type="pagebuilder_advanced_color_property">
375+
<data key="name">Text Color</data>
376+
<data key="section">advanced</data>
377+
<data key="fieldName">color</data>
378+
<data key="value">#ff1493</data>
379+
<data key="rgb">rgb(255, 20, 147)</data>
380+
</entity>
381+
<entity name="PageBuilderAdvancedTextColorProperty_MidnightBlue" type="pagebuilder_advanced_color_property">
382+
<data key="name">Text Color</data>
383+
<data key="section">advanced</data>
384+
<data key="fieldName">color</data>
385+
<data key="value">#191970</data>
386+
<data key="rgb">rgb(25, 25, 112)</data>
387+
</entity>
347388
<!-- Margins -->
348389
<entity name="PageBuilderMarginsPropertyDefault" type="pagebuilder_margins_property">
349390
<data key="name">Margins and Padding</data>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,10 @@
4747
<data key="fieldName">html</data>
4848
<data key="value">&lt;style type=&quot;text/css&quot;&gt;#html-body .css__specificity { text-align: center; }&lt;/style&gt;</data>
4949
</entity>
50+
<entity name="PageBuilderHtmlPropertyCssResponsiveStyling" type="pagebuilder_html_property">
51+
<data key="name">HTML</data>
52+
<data key="section">general</data>
53+
<data key="fieldName">html</data>
54+
<data key="value">&lt;style type=&quot;text/css&quot;&gt;#html-body .css__responsive-styling { color: #5f9ea0; } @media (min-width: 576px) { #html-body .css__responsive-styling { color: #6495ed; }} @media (min-width: 768px) { #html-body .css__responsive-styling { color: #9932cc; }} @media (min-width: 992px) { #html-body .css__responsive-styling { color: #ff1493; }} @media (min-width: 1200px) { #html-body .css__responsive-styling { color: #191970; }}&lt;/style&gt;</data>
55+
</entity>
5056
</entities>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderHeadingTest/HeadingCssResponsiveStylingTest.xml

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
9+
<test name="HeadingCssResponsiveStylingTest">
10+
<annotations>
11+
<features value="PageBuilder"/>
12+
<stories value="Heading"/>
13+
<title value="Heading - CSS Responsive Styling"/>
14+
<description value="Internal (or external) CSS should be able to use media queries to override Page Builder styles that would previously have been inlined."/>
15+
<severity value="AVERAGE"/>
16+
<group value="pagebuilder"/>
17+
<group value="pagebuilder-heading"/>
18+
</annotations>
19+
<before>
20+
<createData entity="_emptyCmsPage" stepKey="createCMSPage"/>
21+
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
22+
<actionGroup ref="navigateToCMSPage" stepKey="navigateToCMSPage">
23+
<argument name="CMSPage" value="$$createCMSPage$$"/>
24+
</actionGroup>
25+
<actionGroup ref="switchToPageBuilderStage" stepKey="waitForPageBuilderDisplay"/>
26+
</before>
27+
<after>
28+
<deleteData createDataKey="createCMSPage" stepKey="deleteCMSPage"/>
29+
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
30+
</after>
31+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection">
32+
<argument name="contentType" value="PageBuilderHeadingContentType"/>
33+
</actionGroup>
34+
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
35+
<argument name="contentType" value="PageBuilderHeadingContentType"/>
36+
</actionGroup>
37+
<actionGroup ref="clickOutsideLiveEditHeading" stepKey="clickOutsideLiveEditHeading">
38+
<argument name="index" value="1"/>
39+
</actionGroup>
40+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openPageBuilderEditPanel">
41+
<argument name="contentType" value="PageBuilderHeadingContentType"/>
42+
</actionGroup>
43+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterHeadingTextProperty">
44+
<argument name="property" value="PageBuilderHeadingTextProperty"/>
45+
</actionGroup>
46+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterHeadingClassesProperty">
47+
<argument name="property" value="PageBuilderAdvancedCssClassesPropertyCssResponsiveStyling"/>
48+
</actionGroup>
49+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
50+
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage2">
51+
<argument name="contentType" value="PageBuilderHtmlContentType"/>
52+
</actionGroup>
53+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openPageBuilderEditPanel2">
54+
<argument name="contentType" value="PageBuilderHtmlContentType"/>
55+
</actionGroup>
56+
<actionGroup ref="fillSlideOutPanelTextArea" stepKey="enterHtmlContent">
57+
<argument name="property" value="PageBuilderHtmlPropertyCssResponsiveStyling"/>
58+
</actionGroup>
59+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings2"/>
60+
<!-- Verify in Stage -->
61+
<actionGroup ref="verifyHeadingInStage" stepKey="verifyHeadingInStage">
62+
<argument name="headingType" value="PageBuilderHeadingTypeDefaultProperty"/>
63+
</actionGroup>
64+
<actionGroup ref="exitPageBuilderFullScreen" stepKey="exitPageBuilderFullScreen"/>
65+
<actionGroup ref="SaveAndContinueEditCmsPageActionGroup" stepKey="saveAndContinueEditCmsPage"/>
66+
<!-- Verify in Storefront -->
67+
<actionGroup ref="NavigateToStorefrontForCreatedPageActionGroup" stepKey="navigateToStoreFront">
68+
<argument name="page" value="$$createCMSPage.identifier$$"/>
69+
</actionGroup>
70+
<!-- Testing for Viewport: Extra Small -->
71+
<resizeWindow width="575" height="1000" stepKey="resizeWindowToExtraSmall"/>
72+
<actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="validateContentTypesStyleEqualsExpectedStyleForExtraSmall">
73+
<argument name="selector" value="{{HeadingOnStorefront.cssClasses(PageBuilderHeadingTypeDefaultProperty.value, '1', PageBuilderAdvancedCssClassesPropertyCssResponsiveStyling.value)}}"/>
74+
<argument name="expectedProperty" value="{{PageBuilderAdvancedTextColorProperty_CadetBlue.rgb}}"/>
75+
<argument name="cssProperty" value="color"/>
76+
</actionGroup>
77+
<!-- Testing for Viewport: Small -->
78+
<resizeWindow width="767" height="1000" stepKey="resizeWindowToSmall"/>
79+
<actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="validateContentTypesStyleEqualsExpectedStyleForSmall">
80+
<argument name="selector" value="{{HeadingOnStorefront.cssClasses(PageBuilderHeadingTypeDefaultProperty.value, '1', PageBuilderAdvancedCssClassesPropertyCssResponsiveStyling.value)}}"/>
81+
<argument name="expectedProperty" value="{{PageBuilderAdvancedTextColorProperty_CornflowerBlue.rgb}}"/>
82+
<argument name="cssProperty" value="color"/>
83+
</actionGroup>
84+
<!-- Testing for Viewport: Medium -->
85+
<resizeWindow width="991" height="1000" stepKey="resizeWindowToMedium"/>
86+
<actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="validateContentTypesStyleEqualsExpectedStyleForMedium">
87+
<argument name="selector" value="{{HeadingOnStorefront.cssClasses(PageBuilderHeadingTypeDefaultProperty.value, '1', PageBuilderAdvancedCssClassesPropertyCssResponsiveStyling.value)}}"/>
88+
<argument name="expectedProperty" value="{{PageBuilderAdvancedTextColorProperty_DarkOrchid.rgb}}"/>
89+
<argument name="cssProperty" value="color"/>
90+
</actionGroup>
91+
<!-- Testing for Viewport: Large -->
92+
<resizeWindow width="1199" height="1000" stepKey="resizeWindowToLarge"/>
93+
<actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="validateContentTypesStyleEqualsExpectedStyleForLarge">
94+
<argument name="selector" value="{{HeadingOnStorefront.cssClasses(PageBuilderHeadingTypeDefaultProperty.value, '1', PageBuilderAdvancedCssClassesPropertyCssResponsiveStyling.value)}}"/>
95+
<argument name="expectedProperty" value="{{PageBuilderAdvancedTextColorProperty_DeepPink.rgb}}"/>
96+
<argument name="cssProperty" value="color"/>
97+
</actionGroup>
98+
<!-- Testing for Viewport: Extra Large -->
99+
<resizeWindow width="1440" height="1000" stepKey="resizeWindowToExtraLarge"/>
100+
<actionGroup ref="ValidateContentTypesStyleEqualsExpectedStyleActionGroup" stepKey="validateContentTypesStyleEqualsExpectedStyleForExtraLarge">
101+
<argument name="selector" value="{{HeadingOnStorefront.cssClasses(PageBuilderHeadingTypeDefaultProperty.value, '1', PageBuilderAdvancedCssClassesPropertyCssResponsiveStyling.value)}}"/>
102+
<argument name="expectedProperty" value="{{PageBuilderAdvancedTextColorProperty_MidnightBlue.rgb}}"/>
103+
<argument name="cssProperty" value="color"/>
104+
</actionGroup>
105+
</test>
106+
</tests>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderHeadingTest/HeadingCssSpecificityTest.xml

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,6 @@
4343
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterHeadingTextProperty">
4444
<argument name="property" value="PageBuilderHeadingTextProperty"/>
4545
</actionGroup>
46-
<actionGroup ref="selectSlideOutPanelFieldGeneral" stepKey="enterHeadingTypeProperty">
47-
<argument name="property" value="PageBuilderHeadingTypeDefaultProperty"/>
48-
</actionGroup>
4946
<actionGroup ref="chooseVisualSelectOption" stepKey="selectAlignmentLeft">
5047
<argument name="property" value="PageBuilderAdvancedAlignmentPropertyLeft"/>
5148
</actionGroup>

0 commit comments

Comments
 (0)