Skip to content

Commit 63c0b90

Browse files
davemacaulaydavemacaulay
committed
MC-3146: Add new row appearances to configuration
- Resolve test failures
1 parent 581d279 commit 63c0b90

File tree

4 files changed

+41
-34
lines changed

4 files changed

+41
-34
lines changed

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

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
xsi:noNamespaceSchemaLocation="../../../../../../../dev/tests/acceptance/vendor/magento/magento2-functional-testing-framework/src/Magento/FunctionalTestingFramework/Page/etc/SectionObject.xsd">
1111
<section name="RowOnBackend">
1212
<element name="selectFromGallery" type="button" selector="//label[text()='Select from Gallery']"/>
13-
<element name="appearanceWarningMessage" type="text" selector="(//div[contains(@class, 'admin__field-visual-select-with-warning')])/div[contains(@class, 'message-notice')]/div"/>
13+
<element name="appearanceWarningMessage" type="text" selector="//div[@data-index='appearance']/descendant::div[contains(@class, 'message-notice')]/div"/>
1414
<element name="backgroundSectionName" type="button" selector="//div[@data-index='background']"/>
1515
<!-- Background Configuration -->
1616
<element name="backgroundRepeat" type="button" selector="[name='background-repeat']"/>
@@ -31,7 +31,7 @@
3131
<element name="rowChildrenStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-row')])[{{arg1}}]//div[contains(@class, 'element-children') and contains(@class, 'row-container')][contains(@style, '{{arg2}}')]" parameterized="true"/>
3232
<element name="rowWidthJS" type="text" selector="document.querySelectorAll('[data-appearance=\'{{arg1}}\']')[{{arg2}}].clientWidth" parameterized="true"/>
3333
<element name="rowH2ChildWidthJS" type="text" selector="document.querySelectorAll('div[data-appearance~=\'{{arg1}}\'] .element-children')[{{arg2}}].clientWidth" parameterized="true"/>
34-
<element name="appearance" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@data-appearance,'{{arg2}}')]" parameterized="true"/>
34+
<element name="appearance" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@data-appearance,'{{arg2}}')]" parameterized="true"/>
3535
<!-- Background Configuration -->
3636
<element name="backgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
3737
<element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
@@ -63,41 +63,41 @@
6363
<element name="padding" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
6464
</section>
6565
<section name="RowOnStorefront">
66-
<element name="base" type="text" selector="(//div[@data-role='row'])[{{arg1}}]" parameterized="true"/>
66+
<element name="base" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div" parameterized="true"/>
6767
<element name="computedWidth" type="text" selector="parseInt(window.getComputedStyle(document.querySelector('[data-role=row]')).width)"/>
68-
<element name="rowStyle" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style, '{{arg2}}')]" parameterized="true"/>
68+
<element name="rowStyle" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style, '{{arg2}}')]" parameterized="true"/>
6969
<element name="rowWidthJS" type="text" selector="document.querySelectorAll('[data-appearance=\'{{arg1}}\']')[{{arg2}}].clientWidth" parameterized="true"/>
7070
<element name="rowH2ChildWidthJS" type="text" selector="document.querySelectorAll('div[data-appearance~=\'{{arg1}}\'] h2')[{{arg2}}].clientWidth" parameterized="true"/>
71-
<element name="appearance" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@data-appearance,'{{arg2}}')]" parameterized="true"/>
71+
<element name="appearance" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@data-appearance,'{{arg2}}')]" parameterized="true"/>
7272
<!-- Background Configuration -->
73-
<element name="backgroundColor" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
74-
<element name="noBackgroundColor" type="button" selector="(//div[@data-role='row'])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
73+
<element name="backgroundColor" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
74+
<element name="noBackgroundColor" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[not(contains(@style,'background-color:'))]" parameterized="true"/>
7575
<element name="backgroundImage" type="button" selector='(//div[@data-role="row"])[{{arg1}}][contains(@style,"background-image: url(&apos;") and contains(@style,"/{{arg2}}_") and contains(@style,".{{arg3}}&apos;);")]' parameterized="true"/>
7676
<element name="noBackgroundImage" type="button" selector='(//div[@data-role="row"])[{{arg1}}][not(contains(@style,"background-image:"))]' parameterized="true"/>
77-
<element name="backgroundPosition" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'background-position: {{arg2}};')]" parameterized="true"/>
78-
<element name="backgroundSize" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'background-size: {{arg2}};')]" parameterized="true"/>
79-
<element name="backgroundRepeat" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'background-repeat: {{arg2}};')]" parameterized="true"/>
80-
<element name="backgroundAttachment" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'background-attachment: {{arg2}};')]" parameterized="true"/>
77+
<element name="backgroundPosition" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'background-position: {{arg2}};')]" parameterized="true"/>
78+
<element name="backgroundSize" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'background-size: {{arg2}};')]" parameterized="true"/>
79+
<element name="backgroundRepeat" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'background-repeat: {{arg2}};')]" parameterized="true"/>
80+
<element name="backgroundAttachment" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'background-attachment: {{arg2}};')]" parameterized="true"/>
8181
<!-- Parallax Background Configuration -->
82-
<element name="parallaxClass" type="button" selector="(//div[@data-role='row'])[{{arg1}}][@class='jarallax']" parameterized="true"/>
83-
<element name="parallaxState" type="button" selector="(//div[@data-role='row'])[{{arg1}}][@data-enable-parallax='{{arg2}}']" parameterized="true"/>
84-
<element name="parallaxSpeed" type="button" selector="(//div[@data-role='row'])[{{arg1}}][@data-parallax-speed='{{arg2}}']" parameterized="true"/>
82+
<element name="parallaxClass" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[@class='jarallax']" parameterized="true"/>
83+
<element name="parallaxState" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[@data-enable-parallax='{{arg2}}']" parameterized="true"/>
84+
<element name="parallaxSpeed" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[@data-parallax-speed='{{arg2}}']" parameterized="true"/>
8585
<element name="parallaxBackgroundImage" type="button" selector='(//div[@data-role="row"])[{{arg1}}][contains(@data-jarallax-original-styles,"background-image: url(&apos;") and contains(@data-jarallax-original-styles,"{{arg2}}") and contains(@data-jarallax-original-styles,"{{arg3}}&apos;);")]' parameterized="true"/>
8686
<!-- Layout Configuration -->
87-
<element name="minHeight" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style, 'min-height: {{arg2}}px;')]" parameterized="true"/>
88-
<element name="verticalAlignContainer" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style, 'justify-content: {{arg2}};')]" parameterized="true"/>
87+
<element name="minHeight" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style, 'min-height: {{arg2}}px;')]" parameterized="true"/>
88+
<element name="verticalAlignContainer" type="button" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style, 'justify-content: {{arg2}};')]" parameterized="true"/>
8989
<!-- Advanced Configuration -->
90-
<element name="alignment" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
91-
<element name="noAlignment" type="text" selector="(//div[@data-role='row'])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>
92-
<element name="border" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'border-style: {{arg2}};')]" parameterized="true"/>
93-
<element name="borderColor" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'border-color: {{arg2}};')]" parameterized="true"/>
94-
<element name="noBorderColor" type="text" selector="(//div[@data-role='row'])[{{arg1}}][not(contains(@style,'border-color:'))]" parameterized="true"/>
95-
<element name="borderWidth" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'border-width: {{arg2}}px;')]" parameterized="true"/>
96-
<element name="borderRadius" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'border-radius: {{arg2}}px;')]" parameterized="true"/>
97-
<element name="cssClasses" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@class,'{{arg2}}')]" parameterized="true"/>
98-
<element name="noCssClasses" type="text" selector="(//div[@data-role='row'])[{{arg1}}][not(@class)]" parameterized="true"/>
99-
<element name="margins" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
100-
<element name="padding" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
90+
<element name="alignment" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
91+
<element name="noAlignment" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[not(contains(@style,'text-align:'))]" parameterized="true"/>
92+
<element name="border" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'border-style: {{arg2}};')]" parameterized="true"/>
93+
<element name="borderColor" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'border-color: {{arg2}};')]" parameterized="true"/>
94+
<element name="noBorderColor" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[not(contains(@style,'border-color:'))]" parameterized="true"/>
95+
<element name="borderWidth" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'border-width: {{arg2}}px;')]" parameterized="true"/>
96+
<element name="borderRadius" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'border-radius: {{arg2}}px;')]" parameterized="true"/>
97+
<element name="cssClasses" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@class,'{{arg2}}')]" parameterized="true"/>
98+
<element name="noCssClasses" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[not(@class)]" parameterized="true"/>
99+
<element name="margins" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
100+
<element name="padding" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div[contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
101101
</section>
102102
<section name="ParallaxForm">
103103
<element name="sectionName" type="button" selector="//div[@data-index='parallax_background']"/>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -542,17 +542,17 @@
542542
<actionGroup ref="dragContentTypeToStage" stepKey="dragColumnIntoStage">
543543
<argument name="contentType" value="PageBuilderColumnContentType"/>
544544
</actionGroup>
545-
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="columnOneWidthGrid12"/>
546-
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth" stepKey="columnTwoWidthGrid12"/>
545+
<executeJS function="return parseInt(document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth / 10, 10) * 10;" stepKey="columnOneWidthGrid12"/>
546+
<executeJS function="return parseInt(document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth / 10, 10) * 10;" stepKey="columnTwoWidthGrid12"/>
547547
<assertEquals stepKey="assertColumnsAreEqual">
548548
<expectedResult type="variable">columnOneWidthGrid12</expectedResult>
549549
<actualResult type="variable">columnTwoWidthGrid12</actualResult>
550550
</assertEquals>
551551
<actionGroup ref="updateGridSize" stepKey="updateGridSizeTo13">
552552
<argument name="gridSize" value="13"/>
553553
</actionGroup>
554-
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="columnOneWidthGrid13"/>
555-
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth" stepKey="columnTwoWidthGrid13"/>
554+
<executeJS function="return parseInt(document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth / 10, 10) * 10;" stepKey="columnOneWidthGrid13"/>
555+
<executeJS function="return parseInt(document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth / 10, 10) * 10;" stepKey="columnTwoWidthGrid13"/>
556556
<!-- Validate first column grew larger -->
557557
<comment userInput="Validate first column grew larger" stepKey="commentValidateFirstCommentUnchanged"/>
558558
<assertGreaterThan stepKey="assertColumnOneGreaterThanColumnTwo">
@@ -562,8 +562,8 @@
562562
<fillField selector="{{ColumnOnBackend.gridSizeInput('1')}}" userInput="12" stepKey="resetGridSizeTo12"/>
563563
<pressKey selector="{{ColumnOnBackend.gridSizeInput('1')}}" parameterArray="['su',\Facebook\WebDriver\WebDriverKeys::ENTER]" stepKey="pressKeyEnter"/>
564564
<waitForPageLoad stepKey="waitForUpdate" />
565-
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="columnOneWidthGrid12Restored"/>
566-
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth" stepKey="columnTwoWidthGrid12Restored"/>
565+
<executeJS function="return parseInt(document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth / 10, 10) * 10;" stepKey="columnOneWidthGrid12Restored"/>
566+
<executeJS function="return parseInt(document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth / 10, 10) * 10;" stepKey="columnTwoWidthGrid12Restored"/>
567567
<!-- Validate columns are equal again -->
568568
<comment userInput="Validate columns are equal again" stepKey="commentValidateColumnsEqual"/>
569569
<assertEquals stepKey="assertColumnsAreEqualAgain">

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@
55
*/
66
-->
77

8-
<div class="row-contained">
8+
<div class="row-contained"
9+
attr="data.wrapper.attributes"
10+
ko-style="data.wrapper.style"
11+
css="data.wrapper.css">
912
<div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
1013
attr="data.main.attributes"
1114
ko-style="data.main.style"

‎app/code/Magento/PageBuilder/view/frontend/web/js/content-type/row/appearance/default/widget.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ define([
1111
return function (config, element) {
1212
var $element = $(element);
1313

14+
if ($element.attr("data-element") && $element.attr("data-element") === "wrapper") {
15+
$element = $(element).find(">[data-element='main']");
16+
}
17+
1418
if ($element.data('enableParallax') !== 1) {
1519
return;
1620
}

0 commit comments

Comments
 (0)