Merge pull request #8 from eea/develop

Cypress coverage

.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;

CHANGELOG.md

@@ -4,10 +4,18 @@ 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).
 
+#### [1.2.4](https://github.com/eea/volto-tabs-block/compare/1.2.3...1.2.4)
+
+- [JENKINS] - Fix stylelint [`2319baa`](https://github.com/eea/volto-tabs-block/commit/2319baa8258828cd3847715779bc21d472bd7677)
+- Cypress coverage [`5bb3732`](https://github.com/eea/volto-tabs-block/commit/5bb3732b12f9ebf333577bf810059bf12a41ea25)
+- Added z-index [`5aa8221`](https://github.com/eea/volto-tabs-block/commit/5aa8221d20c02e34788571d9231e73431c1043fe)
+
 #### [1.2.3](https://github.com/eea/volto-tabs-block/compare/1.2.2...1.2.3)
 
+> 24 May 2021
+
+- Value of tabs is not visible in real time bug fixed [`#7`](https://github.com/eea/volto-tabs-block/pull/7)
 - Value of tabs is not visible in real time [`#6`](https://github.com/eea/volto-tabs-block/pull/6)
-- Value of tabs is not visible in real time bug fixed [`deeef1b`](https://github.com/eea/volto-tabs-block/commit/deeef1bef0e26c340994792026d47094218c52df)
 - Fix block remaining selected when not needed [`a4d7ef7`](https://github.com/eea/volto-tabs-block/commit/a4d7ef736879cbe6d6e99cc3060256505ca4094b)
 
 #### [1.2.2](https://github.com/eea/volto-tabs-block/compare/1.2.1...1.2.2)

Jenkinsfile

@@ -2,11 +2,11 @@ pipeline {
   agent any
 
   environment {
-    GIT_NAME = "volto-tabs-block"
-    NAMESPACE = "@eeacms"
-    SONARQUBE_TAGS = "volto.eea.europa.eu"
-    DEPENDENCIES = "@eeacms/volto-block-style"
-  }
+        GIT_NAME = "volto-tabs-block"
+        NAMESPACE = "@eeacms"
+        SONARQUBE_TAGS = "volto.eea.europa.eu"
+        DEPENDENCIES = ""
+    }
 
   stages {
 
@@ -16,19 +16,58 @@ pipeline {
 
           "ES lint": {
             node(label: 'docker') {
-              sh '''docker pull plone/volto-addon-ci; docker run -i --rm --name="$BUILD_TAG-eslint" -e NAMESPACE="$NAMESPACE" -e DEPENDENCIES="$DEPENDENCIES" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci eslint'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-eslint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci eslint'''
             }
           },
 
           "Style lint": {
             node(label: 'docker') {
-              sh '''docker pull plone/volto-addon-ci; docker run -i --rm --name="$BUILD_TAG-stylelint" -e NAMESPACE="$NAMESPACE" -e DEPENDENCIES="$DEPENDENCIES" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci stylelint'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-stylelint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci stylelint'''
             }
           },
 
           "Prettier": {
             node(label: 'docker') {
-              sh '''docker pull plone/volto-addon-ci; docker run -i --rm --name="$BUILD_TAG-prettier" -e NAMESPACE="$NAMESPACE" -e DEPENDENCIES="$DEPENDENCIES" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci prettier'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-prettier" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci prettier'''
+            }
+          }
+        )
+      }
+    }
+
+    stage('Tests') {
+      steps {
+        parallel(
+
+          "Volto": {
+            node(label: 'docker') {
+              script {
+                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/**"
+                  archiveArtifacts artifacts: "xunit-reports/unit_tests_log.txt", fingerprint: true
+                  publishHTML (target : [
+                    allowMissing: false,
+                    alwaysLinkToLastBuild: true,
+                    keepAll: true,
+                    reportDir: 'xunit-reports/coverage/lcov-report',
+                    reportFiles: 'index.html',
+                    reportName: 'UTCoverage',
+                    reportTitles: 'Unit Tests Code Coverage'
+                  ])
+                } finally {
+                    catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        junit testResults: 'xunit-reports/junit.xml', allowEmptyResults: true
+                    }
+                   sh script: '''docker rm -v $BUILD_TAG-volto''', returnStatus: true
+                }
+              }
             }
           }
         )
@@ -44,13 +83,35 @@ pipeline {
               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 DEPENDENCIES="$DEPENDENCIES" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci cypress'''
+                  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 {
-                  sh '''mkdir -p cypress-reports'''
-                  sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/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)" '''
+                  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
+
+                  }
                 }
               }
             }
@@ -59,7 +120,32 @@ pipeline {
         )
       }
     }
-
+
+    stage('Report to SonarQube') {
+      // Exclude Pull-Requests
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+        }
+      }
+      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,./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'''
+            }
+          }
+        }
+      }
+    }
+
     stage('Pull Request') {
       when {
         not {
@@ -75,13 +161,14 @@ pipeline {
             }
            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') {
+
+    stage('Release') {
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
@@ -92,34 +179,30 @@ pipeline {
         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'''
+            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'''
           }
         }
       }
     }
 
-
   }
 
   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']]
+        )
       }
     }
   }

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);
+                }
+            });
+        }
     });
 }
 

cypress.json

@@ -1,4 +1,12 @@
 {
   "baseUrl": "http://localhost:3000",
-  "viewportWidth": 1280
+  "viewportWidth": 1280,
+  "defaultCommandTimeout": 15000,
+  "reporter": "junit",
+  "video": true,
+  "reporterOptions": {
+    "mochaFile": "cypress/reports/cypress-[hash].xml",
+    "jenkinsMode": true,
+    "toConsole": true
+  }
 }

cypress/plugins/index.js

@@ -18,4 +18,9 @@
 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 */
 };

cypress/support/index.js

@@ -19,6 +19,11 @@ 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({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,10 +24,14 @@
     "slick-carousel": "^1.8.1",
     "@eeacms/volto-block-style": "^2.5.1"
   },
+  "devDependencies": {
+    "@cypress/code-coverage": "^3.9.5",
+    "babel-plugin-transform-class-properties": "^6.24.1"
+  },
   "scripts": {
     "release": "release-it",
     "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
-    "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",

src/less/carousel.less

@@ -7,6 +7,8 @@
 .loadAddonVariables();
 
 .tabs-block {
+  z-index: 0;
+
   > .styled {
     display: flex !important;
     flex: 1;

src/less/tabs-block.less

@@ -51,6 +51,8 @@ div#view {
 }
 
 .tabs-block {
+  z-index: 0;
+
   [data-rbd-draggable-context-id] {
     margin-bottom: 0;
   }