@eeacms/volto-slate-footnote 6.3.0 → 7.0.0

package/.env

@@ -0,0 +1,3 @@
+# Jest configuration variables
+# - possible values: ON, OFF
+JEST_USE_SETUP=OFF

package/.eslintrc.js

@@ -0,0 +1,65 @@
+const fs = require('fs');
+const path = require('path');
+const projectRootPath = fs.realpathSync(__dirname + '/../../../');
+
+let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
+let configFile;
+if (fs.existsSync(`${projectRootPath}/tsconfig.json`))
+  configFile = `${projectRootPath}/tsconfig.json`;
+else if (fs.existsSync(`${projectRootPath}/jsconfig.json`))
+  configFile = `${projectRootPath}/jsconfig.json`;
+
+if (configFile) {
+  const jsConfig = require(configFile).compilerOptions;
+  const pathsConfig = jsConfig.paths;
+  if (pathsConfig['@plone/volto'])
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
+}
+
+const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
+const reg = new AddonConfigurationRegistry(projectRootPath);
+
+// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
+const addonAliases = Object.keys(reg.packages).map((o) => [
+  o,
+  reg.packages[o].modulePath,
+]);
+
+const addonExtenders = reg.getEslintExtenders().map((m) => require(m));
+
+const defaultConfig = {
+  extends: `${voltoPath}/.eslintrc`,
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', '@plone/volto/src'],
+          ['@plone/volto-slate', '@plone/volto/packages/volto-slate/src'],
+          ...addonAliases,
+          ['@package', `${__dirname}/src`],
+          ['@root', `${__dirname}/src`],
+          ['~', `${__dirname}/src`],
+        ],
+        extensions: ['.js', '.jsx', '.json'],
+      },
+      'babel-plugin-root-import': {
+        rootPathSuffix: 'src',
+      },
+    },
+  },
+  rules: {
+    'react/jsx-no-target-blank': [
+      'error',
+      {
+        allowReferrer: true,
+      },
+    ],
+  }
+};
+
+const config = addonExtenders.reduce(
+  (acc, extender) => extender.modify(acc),
+  defaultConfig,
+);
+
+module.exports = config;

package/CHANGELOG.md

@@ -4,7 +4,15 @@ 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).
 
