Skip to content

Commit a2c1cee

Browse files
davemacaulaydavemacaulay
authored
Merge pull request #277 from magento-obsessive-owls/MC-17823
[Owls] MC-17823: Access Images/Widgets/Variable from HTML content type
2 parents cf53a6d + 0d6ae17 commit a2c1cee

File tree

12 files changed

+430
-17
lines changed

12 files changed

+430
-17
lines changed

‎app/code/Magento/PageBuilder/Component/Form/HtmlCode.php

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
namespace Magento\PageBuilder\Component\Form;
8+
9+
use Magento\Backend\Model\UrlInterface as BackendUrlInterface;
10+
use Magento\Cms\Helper\Wysiwyg\Images;
11+
use Magento\Framework\View\Element\UiComponentFactory;
12+
use Magento\Framework\View\Element\UiComponent\ContextInterface;
13+
use Magento\Variable\Model\Variable\Config as VariableConfig;
14+
15+
/**
16+
* Updates field element with HTML Code specific config
17+
*/
18+
class HtmlCode extends \Magento\Ui\Component\Form\Field
19+
{
20+
const HTML_ID_PLACEHOLDER = 'HTML_ID_PLACEHOLDER';
21+
22+
/**
23+
* @var BackendUrlInterface
24+
*/
25+
private $backendUrl;
26+
27+
/**
28+
* @var Images
29+
*/
30+
private $imagesHelper;
31+
32+
/**
33+
* @var VariableConfig
34+
*/
35+
private $variableConfig;
36+
37+
/**
38+
* @var string
39+
*/
40+
private $currentTreePath;
41+
42+
/**
43+
* @param ContextInterface $context
44+
* @param UiComponentFactory $uiComponentFactory
45+
* @param BackendUrlInterface $backendUrl
46+
* @param Images $imagesHelper
47+
* @param VariableConfig $variableConfig
48+
* @param string $currentTreePath
49+
* @param array $components
50+
* @param array $data
51+
*/
52+
public function __construct(
53+
ContextInterface $context,
54+
UiComponentFactory $uiComponentFactory,
55+
BackendUrlInterface $backendUrl,
56+
Images $imagesHelper,
57+
VariableConfig $variableConfig,
58+
$currentTreePath = 'wysiwyg',
59+
$components = [],
60+
array $data = []
61+
) {
62+
$this->backendUrl = $backendUrl;
63+
$this->imagesHelper = $imagesHelper;
64+
$this->variableConfig = $variableConfig;
65+
$this->currentTreePath = $currentTreePath;
66+
parent::__construct($context, $uiComponentFactory, $components, $data);
67+
}
68+
69+
/**
70+
* Prepare component configuration
71+
*
72+
* @return void
73+
* @throws \Magento\Framework\Exception\LocalizedException
74+
*/
75+
public function prepare()
76+
{
77+
$config = $this->getData('config');
78+
$config['widgetUrl'] = $this->backendUrl->getUrl(
79+
'adminhtml/widget/index',
80+
[
81+
'widget_target_id' => self::HTML_ID_PLACEHOLDER
82+
]
83+
);
84+
$config['imageUrl'] = $this->backendUrl->getUrl(
85+
'cms/wysiwyg_images/index',
86+
[
87+
'current_tree_path' => $this->imagesHelper->idEncode($this->currentTreePath),
88+
'target_element_id' => self::HTML_ID_PLACEHOLDER
89+
]
90+
);
91+
$config['variableUrl'] = $this->variableConfig->getVariablesWysiwygActionUrl();
92+
$this->setData('config', $config);
93+
parent::prepare();
94+
}
95+
}

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

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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+
9+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
10+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
11+
<actionGroup name="addPageLinkWidgetToHtmlCodeWYSIWYGDisabled" extends="addPageLinkWidgetToTinyMCE">
12+
<arguments>
13+
<argument name="widget" defaultValue=""/>
14+
<argument name="page" defaultValue="" type="string"/>
15+
</arguments>
16+
<comment userInput="addPageLinkWidgetToHtmlCodeWYSIWYGDisabled" stepKey="commentAddWidget"/>
17+
<waitForElementVisible selector="{{HtmlOnConfiguration.insertWidgetButton}}" stepKey="waitForInsertWidget1"/>
18+
<click selector="{{HtmlOnConfiguration.insertWidgetButton}}" stepKey="clickAddWidgetBtn"/>
19+
<waitForElementVisible selector="{{HtmlOnConfiguration.textarea}}" stepKey="waitForInsertWidgetModalToClose"/>
20+
<executeJS function="return document.querySelectorAll('{{HtmlOnConfiguration.textareaCSS}}')[0].value;" stepKey="getValueFromTextarea" after="waitForInsertWidgetModalToClose"/>
21+
<assertContains stepKey="assertTextareaContainsValue" after="getValueFromTextarea">
22+
<expectedResult type="string">{{widget.editPanelValue}}</expectedResult>
23+
<actualResult type="variable">getValueFromTextarea</actualResult>
24+
</assertContains>
25+
</actionGroup>
26+
<actionGroup name="addVariableToHtmlCodeWYSIWYGDisabled">
27+
<arguments>
28+
<argument name="variable" defaultValue=""/>
29+
</arguments>
30+
<comment userInput="addVariableToHtmlCodeWYSIWYGDisabled" stepKey="commentAddVariableToHtmlCodeWYSIWYGDisabled"/>
31+
<waitForElementVisible selector="{{HtmlOnConfiguration.insertVariableButton}}" stepKey="waitForInsertVariable1"/>
32+
<click selector="{{HtmlOnConfiguration.insertVariableButton}}" stepKey="clickInsertVariable1"/>
33+
<waitForPageLoad stepKey="waitForPageLoad"/>
34+
<waitForElementVisible selector="{{VariableSection.Radio(variable.variableName)}}" stepKey="waitForVariable1"/>
35+
<checkOption selector="{{VariableSection.Radio(variable.variableName)}}" stepKey="selectVariable"/>
36+
<waitForElementVisible selector="{{VariableSection.InsertWidget}}" stepKey="waitForInsertVariable2"/>
37+
<click selector="{{VariableSection.InsertWidget}}" stepKey="clickInsertVariable2"/>
38+
<waitForElementNotVisible selector="{{VariableSection.InsertWidget}}" stepKey="waitForVariableModalToClose"/>
39+
<waitForElementVisible selector="{{HtmlOnConfiguration.textarea}}" stepKey="waitForTextArea"/>
40+
<executeJS function="return document.querySelectorAll('{{HtmlOnConfiguration.textareaCSS}}')[0].value;" stepKey="getValueFromTextarea"/>
41+
<assertContains stepKey="assertTextareaContainsValue">
42+
<expectedResult type="string">{{variable.editPanelValue}}</expectedResult>
43+
<actualResult type="variable">getValueFromTextarea</actualResult>
44+
</assertContains>
45+
</actionGroup>
46+
<actionGroup name="clickHtmlInsertImageButton">
47+
<comment userInput="clickHtmlInsertImageButton" stepKey="commentClickHtmlInsertImageButton"/>
48+
<waitForElementVisible selector="{{HtmlOnConfiguration.insertImageButton}}" stepKey="waitForInsertImageButton"/>
49+
<click selector="{{HtmlOnConfiguration.insertImageButton}}" stepKey="clickInsertImageButton"/>
50+
<waitForPageLoad stepKey="waitForPageLoad"/>
51+
<waitForElementVisible selector="{{MediaGallerySection.StorageRootArrow}}" stepKey="waitForStorageRootArrow"/>
52+
</actionGroup>
53+
</actionGroups>

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

