Skip to content

Commit d075f9e

Browse files
dhaeckerdhaecker
committed
PB-95: Video background for Row
- Adding tests for row video background
1 parent f6f9f7b commit d075f9e

File tree

7 files changed

+1282
-2
lines changed

7 files changed

+1282
-2
lines changed

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

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,4 +195,171 @@
195195
<actualResult type="variable">$backgroundImageValue</actualResult>
196196
</assertRegExp>
197197
</actionGroup>
198+
<actionGroup name="validateVideoBackgroundWithAllAttributes">
199+
<annotations>
200+
<description>Validates all video background attributes when all attributes are configured</description>
201+
</annotations>
202+
<arguments>
203+
<argument name="section" defaultValue="RowOnStage"/>
204+
<argument name="backgroundColor" defaultValue="{{PageBuilderBackgroundColor_Default.rgb}}" type="string"/>
205+
<argument name="videoUrl" defaultValue="PageBuilderVideoBackgroundUrl_Empty"/>
206+
<argument name="overlayColor" defaultValue="{{PageBuilderVideoBackgroundOverlayColor_Empty.rgb}}" type="string"/>
207+
<argument name="infiniteLoop" defaultValue="PageBuilderVideoBackgroundInfiniteLoop_Enabled"/>
208+
<argument name="lazyLoad" defaultValue="PageBuilderVideoBackgroundLazyLoad_Enabled"/>
209+
<argument name="playOnlyVisible" defaultValue="PageBuilderVideoBackgroundPlayOnlyVisible_Enabled"/>
210+
<argument name="fallbackImage" defaultValue="PageBuilderVideoBackgroundFallbackImage_Empty"/>
211+
<argument name="index" defaultValue="1" type="string"/>
212+
</arguments>
213+
<waitForPageLoad stepKey="waitForPageLoad"/>
214+
<waitForElementVisible selector="{{section.backgroundType(index, 'video')}}" stepKey="waitForVideoBackground"/>
215+
<executeJS function="return window.getComputedStyle(document.querySelectorAll(&quot;{{section.backgroundColorCSS}}&quot;)[{{index}}-1]).backgroundColor" stepKey="backgroundColor"/>
216+
<assertEquals stepKey="assertBackgroundColor">
217+
<expectedResult type="string">{{backgroundColor}}</expectedResult>
218+
<actualResult type="variable">$backgroundColor</actualResult>
219+
</assertEquals>
220+
<waitForElementVisible selector="{{section.videoBackgroundVideoUrl(index, videoUrl.renderedValue)}}" stepKey="waitForVideoUrl"/>
221+
<grabAttributeFrom selector="{{section.videoBackgroundJarallaxContainer(index)}}" userInput="style" stepKey="jarallaxStyle"/>
222+
<assertContains stepKey="assertHeight">
223+
<expectedResult type="string">height: 100%;</expectedResult>
224+
<actualResult type="variable">$jarallaxStyle</actualResult>
225+
</assertContains>
226+
<assertContains stepKey="assertWidth">
227+
<expectedResult type="string">width: 100%;</expectedResult>
228+
<actualResult type="variable">$jarallaxStyle</actualResult>
229+
</assertContains>
230+
<assertContains stepKey="assertOverflowHidden">
231+
<expectedResult type="string">overflow: hidden;</expectedResult>
232+
<actualResult type="variable">$jarallaxStyle</actualResult>
233+
</assertContains>
234+
<grabAttributeFrom selector="{{section.videoBackgroundVideoIframe(index)}}" userInput="style" stepKey="videoStyle"/>
235+
<assertContains stepKey="assertVideoPosition">
236+
<expectedResult type="string">position: absolute;</expectedResult>
237+
<actualResult type="variable">$videoStyle</actualResult>
238+
</assertContains>
239+
<assertContains stepKey="assertVideoPlaying">
240+
<expectedResult type="string">transform: translate3d(</expectedResult>
241+
<actualResult type="variable">$videoStyle</actualResult>
242+
</assertContains>
243+
<executeJS function="return window.getComputedStyle(document.querySelectorAll(&quot;{{section.videoBackgroundOverlayCSS}}&quot;)[{{index}}-1]).backgroundColor" stepKey="overlayColor"/>
244+
<assertEquals stepKey="assertOverlayColor">
245+
<expectedResult type="string">{{overlayColor}}</expectedResult>
246+
<actualResult type="variable">$overlayColor</actualResult>
247+
</assertEquals>
248+
<waitForElementVisible selector="{{section.videoBackgroundInfiniteLoop(index, infiniteLoop.value)}}" stepKey="waitForInfiniteLoop"/>
249+
<waitForElementVisible selector="{{section.videoBackgroundLazyLoad(index, lazyLoad.value)}}" stepKey="waitForLazyLoad"/>
250+
<waitForElementVisible selector="{{section.videoBackgroundPlayOnlyVisible(index, playOnlyVisible.value)}}" stepKey="waitForPlayOnlyVisible"/>
251+
<waitForElement selector="{{section.videoBackgroundFallbackImage(index)}}" stepKey="waitForFallbackImage"/>
252+
<waitForElementNotVisible selector="{{section.videoBackgroundFallbackImage(index)}}" stepKey="waitForFallbackImageNotVisible"/>
253+
<grabAttributeFrom selector="{{section.videoBackgroundFallbackImageSource(index, fallbackImage.fileName)}}" userInput="src" stepKey="fallbackImageSource"/>
254+
<assertRegExp stepKey="assertFallbackImageValueContainsFileInformation">
255+
<expectedResult type="string">/.*\/(pub\/|\/)?media\/{{fallbackImage.path}}\/{{fallbackImage.fileName}}(_\d+)?\.{{fallbackImage.extension}}/</expectedResult>
256+
<actualResult type="variable">$fallbackImageSource</actualResult>
257+
</assertRegExp>
258+
<grabAttributeFrom selector="{{section.videoBackgroundFallbackImageSource(index, fallbackImage.fileName)}}" userInput="style" stepKey="fallbackImageStyle"/>
259+
<assertContains stepKey="assertImageCover">
260+
<expectedResult type="string">object-fit: cover;</expectedResult>
261+
<actualResult type="variable">$fallbackImageStyle</actualResult>
262+
</assertContains>
263+
<assertContains stepKey="assertImagePosition">
264+
<expectedResult type="string">position: absolute;</expectedResult>
265+
<actualResult type="variable">$fallbackImageStyle</actualResult>
266+
</assertContains>
267+
</actionGroup>
268+
<actionGroup name="validateParallaxVideoBackgroundWithAllAttributes" extends="validateVideoBackgroundWithAllAttributes">
269+
<annotations>
270+
<description>Validates all video background attributes when all attributes are configured and parallax is enabled. Extends: validateVideoBackgroundWithAllAttributes</description>
271+
</annotations>
272+
<assertContains stepKey="assertVideoPosition">
273+
<expectedResult type="string">position: fixed;</expectedResult>
274+
<actualResult type="variable">$videoStyle</actualResult>
275+
</assertContains>
276+
<assertContains stepKey="assertImagePosition">
277+
<expectedResult type="string">position: fixed;</expectedResult>
278+
<actualResult type="variable">$fallbackImageStyle</actualResult>
279+
</assertContains>
280+
</actionGroup>
281+
<actionGroup name="validateFallbackImageInVideoBackgroundWithInvalidVideo">
282+
<annotations>
283+
<description>Validates that the video background fallback image renders when the video in video background fails to load.</description>
284+
</annotations>
285+
<arguments>
286+
<argument name="section" defaultValue="RowOnStage"/>
287+
<argument name="fallbackImage" defaultValue="PageBuilderVideoBackgroundFallbackImage_Empty"/>
288+
<argument name="index" defaultValue="1" type="string"/>
289+
</arguments>
290+
<waitForPageLoad stepKey="waitForPageLoad"/>
291+
<waitForElementVisible selector="{{section.backgroundType(index, 'video')}}" stepKey="waitForVideoBackground"/>
292+
<dontSeeElementInDOM selector="{{section.videoBackgroundVideoIframe(index)}}" stepKey="dontSeeVideoInDOM"/>
293+
<waitForElementVisible selector="{{section.videoBackgroundFallbackImage(index)}}" stepKey="waitForFallbackImageVisible"/>
294+
<grabAttributeFrom selector="{{section.videoBackgroundFallbackImageSource(index, fallbackImage.fileName)}}" userInput="src" stepKey="fallbackImageSource"/>
295+
<assertRegExp stepKey="assertFallbackImageValueContainsFileInformation">
296+
<expectedResult type="string">/.*\/(pub\/|\/)?media\/{{fallbackImage.path}}\/{{fallbackImage.fileName}}(_\d+)?\.{{fallbackImage.extension}}/</expectedResult>
297+
<actualResult type="variable">$fallbackImageSource</actualResult>
298+
</assertRegExp>
299+
<grabAttributeFrom selector="{{section.videoBackgroundFallbackImageSource(index, fallbackImage.fileName)}}" userInput="style" stepKey="fallbackImageStyle"/>
300+
<assertContains stepKey="assertCover">
301+
<expectedResult type="string">object-fit: cover;</expectedResult>
302+
<actualResult type="variable">$fallbackImageStyle</actualResult>
303+
</assertContains>
304+
</actionGroup>
305+
<actionGroup name="validateEmptyRowWithInvalidVideoBackgroundAndNoFallbackImage">
306+
<annotations>
307+
<description>Validates that the Row renders as an empty row when the video in video background fails to load and there is no fallback image.</description>
308+
</annotations>
309+
<arguments>
310+
<argument name="section" defaultValue="RowOnStage"/>
311+
<argument name="index" defaultValue="1" type="string"/>
312+
</arguments>
313+
<waitForPageLoad stepKey="waitForPageLoad"/>
314+
<waitForElementVisible selector="{{section.backgroundType(index, 'video')}}" stepKey="waitForVideoBackground"/>
315+
<waitForElementVisible selector="{{section.videoBackgroundNoFallbackImage(index)}}" stepKey="waitForNoFallbackImage"/>
316+
<dontSeeElementInDOM selector="{{section.videoBackgroundVideoIframe(index)}}" stepKey="dontSeeVideoInDOM"/>
317+
<dontSeeElementInDOM selector="{{section.videoBackgroundFallbackImage(index)}}" stepKey="dontSeeFallbackImageInDOM"/>
318+
</actionGroup>
319+
<actionGroup name="validateVideoBackgroundWithOnlyVideoUrl">
320+
<annotations>
321+
<description>Validates video background attributes when only the Video URL is set and all other attributes are left as default</description>
322+
</annotations>
323+
<arguments>
324+
<argument name="section" defaultValue="RowOnStage"/>
325+
<argument name="videoUrl" defaultValue="PageBuilderVideoBackgroundUrl_Empty"/>
326+
<argument name="infiniteLoop" defaultValue="PageBuilderVideoBackgroundInfiniteLoop_Enabled"/>
327+
<argument name="lazyLoad" defaultValue="PageBuilderVideoBackgroundLazyLoad_Enabled"/>
328+
<argument name="playOnlyVisible" defaultValue="PageBuilderVideoBackgroundPlayOnlyVisible_Enabled"/>
329+
<argument name="index" defaultValue="1" type="string"/>
330+
</arguments>
331+
<waitForPageLoad stepKey="waitForPageLoad"/>
332+
<waitForElementVisible selector="{{section.backgroundType(index, 'video')}}" stepKey="waitForVideoBackground"/>
333+
<dontSeeElementInDOM selector="{{section.backgroundColorElement(index)}}" stepKey="dontSeeBackgroundColorInDOM"/>
334+
<waitForElementVisible selector="{{section.videoBackgroundVideoUrl(index, videoUrl.renderedValue)}}" stepKey="waitForVideoUrl"/>
335+
<grabAttributeFrom selector="{{section.videoBackgroundJarallaxContainer(index)}}" userInput="style" stepKey="jarallaxStyle"/>
336+
<assertContains stepKey="assertHeight">
337+
<expectedResult type="string">height: 100%;</expectedResult>
338+
<actualResult type="variable">$jarallaxStyle</actualResult>
339+
</assertContains>
340+
<assertContains stepKey="assertWidth">
341+
<expectedResult type="string">width: 100%;</expectedResult>
342+
<actualResult type="variable">$jarallaxStyle</actualResult>
343+
</assertContains>
344+
<assertContains stepKey="assertOverflowHidden">
345+
<expectedResult type="string">overflow: hidden;</expectedResult>
346+
<actualResult type="variable">$jarallaxStyle</actualResult>
347+
</assertContains>
348+
<grabAttributeFrom selector="{{section.videoBackgroundVideoIframe(index)}}" userInput="style" stepKey="videoStyle"/>
349+
<assertContains stepKey="assertVideoPosition">
350+
<expectedResult type="string">position: absolute;</expectedResult>
351+
<actualResult type="variable">$videoStyle</actualResult>
352+
</assertContains>
353+
<assertContains stepKey="assertVideoPlaying">
354+
<expectedResult type="string">transform: translate3d(</expectedResult>
355+
<actualResult type="variable">$videoStyle</actualResult>
356+
</assertContains>
357+
<dontSeeElementInDOM selector="{{section.videoBackgroundOverlayElement(index)}}" stepKey="dontSeeOverlayColorInDOM"/>
358+
<waitForElementVisible selector="{{section.videoBackgroundInfiniteLoop(index, infiniteLoop.value)}}" stepKey="waitForInfiniteLoop"/>
359+
<waitForElementVisible selector="{{section.videoBackgroundLazyLoad(index, lazyLoad.value)}}" stepKey="waitForLazyLoad"/>
360+
<waitForElementVisible selector="{{section.videoBackgroundPlayOnlyVisible(index, playOnlyVisible.value)}}" stepKey="waitForPlayOnlyVisible"/>
361+
<waitForElement selector="{{section.videoBackgroundNoFallbackImage(index)}}" stepKey="waitForNoFallbackImage"/>
362+
<dontSeeElement selector="{{section.videoBackgroundNoFallbackImage(index)}}" stepKey="dontSeeFallbackImage"/>
363+
<dontSeeElementInDOM selector="{{section.videoBackgroundFallbackImage(index)}}" stepKey="dontSeeFallbackImageInDOM"/>
364+
</actionGroup>
198365
</actionGroups>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -385,6 +385,28 @@
385385
</arguments>
386386
<dontSeeElementInDOM selector="{{EditPanelForm.panelFieldNoAfterLabelText(property.fieldName)}}" stepKey="dontSeeElementInDOM"/>
387387
</actionGroup>
388+
<actionGroup name="validateSlideOutPanelFieldHelperText">
389+
<annotations>
390+
<description>Validates the helper text for a field on the edit panel form.</description>
391+
</annotations>
392+
<arguments>
393+
<argument name="property"/>
394+
</arguments>
395+
<waitForElement time="2" selector="{{EditPanelForm.panelFieldHelperText(property.section, property.fieldName)}}" stepKey="waitForElement"/>
396+
<see userInput="{{property.helperText}}" selector="{{EditPanelForm.panelFieldHelperText(property.section, property.fieldName)}}" stepKey="seeHelperText"/>
397+
</actionGroup>
398+
<actionGroup name="validateSlideOutPanelFieldTooltip">
399+
<annotations>
400+
<description>Validates the tooltip for a field on the edit panel form.</description>
401+
</annotations>
402+
<arguments>
403+
<argument name="property"/>
404+
</arguments>
405+
<waitForElement time="2" selector="{{EditPanelForm.panelFieldTooltip(property.section, property.fieldName)}}" stepKey="waitForTooltip"/>
406+
<moveMouseOver selector="{{EditPanelForm.panelFieldTooltip(property.section, property.fieldName)}}" stepKey="mouseOverTooltip"/>
407+
<waitForElementVisible selector="{{EditPanelForm.panelFieldTooltipContent(property.section, property.fieldName)}}" stepKey="waitForTooltipContentVisible"/>
408+
<see userInput="{{property.tooltipText}}" selector="{{EditPanelForm.panelFieldTooltipContent(property.section, property.fieldName)}}" stepKey="seeTooltipContent"/>
409+
</actionGroup>
388410
<actionGroup name="validateSlideOutPanelFieldNotPresent">
389411
<arguments>
390412
<argument name="property"/>

0 commit comments

Comments
 (0)