-### [6.3.0](https://github.com/eea/volto-slate-footnote/compare/6.2.3...6.3.0) - 27 March 2024
+### [7.0.0](https://github.com/eea/volto-slate-footnote/compare/6.3.0...7.0.0) - 22 April 2024
+
+#### :rocket: New Features
+
+- feat: Release 7.0.0 - Volto 17 support [alin - [`9d04cb5`](https://github.com/eea/volto-slate-footnote/commit/9d04cb54fca5e925785511883573fab7a5ff4c76)]
+
+#### :hammer_and_wrench: Others
+
+### [6.3.0](https://github.com/eea/volto-slate-footnote/compare/6.2.3...6.3.0) - 28 March 2024
 
 #### :hammer_and_wrench: Others
 

package/Jenkinsfile

@@ -9,11 +9,12 @@ pipeline {
   environment {
     GIT_NAME = "volto-slate-footnote"
     NAMESPACE = "@eeacms"
-    SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,water.europa.eu-marine,climate-adapt.eea.europa.eu,climate-advisory-board.devel4cph.eea.europa.eu,climate-advisory-board.europa.eu,www.eea.europa.eu-en,insitu-frontend.eionet.europa.eu"
+    SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,water.europa.eu-marine,climate-adapt.eea.europa.eu,climate-advisory-board.devel4cph.eea.europa.eu,climate-advisory-board.europa.eu,www.eea.europa.eu-en,insitu-frontend.eionet.europa.eu,insitu.copernicus.eu"
     DEPENDENCIES = ""
     BACKEND_PROFILES = "eea.kitkat:testing"
     BACKEND_ADDONS = ""
-    VOLTO = "16"
+    VOLTO = "17"
+    VOLTO16_BREAKING_CHANGES = "no"
     IMAGE_NAME = BUILD_TAG.toLowerCase()
   }
 
@@ -44,6 +45,7 @@ pipeline {
       }
       steps {
         script {
+            checkout scm
             withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) {
               check_result = sh script: '''docker run --pull always -i --rm --name="$IMAGE_NAME-gitflow-check" -e GIT_TOKEN="$GITHUB_TOKEN" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_ORG="$GIT_ORG" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /check_if_testing_needed.sh''', returnStatus: true
 
@@ -61,7 +63,6 @@ pipeline {
           allOf {
             not { environment name: 'CHANGE_ID', value: '' }
             environment name: 'CHANGE_TARGET', value: 'develop'
-            environment name: 'SKIP_TESTS', value: ''
           }
           allOf {
             environment name: 'CHANGE_ID', value: ''
@@ -69,25 +70,27 @@ pipeline {
               not { changelog '.*^Automated release [0-9\\.]+$' }
               branch 'master'
             }
-            environment name: 'SKIP_TESTS', value: ''
           }
         }
       }
-      stages {
-        stage('Build test image') {
-          steps {
-            checkout scm
-            sh '''docker build --pull --build-arg="VOLTO_VERSION=$VOLTO" --build-arg="ADDON_NAME=$NAMESPACE/$GIT_NAME"  --build-arg="ADDON_PATH=$GIT_NAME" . -t $IMAGE_NAME-frontend'''
+      parallel {
+
+      stage('Volto 17') {
+        agent { node { label 'docker-1.13'} }
+        stages {
+      	  stage('Build test image') {
+            steps {
+              sh '''docker build --pull --build-arg="VOLTO_VERSION=$VOLTO" --build-arg="ADDON_NAME=$NAMESPACE/$GIT_NAME"  --build-arg="ADDON_PATH=$GIT_NAME" . -t $IMAGE_NAME-frontend'''
+            }
           }
-        }
-        
-        stage('Fix code') {
-          when {
+
+          stage('Fix code') {
+            when {
               environment name: 'CHANGE_ID', value: ''
               not { branch 'master' }
-          }
-          steps {
-            script {
+            }
+            steps {
+              script {
               fix_result = sh(script: '''docker run --name="$IMAGE_NAME-fix" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend ci-fix''', returnStatus: true)
               sh '''docker cp $IMAGE_NAME-fix:/app/src/addons/$GIT_NAME/src .'''
               sh '''docker rm -v $IMAGE_NAME-fix'''
@@ -105,31 +108,31 @@ pipeline {
                 sh '''exit 1'''
               }
             }
+            }
           }
-        }
 
-        stage('ES lint') {
-          steps {
-            sh '''docker run --rm --name="$IMAGE_NAME-eslint" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend lint'''
+          stage('ES lint') {
+            when { environment name: 'SKIP_TESTS', value: '' }
+            steps {
+              sh '''docker run --rm --name="$IMAGE_NAME-eslint" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend lint'''
+            }
           }
-        }
 
-        stage('Style lint') {
-          steps {
-            sh '''docker run --rm --name="$IMAGE_NAME-stylelint" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend stylelint'''
+          stage('Style lint') {
+            when { environment name: 'SKIP_TESTS', value: '' }
+            steps {
+              sh '''docker run --rm --name="$IMAGE_NAME-stylelint" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend stylelint'''
+            }
           }
-        }
 
-        stage('Prettier') {
-          steps {
-            sh '''docker run --rm --name="$IMAGE_NAME-prettier" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend prettier'''
+          stage('Prettier') {
+            when { environment name: 'SKIP_TESTS', value: '' }
+            steps {
+              sh '''docker run --rm --name="$IMAGE_NAME-prettier" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME  $IMAGE_NAME-frontend prettier'''
+            }
           }
-        }
-
-        stage('Coverage Tests') {
-          parallel {
-            
-            stage('Unit tests') {
+          stage('Unit tests') {
+              when { environment name: 'SKIP_TESTS', value: '' }
               steps {
                 script {
                   try {
@@ -155,17 +158,24 @@ pipeline {
                   }
                 }
               }
-            }
+          }
             
-            stage('Integration tests') {
+          stage('Integration tests') {
+              when { environment name: 'SKIP_TESTS', value: '' }
               steps {
                 script {
                   try {
                     sh '''docker run --pull always --rm -d --name="$IMAGE_NAME-plone" -e SITE="Plone" -e PROFILES="$BACKEND_PROFILES" -e ADDONS="$BACKEND_ADDONS" eeacms/plone-backend'''
-                    sh '''docker run -d --shm-size=3g --link $IMAGE_NAME-plone:plone --name="$IMAGE_NAME-cypress" -e "RAZZLE_INTERNAL_API_PATH=http://plone:8080/Plone" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend start-ci'''
+                    sh '''docker run -d --shm-size=4g --link $IMAGE_NAME-plone:plone --name="$IMAGE_NAME-cypress" -e "RAZZLE_INTERNAL_API_PATH=http://plone:8080/Plone" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend start-ci'''
+                    frontend = sh script:'''docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress make check-ci''', returnStatus: true
+                    if ( frontend != 0 ) {
+                      sh '''docker logs $IMAGE_NAME-cypress; exit 1'''
+                    }
+
                     sh '''timeout -s 9 1800 docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress make cypress-ci'''
                   } finally {
                     try {
+                      if ( frontend == 0 ) {
                       sh '''rm -rf cypress-videos cypress-results cypress-coverage cypress-screenshots'''
                       sh '''mkdir -p cypress-videos cypress-results cypress-coverage cypress-screenshots'''
                       videos = sh script: '''docker cp $IMAGE_NAME-cypress:/app/src/addons/$GIT_NAME/cypress/videos cypress-videos/''', returnStatus: true
@@ -189,6 +199,7 @@ pipeline {
                         sh '''for file in $(find cypress-results -name *.xml); do if [ $(grep -E 'failures="[1-9].*"' $file | wc -l) -eq 0 ]; then testname=$(grep -E 'file=.*failures="0"' $file | sed 's#.* file=".*\\/\\(.*\\.[jsxt]\\+\\)" time.*#\\1#' );  rm -f cypress-videos/videos/$testname.mp4; fi; done'''
                         archiveArtifacts artifacts: 'cypress-videos/**/*.mp4', fingerprint: true, allowEmptyArchive: true
                       }
+                      }
                     } finally {
                       catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
                         junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true
@@ -204,16 +215,7 @@ pipeline {
                   }
                 }
               }
-            }
           }
-        }
-      }
-      post {
-        always {
-            sh script: "docker rmi $IMAGE_NAME-frontend", returnStatus: true
-        }
-      }
-    }
 
     stage('Report to SonarQube') {
       when {
@@ -221,9 +223,11 @@ pipeline {
           allOf {
             not { environment name: 'CHANGE_ID', value: '' }
             environment name: 'CHANGE_TARGET', value: 'develop'
+            environment name: 'SKIP_TESTS', value: ''
           }
           allOf {
             environment name: 'CHANGE_ID', value: ''
+            environment name: 'SKIP_TESTS', value: ''
             anyOf {
               allOf {
                 branch 'develop'
@@ -248,14 +252,107 @@ pipeline {
       }
     }
 
+
+        }
+      }
+
+      stage('Volto 16') { 
+        agent { node { label 'integration'} }
+        when { 
+          environment name: 'SKIP_TESTS', value: ''
+          not { environment name: 'VOLTO16_BREAKING_CHANGES', value: 'yes' }
+        }
+        stages {
+      		stage('Build test image') {
+            steps {
+              sh '''docker build --pull --build-arg="VOLTO_VERSION=16" --build-arg="ADDON_NAME=$NAMESPACE/$GIT_NAME"  --build-arg="ADDON_PATH=$GIT_NAME" . -t $IMAGE_NAME-frontend16'''
+            }
+          }
+
+             stage('Unit tests Volto 16') {
+              steps {
+                script {
+                  try {
+                    sh '''docker run --name="$IMAGE_NAME-volto16" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend16 test-ci'''
+                    sh '''rm -rf xunit-reports16'''
+                    sh '''mkdir -p xunit-reports16'''
+                    sh '''docker cp $IMAGE_NAME-volto16:/app/junit.xml xunit-reports16/'''
+                } finally {
+                    catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        junit testResults: 'xunit-reports16/junit.xml', allowEmptyResults: true
+                    }
+                    sh script: '''docker rm -v $IMAGE_NAME-volto16''', returnStatus: true
+                  }
+                }
+              }
+            }
+
+           stage('Integration tests Volto 16') {
+              steps {
+                script {
+                  try {
+                    sh '''docker run --pull always --rm -d --name="$IMAGE_NAME-plone16" -e SITE="Plone" -e PROFILES="$BACKEND_PROFILES" -e ADDONS="$BACKEND_ADDONS" eeacms/plone-backend'''
+                    sh '''docker run -d --shm-size=4g --link $IMAGE_NAME-plone16:plone --name="$IMAGE_NAME-cypress16" -e "RAZZLE_INTERNAL_API_PATH=http://plone:8080/Plone" --entrypoint=make --workdir=/app/src/addons/$GIT_NAME $IMAGE_NAME-frontend16 start-ci'''
+                    frontend = sh script:'''docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress16 make check-ci''', returnStatus: true
+                    if ( frontend != 0 ) {
+                      sh '''docker logs $IMAGE_NAME-cypress16; exit 1'''
+                    }
+                    sh '''timeout -s 9 1800 docker exec --workdir=/app/src/addons/${GIT_NAME} $IMAGE_NAME-cypress16 make cypress-ci'''
+                  } finally {
+                    try {
+                      if ( frontend == 0 ) {
+                      sh '''rm -rf cypress-videos16 cypress-results16 cypress-coverage16 cypress-screenshots16'''
+                      sh '''mkdir -p cypress-videos16 cypress-results16 cypress-coverage16 cypress-screenshots16'''
+                      videos = sh script: '''docker cp $IMAGE_NAME-cypress16:/app/src/addons/$GIT_NAME/cypress/videos cypress-videos16/''', returnStatus: true
+                      sh '''docker cp $IMAGE_NAME-cypress16:/app/src/addons/$GIT_NAME/cypress/reports cypress-results16/'''
+                      screenshots = sh script: '''docker cp $IMAGE_NAME-cypress16:/app/src/addons/$GIT_NAME/cypress/screenshots cypress-screenshots16''', returnStatus: true
+
+                      archiveArtifacts artifacts: 'cypress-screenshots16/**', fingerprint: true, allowEmptyArchive: true
+
+                      if ( videos == 0 ) {
+                        sh '''for file in $(find cypress-results16 -name *.xml); do if [ $(grep -E 'failures="[1-9].*"' $file | wc -l) -eq 0 ]; then testname=$(grep -E 'file=.*failures="0"' $file | sed 's#.* file=".*\\/\\(.*\\.[jsxt]\\+\\)" time.*#\\1#' );  rm -f cypress-videos16/videos/$testname.mp4; fi; done'''
+                        archiveArtifacts artifacts: 'cypress-videos16/**/*.mp4', fingerprint: true, allowEmptyArchive: true
+                      }
+                      }
+                    } finally {
+                      catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        junit testResults: 'cypress-results16/**/*.xml', allowEmptyResults: true
+                      }
+                      catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        sh '''docker logs $IMAGE_NAME-cypress16'''
+                      }
+                      sh script: "docker stop $IMAGE_NAME-cypress16", returnStatus: true
+                      sh script: "docker stop $IMAGE_NAME-plone16", returnStatus: true
+                      sh script: "docker rm -v $IMAGE_NAME-plone16", returnStatus: true
+                      sh script: "docker rm -v $IMAGE_NAME-cypress16", returnStatus: true
+                    }
+                  }
+                }
+              }
+            }
+
+        }
+      }
+      }
+      post {
+        always {
+            sh script: "docker rmi $IMAGE_NAME-frontend", returnStatus: true
+            sh script: "docker rmi $IMAGE_NAME-frontend16", returnStatus: true
+        }
+      }
+    }
+
+
     stage('SonarQube compare to master') {
       when {
         anyOf {
           allOf {
             not { environment name: 'CHANGE_ID', value: '' }
             environment name: 'CHANGE_TARGET', value: 'develop'
+            environment name: 'SKIP_TESTS', value: '' 
           }
           allOf {
+            environment name: 'SKIP_TESTS', value: '' 
             environment name: 'CHANGE_ID', value: ''
             branch 'develop'
             not { changelog '.*^Automated release [0-9\\.]+$' }
@@ -316,3 +413,4 @@ pipeline {
     }
   }
 }
+

package/Makefile

@@ -46,7 +46,7 @@ endif
 DIR=$(shell basename $$(pwd))
 NODE_MODULES?="../../../node_modules"
 PLONE_VERSION?=6
-VOLTO_VERSION?=16
+VOLTO_VERSION?=17
 ADDON_PATH="${DIR}"
 ADDON_NAME="@eeacms/${ADDON_PATH}"
 DOCKER_COMPOSE=PLONE_VERSION=${PLONE_VERSION} VOLTO_VERSION=${VOLTO_VERSION} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} docker compose
@@ -86,7 +86,7 @@ cypress-open:		## Open cypress integration tests
 
 .PHONY: cypress-run
 cypress-run:	## Run cypress integration tests
-	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run --browser chromium
+	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run
 
 .PHONY: test
 test:			## Run jest tests
@@ -98,7 +98,7 @@ test-update:	## Update jest tests snapshots
 
 .PHONY: stylelint
 stylelint:		## Stylelint
-	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'
+	$(NODE_MODULES)/.bin/stylelint --allow-empty-input 'src/**/*.{css,less}'
 
 .PHONY: stylelint-overrides
 stylelint-overrides:
@@ -106,7 +106,7 @@ stylelint-overrides:
 
 .PHONY: stylelint-fix
 stylelint-fix:	## Fix stylelint
-	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}' --fix
+	$(NODE_MODULES)/.bin/stylelint --allow-empty-input 'src/**/*.{css,less}' --fix
 	$(NODE_MODULES)/.bin/stylelint --custom-syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides' --fix
 
 .PHONY: prettier
@@ -119,11 +119,11 @@ prettier-fix:	## Fix prettier
 
 .PHONY: lint
 lint:			## ES Lint
-	$(NODE_MODULES)/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'
+	$(NODE_MODULES)/.bin/eslint --max-warnings=0 'src/**/*.{js,jsx}'
 
 .PHONY: lint-fix
 lint-fix:		## Fix ES Lint
-	$(NODE_MODULES)/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'
+	$(NODE_MODULES)/.bin/eslint --fix 'src/**/*.{js,jsx}'
 
 .PHONY: i18n
 i18n:			## i18n
@@ -155,8 +155,11 @@ start-ci:
 	cd ../..
 	yarn start
 
+.PHONY: check-ci
+check-ci:
+	$(NODE_MODULES)/.bin/wait-on -t 240000  http://localhost:3000
+
 .PHONY: cypress-ci
 cypress-ci:
 	$(NODE_MODULES)/.bin/wait-on -t 240000  http://localhost:3000
-	NODE_ENV=development make cypress-run
-
+	CYPRESS_API_PATH="${RAZZLE_DEV_PROXY_API_PATH}" NODE_ENV=development  $(NODE_MODULES)/cypress/bin/cypress run --browser chromium

package/cypress/support/e2e.js

@@ -35,10 +35,6 @@ export const slateBeforeEach = (contentType = 'Document') => {
     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');
 };

package/jest-addon.config.js

@@ -1,3 +1,5 @@
+require('dotenv').config({ path: __dirname + '/.env' })
+
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
   collectCoverageFrom: [
@@ -9,18 +11,26 @@ module.exports = {
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
-    '@package/(.*)$': '<rootDir>/src/$1',
-    '@root/(.*)$': '<rootDir>/src/$1',
+    '@package/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
+    '@root/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
+    '@eeacms/search/(.*)$': '<rootDir>/src/addons/volto-searchlib/searchlib/$1',
+    '@eeacms/search': '<rootDir>/src/addons/volto-searchlib/searchlib',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
-    '@plone/volto-slate':
+    '@plone/volto-slate$':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
+    '@plone/volto-slate/(.*)$':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src/$1',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
   },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@plone|@root|@package|@eeacms)/).*/',
+  ],
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
+    '^.+\\.ts(x)?$': 'babel-jest',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',
@@ -33,4 +43,9 @@ module.exports = {
       statements: 5,
     },
   },
-};
+  ...(process.env.JEST_USE_SETUP === 'ON' && {
+    setupFilesAfterEnv: [
+      '<rootDir>/node_modules/@eeacms/volto-slate-footnote/jest.setup.js',
+    ],
+  }),
+}

package/jest.setup.js

@@ -0,0 +1,65 @@
+import { jest } from '@jest/globals';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { blocksConfig } from '@plone/volto/config/Blocks';
+import installSlate from '@plone/volto-slate/index';
+
+var mockSemanticComponents = jest.requireActual('semantic-ui-react');
+var mockComponents = jest.requireActual('@plone/volto/components');
+var config = jest.requireActual('@plone/volto/registry').default;
+
+config.blocks.blocksConfig = {
+  ...blocksConfig,
+  ...config.blocks.blocksConfig,
+};
+
+jest.doMock('semantic-ui-react', () => ({
+  __esModule: true,
+  ...mockSemanticComponents,
+  Popup: ({ content, trigger }) => {
+    return (
+      <div className="popup">
+        <div className="trigger">{trigger}</div>
+        <div className="content">{content}</div>
+      </div>
+    );
+  },
+}));
+
+jest.doMock('@plone/volto/components', () => {
+  return {
+    __esModule: true,
+    ...mockComponents,
+    SidebarPortal: ({ children }) => <div id="sidebar">{children}</div>,
+  };
+});
+
+jest.doMock('@plone/volto/registry', () =>
+  [installSlate].reduce((acc, apply) => apply(acc), config),
+);
+
+const mockStore = configureStore([thunk]);
+
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({}),
+  }),
+);
+
+global.store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+    formatMessage: jest.fn(),
+  },
+  content: {
+    create: {},
+    subrequests: [],
+  },
+  connected_data_parameters: {},
+  screen: {
+    page: {
+      width: 768,
+    },
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-slate-footnote",
-  "version": "6.3.0",
+  "version": "7.0.0",
   "description": "volto-slate-footnote: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -23,6 +23,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "dotenv": "^16.3.2",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "md5": "^2.3.0"

package/src/editor/MultiSelectSearchWidget.jsx

@@ -28,139 +28,139 @@ const messages = defineMessages({
   },
 });
 
-const MultiSelectSearchWidget = injectLazyLibs('reactSelectAsyncCreateable')(
-  (props) => {
-    const [selectedOption, setSelectedOption] = useState([]);
-    const [defaultOptions, setDefaultOptions] = useState([]);
-    const [parentFootnote, setParentFootnote] = useState(props.value);
-
-    useEffect(() => {
-      if (props.value) {
-        const parentFootnoteCurrent = props.value;
-
-        const extraValues =
-          parentFootnoteCurrent && props.value.extra ? props.value.extra : [];
-        const selectedOptionCurrent = parentFootnoteCurrent.value
-          ? [...[parentFootnoteCurrent], ...extraValues]
-          : [];
-        setSelectedOption(selectedOptionCurrent);
-
-        // from choices (list of all footnotes available including current in value) get all not
-        // found in current in value
-        // consider that new footnotes have value and footnote undefined
-        const defaultOptions = (props.choices || []).filter(
-          (item) =>
-            !selectedOption.find(({ label }) => label === item.label) &&
-            item.value,
-        );
-        setDefaultOptions(defaultOptions);
-        setParentFootnote(props.value);
-      }
-    }, [props]); // eslint-disable-line
-
-    /**
-     * evaluate on Regex to filter results
-     * @param {Object} e - event
-     * @param {Object} data
-     */
-    const loadOptions = (search) => {
-      const re = new RegExp(escapeRegExp(search), 'i');
-      const isMatch = (result) => re.test(result.value);
-      const resultsFiltered = filter(props.choices, isMatch);
-
-      return Promise.resolve(resultsFiltered);
+const MultiSelectSearchWidget = injectLazyLibs('reactSelectAsyncCreateable')((
+  props,
+) => {
+  const [selectedOption, setSelectedOption] = useState([]);
+  const [defaultOptions, setDefaultOptions] = useState([]);
+  const [parentFootnote, setParentFootnote] = useState(props.value);
+
+  useEffect(() => {
+    if (props.value) {
+      const parentFootnoteCurrent = props.value;
+
+      const extraValues =
+        parentFootnoteCurrent && props.value.extra ? props.value.extra : [];
+      const selectedOptionCurrent = parentFootnoteCurrent.value
+        ? [...[parentFootnoteCurrent], ...extraValues]
+        : [];
+      setSelectedOption(selectedOptionCurrent);
+
+      // from choices (list of all footnotes available including current in value) get all not
+      // found in current in value
+      // consider that new footnotes have value and footnote undefined
+      const defaultOptions = (props.choices || []).filter(
+        (item) =>
+          !selectedOption.find(({ label }) => label === item.label) &&
+          item.value,
+      );
+      setDefaultOptions(defaultOptions);
+      setParentFootnote(props.value);
+    }
+  }, [props]); // eslint-disable-line
+
+  /**
+   * evaluate on Regex to filter results
+   * @param {Object} e - event
+   * @param {Object} data
+   */
+  const loadOptions = (search) => {
+    const re = new RegExp(escapeRegExp(search), 'i');
+    const isMatch = (result) => re.test(result.value);
+    const resultsFiltered = filter(props.choices, isMatch);
+
+    return Promise.resolve(resultsFiltered);
+  };
+
+  /**
+   * If the list is empty or the first is not parent, return true
+   * @param {Object[]} optionsList list of objects - footnotes
+   * @returns {boolean}
+   */
+  const isParetFootnoteRemoved = (optionsList) =>
+    !optionsList[0] || optionsList[0].value !== parentFootnote.value;
+
+  /**
+   * replace all parentFootnote data except uid, with the first from the list
+   * @param {Object[]} optionsList list of objects - footnotes
+   * @returns {Object}
+   */
+  const setParentFootnoteFromExtra = (optionsList) => {
+    const { footnote, label, value } = optionsList[0] || [];
+
+    return {
+      ...parentFootnote,
+      footnote: footnote || optionsList[0]?.value,
+      label,
+      value,
+      extra: optionsList.slice(1),
     };
-
-    /**
-     * If the list is empty or the first is not parent, return true
-     * @param {Object[]} optionsList list of objects - footnotes
-     * @returns {boolean}
-     */
-    const isParetFootnoteRemoved = (optionsList) =>
-      !optionsList[0] || optionsList[0].value !== parentFootnote.value;
-
-    /**
-     * replace all parentFootnote data except uid, with the first from the list
-     * @param {Object[]} optionsList list of objects - footnotes
-     * @returns {Object}
-     */
-    const setParentFootnoteFromExtra = (optionsList) => {
-      const { footnote, label, value } = optionsList[0] || [];
-
-      return {
-        ...parentFootnote,
-        footnote: footnote || optionsList[0]?.value,
-        label,
-        value,
-        extra: optionsList.slice(1),
+  };
+
+  /**
+   * Will make the footnotes object, that will be saved as first from optionsList
+   * the rest will be added to extra
+   * @param {Object[]} optionsList
+   * @returns
+   */
+  const setFootnoteFromSelection = (optionsList) => {
+    const extra = optionsList.slice(1).map((item) => {
+      const obj = {
+        ...item,
+        footnote: item.value,
       };
-    };
-
-    /**
-     * Will make the footnotes object, that will be saved as first from optionsList
-     * the rest will be added to extra
-     * @param {Object[]} optionsList
-     * @returns
-     */
-    const setFootnoteFromSelection = (optionsList) => {
-      const extra = optionsList.slice(1).map((item) => {
-        const obj = {
-          ...item,
-          footnote: item.value,
-        };
-        const { __isNew__: remove, extra, ...rest } = obj;
-        return rest;
-      });
-      return { ...parentFootnote, extra };
-    };
-
-    /**
-     * Handle the field change, will remake the result based on the new selected list
-     * @method handleChange
-     * @param {array} optionsList The selected options (already aggregated).
-     * @returns {undefined}
-     */
-    const handleChange = (optionsList) => {
-      const formattedSelectedOptions = optionsList.map((option) => ({
-        footnoteId: nanoid(5), // to be overwritten if already exists (keep as a reference to same text)
-        ...option,
-        uid: nanoid(5), // overwrite existing, thus creating new record for the same text
-        footnote: option.value,
-      }));
-      setSelectedOption(formattedSelectedOptions);
-
-      // manage case if parent footnotes (first from the options) was removed
-      const resultSelected = isParetFootnoteRemoved(formattedSelectedOptions)
-        ? setParentFootnoteFromExtra(formattedSelectedOptions)
-        : setFootnoteFromSelection(formattedSelectedOptions);
-
-      props.onChange({
-        footnote: resultSelected,
-      });
-    };
-
-    const AsyncCreatableSelect = props.reactSelectAsyncCreateable.default;
-    return (
-      <FormFieldWrapper {...props}>
-        <AsyncCreatableSelect
-          isDisabled={props.isDisabled}
-          className="react-select-container"
-          classNamePrefix="react-select"
-          defaultOptions={defaultOptions}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Option }}
-          isMulti
-          options={defaultOptions}
-          value={selectedOption || []}
-          loadOptions={loadOptions}
-          onChange={handleChange}
-          placeholder={props.intl.formatMessage(messages.select)}
-          noOptionsMessage={() => props.intl.formatMessage(messages.no_options)}
-        />
-      </FormFieldWrapper>
-    );
-  },
-);
+      const { __isNew__: remove, extra, ...rest } = obj;
+      return rest;
+    });
+    return { ...parentFootnote, extra };
+  };
+
+  /**
+   * Handle the field change, will remake the result based on the new selected list
+   * @method handleChange
+   * @param {array} optionsList The selected options (already aggregated).
+   * @returns {undefined}
+   */
+  const handleChange = (optionsList) => {
+    const formattedSelectedOptions = optionsList.map((option) => ({
+      footnoteId: nanoid(5), // to be overwritten if already exists (keep as a reference to same text)
+      ...option,
+      uid: nanoid(5), // overwrite existing, thus creating new record for the same text
+      footnote: option.value,
+    }));
+    setSelectedOption(formattedSelectedOptions);
+
+    // manage case if parent footnotes (first from the options) was removed
+    const resultSelected = isParetFootnoteRemoved(formattedSelectedOptions)
+      ? setParentFootnoteFromExtra(formattedSelectedOptions)
+      : setFootnoteFromSelection(formattedSelectedOptions);
+
+    props.onChange({
+      footnote: resultSelected,
+    });
+  };
+
+  const AsyncCreatableSelect = props.reactSelectAsyncCreateable.default;
+  return (
+    <FormFieldWrapper {...props}>
+      <AsyncCreatableSelect
+        isDisabled={props.isDisabled}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        defaultOptions={defaultOptions}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option }}
+        isMulti
+        options={defaultOptions}
+        value={selectedOption || []}
+        loadOptions={loadOptions}
+        onChange={handleChange}
+        placeholder={props.intl.formatMessage(messages.select)}
+        noOptionsMessage={() => props.intl.formatMessage(messages.no_options)}
+      />
+    </FormFieldWrapper>
+  );
+});
 
 export default MultiSelectSearchWidget;

package/src/editor/SearchWidget.test.jsx

@@ -1,10 +1,70 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import SearchWidget from './SearchWidget';
-describe('Test SearchWidget', () => {
-  it('check html content', () => {
-    const component = renderer.create(<SearchWidget />);
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+import '@testing-library/jest-dom/extend-expect';
+
+describe('SearchWidget', () => {
+  const choices = [
+    { footnote: 'Citation 1' },
+    { footnote: 'Citation 2' },
+    { footnote: 'Citation 3' },
+  ];
+
+  it('renders the search input and displays the choices', () => {
+    const onChange = jest.fn();
+    render(<SearchWidget choices={choices} onChange={onChange} value="" />);
+
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByText('Citation')).toBeInTheDocument();
+    expect(screen.queryAllByRole('option')).toHaveLength(0);
+    expect(screen.getByText('No results found.')).toBeInTheDocument();
+  });
+
+  it('filters the choices based on the search input', async () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <SearchWidget choices={choices} onChange={onChange} value="" />,
+    );
+
+    const searchInput = screen.getByRole('textbox');
+    fireEvent.change(searchInput, { target: { value: 'Citation 2' } });
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('.result')).toHaveLength(1);
+      expect(
+        container.querySelector('div[footnote="Citation 2"]'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('calls the onChange callback when a choice is selected', () => {
+    const onChange = jest.fn();
+    render(<SearchWidget choices={choices} onChange={onChange} value="" />);
+
+    const searchInput = screen.getByRole('textbox');
+    fireEvent.change(searchInput, { target: { value: 'Citation 2' } });
+
+    waitFor(() => {
+      const option = screen.getByText('Citation 2');
+      fireEvent.click(option);
+      expect(onChange).toHaveBeenCalledWith({ footnote: 'Citation 2' });
+    });
+  });
+
+  it('updates the value prop when the search input changes', () => {
+    const onChange = jest.fn();
+    render(
+      <SearchWidget
+        choices={choices}
+        onChange={onChange}
+        value="Initial value"
+      />,
+    );
+
+    const searchInput = screen.getByRole('textbox');
+    expect(searchInput).toHaveValue('Initial value');
+
+    fireEvent.change(searchInput, { target: { value: 'New value' } });
+    expect(onChange).toHaveBeenCalledWith({ footnote: 'New value' });
   });
 });

package/src/editor/styles.less

@@ -20,8 +20,8 @@ span[aria-describedby='footnote-label'] {
 
 .footnote-edit-node {
   padding: 0px 4px;
-  background-color: var(--bg-color, #e6f3ff);
   border-radius: 4px;
+  background-color: var(--bg-color, #e6f3ff);
 }
 
 .footnote-edit-node::after,

package/src/editor/utils.test.js

@@ -61,7 +61,7 @@ describe('getAllBlocksAndSlateFields', () => {
   });
 
   it('handles metadataSection correctly', () => {
-    const properties = { '1': ['test'] };
+    const properties = { 1: ['test'] };
     const blocks = [
       {
         '@type': 'metadataSection',
@@ -98,7 +98,7 @@ describe('getAllBlocksAndSlateFields', () => {
   });
 
   it('handles metadata correctly', () => {
-    const properties = { '1': ['metadata test'] };
+    const properties = { 1: ['metadata test'] };
     const blocks = [
       {
         '@type': 'metadata',

package/.project.eslintrc.js

@@ -1,48 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const projectRootPath = fs.existsSync('./project')
-  ? fs.realpathSync('./project')
-  : fs.realpathSync('./../../../');
-const packageJson = require(path.join(projectRootPath, 'package.json'));
-const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
-
-const pathsConfig = jsConfig.paths;
-
-let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
-
-Object.keys(pathsConfig).forEach(pkg => {
-  if (pkg === '@plone/volto') {
-    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
-  }
-});
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
-const reg = new AddonConfigurationRegistry(projectRootPath);
-
-// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map(o => [
-  o,
-  reg.packages[o].modulePath,
-]);
-
-
-module.exports = {
-  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
-  settings: {
-    'import/resolver': {
-      alias: {
-        map: [
-          ['@plone/volto', '@plone/volto/src'],
-          ...addonAliases,
-          ['@package', `${__dirname}/src`],
-          ['~', `${__dirname}/src`],
-        ],
-        extensions: ['.js', '.jsx', '.json'],
-      },
-      'babel-plugin-root-import': {
-        rootPathSuffix: 'src',
-      },
-    },
-  },
-};
-

package/src/editor/__snapshots__/SearchWidget.test.jsx.snap

@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Test SearchWidget check html content 1`] = `
-<div
-  id="blockform-fieldset-default"
->
-  <div
-    className="ui segment attached"
-    fluid={true}
-  >
-    <div
-      className="ui fluid card"
-      onClick={[Function]}
-    >
-      <div
-        className="content"
-        fluid={true}
-      >
-        <div
-          className="header"
-        >
-          Citation
-        </div>
-        <div
-          className="description"
-          fluid={true}
-        >
-          <div
-            className="ui fluid search"
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-          >
-            <div
-              className="ui fluid right icon input"
-            >
-              <input
-                autoComplete="off"
-                className="prompt"
-                id="field-footnote"
-                onChange={[Function]}
-                onClick={[Function]}
-                tabIndex="0"
-                type="text"
-                value=""
-              />
-              <i
-                aria-hidden="true"
-                className="search icon"
-                onClick={[Function]}
-              />
-            </div>
-            <div
-              className="results transition"
-            >
-              <div
-                className="message empty"
-              >
-                <div
-                  className="header"
-                >
-                  No results found.
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;