Merge pull request #95 from magento-trigger/MC-1408-html

PageBuilder: HTML Content Block Renaming and Preview

Author: irenelagno

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

@@ -82,6 +82,15 @@
         <fillField selector="{{EditPanelForm.panelFieldControl(property.section, property.fieldName)}}" userInput="{{property.value}}" stepKey="fillPropertyField"/>
         <click selector="{{EditPanelForm.panelFieldLabel(property.section, property.fieldName, property.section, property.name)}}" stepKey="clickOnFieldLabel"/>
     </actionGroup>
+    <actionGroup name="fillSlideOutPanelTextArea">
+        <!-- This action group does not assert against the section changed icon since this doesn't exist for General sections -->
+        <arguments>
+            <argument name="property"/>
+        </arguments>
+        <waitForPageLoad stepKey="waitForPageLoad"/>
+        <waitForElement time="2" selector="{{EditPanelForm.panelFieldControl(property.section, property.fieldName)}}" stepKey="waitForElementVisible"/>
+        <fillField selector="{{EditPanelForm.panelFieldControl(property.section, property.fieldName)}}" userInput="{{property.value}}" stepKey="fillPropertyField"/>
+    </actionGroup>
     <actionGroup name="fillSlideOutPanelFieldAndExpectToSeeErrorInFieldset">
         <arguments>
             <argument name="property"/>
@@ -206,6 +215,14 @@
         <see userInput="{{property.name}}" selector="{{EditPanelForm.panelFieldLabel(property.section, property.fieldName, property.section, property.name)}}" stepKey="seePropertyLabel"/>
         <seeInField selector="{{EditPanelForm.panelFieldControl(property.section, property.fieldName)}}" userInput="{{property.editPanelValue}}" stepKey="seeInFieldProperty"/>
     </actionGroup>
+    <actionGroup name="seeInFieldWithoutLabelSlideOutProperty">
+        <arguments>
+            <argument name="property"/>
+        </arguments>
+        <waitForElement time="2" selector="{{EditPanelForm.panelFieldControl(property.section, property.fieldName)}}" stepKey="waitForElementVisible"/>
+        <dontSeeElement selector="{{EditPanelForm.panelFieldLabel(property.section, property.fieldName, property.section, property.name)}}" stepKey="dontSeePropertyLabel"/>
+        <seeInField selector="{{EditPanelForm.panelFieldControl(property.section, property.fieldName)}}" userInput="{{property.value}}" stepKey="seeInFieldProperty"/>
+    </actionGroup>
     <actionGroup name="seeInFieldSlideOutIsZeroProperty">
         <!-- must have this instead of using seeInFieldSlideOutProperty w/ argument of 0 because of MFTF bug -->
         <arguments>

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/PanelActionGroup.xml

@@ -48,7 +48,7 @@
         <see userInput="Product" selector="{{PageBuilderPanel.magentoGroupContentType}}" stepKey="seeMagentoGroupProduct"/>
         <click selector="{{PageBuilderPanel.otherGroup}}" stepKey="clickOtherGroup"/>
         <see userInput="Anchor" selector="{{PageBuilderPanel.otherGroupContentType}}" stepKey="seeOtherGroupAnchor"/>
-        <dontSee userInput="Code" selector="{{PageBuilderPanel.otherGroupContentType}}" stepKey="dontSeeOtherGroupCode"/>
+        <dontSee selector="{{PageBuilderPanel.codeContentType}}" stepKey="dontSeeOtherGroupCode"/>
         <see userInput="Html" selector="{{PageBuilderPanel.otherGroupContentType}}" stepKey="seeOtherGroupHtml"/>
         <dontSee userInput="Search" selector="{{PageBuilderPanel.otherGroupContentType}}" stepKey="dontSeeOtherGroupSearch"/>
     </actionGroup>

app/code/Magento/PageBuilder/Test/Mftf/Data/ContentTypeData.xml

@@ -138,9 +138,9 @@
         <data key="pageNamePrefix">anchor</data>
     </entity>
     <entity name="PageBuilderHtmlContentType" type="pagebuilder_content_type">
-        <data key="name">HTML</data>
+        <data key="name">HTML Code</data>
         <data key="section">Other</data>
         <data key="role">html</data>
