[Feature #125730] Added cypress

Jenkinsfile

@@ -49,6 +49,31 @@ pipeline {
       }
     }
 
+    stage('Integration tests') {
+      steps {
+        parallel(
+
+          "Cypress": {
+            node(label: 'docker') {
+              script {
+                try {
+                  sh '''docker pull plone; docker run -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
+                  sh '''docker pull eeacms/eprtr-frontend; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" eeacms/eprtr-frontend cypress'''
+                } finally {
+                  sh '''mkdir -p cypress-reports'''
+                  sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/cypress/videos cypress-reports/'''
+                  stash name: "cypress-reports", includes: "cypress-reports/**/*"
+                  archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true
+                  sh '''echo "$(docker stop $BUILD_TAG-plone; docker rm -v $BUILD_TAG-plone; docker rm -v $BUILD_TAG-cypress)" '''
+                }
+              }
+            }
+          }
+
+        )
+      }
+    }
+
     stage('Upgrade demo') {
       when {
         buildingTag()

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "viewportWidth": 1280
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/helpers/blocks/index.js

@@ -0,0 +1,22 @@
+import { openSidebar, closeSidebar } from '../index';
+
+export const changePageTitle = (title) => {
+  cy.get('.documentFirstHeading > .public-DraftStyleDefault-block')
+    .clear()
+    .type(title)
+    .get('.documentFirstHeading span[data-text]')
+    .contains(title);
+};
+
+export const addBlock = (groupTitle, groupId, blockId) => {
+  closeSidebar();
+  cy.get('.ui.basic.icon.button.block-add-button').first().click();
+  cy.get('.blocks-chooser .title').contains(groupTitle).click();
+  cy.get(`.content.active.${groupId} .button.${blockId}`).click();
+  cy.get(`#page-edit div.block-editor-${blockId}`);
+  openSidebar();
+};
+
+export const selectBlock = (blockId) => {
+  cy.get(`#page-edit div.block-editor-${blockId}`).click();
+};

cypress/helpers/index.js

@@ -0,0 +1,3 @@
+export { openSidebar, closeSidebar, openSidebarTab } from './sidebar';
+export { changePageTitle, addBlock, selectBlock } from './blocks';
+export { setInputValue, filtersModal } from './utils';

cypress/helpers/sidebar/index.js

@@ -0,0 +1,36 @@
+export const openSidebar = () => {
+  cy.get('#sidebar > div.sidebar-container').then(($sidebar) => {
+    if ($sidebar.hasClass('collapsed')) {
+      cy.get('#sidebar > div.sidebar-container > button.ui.button.trigger')
+        .first()
+        .click();
+    }
+  });
+};
+
+export const closeSidebar = () => {
+  cy.get('#sidebar > div.sidebar-container').then(($sidebar) => {
+    if (!$sidebar.hasClass('collapsed')) {
+      cy.get('#sidebar > div.sidebar-container > button.ui.button.trigger')
+        .first()
+        .click();
+    }
+  });
+};
+
+export const openSidebarTab = (tab) => {
+  openSidebar();
+  cy.get(
+    '#sidebar > div.sidebar-container div.ui.pointing.secondary.attached.tabular.formtabs.menu > a.item',
+  )
+    .contains(tab)
+    .then(($tab) => {
+      if (!$tab.hasClass('active')) {
+        cy.get(
+          '#sidebar > div.sidebar-container div.ui.pointing.secondary.attached.tabular.formtabs.menu > a.item',
+        )
+          .contains(tab)
+          .click();
+      }
+    });
+};

cypress/helpers/utils.js

@@ -0,0 +1,55 @@
+// React overrides the DOM node's setter, so get the original, as per the linked Stack Overflow
+const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
+  window.HTMLTextAreaElement.prototype,
+  'value',
+).set;
+const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+  window.HTMLInputElement.prototype,
+  'value',
+).set;
+
+export const setInputValue = (selector, value, type = 'input') => {
+  cy.get(selector).then(($input) => {
+    return new Promise((resolve) => {
+      const input = $input[0];
+      input.value = value;
+      if (type === 'input') {
+        nativeInputValueSetter.call(input, value);
+      } else if (type === 'textarea') {
+        nativeTextAreaValueSetter.call(input, value);
+      }
+      input.dispatchEvent(new Event('input', { value, bubbles: true }));
+      input.dispatchEvent(new Event('change', { value, bubbles: true }));
+      resolve();
+    });
+  });
+};
+
+export const filtersModal = {
+  addFilter: (id, value) => {
+    cy.get(id).click();
+    cy.get(`${id} > div.visible.menu.transition > div span`)
+      .contains(value)
+      .click();
+  },
+  open: () => {
+    cy.get('button#modal-show-button', {
+      timeout: 10000,
+    }).click();
+  },
+  triggerSearch: () => {
+    cy.get('button#modal-search-button', {
+      timeout: 10000,
+    }).click();
+  },
+  triggerClear: () => {
+    cy.get('button#modal-clear-button', {
+      timeout: 10000,
+    }).click();
+  },
+  search: (text) => {
+    cy.get('.filters-container .search-input-container input').type(text);
+    cy.wait(2000);
+    cy.get('.filters-container .search-input-container input').type('{enter}');
+  },
+};

cypress/integration/sites.js

@@ -0,0 +1,46 @@
+import { setupBeforeEach, tearDownAfterEach } from '../support';
+import { changePageTitle, addBlock } from '../helpers';
+import { openSidebarTab } from '../helpers';
+import { setInputValue, filtersModal } from '../helpers/utils';
+import { tableBlockData } from '../helpers/data';
+
+describe('Sites in DiscodataTableBlock', () => {
+  beforeEach(setupBeforeEach);
+  afterEach(tearDownAfterEach);
+
+  it('Add Blocks', () => {
+    changePageTitle('Sites in DiscodataTableBlock');
+    addBlock('Eprtr Blocks', 'eprtr_blocks', 'eprtr_filters_block');
+    addBlock('Data blocks', 'data_blocks', 'discodata_table_block');
+    openSidebarTab('Block');
+    setInputValue(
+      'textarea#field-field-widget-importExport',
+      tableBlockData,
+      'textarea',
+    );
+    cy.get('textarea#field-field-widget-importExport').type(' ');
+    cy.get('#toolbar-save').click();
+    cy.wait(2000);
+    filtersModal.open();
+    filtersModal.addFilter('#countries_0', 'Romania');
+    filtersModal.addFilter('#reporting_years_0', '2018');
+    filtersModal.triggerSearch();
+    cy.get('.browse-table .ui.pagination.menu a:nth-last-child(2)').should(
+      'have.text',
+      '42',
+    );
+    cy.wait(2000);
+    filtersModal.search('Site: 101AR0000.SITE');
+    cy.get('.browse-table .ui.pagination.menu a:nth-last-child(2)').should(
+      'have.text',
+      '1',
+    );
+    cy.wait(2000);
+    cy.get(
+      '#page-document > div.browse-table > table > tbody > tr:nth-last-child(2) > td:nth-child(1) > p',
+    ).should('have.text', 'Site: 101AR0000.SITE');
+    filtersModal.open();
+    filtersModal.triggerClear();
+    filtersModal.triggerSearch();
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};