updated styles for sites editor to hide/unhide switch labels

adobe · Oct 18, 2023 · 90141e4 · 90141e4
1 parent 3c45dde
commit 90141e4
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 0 deletions.
diff --git a/examples/ui.content/src/main/content/META-INF/vault/filter.xml b/examples/ui.content/src/main/content/META-INF/vault/filter.xml
@@ -11,6 +11,7 @@
     <filter root="/conf/core-components-examples/settings/wcm/templates/af-blank-v2" mode="update"/>
     <filter root="/conf/core-components-examples/settings/wcm/templates/afv2frag-template" mode="update"/>
     <filter root="/conf/core-components-examples/settings/wcm/templates/content-page/policies/jcr:content/root/responsivegrid/core-components-examples/components/form/container" mode="update"/>
+    <filter root="/conf/core-components-examples/settings/wcm/templates/content-page/policies/jcr:content/root/responsivegrid/forms-components-examples" mode="update"/>
     <filter root="/content/core-components-examples/library/forms-and-communications-portal" mode="update"/>
     <filter root="/content/core-components-examples/library/adaptive-form" mode="update"/>
     <filter root="/conf/core-components-examples/settings/wcm/templates/content-page/structure/jcr:content/root/sidebar/accordion"  mode="update"/>

diff --git a/...t/conf/core-components-examples/settings/wcm/templates/content-page/policies/.content.xml b/...t/conf/core-components-examples/settings/wcm/templates/content-page/policies/.content.xml
@@ -14,6 +14,16 @@
                         </form>
                     </components>
                 </core-components-examples>
+                <forms-components-examples jcr:primaryType="nt:unstructured">
+                    <components jcr:primaryType="nt:unstructured">
+                        <form jcr:primaryType="nt:unstructured">
+                            <switch
+                                    cq:policy="forms-components-examples/components/form/switch/default"
+                                    jcr:primaryType="nt:unstructured"
+                                    sling:resourceType="wcm/core/components/policies/mapping"/>
+                        </form>
+                    </components>
+                </forms-components-examples>
             </responsivegrid>
         </root>
     </jcr:content>

diff --git a/ui.tests/test-module/libs/support/commands.js b/ui.tests/test-module/libs/support/commands.js
@@ -678,3 +678,15 @@ Cypress.Commands.add("isElementInViewport", { prevSubject: true }, (subject) =>
       rect.right <= Cypress.config("viewportWidth")
     );
   });
+
+
+/**
+ * This function is used to fetch elements from ContentFrame iframe which are not accessible.
+ * Without this, the element will not be returned due to browser's cross-origin security feature.
+ */
+Cypress.Commands.add("getContentIframeBody", () => {
+    return cy
+        .get('#ContentFrame')
+        .its('0.contentDocument.body').should('not.be.empty')
+        .then(cy.wrap)
+})
diff --git a/ui.tests/test-module/specs/switch/switch.authoring.spec.js b/ui.tests/test-module/specs/switch/switch.authoring.spec.js
@@ -23,6 +23,7 @@ const sitesSelectors = require('../../libs/commons/sitesSelectors'),
  */
 describe('Page - Authoring', function () {
 
+  const unhideLabelsCss = '.cmp-adaptiveform-switch__unhide-labels';
 
   const dropSwitchInSites = function() {
     const dataPath = "/content/core-components-examples/library/adaptive-form/switch/jcr:content/root/responsivegrid/demo/component/guideContainer/*",
@@ -115,6 +116,26 @@ describe('Page - Authoring', function () {
       cy.get('.rte-toolbar-item[title="Close"]').should('be.visible').click();
       cy.deleteComponentByPath(switchDrop);
     });
+
+    it('labels can hide and unhide with styles', function(){
+      cy.cleanTest(switchDrop).then(() => {
+        const styleSelector = '[action="/content/forms/af/core-components-it/blank/_jcr_content/guideContainer/switch"] coral-selectlist-item';
+        dropSwitchInContainer();
+        cy.openEditableToolbar(sitesSelectors.overlays.overlay.component + switchEditPathSelector);
+        cy.invokeEditableAction("[data-action='STYLE']");
+        cy.get(styleSelector).eq(1).click().then(() => {
+          cy.get('body').click(0, 0);
+          cy.getContentIframeBody().find(unhideLabelsCss).should('have.length', 1);
+        });
+        cy.invokeEditableAction("[data-action='STYLE']");
+        cy.get(styleSelector).eq(0).click().then(() => {
+          cy.get('body').click(0, 0);
+          cy.getContentIframeBody().find(unhideLabelsCss).should('have.length', 0);
+        });
+        cy.deleteComponentByPath(switchDrop);
+      });
+    });
+
   })
 
   context('Open Sites Editor', function() {
@@ -174,5 +195,24 @@ describe('Page - Authoring', function () {
       cy.get('.rte-toolbar-item[title="Close"]').should('be.visible').click();
       cy.deleteComponentByPath(switchDrop);
     });
+
+    it('labels can hide and unhide with styles', function(){
+      cy.cleanTest(switchDrop).then(() => {
+        const styleSelector = '[action="/content/core-components-examples/library/adaptive-form/switch/_jcr_content/root/responsivegrid/demo/component/guideContainer/switch"] coral-selectlist-item';
+        dropSwitchInSites();
+        cy.openEditableToolbar(sitesSelectors.overlays.overlay.component + switchEditPathSelector);
+        cy.invokeEditableAction("[data-action='STYLE']");
+        cy.get(styleSelector).eq(1).click({force: true}).then(() => {
+          cy.get('body').click(0, 0);
+          cy.getContentIframeBody().find(unhideLabelsCss).scrollIntoView().should('have.length', 1);
+        });
+        cy.invokeEditableAction("[data-action='STYLE']");
+        cy.get(styleSelector).eq(0).click({force: true}).then(() => {
+          cy.get('body').click(0, 0);
+          cy.getContentIframeBody().find(unhideLabelsCss).should('have.length', 0);
+        });
+        cy.deleteComponentByPath(switchDrop);
+      });
+    });
   })
 });