@eeacms/volto-tableau 7.2.1 → 8.0.1

package/CHANGELOG.md

@@ -4,6 +4,31 @@ 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).
 
+### [8.0.1](https://github.com/eea/volto-tableau/compare/8.0.0...8.0.1) - 8 May 2024
+
+#### :bug: Bug Fixes
+
+- fix: load tableau data also on view [nileshgulia1 - [`0046538`](https://github.com/eea/volto-tableau/commit/004653865ea41c551b89e3769ccd8f9944ad1fdb)]
+
+#### :hammer_and_wrench: Others
+
+- add back changes from 004653865ea41c551b89e3769ccd8f9944ad1fdb [nileshgulia1 - [`8638c31`](https://github.com/eea/volto-tableau/commit/8638c311882aa53f54f2db8e3e65e46b50ec38a3)]
+- test: pin cypress to 13 [valentinab25 - [`df6d69b`](https://github.com/eea/volto-tableau/commit/df6d69b7e3704c8ea7e78f81f69aecae5f273375)]
+- pin @cypress/code-coverage to 3.10 [nileshgulia1 - [`931f9f6`](https://github.com/eea/volto-tableau/commit/931f9f6688ec9dd17133bcc2e716e2b66d0863de)]
+## [8.0.0](https://github.com/eea/volto-tableau/compare/7.2.1...8.0.0) - 22 April 2024
+
+#### :rocket: New Features
+
+- feat: Release 8.0.0 - Volto 17 support [alin - [`c471a7a`](https://github.com/eea/volto-tableau/commit/c471a7abcfcc8f39c3d16823c097c041598acc76)]
+- feat: Volto 17 support - refs #264527 [EEA Jenkins - [`f0ffca3`](https://github.com/eea/volto-tableau/commit/f0ffca315f668a57214d742429d116abe9b3ea23)]
+
+#### :house: Internal changes
+
+- chore: package.json [Alin Voinea - [`2feda54`](https://github.com/eea/volto-tableau/commit/2feda54b9f653b90d0995412f6e8d8db9041fcc9)]
+
+#### :hammer_and_wrench: Others
+
+- test: use latest volto 16 in Jenkinsfile [valentinab25 - [`eba82ac`](https://github.com/eea/volto-tableau/commit/eba82acca9cacb0e17670d989ae2ec13b103899a)]
 ### [7.2.1](https://github.com/eea/volto-tableau/compare/7.2.0...7.2.1) - 31 January 2024
 
 #### :hammer_and_wrench: Others
@@ -11,7 +36,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix tests [Razvan - [`e370ea4`](https://github.com/eea/volto-tableau/commit/e370ea49343f52b1a07dbe402ce48c9ef53b6a7b)]
 - fix eslint [Razvan - [`82f9311`](https://github.com/eea/volto-tableau/commit/82f9311fadd7c269321c23d4a3e029c2d5a133c6)]
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`6a19c5c`](https://github.com/eea/volto-tableau/commit/6a19c5ceaf229d944f3f15ee32a833ae37619d74)]
-- fallbacks [Razvan - [`efcc619`](https://github.com/eea/volto-tableau/commit/efcc6196c454df58cb83801297332fd2d98edd97)]
 ### [7.2.0](https://github.com/eea/volto-tableau/compare/7.1.0...7.2.0) - 17 January 2024
 
 #### :bug: Bug Fixes

package/Jenkinsfile

@@ -13,7 +13,8 @@ pipeline {
     DEPENDENCIES = ""
     BACKEND_PROFILES = "eea.kitkat:testing"
     BACKEND_ADDONS = ""
-    VOLTO = "16.24.0"
+    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,9 +158,10 @@ pipeline {
                   }
                 }
               }
-            }
+          }
             
-            stage('Integration tests') {
+          stage('Integration tests') {
+              when { environment name: 'SKIP_TESTS', value: '' }
               steps {
                 script {
                   try {
@@ -211,16 +215,7 @@ pipeline {
                   }
                 }
               }
-            }
           }
-        }
-      }
-      post {
-        always {
-            sh script: "docker rmi $IMAGE_NAME-frontend", returnStatus: true
-        }
-      }
-    }
 
     stage('Report to SonarQube') {
       when {
@@ -228,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'
@@ -255,33 +252,126 @@ pipeline {
       }
     }
 
-    // stage('SonarQube compare to master') {
-    //   when {
-    //     anyOf {
-    //       allOf {
-    //         not { environment name: 'CHANGE_ID', value: '' }
-    //         environment name: 'CHANGE_TARGET', value: 'develop'
-    //       }
-    //       allOf {
-    //         environment name: 'CHANGE_ID', value: ''
-    //         branch 'develop'
-    //         not { changelog '.*^Automated release [0-9\\.]+$' }
-    //       }
-    //     }
-    //   }
-    //   steps {
-    //     script {
-    //       sh '''echo "Error" > checkresult.txt'''
-    //       catchError(buildResult: 'FAILURE', stageResult: 'FAILURE') {
-    //         sh '''set -o pipefail; docker run -i --rm --pull always --name="$IMAGE_NAME-gitflow-sn" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /checkSonarqubemaster.sh | grep -v "Found script" | tee checkresult.txt'''
-    //       }
 
-    //       publishChecks name: 'SonarQube', title: 'Sonarqube Code Quality Check', summary: 'Quality check on the SonarQube metrics from branch develop, comparing it with the ones from master branch. No bugs are allowed',
-    //                     text: readFile(file: 'checkresult.txt'), conclusion: "${currentBuild.currentResult}",
-    //                     detailsURL: "${env.BUILD_URL}display/redirect"
-    //     }
-    //   }
-    // }
+        }
+      }
+
+      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\\.]+$' }
+          }
+        }
+      }
+      steps {
+        script {
+          sh '''echo "Error" > checkresult.txt'''
+          catchError(buildResult: 'FAILURE', stageResult: 'FAILURE') {
+            sh '''set -o pipefail; docker run -i --rm --pull always --name="$IMAGE_NAME-gitflow-sn" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /checkSonarqubemaster.sh | grep -v "Found script" | tee checkresult.txt'''
+          }
+
+          publishChecks name: 'SonarQube', title: 'Sonarqube Code Quality Check', summary: 'Quality check on the SonarQube metrics from branch develop, comparing it with the ones from master branch. No bugs are allowed',
+                        text: readFile(file: 'checkresult.txt'), conclusion: "${currentBuild.currentResult}",
+                        detailsURL: "${env.BUILD_URL}display/redirect"
+        }
+      }
+    }
 
     stage('Pull Request') {
       when {
@@ -323,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
@@ -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

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

@@ -14,6 +14,8 @@ module.exports = {
     '@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$':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
@@ -28,6 +30,7 @@ module.exports = {
   ],
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
+    '^.+\\.ts(x)?$': 'babel-jest',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "7.2.1",
+  "version": "8.0.1",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -27,13 +27,14 @@
     "@eeacms/volto-resize-helper": "*"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.9.5",
+    "cypress": "13.1.0",
+    "@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",
-    "dotenv": "^16.3.2"
+    "md5": "^2.3.0"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json}": [

package/src/Blocks/EmbedTableauVisualization/Edit.test.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
+import '@testing-library/jest-dom/extend-expect';
 
 import Edit from './Edit';
 import installEmbedTableau from '.';
@@ -22,7 +23,7 @@ describe('Edit', () => {
   };
 
   it('should render the component', () => {
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={global.store}>
         <Edit
           id="my-tableau"
@@ -42,7 +43,72 @@ describe('Edit', () => {
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container.querySelector('.embed-tableau')).toBeInTheDocument();
+    expect(
+      container.querySelector('.privacy-protection-wrapper'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.privacy-protection-wrapper')).toHaveStyle({
+      height: 'auto',
+      minHeight: '200px',
+      overflow: 'hidden',
+      position: 'relative',
+    });
+    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
+    expect(container.querySelector('#sidebar')).toBeInTheDocument();
+    expect(container.querySelector('#sidebar .ui.form')).toBeInTheDocument();
+    expect(
+      container.querySelector('#sidebar .ui.form .header.pulled'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Embed Dashboard (Tableau)')).toBeInTheDocument();
+    expect(
+      container.querySelector('#blockform-fieldset-default'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        '#blockform-fieldset-default .ui.segment.form.attached',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        '#mocked-field-tableau_vis_url.mocked-default-widget',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/Tableau visualization/)).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'When using context query parameters please use the corresponding field name from the Tableau service.',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'When using context query parameters please use the corresponding field name from the Tableau service.',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        '#mocked-field-tableau_height.mocked-default-widget',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        'a[href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"]',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.accordion.ui.fluid.styled.form'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('#blockform-fieldset-toolbar'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('#blockform-fieldset-toolbar .active.title'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Toolbar')).toBeInTheDocument();
+    expect(screen.getByText(/Show note/)).toBeInTheDocument();
+    expect(screen.getByText(/Show more info/)).toBeInTheDocument();
+    expect(screen.getByText(/Show download button/)).toBeInTheDocument();
+    expect(screen.getByText(/Show share button/)).toBeInTheDocument();
+    expect(screen.getByText(/Show enlarge button/)).toBeInTheDocument();
   });
 });

package/src/Blocks/EmbedTableauVisualization/View.test.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
+import '@testing-library/jest-dom/extend-expect';
+
 import View from './View';
 
 describe('View', () => {
@@ -17,12 +19,22 @@ describe('View', () => {
   };
 
   it('should render the component', () => {
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={global.store}>
         <View data={data} useVisibilitySensor={false} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container.querySelector('.embed-tableau')).toBeInTheDocument();
+    expect(
+      container.querySelector('.privacy-protection-wrapper'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.privacy-protection-wrapper')).toHaveStyle({
+      height: 'auto',
+      minHeight: '200px',
+      overflow: 'hidden',
+      position: 'relative',
+    });
+    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
   });
 });

package/src/Blocks/EmbedTableauVisualization/index.js

@@ -3,7 +3,7 @@ import EmbedTableauVisualizatonView from './View';
 
 import sliderSVG from '@plone/volto/icons/slider.svg';
 
-export default (config) => {
+const config = (config) => {
   config.blocks.blocksConfig.embed_tableau_visualization = {
     id: 'embed_tableau_visualization',
     title: 'Embed Dashboard (Tableau)',
@@ -28,3 +28,5 @@ export default (config) => {
 
   return config;
 };
+
+export default config;

package/src/Blocks/EmbedTableauVisualization/schema.js

@@ -69,7 +69,7 @@ const staticParameters = {
   required: [],
 };
 
-export default (props) => {
+const schema = (props) => {
   return {
     title: 'Embed Dashboard (Tableau)',
     fieldsets: [
@@ -181,3 +181,5 @@ export default (props) => {
     required: ['tableau_vis_url'],
   };
 };
+
+export default schema;

package/src/Blocks/TableauBlock/Edit.jsx

@@ -13,9 +13,10 @@ const Edit = (props) => {
     error: null,
   });
 
-  const schema = React.useMemo(() => getSchema(config, viz.current, vizState), [
-    vizState,
-  ]);
+  const schema = React.useMemo(
+    () => getSchema(config, viz.current, vizState),
+    [vizState],
+  );
 
   return (
     <>

package/src/Blocks/TableauBlock/index.js

@@ -3,7 +3,7 @@ import TableauView from './View';
 
 import sliderSVG from '@plone/volto/icons/slider.svg';
 
-export default (config) => {
+const config = (config) => {
   config.blocks.blocksConfig.tableau_block = {
     id: 'tableau_block',
     title: 'Tableau',
@@ -28,3 +28,5 @@ export default (config) => {
 
   return config;
 };
+
+export default config;

package/src/Blocks/TableauBlock/schema.js

@@ -84,7 +84,7 @@ const sourceSchema = {
   required: [],
 };
 
-export default (config, viz, vizState) => {
+const schema = (config, viz, vizState) => {
   const isDisabled = !canChangeVizData(viz, vizState);
 
   return {
@@ -227,3 +227,5 @@ export default (config, viz, vizState) => {
     required: ['url'],
   };
 };
+
+export default schema;

package/src/Blocks/index.js

@@ -2,7 +2,7 @@ import { uniqBy } from 'lodash';
 import installEmbedTableauVisualization from './EmbedTableauVisualization';
 import installTableauBlock from './TableauBlock';
 
-export default (config) => {
+const config = (config) => {
   config.blocks.groupBlocksOrder = uniqBy(
     [
       ...config.blocks.groupBlocksOrder,
@@ -16,3 +16,5 @@ export default (config) => {
     config,
   );
 };
+
+export default config;

package/src/Widgets/schema.js

@@ -168,7 +168,7 @@ const breakpointUrlSchema = (config) => {
   };
 };
 
-export default async ({ config, viz, vizState, data }) => {
+const schema = async ({ config, viz, vizState, data }) => {
   const isDisabled = !canChangeVizData(viz, vizState);
 
   return {
@@ -428,3 +428,5 @@ export default async ({ config, viz, vizState, data }) => {
     required: ['url'],
   };
 };
+
+export default schema;

package/src/less/tableau.less

@@ -43,8 +43,8 @@
     iframe {
       padding: @tableauIframePadding;
       border: @tableauIframeBorder;
-      margin: @tableauIframeMargin;
       border-radius: @tableauIframeBorderRadius;
+      margin: @tableauIframeMargin;
       transform-origin: top left;
     }
   }
@@ -56,6 +56,7 @@
     height: auto;
     align-items: center;
     justify-content: center;
+    border-radius: 5px;
     margin: 0 auto 1rem auto;
     animation: spin 1s linear infinite;
     background-image: linear-gradient(
@@ -68,7 +69,6 @@
       @grey-2 75%
     );
     background-size: 100px 100px;
-    border-radius: 5px;
 
     span {
       margin: 6px auto;

package/src/Blocks/EmbedTableauVisualization/__snapshots__/Edit.test.jsx.snap

@@ -1,336 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Edit should render the component 1`] = `
-Array [
-  <div
-    className="embed-tableau"
-  >
-    <div
-      className="privacy-protection-wrapper"
-      style={
-        Object {
-          "height": "auto",
-          "minHeight": "200px",
-          "overflow": "hidden",
-          "position": "relative",
-        }
-      }
-    >
-      <div
-        className="tableau-wrapper"
-      >
-        <div
-          className="tableau tableau-2.8.0"
-          style={
-            Object {
-              "height": "700px",
-            }
-          }
-        />
-      </div>
-    </div>
-  </div>,
-  <div
-    id="sidebar"
-  >
-    <div
-      className="ui form"
-    >
-      <header
-        className="header pulled"
-      >
-        <h2>
-          Embed Dashboard (Tableau)
-        </h2>
-      </header>
-      <div
-        id="blockform-fieldset-default"
-      >
-        <div
-          className="ui segment form attached"
-        >
-          <div
-            className="mocked-default-widget"
-            id="mocked-field-tableau_vis_url"
-          >
-            Tableau visualization
-             - 
-            <div>
-              <p>
-                When using context query parameters please use the corresponding field name from the Tableau service.
-              </p>
-              <p>
-                NOTE: The embeded tableau dashboard must have the parameters defined in the
-                 
-                <span
-                  style={
-                    Object {
-                      "color": "rgb(15, 130, 204)",
-                    }
-                  }
-                >
-                  'Dynamic parameters'
-                </span>
-                 
-                list so that the context query parameters can take effect.
-              </p>
-            </div>
-          </div>
-          <div
-            className="mocked-default-widget"
-            id="mocked-field-tableau_height"
-          >
-            <a
-              href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              CSS height
-            </a>
-             - 
-            Tableau height
-          </div>
-        </div>
-      </div>
-      <div
-        className="accordion ui fluid styled form"
-      >
-        <div
-          id="blockform-fieldset-toolbar"
-        >
-          <div
-            className="active title"
-            onClick={[Function]}
-          >
-            Toolbar
-            <svg
-              className="icon"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": undefined,
-                }
-              }
-              onClick={null}
-              style={
-                Object {
-                  "fill": "currentColor",
-                  "height": "20px",
-                  "width": "auto",
-                }
-              }
-              viewBox=""
-              xmlns=""
-            />
-          </div>
-          <div
-            className="content active"
-          >
-            <div
-              aria-hidden={false}
-              className="rah-static rah-static--height-auto"
-              style={
-                Object {
-                  "height": "auto",
-                  "overflow": "visible",
-                }
-              }
-            >
-              <div
-                style={
-                  Object {
-                    "WebkitTransition": "opacity 500ms ease 0ms",
-                    "transition": "opacity 500ms ease 0ms",
-                  }
-                }
-              >
-                <div
-                  className="ui segment attached"
-                >
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_notes"
-                  >
-                    Show note
-                     - 
-                    No description
-                  </div>
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_more_info"
-                  >
-                    Show more info
-                     - 
-                    No description
-                  </div>
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_download"
-                  >
-                    Show download button
-                     - 
-                    No description
-                  </div>
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_share"
-                  >
-                    Show share button
-                     - 
-                    No description
-                  </div>
-                  <div
-                    className="mocked-boolean-widget"
-                    id="mocked-field-with_enlarge"
-                  >
-                    Show enlarge button
-                     - 
-                    No description
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="accordion ui fluid styled form"
-      >
-        <div
-          id="blockform-fieldset-options"
-        >
-          <div
-            className="title"
-            onClick={[Function]}
-          >
-            Parameters
-            <svg
-              className="icon"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": undefined,
-                }
-              }
-              onClick={null}
-              style={
-                Object {
-                  "fill": "currentColor",
-                  "height": "20px",
-                  "width": "auto",
-                }
-              }
-              viewBox=""
-              xmlns=""
-            />
-          </div>
-          <div
-            className="content"
-          >
-            <div
-              aria-hidden={true}
-              className="rah-static rah-static--height-zero"
-              style={
-                Object {
-                  "height": 0,
-                  "overflow": "hidden",
-                }
-              }
-            >
-              <div
-                style={
-                  Object {
-                    "WebkitTransition": "opacity 500ms ease 0ms",
-                    "opacity": 0,
-                    "transition": "opacity 500ms ease 0ms",
-                  }
-                }
-              >
-                <div
-                  className="ui segment attached"
-                >
-                  <div
-                    className="mocked-default-widget"
-                    id="mocked-field-staticParameters"
-                  >
-                    Static parameters
-                     - 
-                    Set a list of static parameters.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="accordion ui fluid styled form"
-      >
-        <div
-          id="blockform-fieldset-privacy"
-        >
-          <div
-            className="title"
-            onClick={[Function]}
-          >
-            Privacy
-            <svg
-              className="icon"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": undefined,
-                }
-              }
-              onClick={null}
-              style={
-                Object {
-                  "fill": "currentColor",
-                  "height": "20px",
-                  "width": "auto",
-                }
-              }
-              viewBox=""
-              xmlns=""
-            />
-          </div>
-          <div
-            className="content"
-          >
-            <div
-              aria-hidden={true}
-              className="rah-static rah-static--height-zero"
-              style={
-                Object {
-                  "height": 0,
-                  "overflow": "hidden",
-                }
-              }
-            >
-              <div
-                style={
-                  Object {
-                    "WebkitTransition": "opacity 500ms ease 0ms",
-                    "opacity": 0,
-                    "transition": "opacity 500ms ease 0ms",
-                  }
-                }
-              >
-                <div
-                  className="ui segment attached"
-                >
-                  <div
-                    className="mocked-default-widget"
-                    id="mocked-field-dataprotection"
-                  >
-                    No title
-                     - 
-                    No description
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;

package/src/Blocks/EmbedTableauVisualization/__snapshots__/View.test.jsx.snap

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`View should render the component 1`] = `
-<div
-  className="embed-tableau"
->
-  <div
-    className="privacy-protection-wrapper"
-    style={
-      Object {
-        "height": "auto",
-        "minHeight": "200px",
-        "overflow": "hidden",
-        "position": "relative",
-      }
-    }
-  >
-    <div
-      className="tableau-wrapper"
-    >
-      <div
-        className="tableau tableau-2.8.0"
-        style={
-          Object {
-            "height": "700px",
-          }
-        }
-      />
-    </div>
-  </div>
-</div>
-`;