+10
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
1010
<section name="HtmlOnStage">
1111
<element name="base" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}]" parameterized="true"/>
12+
<element name="baseCSS" type="text" selector="[data-content-type=html][data-element=main]"/>
1213
<element name="hidden" type="text" selector="(//*[@data-content-type='html'])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and contains(@class, 'pagebuilder-content-type-hidden')]" parameterized="true"/>
1314
<element name="notHidden" type="text" selector="(//div[contains(@class,'pagebuilder-html')])[{{arg1}}]/parent::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
1415
<element name="empty" type="text" selector="(//div[contains(@class,'placeholder-html-empty')])[{{arg1}}]" parameterized="true"/>
@@ -32,6 +33,8 @@
3233
<element name="hidden" type="text" selector="(//div[@data-content-type='html'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
3334
<element name="notHidden" type="text" selector="(//div[@data-content-type='html'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
3435
<element name="html" type="text" selector="(//div[@data-content-type='html'])[{{arg1}}]{{arg2}}" parameterized="true"/>
36+
<element name="widgetLink" type="text" selector="(//div[@data-content-type='html'])[{{arg1}}]//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>
37+
<element name="text" type="text" selector="(//div[@data-content-type='html'])[{{arg1}}]//*[contains(text(),'{{arg2}}')]" parameterized="true"/>
3538
<!-- Advanced Configuration -->
3639
<element name="alignment" type="text" selector="(//div[@data-content-type='html'])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
3740
<element name="noAlignment" type="text" selector="(//div[@data-content-type='html'])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>
@@ -45,6 +48,13 @@
4548
<element name="margins" type="text" selector="(//div[@data-content-type='html'])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
4649
<element name="padding" type="text" selector="(//div[@data-content-type='html'])[{{arg1}}][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
4750
</section>
51+
<section name="HtmlOnConfiguration">
52+
<element name="insertWidgetButton" type="text" selector="//button[contains(@class,'action-add-widget')]//*[.='Insert Widget...']"/>
53+
<element name="insertImageButton" type="text" selector="//button[contains(@class,'action-add-image')]//*[.='Insert Image...']"/>
54+
<element name="insertVariableButton" type="text" selector="//button[contains(@class,'add-variable')]//*[.='Insert Variable...']"/>
55+
<element name="textarea" type="text" selector="//div[@data-index='html']//textarea"/>
56+
<element name="textareaCSS" type="text" selector="div[data-index=html] textarea[name=html]"/>
57+
</section>
4858
<section name="HtmlOnBackendArbitraryHtml">
4959
<element name="content" type="button" selector="//div[contains(@class, 'pagebuilder-html')][1]//div[contains(text(), '&lt;div class=&quot;my-div&quot;&gt;&lt;/div&gt;')]"/>
5060
</section>

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