-        <data key="pageNamePrefix">html</data>
+        <data key="pageNamePrefix">html-code</data>
     </entity>
 </entities>

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

@@ -10,32 +10,27 @@
         xsi:noNamespaceSchemaLocation="../../../../../../../dev/tests/acceptance/vendor/magento/magento2-functional-testing-framework/src/Magento/FunctionalTestingFramework/DataGenerator/etc/dataProfileSchema.xsd">
     <!-- HTML -->
     <entity name="PageBuilderHtmlPropertyDefault" type="pagebuilder_html_property">
-        <data key="name">HTML</data>
-        <data key="section">general</data>
-        <data key="fieldName">html</data>
-        <data key="role">html</data>
-        <data key="value">Type your HTML here...</data>
-    </entity>
-    <entity name="PageBuilderHtmlProperty_Empty" type="pagebuilder_html_property">
         <data key="name">HTML</data>
         <data key="section">general</data>
         <data key="fieldName">html</data>
         <data key="role">html</data>
         <data key="value"/>
-        <data key="errorMessage">This is a required field.</data>
+        <data key="placeholderText">Enter HTML, CSS or JavaScript code</data>
     </entity>
     <entity name="PageBuilderHtmlPropertyButton" type="pagebuilder_html_property">
         <data key="name">HTML</data>
         <data key="section">general</data>
         <data key="fieldName">html</data>
         <data key="value">&lt;a class=&quot;pagebuilder-button-primary&quot; onclick=&quot;location.href = 'https://google.com';&quot;&gt;&lt;span&gt;Test Button&lt;/span&gt;&lt;/a&gt;</data>
-        <data key="selector">//a[@class='pagebuilder-button-primary' and @onclick=&quot;location.href = 'https://google.com';&quot;]//span[.='Test Button']</data>
+        <data key="selector">[contains(text(), 'a class="pagebuilder-button-primary"')]</data>
+        <data key="selectorOnFrontend">//a[@class='pagebuilder-button-primary' and @onclick=&quot;location.href = 'https://google.com';&quot;]//span[.='Test Button']</data>
     </entity>
     <entity name="PageBuilderHtmlPropertyButtonDuplicate" type="pagebuilder_html_property">
         <data key="name">HTML</data>
         <data key="section">general</data>
         <data key="fieldName">html</data>
         <data key="value">&lt;a class=&quot;pagebuilder-button-primary&quot; onclick=&quot;location.href = 'https://google.com';&quot;&gt;&lt;span&gt;Duplicate Button&lt;/span&gt;&lt;/a&gt;</data>
-        <data key="selector">//a[@class='pagebuilder-button-primary' and @onclick=&quot;location.href = 'https://google.com';&quot;]//span[.='Duplicate Button']</data>
+        <data key="selector">[contains(text(), 'a class="pagebuilder-button-primary"')]</data>
+        <data key="selectorOnFrontend">//a[@class='pagebuilder-button-primary' and @onclick=&quot;location.href = 'https://google.com';&quot;]//span[.='Duplicate Button']</data>
     </entity>
 </entities>

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

@@ -8,20 +8,21 @@
 <sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="../../../../../../../dev/tests/acceptance/vendor/magento/magento2-functional-testing-framework/src/Magento/FunctionalTestingFramework/Page/etc/SectionObject.xsd">
     <section name="HtmlOnStage">
-        <element name="base" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}]" parameterized="true"/>
-        <element name="html" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}]{{arg2}}" parameterized="true"/>
+        <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"/>
+        <element name="empty" type="text" selector="(//div[contains(@class,'placeholder-html-empty')])[{{arg1}}]" parameterized="true"/>
+        <element name="html" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html')])[{{arg1}}]{{arg2}}" parameterized="true"/>
         <!-- Advanced Configuration -->
