BACKLOG-23358 Add highlight test

src/javascript/JContent/CompareDialog/CompareDialog.jsx

@@ -43,14 +43,14 @@ const CompareDialog = () => {
     }
 
     return (
-        <Dialog fullScreen open={open}>
+        <Dialog fullScreen open={open} data-sel-role="compare-dialog">
             <Header className={styles.header}
                     title={t('jcontent:label.contentManager.actions.compareStagingToLive')}
                     mainActions={[
                         <div key="mainActions" className={styles.actionsRoot}>
                             <Button variant="ghost"
                                     size="big"
-                                    data-sel-role="refresh"
+                                    data-sel-role="compare-refresh"
                                     className={styles.actionItem}
                                     icon={<Reload/>}
                                     label={t('jcontent:label.contentManager.refresh')}

tests/cypress/e2e/jcontent/compareStagingLive.cy.ts

@@ -0,0 +1,71 @@
+import {JContent} from '../../page-object';
+import gql from 'graphql-tag';
+import {publishAndWaitJobEnding} from '@jahia/cypress';
+
+describe('JContent preview tests', () => {
+    const addContent = gql`mutation MyMutation {
+      jcr {
+        addNode(
+          name: "addedNode"
+          parentPathOrId: "/sites/jcontentSite/home/area-main"
+          primaryNodeType: "jnt:bigText"
+          properties: { name: "text", language: "en", value: "test added" }
+        ) {
+          uuid
+        }
+      }
+    }`;
+
+    const path = 'pages/home#(jcontent:(compareDialog:(open:!t,path:/sites/jcontentSite/home)))';
+
+    beforeEach(() => {
+        cy.executeGroovy('jcontent/createSite.groovy', {SITEKEY: 'jcontentSite'});
+        cy.apollo({mutationFile: 'jcontent/createContent.graphql'});
+        publishAndWaitJobEnding('/sites/jcontentSite');
+        cy.apollo({mutation: addContent});
+        cy.loginAndStoreSession(); // Edit in chief
+    });
+
+    it('should open preview with url', () => {
+        const jcontent = JContent.visit('jcontentSite', 'en', path);
+        const compareDialog = jcontent.getCompareDialog();
+        compareDialog.get().get('h1').contains('Compare staging vs live version').should('exist');
+        compareDialog.getStagingFrame().should('be.visible');
+        compareDialog.getLiveFrame().should('be.visible');
+    });
+
+    it('should highlight changes staging vs live', () => {
+        const jcontent = JContent.visit('jcontentSite', 'en', path);
+        const compareDialog = jcontent.getCompareDialog();
+        compareDialog.get().get('h1').contains('Compare staging vs live version').should('exist');
+        compareDialog.highlightToggle();
+        compareDialog.getStagingFrame().find('span[class="diff-html-added"]').should('exist');
+        compareDialog.highlightToggle();
+        compareDialog.getStagingFrame().find('span[class="diff-html-added"]').should('not.exist');
+    });
+
+    it('should refresh to original state', () => {
+        const jcontent = JContent.visit('jcontentSite', 'en', path);
+        const compareDialog = jcontent.getCompareDialog();
+        compareDialog.get().get('h1').contains('Compare staging vs live version').should('exist');
+        compareDialog.highlightToggle();
+        compareDialog.getStagingFrame().find('span[class="diff-html-added"]').should('exist');
+        compareDialog.refresh();
+        compareDialog.getStagingFrame().find('span[class="diff-html-added"]').should('not.exist');
+    });
+
+    it('should publish', () => {
+        const jcontent = JContent.visit('jcontentSite', 'en', path);
+        const compareDialog = jcontent.getCompareDialog();
+        compareDialog.get().get('h1').contains('Compare staging vs live version').should('exist');
+        compareDialog.getStagingFrame().find('div').contains('test added').should('exist');
+        compareDialog.getLiveFrame().find('div').contains('test added').should('not.exist');
+        compareDialog.publish();
+        compareDialog.getLiveFrame().find('div[class="col-md-12"]').contains('test added', {timeout: 2000}).should('exist');
+    });
+
+    afterEach(() => {
+        cy.logout();
+        cy.executeGroovy('jcontent/deleteSite.groovy', {SITEKEY: 'jcontentSite'});
+    });
+});

tests/cypress/e2e/jcontent/preview.cy.ts

@@ -28,17 +28,6 @@ describe('JContent preview tests', () => {
                 'test 7');
     });
 
-    it('should open preview with url', () => {
-        JContent.visit('jcontentSite', 'en', 'pages/home#(jcontent:(compareDialog:(open:!t,path:/sites/jcontentSite/home)))');
-        cy.get('h1').contains('Compare staging vs live version').should('exist');
-        cy.get('iframe[data-sel-role="staging-frame"]')
-            .its('0.contentDocument.body')
-            .should('be.visible');
-        cy.get('iframe[data-sel-role="live-frame"]')
-            .its('0.contentDocument.body')
-            .should('be.visible');
-    });
-
     afterEach(() => {
         cy.logout();
         cy.executeGroovy('jcontent/deleteSite.groovy', {SITEKEY: 'jcontentSite'});

tests/cypress/fixtures/jcontent/createSite.groovy

@@ -6,7 +6,7 @@ JahiaSitesService sitesService = JahiaSitesService.getInstance();
 if (sitesService.getSiteByKey("SITEKEY") == null) {
     JahiaSite site = sitesService.addSite(SiteCreationInfo.builder().
             siteKey("SITEKEY").
-            serverName("localhost").
+            serverName("jahia").
             title("SITEKEY").
             templateSet("dx-base-demo-templates").
             modulesToDeploy(new String[]{"event", "bootstrap3-components", "article"}).

tests/cypress/page-object/compareDialog.ts

@@ -0,0 +1,43 @@
+import {BaseComponent, getComponentBySelector} from '@jahia/cypress';
+
+export class CompareDialog extends BaseComponent {
+    static defaultSelector = 'div[data-sel-role="compare-dialog"]';
+
+    getStagingFrame() {
+        return this.get()
+            .get('iframe[data-sel-role="staging-frame"]')
+            .its('0.contentDocument.body').should('not.be.empty')
+            .then(cy.wrap);
+    }
+
+    getLiveFrame() {
+        return this.get()
+            .get('iframe[data-sel-role="live-frame"]')
+            .its('0.contentDocument.body').should('not.be.empty')
+            .then(cy.wrap);
+    }
+
+    highlightToggle() {
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
+        cy.wait(2000);
+        this.get().get('button[data-sel-role="highlight"]').should('be.visible').click();
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
+        cy.wait(2000);
+    }
+
+    refresh() {
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
+        cy.wait(2000);
+        this.get().get('button[data-sel-role="compare-refresh"]').should('be.visible').click();
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
+        cy.wait(2000);
+    }
+
+    publish() {
+        this.get().find('[data-sel-role="publish"]').click();
+        cy.get('#publishNowButton').should('be.visible').find('button').contains('Publish now').click();
+        cy.get('div[id="notistack-snackbar"]', {timeout: 5000}).contains('Publication completed', {timeout: 5000}).should('exist');
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
+        cy.wait(3000);
+    }
+}

tests/cypress/page-object/jcontent.ts

@@ -23,6 +23,7 @@ import {ContentGrid} from './contentGrid';
 import {BreadcrumbPageBuilder} from './breadcrumb';
 import ClickOptions = Cypress.ClickOptions;
 import VisitOptions = Cypress.VisitOptions;
+import {CompareDialog} from './compareDialog';
 
 export class JContent extends BasePage {
     secondaryNav: SecondaryNav;
@@ -212,6 +213,10 @@ export class JContent extends BasePage {
     clickPublishNow() {
         cy.get('#publishNowButton').should('be.visible').find('button').contains('Publish now').click();
     }
+
+    getCompareDialog(): CompareDialog {
+        return getComponent(CompareDialog);
+    }
 }
 
 export class JContentPageBuilder extends JContent {