+74-4
Original file line numberDiff line numberDiff line change
@@ -955,6 +955,13 @@
955955
<after>
956956
<deleteData createDataKey="createCMSBlock" stepKey="deleteCMSBlock"/>
957957
<deleteData createDataKey="createCMSPage" stepKey="deleteCMSPage"/>
958+
<actionGroup ref="navigateToMediaGallery" stepKey="navigateToMediaGallery"/>
959+
<actionGroup ref="NavigateToMediaFolderActionGroup" stepKey="NavigateToFolder2">
960+
<argument name="FolderName" value="{{ImageFolder.name}}"/>
961+
</actionGroup>
962+
<actionGroup ref="DeleteImageFromStorageActionGroup" stepKey="DeleteImageFromStorage2">
963+
<argument name="Image" value="ImageUpload3"/>
964+
</actionGroup>
958965
<actionGroup ref="logout" stepKey="logout"/>
959966
</after>
960967
<!-- Add HTML -->
@@ -973,12 +980,47 @@
973980
<actionGroup ref="fillSlideOutPanelTextArea" stepKey="enterHtmlContent">
974981
<argument name="property" value="PageBuilderHtmlPropertyButton"/>
975982
</actionGroup>
983+
<!-- Add media directives -->
984+
<comment userInput="Add media directives" stepKey="commentAddMediaDirectives"/>
985+
<actionGroup ref="addPageLinkWidgetToHtmlCodeWYSIWYGDisabled" stepKey="addPageLinkWidgetToHtmlCodeWYSIWYGDisabled">
986+
<argument name="widget" value="PageBuilderTextArea_WidgetCMSPageLink"/>
987+
<argument name="page" value="$$createCMSPage.identifier$$"/>
988+
</actionGroup>
989+
<actionGroup ref="clickHtmlInsertImageButton" stepKey="clickInsertImageInHtmlCode"/>
990+
<actionGroup ref="clickMediaGalleryStorageRootArrow" stepKey="clickMediaGalleryStorageRootArrow"/>
991+
<actionGroup ref="CreateImageFolder" stepKey="CreateImageFolder">
992+
<argument name="ImageFolder" value="ImageFolder"/>
993+
</actionGroup>
994+
<actionGroup ref="attachImage" stepKey="attachImage1">
995+
<argument name="Image" value="ImageUpload3"/>
996+
</actionGroup>
997+
<actionGroup ref="saveImage" stepKey="insertImage"/>
998+
<actionGroup ref="assertTextareaContainsValue" stepKey="assertImageInTextareaValueBeforeSave">
999+
<argument name="value" value="{{ImageUpload3.value}}"/>
1000+
<argument name="selector" value="{{HtmlOnConfiguration.textarea}}"/>
1001+
</actionGroup>
1002+
<actionGroup ref="addVariableToHtmlCodeWYSIWYGDisabled" stepKey="addVariableToHtmlCodeWYSIWYGDisabled">
1003+
<argument name="variable" value="PageBuilderTextArea_VariableBaseURL"/>
1004+
</actionGroup>
9761005
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettingsHtml"/>
9771006
<actionGroup ref="saveCMSBlock" stepKey="saveCMSBlock"/>
978-
<!-- Validate CMS Block Stage -->
979-
<comment userInput="Validate CMS Block Stage" stepKey="commentValidateCMSBlockStage"/>
980-
<seeElement selector="{{HtmlOnStage.base('1')}}" stepKey="seeHtmlBaseCMSBlockStage"/>
981-
<seeElement selector="{{HtmlOnStage.html('1', PageBuilderHtmlPropertyButton.selector)}}" stepKey="seeHtmlCMSBlockStage"/>
1007+
<!-- Validate CMS Block Stage After Save -->
1008+
<comment userInput="Validate CMS Block Stage After Save" stepKey="commentValidateCMSBlockStageAfterSave"/>
1009+
<seeElement selector="{{HtmlOnStage.base('1')}}" stepKey="seeHtmlBaseCMSBlockStageAfterSave"/>
1010+
<seeElement selector="{{HtmlOnStage.html('1', PageBuilderHtmlPropertyButton.selector)}}" stepKey="seeHtmlCMSBlockStageAfterSave"/>
1011+
<executeJS function="return document.querySelectorAll('{{HtmlOnStage.baseCSS}}')[0].innerText;" stepKey="actualTextFromHtmlCodeAfterSave"/>
1012+
<assertContains stepKey="assertWidgetOnStageAfterSave">
1013+
<expectedResult type="string">{{TinyMCEWidgetCMSPageLink.stageValue}}</expectedResult>
1014+
<actualResult type="variable">actualTextFromHtmlCodeAfterSave</actualResult>
1015+
</assertContains>
1016+
<assertContains stepKey="assertImageOnStageAfterSave">
1017+
<expectedResult type="string">{{ImageUpload3.value}}</expectedResult>
1018+
<actualResult type="variable">actualTextFromHtmlCodeAfterSave</actualResult>
1019+
</assertContains>
1020+
<assertContains stepKey="assertVariableOnStageAfterSave">
1021+
<expectedResult type="string">{{TinyMCEVariableBaseURL.stageValue}}</expectedResult>
1022+
<actualResult type="variable">actualTextFromHtmlCodeAfterSave</actualResult>
1023+
</assertContains>
9821024
<!-- Add Block to CMS Page -->
9831025
<comment userInput="Add Block to CMS Page" stepKey="commentAddBlockToCMSPage"/>
9841026
<actionGroup ref="navigateToCreatedCMSPage" stepKey="navigateToCreatedCMSPage">
@@ -1001,6 +1043,19 @@
10011043
<comment userInput="Validate CMS Page Stage" stepKey="commentValidateCMSPageStage"/>
10021044
<seeElement selector="{{HtmlOnStorefront.base('1')}}" stepKey="seeHtmlBaseCMSPageStage"/>
10031045
<seeElement selector="{{HtmlOnStorefront.html('1', PageBuilderHtmlPropertyButton.selector)}}" stepKey="seeHtmlCMSPageStage"/>
1046+
<executeJS function="return document.querySelectorAll('{{HtmlOnStage.baseCSS}}')[0].innerText;" stepKey="actualTextFromHtmlCodeCMSPageStage"/>
1047+
<assertContains stepKey="assertWidgetOnStageCMSPageStage">
1048+
<expectedResult type="string">{{_ENV.MAGENTO_BASE_URL}}$$createCMSPage.identifier$$</expectedResult>
1049+
<actualResult type="variable">actualTextFromHtmlCodeCMSPageStage</actualResult>
1050+
</assertContains>
1051+
<assertContains stepKey="assertImageOnStageCMSPageStage">
1052+
<expectedResult type="string">{{ImageUpload3.value}}</expectedResult>
1053+
<actualResult type="variable">actualTextFromHtmlCodeCMSPageStage</actualResult>
1054+
</assertContains>
1055+
<assertContains stepKey="assertVariableOnStageCMSPageStage">
1056+
<expectedResult type="string">{{_ENV.MAGENTO_BASE_URL}}</expectedResult>
1057+
<actualResult type="variable">actualTextFromHtmlCodeCMSPageStage</actualResult>
1058+
</assertContains>
10041059
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
10051060
<!-- Validate CMS Page Storefront -->
10061061
<comment userInput="Validate CMS Page Storefront" stepKey="commentValidateCMSPageStorefront"/>
@@ -1012,5 +1067,20 @@
10121067
<click selector="{{HtmlOnStorefront.html('1', PageBuilderHtmlPropertyButton.selectorOnFrontend)}}" stepKey="clickRenderedHtmlButtonCMSPageStorefront"/>
10131068
<wait time="3" stepKey="waitArbitraryTimeForPotentialNavigationToOccurCMSPageStorefront"/>
10141069
<seeCurrentUrlEquals url="{{PageBuilderHtmlPropertyButton.url}}" stepKey="seeThatUrlIsChangedToHtmlLinkUrl"/>
1070+
<actionGroup ref="navigateToStorefrontForCreatedPage" stepKey="navigateToCMSPageStorefront2">
1071+
<argument name="page" value="$$createCMSPage.identifier$$"/>
1072+
</actionGroup>
1073+
<seeElement selector="{{HtmlOnStorefront.widgetLink('1', _ENV.MAGENTO_BASE_URL, $$createCMSPage.identifier$$)}}" stepKey="seeWidgetStorefront"/>
1074+
<seeElement selector="{{StorefrontCMSPageSection.imageSource(ImageUpload3.fileName)}}" stepKey="seeMediaSourceStorefront"/>
1075+
<executeJS function="return document.querySelectorAll('{{HtmlOnStorefront.baseCSS}}')[0].innerText;" stepKey="actualTextStorefront"/>
1076+
<assertContains stepKey="assertVariableStorefront">
1077+
<expectedResult type="string">{{_ENV.MAGENTO_BASE_URL}}</expectedResult>
1078+
<actualResult type="variable">actualTextStorefront</actualResult>
1079+
</assertContains>
1080+
<!-- Click Page Link Widget Storefront -->
1081+
<comment userInput="Click Page Link Widget Storefront" stepKey="clickClickPageLinkWidgetStorefront"/>
1082+
<click selector="{{HtmlOnStorefront.widgetLink('1', _ENV.MAGENTO_BASE_URL, $$createCMSPage.identifier$$)}}" stepKey="clickWidgetStorefront"/>
1083+
<waitForPageLoad stepKey="waitForPageLoad"/>
1084+
<seeCurrentUrlEquals url="{{_ENV.MAGENTO_BASE_URL}}$$createCMSPage.identifier$$" stepKey="seeThatUrlIsChangedToPageLinkWidgetUrlStorefront"/>
10151085
</test>
10161086
</tests>

0 commit comments

Comments
 (0)