@eeacms/volto-group-block 4.2.2 → 4.3.2

package/.coverage.babel.config.js

@@ -0,0 +1,9 @@
+const defaultBabel = require('@plone/volto/babel');
+
+function applyDefault(api) {
+  const voltoBabel = defaultBabel(api);
+  voltoBabel.plugins.push('@babel/plugin-transform-modules-commonjs', 'transform-class-properties', 'istanbul');
+  return voltoBabel;
+}
+
+module.exports = applyDefault;

package/CHANGELOG.md

@@ -4,9 +4,35 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [4.3.2](https://github.com/eea/volto-group-block/compare/4.3.1...4.3.2)
+
+- Correct Cypress tests [`#13`](https://github.com/eea/volto-group-block/pull/13)
+- Refs #142010 - Optimize Volto-addons gitflow pipelines [`bc36cf5`](https://github.com/eea/volto-group-block/commit/bc36cf58c39e2b43c2fbf5189df6ddefc1260857)
+
+#### [4.3.1](https://github.com/eea/volto-group-block/compare/4.3.0...4.3.1)
+
+> 11 October 2021
+
+- Possibility to ignore spaces with maxChars [`#11`](https://github.com/eea/volto-group-block/pull/11)
+- No space count [`#10`](https://github.com/eea/volto-group-block/pull/10)
+
+#### [4.3.0](https://github.com/eea/volto-group-block/compare/4.2.3...4.3.0)
+
+> 24 June 2021
+
+- Refactor counter to use CSS class instead of inline style [`#9`](https://github.com/eea/volto-group-block/pull/9)
+- Show help icon only if block instructions differ from section instructions [`a4ca4e5`](https://github.com/eea/volto-group-block/commit/a4ca4e58968dcfb947072a255c8f797df7977852)
+
+#### [4.2.3](https://github.com/eea/volto-group-block/compare/4.2.2...4.2.3)
+
+> 27 May 2021
+
+- Cypress coverage [`#8`](https://github.com/eea/volto-group-block/pull/8)
+
 #### [4.2.2](https://github.com/eea/volto-group-block/compare/4.2.1...4.2.2)
 
-- [JENKINS] - Auto-release pipeline [`#7`](https://github.com/eea/volto-group-block/pull/7)
+> 14 May 2021
+
 
 #### [4.2.1](https://github.com/eea/volto-group-block/compare/4.2.0...4.2.1)
 
@@ -86,7 +112,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Drop volto-blocks-form dependency [`#6`](https://github.com/eea/volto-group-block/pull/6)
 - Release 3.0.0 [`a83216e`](https://github.com/eea/volto-group-block/commit/a83216ed496b3a14ea49fd9697cd50ac64866092)
-- Cleanup Jenkinsfile DEPENDENCIES [`9d2a5d0`](https://github.com/eea/volto-group-block/commit/9d2a5d04308ecef93ca2682d928d0919b0f861ea)
 - Cosmetics [`03d6ed8`](https://github.com/eea/volto-group-block/commit/03d6ed8cbb796bacef3b3b78a1cee4114874033c)
 - Fix focus management [`35327d7`](https://github.com/eea/volto-group-block/commit/35327d7b457beeed15b7129541bb1665cab4586b)
 - Change imports from volto core [`d1dcc14`](https://github.com/eea/volto-group-block/commit/d1dcc14116fa408731d545d45d01669a06563b46)
@@ -129,19 +154,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.0.0 [`b6ef873`](https://github.com/eea/volto-group-block/commit/b6ef873cb6f61e17db66fdd4de1d9d4902a66fc6)
 - Update package meta info [`143b7d4`](https://github.com/eea/volto-group-block/commit/143b7d44438d7afa5e346a9d21a85352df4e925f)
-- [JENKINS] - Fix SONAR tags [`512b56c`](https://github.com/eea/volto-group-block/commit/512b56ce931aa4c14f353e2a4c5bbbb614fe632f)
-- [JENKINS] - Update [`2204acd`](https://github.com/eea/volto-group-block/commit/2204acdefee84114bd403f9772a1e610348dc3dd)
-- [JENKINS] - Fix code-analysis [`88a5b3d`](https://github.com/eea/volto-group-block/commit/88a5b3d58b951ecfbc6e813accf065ca5e8be990)
-- [JENKINS] - Fix SonarQube report [`7fca879`](https://github.com/eea/volto-group-block/commit/7fca879b526be822cd63312ed51447d6e6a59cf2)
-- [JENKINS] - Fix unit tests pipeline [`5b9b28f`](https://github.com/eea/volto-group-block/commit/5b9b28f1de060635f1c665a80939bfa66918a918)
-- [JENKINS] - Add jest unit tests [`d8af5b7`](https://github.com/eea/volto-group-block/commit/d8af5b7932988b490a079d86079e359b5584fd7f)
-- [JENKINS] - Fix develop badge [`857b4ab`](https://github.com/eea/volto-group-block/commit/857b4ab5bc0aa9947c2ed76f35cec7d409c7fa66)
-- [JENKINS] - Add jenkins builds badges [`6cebd3e`](https://github.com/eea/volto-group-block/commit/6cebd3e970a840c4951c614a5d130dab05ae553f)
-- [JENKINS] - Cleanup console.log [`df38b6f`](https://github.com/eea/volto-group-block/commit/df38b6f7a630176e911ff89263c21e519ab44efa)
-- [JENKINS] - Fix eslint pipeline [`ca7c87a`](https://github.com/eea/volto-group-block/commit/ca7c87a4f74f2b0ea354ea5369f0700b8bee92af)
-- [JENKINS] - Fix style [`0e2c5a3`](https://github.com/eea/volto-group-block/commit/0e2c5a39b2f785ae1d942d39e7f8b2789dafc795)
 - Add Jenkinkins pipeline [`866a4e1`](https://github.com/eea/volto-group-block/commit/866a4e14ea1eb8f5adb01222e576e5ab6dc73a70)
-- yarn prettier [`e3fe0a3`](https://github.com/eea/volto-group-block/commit/e3fe0a36b89878769341b45198d6c9e2f2584d15)
 
 #### [0.1.3](https://github.com/eea/volto-group-block/compare/0.1.2...0.1.3)
 
@@ -186,5 +199,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Render meta block [`0d44560`](https://github.com/eea/volto-group-block/commit/0d4456011ca56454068a54c610250b02df4ccb3b)
 - Implement meta block allowedBlocks settings [`f24feb1`](https://github.com/eea/volto-group-block/commit/f24feb1a1751f04841c21c7cd52a517fb02074ba)
 - Edit meta block [`236d291`](https://github.com/eea/volto-group-block/commit/236d29156fa835a7aa54eecdb4f120de0d64b271)
-- yarn bootstrap [`e009dfb`](https://github.com/eea/volto-group-block/commit/e009dfb6b9b74d101a6722f0982a5359fc522b6b)
 - Initial commit [`6a7b0de`](https://github.com/eea/volto-group-block/commit/6a7b0deb8f873d1462fd6a9c61edfc1562b3aace)

package/Jenkinsfile

@@ -4,12 +4,37 @@ pipeline {
   environment {
         GIT_NAME = "volto-group-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,forest.eea.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,biodiversity.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu"
+        DEPENDENCIES = ""
     }
 
   stages {
 
+    stage('Release') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          branch 'master'
+        }
+      }
+      steps {
+        node(label: 'docker') {
+          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
+            sh '''docker pull eeacms/gitflow'''
+            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
+          }
+        }
+      }
+    }
+
     stage('Code') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          not { branch 'master' }
+          not { changelog '.*^Automated release [0-9\\.]+$' }
+        }
+      }
       steps {
         parallel(
 
@@ -35,6 +60,12 @@ pipeline {
     }
 
     stage('Tests') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          not { changelog '.*^Automated release [0-9\\.]+$' }
+        }
+      }
       steps {
         parallel(
 
@@ -44,13 +75,13 @@ pipeline {
                 try {
                   sh '''docker pull plone/volto-addon-ci'''
                   sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci'''
+                  sh '''rm -rf xunit-reports'''
                   sh '''mkdir -p xunit-reports'''
                   sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/coverage xunit-reports/'''
                   sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/junit.xml xunit-reports/'''
                   sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/unit_tests_log.txt xunit-reports/'''
-                  stash name: "xunit-reports", includes: "xunit-reports/**/*"
-                  junit 'xunit-reports/junit.xml'
-                  archiveArtifacts artifacts: 'xunit-reports/unit_tests_log.txt', fingerprint: true
+                  stash name: "xunit-reports", includes: "xunit-reports/**"
+                  archiveArtifacts artifacts: "xunit-reports/unit_tests_log.txt", fingerprint: true
                   publishHTML (target : [
                     allowMissing: false,
                     alwaysLinkToLastBuild: true,
@@ -61,7 +92,10 @@ pipeline {
                     reportTitles: 'Unit Tests Code Coverage'
                   ])
                 } finally {
-                  sh '''docker rm -v $BUILD_TAG-volto'''
+                    catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        junit testResults: 'xunit-reports/junit.xml', allowEmptyResults: true
+                    }
+                   sh script: '''docker rm -v $BUILD_TAG-volto''', returnStatus: true
                 }
               }
             }
@@ -70,23 +104,79 @@ pipeline {
       }
     }
 
-    stage('Report to SonarQube') {
-      // Exclude Pull-Requests
+    stage('Integration tests') {
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
+          not { changelog '.*^Automated release [0-9\\.]+$' }
         }
       }
+      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 plone/volto-addon-ci; 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" -e DEPENDENCIES="$DEPENDENCIES" plone/volto-addon-ci cypress'''
+                } finally {
+                  try {
+                    sh '''rm -rf cypress-reports cypress-results cypress-coverage'''
+                    sh '''mkdir -p cypress-reports cypress-results cypress-coverage'''
+                    sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/videos cypress-reports/'''
+                    sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/reports cypress-results/'''
+                    coverage = sh script: '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/coverage cypress-coverage/''', returnStatus: true
+                    if ( coverage == 0 ) {
+                         publishHTML (target : [allowMissing: false,
+                             alwaysLinkToLastBuild: true,
+                             keepAll: true,
+                             reportDir: 'cypress-coverage/coverage/lcov-report',
+                             reportFiles: 'index.html',
+                             reportName: 'CypressCoverage',
+                             reportTitles: 'Integration Tests Code Coverage'])
+                    }
+                    archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true
+                    stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true
+                  }
+                  finally {
+                    catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true
+                    }
+                    sh script: "docker stop $BUILD_TAG-plone", returnStatus: true
+                    sh script: "docker rm -v $BUILD_TAG-plone", returnStatus: true
+                    sh script: "docker rm -v $BUILD_TAG-cypress", returnStatus: true
+
+                  }
+                }
+              }
+            }
+          }
+
+        )
+      }
+    }
+
+    stage('Report to SonarQube') {
+      when {
+          environment name: 'CHANGE_ID', value: ''
+          anyOf {
+            branch 'master'
+            branch 'develop'
+          }
+          not { changelog '.*^Automated release [0-9\\.]+$' }
+      }
       steps {
         node(label: 'swarm') {
           script{
             checkout scm
             unstash "xunit-reports"
+            unstash "cypress-coverage"
             def scannerHome = tool 'SonarQubeScanner';
             def nodeJS = tool 'NodeJS11';
             withSonarQubeEnv('Sonarqube') {
               sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-              sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info -Dsonar.sources=./src -Dsonar.coverage.exclusions=src/**/*.test.js -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
+              sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
               sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done'''
             }
           }
@@ -104,56 +194,36 @@ pipeline {
       steps {
         node(label: 'docker') {
           script {
-            if ( env.CHANGE_BRANCH != "develop" &&  !( env.CHANGE_BRANCH.startsWith("hotfix")) ) {
-                error "Pipeline aborted due to PR not made from develop or hotfix branch"
+            if ( env.CHANGE_BRANCH != "develop" ) {
+                error "Pipeline aborted due to PR not made from develop branch"
             }
            withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) {
             sh '''docker pull eeacms/gitflow'''
-            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-pr" -e GIT_CHANGE_TARGET="$CHANGE_TARGET" -e GIT_CHANGE_BRANCH="$CHANGE_BRANCH" -e GIT_CHANGE_AUTHOR="$CHANGE_AUTHOR" -e GIT_CHANGE_TITLE="$CHANGE_TITLE" -e GIT_TOKEN="$GITHUB_TOKEN" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e GIT_ORG="$GIT_ORG" -e GIT_NAME="$GIT_NAME" eeacms/gitflow'''
+            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-pr" -e GIT_CHANGE_TARGET="$CHANGE_TARGET" -e GIT_CHANGE_BRANCH="$CHANGE_BRANCH" -e GIT_CHANGE_AUTHOR="$CHANGE_AUTHOR" -e GIT_CHANGE_TITLE="$CHANGE_TITLE" -e GIT_TOKEN="$GITHUB_TOKEN" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e GIT_ORG="$GIT_ORG" -e GIT_NAME="$GIT_NAME" -e LANGUAGE=javascript eeacms/gitflow'''
            }
           }
         }
       }
     }
 
-    stage('Release') {
-      when {
-        allOf {
-          environment name: 'CHANGE_ID', value: ''
-          branch 'master'
-        }
-      }
-      steps {
-        node(label: 'docker') {
-          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
-            sh '''docker pull eeacms/gitflow'''
-            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" eeacms/gitflow'''
-          }
-        }
-      }
-    }
-
   }
 
   post {
+    always {
+      cleanWs(cleanWhenAborted: true, cleanWhenFailure: true, cleanWhenNotBuilt: true, cleanWhenSuccess: true, cleanWhenUnstable: true, deleteDirs: true)
+    }
     changed {
       script {
-        def url = "${env.BUILD_URL}/display/redirect"
-        def status = currentBuild.currentResult
-        def subject = "${status}: Job '${env.JOB_NAME} [${env.BUILD_NUMBER}]'"
-        def summary = "${subject} (${url})"
-        def details = """<h1>${env.JOB_NAME} - Build #${env.BUILD_NUMBER} - ${status}</h1>
-                         <p>Check console output at <a href="${url}">${env.JOB_BASE_NAME} - #${env.BUILD_NUMBER}</a></p>
+        def details = """<h1>${env.JOB_NAME} - Build #${env.BUILD_NUMBER} - ${currentBuild.currentResult}</h1>
+                         <p>Check console output at <a href="${env.BUILD_URL}/display/redirect">${env.JOB_BASE_NAME} - #${env.BUILD_NUMBER}</a></p>
                       """
-
-        def color = '#FFFF00'
-        if (status == 'SUCCESS') {
-          color = '#00FF00'
-        } else if (status == 'FAILURE') {
-          color = '#FF0000'
-        }
-
-        emailext (subject: '$DEFAULT_SUBJECT', to: '$DEFAULT_RECIPIENTS', body: details)
+        emailext(
+        subject: '$DEFAULT_SUBJECT',
+        body: details,
+        attachLog: true,
+        compressLog: true,
+        recipientProviders: [[$class: 'DevelopersRecipientProvider'], [$class: 'CulpritsRecipientProvider']]
+        )
       }
     }
   }

package/bootstrap

@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs');
+const ejs = require('ejs');
 
 const currentDir = path.basename(process.cwd());
 
@@ -8,13 +9,23 @@ const bootstrap = function (ofile) {
         if (err) {
             return console.log(err);
         }
-        var result = data.replace(/volto-addon-template/g, currentDir);
-
-        fs.writeFile(ofile, result, 'utf8', function (err) {
+        const result = ejs.render(data, {
+            addonName: `@eeacms/${currentDir}`,
+            name: currentDir
+        });
+        const output = ofile.replace('.tpl', '');
+        fs.writeFile(output, result, 'utf8', function (err) {
             if (err) {
                 return console.log(err);
             }
         });
+        if (ofile.includes('.tpl')) {
+            fs.unlink(ofile, (err) => {
+                if (err) {
+                    return console.error(err);
+                }
+            });
+        }
     });
 }
 

package/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"
+}

package/cypress/integration/block-basics.js

@@ -0,0 +1,33 @@
+import { setupBeforeEach, tearDownAfterEach } from '../support';
+
+describe('Blocks Tests', () => {
+  beforeEach(setupBeforeEach);
+  afterEach(tearDownAfterEach);
+
+  it('Add Block: Empty', () => {
+    // without this the clear command below does nothing sometimes
+    cy.wait(500);
+
+    // Change page title
+    cy.get('[contenteditable=true]').first().clear();
+
+    cy.get('[contenteditable=true]').first().type('My Add-on Page');
+
+    cy.get('.documentFirstHeading').contains('My Add-on Page');
+
+    cy.get('[contenteditable=true]').first().type('{enter}');
+
+    // Add block
+    cy.get('.ui.basic.icon.button.block-add-button').first().click();
+    cy.get('.blocks-chooser .title').contains('Media').click();
+    cy.get('.content.active.media .button.image').contains('Image').click();
+
+    // Save
+    cy.get('#toolbar-save').click();
+    cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+
+    // then the page view should contain our changes
+    cy.contains('My Add-on Page');
+    cy.get('.block.image');
+  });
+});

package/cypress/plugins/index.js

@@ -0,0 +1,26 @@
+/// <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
+  /* coverage-start
+  require('@cypress/code-coverage/task')(on, config)
+  on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
+  return config
+  coverage-end */
+};

package/cypress/support/commands.js

@@ -0,0 +1,315 @@
+/* eslint no-console: ["error", { allow: ["log"] }] */
+
+// --- AUTOLOGIN -------------------------------------------------------------
+Cypress.Commands.add('autologin', () => {
+  let api_url, user, password;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  user = 'admin';
+  password = 'admin';
+
+  return cy
+    .request({
+      method: 'POST',
+      url: `${api_url}/@login`,
+      headers: { Accept: 'application/json' },
+      body: { login: user, password: password },
+    })
+    .then((response) => cy.setCookie('auth_token', response.body.token));
+});
+
+// --- CREATE CONTENT --------------------------------------------------------
+Cypress.Commands.add(
+  'createContent',
+  ({
+    contentType,
+    contentId,
+    contentTitle,
+    path = '',
+    allow_discussion = false,
+  }) => {
+    let api_url, auth;
+    api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+    auth = {
+      user: 'admin',
+      pass: 'admin',
+    };
+    if (contentType === 'File') {
+      return cy.request({
+        method: 'POST',
+        url: `${api_url}/${path}`,
+        headers: {
+          Accept: 'application/json',
+        },
+        auth: auth,
+        body: {
+          '@type': contentType,
+          id: contentId,
+          title: contentTitle,
+          file: {
+            data: 'dGVzdGZpbGUK',
+            encoding: 'base64',
+            filename: 'lorem.txt',
+            'content-type': 'text/plain',
+          },
+          allow_discussion: allow_discussion,
+        },
+      });
+    }
+    if (contentType === 'Image') {
+      return cy.request({
+        method: 'POST',
+        url: `${api_url}/${path}`,
+        headers: {
+          Accept: 'application/json',
+        },
+        auth: auth,
+        body: {
+          '@type': contentType,
+          id: contentId,
+          title: contentTitle,
+          image: {
+            data:
+              'iVBORw0KGgoAAAANSUhEUgAAANcAAAA4CAMAAABZsZ3QAAAAM1BMVEX29fK42OU+oMvn7u9drtIPisHI4OhstdWZyt4fkcXX5+sAg74umMhNp86p0eJ7vNiKw9v/UV4wAAAAAXRSTlMAQObYZgAABBxJREFUeF7tmuty4yAMhZG4X2zn/Z92J5tsBJwWXG/i3XR6frW2Y/SBLIRAfaQUDNt8E5tLUt9BycfcKfq3R6Mlfyimtx4rzp+K3dtibXkor99zsEqLYZltblTecciogoh+TXfY1Ve4dn07rCDGG9dHSEEOg/GmXl0U1XDxTKxNK5De7BxsyyBr6gGm2/vPxKJ8F6f7BXKfRMp1xIWK9A+5ks25alSb353dWnDJN1k35EL5f8dVGifTf/4tjUuuFq7u4srmXC60yAmldLXIWbg65RKU87lcGxJCFqUPv0IacW0PmSivOZFLE908inPToMmii/roG+MRV/O8FU88i8tFsxV3a06MFUw0Qu7RmAtdV5/HVVaOVMTWNOWSwMljLhzhcB6XIS7OK5V6AvRDNN7t5VJWQs1J40UmalbK56usBG/CuCHSYuc+rkUGeMCViNRARPrzW52N3oQLe6WifNliSuuGaH3czbVNudI9s7ZLUCLHVwWlyES522o1t14uvmbblmVTKqFjaZYJFSTPP4dLL1kU1z7p0lzdbRulmEWLxoQX+z9ce7A8GqEEucllLxePuZwdJl1Lezu0hoswvTPt61DrFcRuujV/2cmlxaGBC7Aw6cpovGANwRiSdOAWJ5AGy4gLL64dl0QhUEAuEUNws+XxV+OKGPdw/hESGYF9XEGaFC7sNLMSXWJjHsnanYi87VK428N2uxpOjOFANcagLM5l+7mSycM8KknZpKLcGi6jmzWGr/vLurZ/0g4u9AZuAoeb5r1ceQhyiTPY1E4wUR6u/F3H2ojSpXMMriBPT9cezTto8Cx+MsglHL4fv1Rxrb1LVw9yvyQpJ3AhFnLZfuRLH2QsOG3FGGD20X/th/u5bFAt16Bt308KjF+MNOXgl/SquIEySX3GhaZvc67KZbDxcCDORz2N8yCWPaY5lyQZO7lQ29fnZbt3Xu6qoge4+DjXl/MocySPOp9rlvdyznahRyHEYd77v3LhugOXDv4J65QXfl803BDAdaWBEDhfVx7nKofjoVCgxnUAqw/UAUDPn788BDvQuG4TDtdtUPvzjSlXAB8DvaDOhhrmhwbywylXAm8CvaouikJTL93gs3y7Yy4VYbIxOHrcMizPqWOjqO9l3Uz52kibQy4xxOgqhJvD+w5rvokOcAlGvNCfeqCv1ste1stzLm0f71Iq3ZfTrPfuE5nhPtF+LvQE2lffQC7pYtQy3tdzdrKvd5TLVVzDetScS3nEKmmwDyt1Cev1kX3YfbvzNK4fzrlw+cB6vm+uiUgf2zdXI62241LawCb7Pi5FXFPF8KpzDoF/Sw2lg+GrHNbno1mhPu+VCF/vfMnw06PnUl6j48dVHD3jHNHPua+fc3o/5yp/zsGi0vYtzi3Pz5mHd4T6BWMIlewacd63AAAAAElFTkSuQmCC',
+            encoding: 'base64',
+            filename: 'image.png',
+            'content-type': 'image/png',
+          },
+        },
+      });
+    }
+    if (['Document', 'Folder', 'CMSFolder'].includes(contentType)) {
+      return cy
+        .request({
+          method: 'POST',
+          url: `${api_url}/${path}`,
+          headers: {
+            Accept: 'application/json',
+          },
+          auth: auth,
+          body: {
+            '@type': contentType,
+            id: contentId,
+            title: contentTitle,
+            blocks: {
+              'd3f1c443-583f-4e8e-a682-3bf25752a300': { '@type': 'title' },
+              '7624cf59-05d0-4055-8f55-5fd6597d84b0': { '@type': 'text' },
+            },
+            blocks_layout: {
+              items: [
+                'd3f1c443-583f-4e8e-a682-3bf25752a300',
+                '7624cf59-05d0-4055-8f55-5fd6597d84b0',
+              ],
+            },
+            allow_discussion: allow_discussion,
+          },
+        })
+        .then(() => console.log(`${contentType} created`));
+    } else {
+      return cy
+        .request({
+          method: 'POST',
+          url: `${api_url}/${path}`,
+          headers: {
+            Accept: 'application/json',
+          },
+          auth: auth,
+          body: {
+            '@type': contentType,
+            id: contentId,
+            title: contentTitle,
+            allow_discussion: allow_discussion,
+          },
+        })
+        .then(() => console.log(`${contentType} created`));
+    }
+  },
+);
+
+// --- REMOVE CONTENT --------------------------------------------------------
+Cypress.Commands.add('removeContent', (path) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'admin',
+  };
+  return cy
+    .request({
+      method: 'DELETE',
+      url: `${api_url}/${path}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {},
+    })
+    .then(() => console.log(`${path} removed`));
+});
+
+// --- SET WORKFLOW ----------------------------------------------------------
+Cypress.Commands.add(
+  'setWorkflow',
+  ({
+    path = '/',
+    actor = 'admin',
+    review_state = 'publish',
+    time = '1995-07-31T18:30:00',
+    title = '',
+    comment = '',
+    effective = '2018-01-21T08:00:00',
+    expires = '2019-01-21T08:00:00',
+    include_children = true,
+  }) => {
+    let api_url, auth;
+    api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+    auth = {
+      user: 'admin',
+      pass: 'admin',
+    };
+    return cy.request({
+      method: 'POST',
+      url: `${api_url}/${path}/@workflow/${review_state}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {
+        actor: actor,
+        review_state: review_state,
+        time: time,
+        title: title,
+        comment: comment,
+        effective: effective,
+        expires: expires,
+        include_children: include_children,
+      },
+    });
+  },
+);
+
+// --- waitForResourceToLoad ----------------------------------------------------------
+Cypress.Commands.add('waitForResourceToLoad', (fileName, type) => {
+  const resourceCheckInterval = 40;
+
+  return new Cypress.Promise((resolve) => {
+    const checkIfResourceHasBeenLoaded = () => {
+      const resource = cy
+        .state('window')
+        .performance.getEntriesByType('resource')
+        .filter((entry) => !type || entry.initiatorType === type)
+        .find((entry) => entry.name.includes(fileName));
+
+      if (resource) {
+        resolve();
+
+        return;
+      }
+
+      setTimeout(checkIfResourceHasBeenLoaded, resourceCheckInterval);
+    };
+
+    checkIfResourceHasBeenLoaded();
+  });
+});
+
+// Low level command reused by `setSelection` and low level command `setCursor`
+Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
+  cy.wrap(subject).trigger('mousedown').then(fn).trigger('mouseup');
+
+  cy.document().trigger('selectionchange');
+  return cy.wrap(subject);
+});
+
+Cypress.Commands.add(
+  'setSelection',
+  { prevSubject: true },
+  (subject, query, endQuery) => {
+    return cy.wrap(subject).selection(($el) => {
+      if (typeof query === 'string') {
+        const anchorNode = getTextNode($el[0], query);
+        const focusNode = endQuery ? getTextNode($el[0], endQuery) : anchorNode;
+        const anchorOffset = anchorNode.wholeText.indexOf(query);
+        const focusOffset = endQuery
+          ? focusNode.wholeText.indexOf(endQuery) + endQuery.length
+          : anchorOffset + query.length;
+        setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+      } else if (typeof query === 'object') {
+        const el = $el[0];
+        const anchorNode = getTextNode(el.querySelector(query.anchorQuery));
+        const anchorOffset = query.anchorOffset || 0;
+        const focusNode = query.focusQuery
+          ? getTextNode(el.querySelector(query.focusQuery))
+          : anchorNode;
+        const focusOffset = query.focusOffset || 0;
+        setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+      }
+    });
+  },
+);
+
+// Low level command reused by `setCursorBefore` and `setCursorAfter`, equal to `setCursorAfter`
+Cypress.Commands.add(
+  'setCursor',
+  { prevSubject: true },
+  (subject, query, atStart) => {
+    return cy.wrap(subject).selection(($el) => {
+      const node = getTextNode($el[0], query);
+      const offset =
+        node.wholeText.indexOf(query) + (atStart ? 0 : query.length);
+      const document = node.ownerDocument;
+      document.getSelection().removeAllRanges();
+      document.getSelection().collapse(node, offset);
+    });
+    // Depending on what you're testing, you may need to chain a `.click()` here to ensure
+    // further commands are picked up by whatever you're testing (this was required for Slate, for example).
+  },
+);
+
+Cypress.Commands.add(
+  'setCursorBefore',
+  { prevSubject: true },
+  (subject, query) => {
+    cy.wrap(subject).setCursor(query, true);
+  },
+);
+
+Cypress.Commands.add(
+  'setCursorAfter',
+  { prevSubject: true },
+  (subject, query) => {
+    cy.wrap(subject).setCursor(query);
+  },
+);
+
+// Helper functions
+function getTextNode(el, match) {
+  const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+  if (!match) {
+    return walk.nextNode();
+  }
+
+  let node;
+  while ((node = walk.nextNode())) {
+    if (node.wholeText.includes(match)) {
+      return node;
+    }
+  }
+}
+
+function setBaseAndExtent(...args) {
+  const document = args[0].ownerDocument;
+  document.getSelection().removeAllRanges();
+  document.getSelection().setBaseAndExtent(...args);
+}
+
+Cypress.Commands.add('navigate', (route = '') => {
+  return cy.window().its('appHistory').invoke('push', route);
+});
+
+Cypress.Commands.add('store', () => {
+  return cy.window().its('store').invoke('getStore', '');
+});
+
+Cypress.Commands.add('settings', (key, value) => {
+  return cy.window().its('settings');
+});

package/cypress/support/index.js

@@ -0,0 +1,53 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+/* coverage-start
+//Generate code-coverage
+import '@cypress/code-coverage/support';
+coverage-end */
+
+export const setupBeforeEach = () => {
+  cy.autologin();
+  cy.createContent({
+    contentType: 'Folder',
+    contentId: 'cypress',
+    contentTitle: 'Cypress',
+  });
+  cy.createContent({
+    contentType: 'Document',
+    contentId: 'my-page',
+    contentTitle: 'My Page',
+    path: 'cypress',
+  });
+  cy.visit('/cypress/my-page');
+  cy.waitForResourceToLoad('@navigation');
+  cy.waitForResourceToLoad('@breadcrumbs');
+  cy.waitForResourceToLoad('@actions');
+  cy.waitForResourceToLoad('@types');
+  cy.waitForResourceToLoad('my-page');
+  cy.navigate('/cypress/my-page/edit');
+  cy.get(`.block.title h1`);
+};
+
+export const tearDownAfterEach = () => {
+  cy.autologin();
+  cy.removeContent('cypress');
+};

package/cypress.json

@@ -6,6 +6,7 @@
   "video": true,
   "reporterOptions": {
     "mochaFile": "cypress/reports/cypress-[hash].xml",
+    "jenkinsMode": true,
     "toConsole": true
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-group-block",
-  "version": "4.2.2",
+  "version": "4.3.2",
   "description": "volto-group-block: Volto block to be used to group other blocks",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -19,15 +19,21 @@
     "url": "git@github.com:eea/volto-group-block.git"
   },
   "dependencies": {},
+  "devDependencies": {
+    "@cypress/code-coverage": "^3.9.5",
+    "babel-plugin-transform-class-properties": "^6.24.1"
+  },
   "scripts": {
     "release": "release-it",
-    "bootstrap": "node bootstrap",
+    "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
     "stylelint:overrides": "../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",
     "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
     "prettier": "../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'",
     "prettier:fix": "../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'",
     "lint": "../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
-    "lint:fix": "../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'"
+    "lint:fix": "../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'",
+    "cypress:run": "../../../node_modules/cypress/bin/cypress run",
+    "cypress:open": "../../../node_modules/cypress/bin/cypress open"
   }
 }

package/src/components/manage/Blocks/Group/Edit.jsx

@@ -14,6 +14,7 @@ import { Button, Segment } from 'semantic-ui-react';
 import EditBlockWrapper from './EditBlockWrapper';
 import EditSchema from './EditSchema';
 import helpSVG from '@plone/volto/icons/help.svg';
+import cx from 'classnames';
 import './editor.less';
 
 const Edit = (props) => {
@@ -29,9 +30,8 @@ const Edit = (props) => {
   } = props;
 
   const metadata = props.metadata || props.properties;
-  const properties = isEmpty(data?.data?.blocks)
-    ? emptyBlocksForm()
-    : data.data;
+  const data_blocks = data?.data?.blocks;
+  const properties = isEmpty(data_blocks) ? emptyBlocksForm() : data.data;
 
   const [selectedBlock, setSelectedBlock] = useState(
     properties.blocks_layout.items[0],
@@ -39,7 +39,7 @@ const Edit = (props) => {
 
   React.useEffect(() => {
     if (
-      isEmpty(data?.data?.blocks) &&
+      isEmpty(data_blocks) &&
       properties.blocks_layout.items[0] !== selectedBlock
     ) {
       setSelectedBlock(properties.blocks_layout.items[0]);
@@ -48,59 +48,79 @@ const Edit = (props) => {
         data: properties,
       });
     }
-  }, [
-    onChangeBlock,
-    properties,
-    selectedBlock,
-    block,
-    data,
-    data?.data?.blocks,
-  ]);
+  }, [onChangeBlock, properties, selectedBlock, block, data, data_blocks]);
 
   const blockState = {};
   let charCount = 0;
 
+  /**
+   * Count the number of characters that are anything except using Regex
+   * @param {string} paragraph
+   * @returns
+   */
+  const countCharsWithoutSpaces = (paragraph) => {
+    const regex = /[^\s\\]/g;
+
+    return (paragraph.match(regex) || []).length;
+  };
+
+  /**
+   * Count the number of characters
+   * @param {string} paragraph
+   * @returns
+   */
+  const countCharsWithSpaces = (paragraph) => {
+    return paragraph?.length || 0;
+  };
+
+  /**
+   * Recursively look for any block that contains text or plaintext
+   * @param {Object} blocksObject
+   * @returns
+   */
   const countTextInBlocks = (blocksObject) => {
     let groupCharCount = 0;
 
     Object.keys(blocksObject).forEach((blockId) => {
-      const charCountTemp = blocksObject[blockId]?.plaintext
-        ? blocksObject[blockId]?.plaintext.length
+      const foundText = blocksObject[blockId]?.plaintext
+        ? blocksObject[blockId]?.plaintext
         : blocksObject[blockId]?.text?.blocks[0]?.text
-        ? blocksObject[blockId].text.blocks[0].text.length
+        ? blocksObject[blockId].text.blocks[0].text
         : blocksObject[blockId]?.data?.blocks
         ? countTextInBlocks(blocksObject[blockId]?.data?.blocks)
         : blocksObject[blockId]?.blocks
         ? countTextInBlocks(blocksObject[blockId]?.blocks)
-        : 0;
-      groupCharCount = groupCharCount + charCountTemp;
+        : '';
+      const resultText =
+        typeof foundText === 'string' || foundText instanceof String
+          ? foundText
+          : '';
+
+      groupCharCount += props.data.ignoreSpaces
+        ? countCharsWithoutSpaces(resultText)
+        : countCharsWithSpaces(resultText);
     });
 
     return groupCharCount;
   };
 
   const showCharCounter = () => {
-    if (props.data?.data?.blocks) {
-      charCount = countTextInBlocks(props.data?.data?.blocks);
+    if (data_blocks) {
+      charCount = countTextInBlocks(data_blocks);
     }
   };
   showCharCounter();
 
-  const colors = { ok: '#CCC', warning: 'darkorange', danger: 'crimson' };
-  const counterStyle = {
-    color:
-      charCount < Math.ceil(props.data.maxChars / 1.05)
-        ? colors.ok
-        : charCount < props.data.maxChars
-        ? colors.warning
-        : colors.danger,
-    textAlign: 'end',
-  };
+  const counterClass =
+    charCount < Math.ceil(props.data.maxChars / 1.05)
+      ? 'info'
+      : charCount < props.data.maxChars
+      ? 'warning'
+      : 'danger';
 
   const counterComponent = props.data.maxChars ? (
     <p
-      style={counterStyle}
-      className="counter"
+      className={cx('counter', counterClass)}
       onClick={() => {
         setSelectedBlock();
         props.setSidebarTab(1);

package/src/components/manage/Blocks/Group/EditBlockWrapper.jsx

@@ -86,6 +86,12 @@ class EditBlockWrapper extends React.Component {
       ? data.required
       : includes(config.blocks.requiredBlocks, type);
 
+    // Get editing instructions from block settings or props
+    let instructions = data?.instructions?.data || data?.instructions;
+    if (!instructions || instructions === '<p><br/></p>') {
+      instructions = '';
+    }
+
     return (
       <div ref={this.blockNode}>
         <div
@@ -104,7 +110,7 @@ class EditBlockWrapper extends React.Component {
           )}
           {visible && (
             <div className="block-toolbar">
-              {extraControls}
+              {instructions ? extraControls : ''}
 
               {!disabled && (
                 <>

package/src/components/manage/Blocks/Group/LayoutSchema.jsx

@@ -11,6 +11,7 @@ const Schema = {
         'allowedBlocks',
         'as',
         'maxChars',
+        'ignoreSpaces',
         'readOnlySettings',
         'disableInnerButtons',
         'required',
@@ -67,6 +68,11 @@ const Schema = {
       type: 'integer',
       factory: 'Integer',
     },
+    ignoreSpaces: {
+      title: 'Ignore spaces',
+      description: 'Ignore spaces while calculating maximum characters',
+      type: 'boolean',
+    },
     required: {
       title: 'Required',
       description: "Don't allow deletion of this block",

package/src/components/manage/Blocks/Group/editor.less

@@ -50,6 +50,19 @@
     font-size: 85%;
     grid-gap: 0.5em;
     grid-template-columns: 98% auto;
+    text-align: end;
+
+    &.info {
+      color: #ccc;
+    }
+
+    &.danger {
+      color: crimson;
+    }
+
+    &.warning {
+      color: darkorange;
+    }
   }
 
   .blocks-form {