Skip to content

Commit 321b3cd

Browse files
eug123eug123
committed
Merge remote-tracking branch 'origin/MC-37590' into PB-1145
2 parents d23e62a + f262a33 commit 321b3cd

File tree

3 files changed

+229
-1
lines changed

3 files changed

+229
-1
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderWYSIWYGSection/WYSIWYGOnPageBuilderInlineSection.xml

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,22 @@
2929
<element name="insertLink" type="button" selector=".mce-tinymce-inline div[aria-label='Insert/edit link']"/>
3030
<element name="imageSelector" type="button" selector=".mce-tinymce-inline div[aria-label='Insert/edit image']"/>
3131
<element name="table" type="button" selector=".mce-tinymce-inline div[aria-label='Table']"/>
32+
<element name="tableMenuFirstItem" type="text" parameterized="true" selector="(//i[contains(@class, 'mce-i-table')])[{{index}}]"/>
33+
<element name="tableGrid" type="text" parameterized="true" selector="//a[@data-mce-x={{xSize}}][@data-mce-y={{ySize}}]"/>
34+
<element name="tableToolbar" type="text" selector=".mce-tinymce-inline.mce-arrow.mce-container.mce-floatpanel[aria-label='Inline toolbar']"/>
35+
<element name="tableProperties" type="button" selector="div[aria-label='Table properties'] button"/>
36+
<element name="deleteTable" type="button" selector="div[aria-label='Delete table'] button"/>
37+
<element name="insertRowBefore" type="button" selector="div[aria-label='Insert row before'] button"/>
38+
<element name="insertRowAfter" type="button" selector="div[aria-label='Insert row after'] button"/>
39+
<element name="deleteRow" type="button" selector="div[aria-label='Delete row'] button"/>
40+
<element name="insertColumnBefore" type="button" selector="div[aria-label='Insert column before'] button"/>
41+
<element name="insertColumnAfter" type="button" selector="div[aria-label='Insert column after'] button"/>
42+
<element name="deleteColumn" type="button" selector="div[aria-label='Delete column'] button"/>
3243
<element name="specialCharacter" type="button" selector=".mce-tinymce-inline div[aria-label='Special character']"/>
3344
<element name="insertWidget" type="button" selector=".mce-tinymce-inline div[aria-label='Insert Widget']"/>
3445
<element name="insertVariable" type="button" selector=".mce-tinymce-inline div[aria-label='Insert Variable']"/>
3546
<element name="imageSelectorBrowse" type="button" selector="div[aria-label='Insert/edit image'] i.mce-i-browse"/>
3647
<element name="imageSelectorOk" type="button" selector="//div[contains(@aria-label, 'Insert/edit image')]//span[contains(@class, 'mce-txt')][text()='Ok']"/>
37-
<element name="formatOption" type="text" selector="//div[contains(@class, 'mce-menu')]//span[contains(@class, 'mce-text') and text()='{{label}}']" parameterized="true"/>
48+
<element name="formatOption" type="text" parameterized="true" selector="//div[contains(@class, 'mce-menu')]//span[contains(@class, 'mce-text') and text()='{{label}}']"/>
3849
</section>
3950
</sections>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest/TextVerifyTinyMCE4TableToolbarOnPageBuilderStageTest.xml

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
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"
9+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
10+
<test name="TextVerifyTinyMCE4TableToolbarOnPageBuilderStageTest">
11+
<annotations>
12+
<features value="PageBuilder"/>
13+
<stories value="Text"/>
14+
<title value="TinyMCE4 Table Toolbar Doesn't Overlay TextArea and Is Always Visible"/>
15+
<description value="Verify that WYSIWYG table toolbar doesn't overlap textarea, overlays other toolbars,
16+
overlays other content types, and always has its buttons visible."/>
17+
<severity value="MAJOR"/>
18+
<group value="pagebuilder"/>
19+
<group value="pagebuilder-text"/>
20+
<group value="pagebuilder-tinyMCE"/>
21+
</annotations>
22+
23+
<before>
24+
<!-- Enable WYSIWYG & TinyMCE4 -->
25+
<magentoCLI command="config:set cms/wysiwyg/enabled enabled" stepKey="enableWYSIWYG"/>
26+
<magentoCLI command="config:set cms/wysiwyg/editor mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter" stepKey="switchToTinyMCE4"/>
27+
<actionGroup ref="CliCacheCleanActionGroup" stepKey="cleanCache">
28+
<argument name="tags" value="config full_page"/>
29+
</actionGroup>
30+
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
31+
</before>
32+
33+
<after>
34+
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
35+
</after>
36+
37+
<!-- Add Text to 3/12 Column on CMS Page -->
38+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
39+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
40+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection">
41+
<argument name="contentType" value="PageBuilderColumnContentType"/>
42+
</actionGroup>
43+
<actionGroup ref="dragContentTypeToStage" stepKey="dragColumnToRootContainer">
44+
<argument name="contentType" value="PageBuilderColumnContentType"/>
45+
<argument name="containerTargetType" value="PageBuilderRootContainerContentType"/>
46+
</actionGroup>
47+
<actionGroup ref="duplicateContentType" stepKey="duplicateContentType">
48+
<argument name="contentType" value="PageBuilderColumnContentType"/>
49+
</actionGroup>
50+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection2">
51+
<argument name="contentType" value="PageBuilderTextContentType"/>
52+
</actionGroup>
53+
<actionGroup ref="dragContentTypeToStage" stepKey="dragTextToColumnContentType">
54+
<argument name="contentType" value="PageBuilderTextContentType"/>
55+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
56+
<argument name="containerTargetIndex" value="1"/>
57+
</actionGroup>
58+
59+
<!-- Add TinyMCE4 Table to Text Editor -->
60+
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="focusOnTextEditorArea"/>
61+
<waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.table}}" stepKey="waitForTableMenuItem"/>
62+
<click selector="{{WYSIWYGOnPageBuilderInline.table}}" stepKey="clickOnTableMenuItem"/>
63+
<waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.tableMenuFirstItem('2')}}" stepKey="waitForTableMenuIFirstItem"/>
64+
<click selector="{{WYSIWYGOnPageBuilderInline.tableMenuFirstItem('2')}}" stepKey="clickOnTableMenuFirstItem"/>
65+
<waitForElement selector="{{WYSIWYGOnPageBuilderInline.tableGrid('6', '1')}}" stepKey="waitForTableGrid"/>
66+
<click selector="{{WYSIWYGOnPageBuilderInline.tableGrid('6', '1')}}" stepKey="chooseTableSize"/>
67+
68+
<!-- Validate Table Size is 7 x 2 -->
69+
<seeElement selector="{{TextOnStage.elementInText('1', 'table', '1')}}" stepKey="seeTable"/>
70+
<seeElement selector="{{TextOnStage.elementInText('1', 'tr', '2')}}" stepKey="see2TableRows"/>
71+
<dontSeeElementInDOM selector="{{TextOnStage.elementInText('1', 'tr', '3')}}" stepKey="dontSeeMoreThan2TableRows"/>
72+
<seeElement selector="{{TextOnStage.elementInText('1', 'td', '7')}}" stepKey="see7TableColumns"/>
73+
<dontSeeElementInDOM selector="{{TextOnStage.elementInText('1', 'td', '8')}}" stepKey="dontSee8TableColumns"/>
74+
75+
<!-- Verify All Table Toolbar Menu Items are Visible -->
76+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties"/>
77+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable"/>
78+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowBefore}}" stepKey="seeInsertRowBefore"/>
79+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowAfter}}" stepKey="seeInsertRowAfter"/>
80+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteRow}}" stepKey="seeDeleteRow"/>
81+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnBefore}}" stepKey="seeInsertColumnBefore"/>
82+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnAfter}}" stepKey="seeInsertColumnAfter"/>
83+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteColumn}}" stepKey="seeDeleteColumn"/>
84+
85+
<!-- Validate Table Toolbar Doesn't Overlap Table Content -->
86+
<seeElement selector="{{TextOnStage.tinymceInFocus('1')}}" stepKey="seeFocusedTinyMCE"/>
87+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar"/>
88+
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().bottom" stepKey="tableToolbarBottomPosition"/>
89+
<executeJS function="return document.evaluate(&quot;{{TextOnStage.tinymce('1')}}//table&quot;, document.body).iterateNext().getBoundingClientRect().top" stepKey="tableElementTopPosition"/>
90+
<executeJS function="return Math.abs({$tableToolbarBottomPosition} - {$tableElementTopPosition})" stepKey="tableToolbarVsTablePositionDifference"/>
91+
<assertLessThanOrEqual stepKey="verifyTableToolbarDoesNotOverlapTable">
92+
<expectedResult type="int">2</expectedResult>
93+
<actualResult type="variable">tableToolbarVsTablePositionDifference</actualResult>
94+
</assertLessThanOrEqual>
95+
96+
<!-- Validate Main Toolbar Doesn't Overlap Table Content -->
97+
<executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="mainToolbarTopPosition"/>
98+
<executeJS function="return document.evaluate(&quot;{{TextOnStage.tinymce('1')}}//table&quot;, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="tableElementBottomPosition"/>
99+
<executeJS function="return Math.abs({$mainToolbarTopPosition} - {$tableElementBottomPosition})" stepKey="mainToolbarVsTablePositionDifference"/>
100+
<assertLessThan stepKey="verifyMainToolbarDoesNotOverlapTable">
101+
<expectedResult type="int">2</expectedResult>
102+
<actualResult type="variable">mainToolbarVsTablePositionDifference</actualResult>
103+
</assertLessThan>
104+
105+
<!-- Move Text to 6/12 Column -->
106+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusEditor">
107+
<argument name="contentType" value="PageBuilderTextContentType"/>
108+
</actionGroup>
109+
<actionGroup ref="moveContentTypeToContainer" stepKey="moveTextIntoThirdColumn">
110+
<argument name="contentType" value="PageBuilderTextContentType"/>
111+
<argument name="contentTypeIndex" value="1"/>
112+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
113+
<argument name="containerTargetIndex" value="3"/>
114+
</actionGroup>
115+
116+
<!-- Initialize TinyMCE Table Toolbar & Verify All Table Toolbar Menu Items are Visible -->
117+
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickOnTextContentType"/>
118+
<waitForPageLoad stepKey="waitForTinyMCEToolbar"/>
119+
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickAgainToOpenTableToolbar"/>
120+
<waitForPageLoad stepKey="waitForTinyMCETableToolbar"/>
121+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar2"/>
122+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties2"/>
123+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable2"/>
124+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowBefore}}" stepKey="seeInsertRowBefore2"/>
125+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowAfter}}" stepKey="seeInsertRowAfter2"/>
126+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteRow}}" stepKey="seeDeleteRow2"/>
127+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnBefore}}" stepKey="seeInsertColumnBefore2"/>
128+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnAfter}}" stepKey="seeInsertColumnAfter2"/>
129+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteColumn}}" stepKey="seeDeleteColumn2"/>
130+
131+
<!-- Validate Table Toolbar Doesn't Overlap Table Content 2 -->
132+
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().top" stepKey="tableToolbarTopPosition2"/>
133+
<executeJS function="return document.evaluate(&quot;{{TextOnStage.tinymce('1')}}//table&quot;, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="tableElementBottomPosition2"/>
134+
<executeJS function="return Math.abs({$tableToolbarTopPosition2} - {$tableElementBottomPosition2})" stepKey="tableToolbarVsTablePositionDifference2"/>
135+
<assertLessThanOrEqual stepKey="verifyTableToolbarDoesNotOverlapTable2">
136+
<expectedResult type="int">15</expectedResult>
137+
<actualResult type="variable">tableToolbarVsTablePositionDifference2</actualResult>
138+
</assertLessThanOrEqual>
139+
140+
<!-- Validate Main Toolbar Doesn't Overlap Table Content 2 -->
141+
<executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="mainToolbarTopPosition2"/>
142+
<executeJS function="return Math.abs({$mainToolbarTopPosition2} - {$tableElementBottomPosition2})" stepKey="mainToolbarVsTablePositionDifference2"/>
143+
<assertLessThan stepKey="verifyMainToolbarDoesNotOverlapTable2">
144+
<expectedResult type="int">2</expectedResult>
145+
<actualResult type="variable">mainToolbarVsTablePositionDifference2</actualResult>
146+
</assertLessThan>
147+
148+
<!-- Add Video to Column 1 & Move Text Back to Column 1 -->
149+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusEditor2">
150+
<argument name="contentType" value="PageBuilderTextContentType"/>
151+
</actionGroup>
152+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection3">
153+
<argument name="contentType" value="PageBuilderVideoContentType"/>
154+
</actionGroup>
155+
<actionGroup ref="dragContentTypeToStage" stepKey="dragVideoToColumnContentType">
156+
<argument name="contentType" value="PageBuilderVideoContentType"/>
157+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
158+
<argument name="containerTargetIndex" value="1"/>
159+
</actionGroup>
160+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openVideoEditMenuOnStage">
161+
<argument name="contentType" value="PageBuilderVideoContentType"/>
162+
</actionGroup>
163+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterVideoUrlProperty">
164+
<argument name="property" value="PageBuilderVideoUrl_YouTube"/>
165+
</actionGroup>
166+
<actionGroup ref="conditionalClickSlideOutPanelFieldGeneral" stepKey="setAutoplayEnabled">
167+
<argument name="property" value="PageBuilderVideoAutoplay_Enabled"/>
168+
</actionGroup>
169+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
170+
<actionGroup ref="moveContentTypeToContainer" stepKey="moveTextIntoFirstColumn">
171+
<argument name="contentType" value="PageBuilderTextContentType"/>
172+
<argument name="contentTypeIndex" value="1"/>
173+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
174+
<argument name="containerTargetIndex" value="1"/>
175+
</actionGroup>
176+
177+
<!-- Initialize TinyMCE Table Toolbar & Verify All Table Toolbar Menu Items are Visible Again -->
178+
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickOnTextContentType2"/>
179+
<waitForPageLoad stepKey="waitForTinymceToolbar2"/>
180+
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickAgainToOpenTableToolbar2"/>
181+
<waitForPageLoad stepKey="waitForTinymceTableToolbar2"/>
182+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar3"/>
183+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties3"/>
184+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable3"/>
185+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowBefore}}" stepKey="seeInsertRowBefore3"/>
186+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowAfter}}" stepKey="seeInsertRowAfter3"/>
187+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteRow}}" stepKey="seeDeleteRow3"/>
188+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnBefore}}" stepKey="seeInsertColumnBefore3"/>
189+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertColumnAfter}}" stepKey="seeInsertColumnAfter3"/>
190+
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteColumn}}" stepKey="seeDeleteColumn3"/>
191+
192+
<!-- Validate Table Toolbar Doesn't Overlap Table Content 3 -->
193+
<executeJS function="return document.querySelector(&quot;{{WYSIWYGOnPageBuilderInline.tableToolbar}}&quot;).getBoundingClientRect().bottom" stepKey="tableToolbarBottomPosition3"/>
194+
<executeJS function="return document.evaluate(&quot;{{TextOnStage.tinymce('1')}}//table&quot;, document.body).iterateNext().getBoundingClientRect().top" stepKey="tableElementTopPosition3"/>
195+
<executeJS function="return Math.abs({$tableToolbarBottomPosition3} - {$tableElementTopPosition3})" stepKey="tableToolbarVsTablePositionDifference3"/>
196+
<assertLessThanOrEqual stepKey="verifyTableToolbarDoesNotOverlapTable3">
197+
<expectedResult type="int">2</expectedResult>
198+
<actualResult type="variable">tableToolbarVsTablePositionDifference3</actualResult>
199+
</assertLessThanOrEqual>
200+
201+
<!-- Validate Main Toolbar Doesn't Overlap Table Content 3 -->
202+
<executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="mainToolbarBottomPosition3"/>
203+
<executeJS function="return Math.abs({$mainToolbarBottomPosition3} - {$tableElementTopPosition3})" stepKey="mainToolbarVsTablePositionDifference3"/>
204+
<assertLessThan stepKey="verifyMainToolbarDoesNotOverlapTable3">
205+
<expectedResult type="int">2</expectedResult>
206+
<actualResult type="variable">mainToolbarVsTablePositionDifference3</actualResult>
207+
</assertLessThan>
208+
</test>
209+
</tests>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_inline-wysiwyg.less

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,11 @@
7171
}
7272
}
7373
}
74+
75+
.mce-tinymce-inline.mce-arrow.mce-container.mce-floatpanel[aria-label*='toolbar'] {
76+
transition: transform 200ms;
77+
78+
&:not(.mce-arrow-up):not(.mce-arrow-down) {
79+
transform: translate(-1px, -36px); // table toolbar position fix
80+
}
81+
}

0 commit comments

Comments
 (0)