-        <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
-        <element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>
-        <element name="border" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][contains(@style,'border-style: {{arg2}};')]" parameterized="true"/>
-        <element name="borderColor" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][contains(@style,'border-color: {{arg2}};')]" parameterized="true"/>
-        <element name="noBorderColor" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][not(contains(@style,'border-color:'))]" parameterized="true"/>
-        <element name="borderWidth" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][contains(@style,'border-width: {{arg2}}px;')]" parameterized="true"/>
-        <element name="borderRadius" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][contains(@style,'border-radius: {{arg2}}px;')]" parameterized="true"/>
-        <element name="cssClasses" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][contains(@class,'{{arg2}}')]" parameterized="true"/>
-        <element name="noCssClasses" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][not(@class)]" parameterized="true"/>
-        <element name="margins" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
-        <element name="padding" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'html: data.main.html')])[{{arg1}}][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
+        <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
+        <element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>
+        <element name="border" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}][contains(@style,'border-style: {{arg2}};')]" parameterized="true"/>
+        <element name="borderColor" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}][contains(@style,'border-color: {{arg2}};')]" parameterized="true"/>
+        <element name="noBorderColor" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}][not(contains(@style,'border-color:'))]" parameterized="true"/>
+        <element name="borderWidth" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}][contains(@style,'border-width: {{arg2}}px;')]" parameterized="true"/>
+        <element name="borderRadius" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}][contains(@style,'border-radius: {{arg2}}px;')]" parameterized="true"/>
+        <element name="cssClasses" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}][contains(@class,'{{arg2}}')]" parameterized="true"/>
+        <element name="noCssClasses" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or @class='placeholder-html-empty'])[{{arg1}}]" parameterized="true"/>
+        <element name="margins" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
+        <element name="padding" type="text" selector="(//div[contains(@class,'pagebuilder-html')]//div[contains(@data-bind,'text: data.main.html') or contains(@class,'placeholder-html-empty')])[{{arg1}}][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
     </section>
     <section name="HtmlOnStorefront">
         <element name="base" type="text" selector="(//div[@data-role='html'])[{{arg1}}]" parameterized="true"/>
@@ -44,7 +45,7 @@
         <element name="htmlFieldErrorMessage" type="text" selector="//div[contains(@class,'pagebuilder_modal_form_pagebuilder_modal_form_modal_insert_form')]//div[@data-index='general']//..//../label[.='{{arg1}}']" parameterized="true"/>
     </section>
     <section name="HtmlOnBackendArbitraryHtml">
-        <element name="content" type="button" selector="//div[contains(@class, 'pagebuilder-html')][1]//div[@class='my-div']"/>
+        <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;')]"/>
     </section>
     <section name="HtmlOnBackendWithImage">
         <element name="content" type="button" selector="//div[contains(@class, 'pagebuilder-html')][1]/img[not(contains(@src, '{{media'))]"/>
@@ -56,6 +57,6 @@
         <element name="content" type="button" selector="//div[contains(@class, 'pagebuilder-html')][1]/img[contains(@src, '{{media')]"/>
     </section>
     <section name="HtmlOnBackendNonexistentDataRole">
-        <element name="content" type="button" selector="//div[contains(@class, 'pagebuilder-html')][1]//div[@data-role='row']/div[@data-role='non-existent-content-type']"/>
+        <element name="content" type="button" selector="//div[contains(@class, 'pagebuilder-html')][1]//div[contains(text(), '&lt;div data-role=&quot;row&quot;&gt;&lt;div data-role=&quot;non-existent-content-type&quot;&gt;&lt;/div&gt;&lt;/div&gt;')]"/>
     </section>
 </sections>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderStageSection.xml

@@ -53,6 +53,7 @@
         <element name="magentoGroupContentType" type="button" selector='//*[@id="group-magento"]/div/div/ul/li/a/span[2]'/>
         <element name="otherGroup" type="button" selector='//*[@id="group-other"]'/>
         <element name="otherGroupContentType" type="button" selector='//*[@id="group-other"]/div/div/ul/li/a/span[2]'/>
+        <element name="codeContentType" type="button" selector='//*[@id="group-other"]/div/div/ul/li/a/span[2][text()="Code"]'/>
         <element name="searchPanel" type="input" selector='//*[@id="search-content-types-input"]' timeout="30"/>
         <element name="searchResults" type="text" selector='//*[@id="search-results"]' timeout="30"/>
         <element name="nothingFound" type="text" selector='//*[@id="pagebuilder-panel"]/div[2]/div' timeout="30"/>