@eeacms/volto-tableau 6.0.6 → 7.0.0

package/CHANGELOG.md

@@ -4,17 +4,33 @@ 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.0.6](https://github.com/eea/volto-tableau/compare/6.0.5...6.0.6) - 17 November 2023
+### [7.0.0](https://github.com/eea/volto-tableau/compare/6.0.6...7.0.0) - 23 November 2023
 
-#### :rocket: New Features
+#### :bug: Bug Fixes
+
+- fix: unittests [Miu Razvan - [`ce983d2`](https://github.com/eea/volto-tableau/commit/ce983d26d18fc2ed6d24f3fa64999e85c3b90051)]
 
-- feat: clean up [Miu Razvan - [`73ff5c0`](https://github.com/eea/volto-tableau/commit/73ff5c0f61c947067006cecf3bd3ad003249d78c)]
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`a7a6f1f`](https://github.com/eea/volto-tableau/commit/a7a6f1f8f0f2ed727a13d386fd30396f80418130)]
+- bump version [Miu Razvan - [`192c7ae`](https://github.com/eea/volto-tableau/commit/192c7ae64e6c659a1f676a3506aa87563cb715e7)]
+- tests [Miu Razvan - [`94aeb23`](https://github.com/eea/volto-tableau/commit/94aeb2332fa98088b0da456df692368163d01221)]
+- update [Miu Razvan - [`daaeeb5`](https://github.com/eea/volto-tableau/commit/daaeeb51876276909d506c9f1851b83089ff9124)]
+- update [Miu Razvan - [`48e976f`](https://github.com/eea/volto-tableau/commit/48e976f0e9ff6d11dd18a61f6d17bd6c0de11e5a)]
+- update [Miu Razvan - [`fcc702a`](https://github.com/eea/volto-tableau/commit/fcc702a38cc3942d84282443d5de543f0e361389)]
+- update [Miu Razvan - [`ef9abd3`](https://github.com/eea/volto-tableau/commit/ef9abd3617bde7148fe2ac6d33079f3d5f82a302)]
+- update snapshot [Dobricean Ioan Dorian - [`baaeccf`](https://github.com/eea/volto-tableau/commit/baaeccf8c589c7a6bac6a5522a0a23b90b9fda1d)]
+- unify view and edit [Dobricean Ioan Dorian - [`1159da9`](https://github.com/eea/volto-tableau/commit/1159da96057dc78a1ac46371c57f55e7786aab34)]
+- fix tests [Dobricean Ioan Dorian - [`33bff4b`](https://github.com/eea/volto-tableau/commit/33bff4b8e9060548610990c6817b49cb06be79ae)]
+- test [Dobricean Ioan Dorian - [`48505ca`](https://github.com/eea/volto-tableau/commit/48505caef84d12091035fdd79cf64067e7f819e2)]
+- split the view and edit [Dobricean Ioan Dorian - [`7227bb1`](https://github.com/eea/volto-tableau/commit/7227bb1fb70e5d895f15872ed6533e089be99836)]
+- update embed tableau so it can work with serialized data [Dobricean Ioan Dorian - [`59d958c`](https://github.com/eea/volto-tableau/commit/59d958c7a1a5055ea62e04abcbf34ee93f52e23a)]
+### [6.0.6](https://github.com/eea/volto-tableau/compare/6.0.5...6.0.6) - 17 November 2023
 
 #### :hammer_and_wrench: Others
 
 - tests: add cypress for tableau [nileshgulia1 - [`6eca683`](https://github.com/eea/volto-tableau/commit/6eca6834b85cdab4ed82367fee32fdbbb35b0f5e)]
 - tests: update unit tests [nileshgulia1 - [`96cae09`](https://github.com/eea/volto-tableau/commit/96cae09eab2e737f032c97eb401a3efa88e68ec6)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`c7e81cb`](https://github.com/eea/volto-tableau/commit/c7e81cb0768f755dd4107a4998253d9bccc33809)]
 - comment test [Miu Razvan - [`a459525`](https://github.com/eea/volto-tableau/commit/a459525fdccf8ee61651d4cb2e04eb253e841c61)]
 ### [6.0.5](https://github.com/eea/volto-tableau/compare/6.0.4...6.0.5) - 15 November 2023
 
@@ -41,7 +57,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`903b90a`](https://github.com/eea/volto-tableau/commit/903b90a2df0abc183aa68d99a89bb688de3a0c73)]
 
 #### :hammer_and_wrench: Others
 
@@ -51,9 +66,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - tests: increase coverage [kreafox - [`ecb9262`](https://github.com/eea/volto-tableau/commit/ecb92625a44365faf4c39f0ff3f02ccc4ca21656)]
 - Fix tableau height [kreafox - [`6194c24`](https://github.com/eea/volto-tableau/commit/6194c2405e2bd93aba9865caed76292cd55193d3)]
 - Show share & download button on widget view [kreafox - [`a66e253`](https://github.com/eea/volto-tableau/commit/a66e2537d08dc7129e249c28e1daa27246c88815)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`9d2189d`](https://github.com/eea/volto-tableau/commit/9d2189d4edb13dd449d75cd6dd9052bbed67304d)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`f2fa3f9`](https://github.com/eea/volto-tableau/commit/f2fa3f9ccabab918586179ac16ead44e2eba8498)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`5748183`](https://github.com/eea/volto-tableau/commit/5748183c27dae18a4ebbc067d659cbc24cad8f71)]
 - use toolbar from volto-embed [Miu Razvan - [`1a232a1`](https://github.com/eea/volto-tableau/commit/1a232a15f2bbe05da75307800590d0a0a1c4996b)]
 ## [6.0.0](https://github.com/eea/volto-tableau/compare/5.0.2...6.0.0) - 30 October 2023
 
@@ -111,7 +123,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: change volto version in Jenkinsfile [ana-oprea - [`347aceb`](https://github.com/eea/volto-tableau/commit/347aceb07d152fddeebbf3a7e7a6ac9c55dc21ba)]
 - test: increase cypress timeout [ana-oprea - [`bdf4408`](https://github.com/eea/volto-tableau/commit/bdf44083cd84c96b4914d3f8a3bb17c5187f191c)]
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`caff974`](https://github.com/eea/volto-tableau/commit/caff9742a703b224133a8dd2a969629e70c9fd33)]
-- test: Fix eslint and yarn i18n [Alin Voinea - [`b8be7fb`](https://github.com/eea/volto-tableau/commit/b8be7fb9ab10faed0a1be8ce7e3d4e7c78ebe020)]
 - i18n: Add en [Alin Voinea - [`c5e20dd`](https://github.com/eea/volto-tableau/commit/c5e20ddea25c830ac80665ee9a71e557e8cd117d)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`2116ff9`](https://github.com/eea/volto-tableau/commit/2116ff95c6454e813bdca44e6c3aa81fa0a916b8)]
 ## [5.0.0](https://github.com/eea/volto-tableau/compare/4.1.1...5.0.0) - 25 July 2023
@@ -123,21 +134,17 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 5.0.0 [Alin Voinea - [`97c98e9`](https://github.com/eea/volto-tableau/commit/97c98e98b1295a4ad45756326dc20cd59517515f)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`2acb3a5`](https://github.com/eea/volto-tableau/commit/2acb3a5490f62ce0a95ebbd03c32874ac3a42603)]
 ### [4.1.1](https://github.com/eea/volto-tableau/compare/4.1.0...4.1.1) - 21 July 2023
 
 #### :hammer_and_wrench: Others
 
 - Add VisualizationViewWidget [Tiberiu Ichim - [`fa881cb`](https://github.com/eea/volto-tableau/commit/fa881cbc3643a46697fb16d1c86ada1d4121a46a)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`cbcbad2`](https://github.com/eea/volto-tableau/commit/cbcbad26f7aa3683122199c8d5cbd142903df93b)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`51abe6d`](https://github.com/eea/volto-tableau/commit/51abe6d4db80825fe2e396e04c7003c6ad79b480)]
 ### [4.1.0](https://github.com/eea/volto-tableau/compare/4.0.0...4.1.0) - 15 June 2023
 
 ## [4.0.0](https://github.com/eea/volto-tableau/compare/3.0.8...4.0.0) - 13 June 2023
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`e33bb21`](https://github.com/eea/volto-tableau/commit/e33bb21eb429c33e3a15d771487a1c9af8ccb0d5)]
 
 #### :hammer_and_wrench: Others
 
@@ -169,7 +176,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`f5deccd`](https://github.com/eea/volto-tableau/commit/f5deccd84372752908b300c5cfd78134818e5ce4)]
 ### [3.0.6](https://github.com/eea/volto-tableau/compare/3.0.5...3.0.6) - 30 January 2023
 
 ### [3.0.5](https://github.com/eea/volto-tableau/compare/3.0.4...3.0.5) - 26 January 2023
@@ -241,7 +247,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update commands.js [Nilesh - [`7c48437`](https://github.com/eea/volto-tableau/commit/7c4843780efb9b85a4728de73c00d831c1d8fdcf)]
 - Update e2e.js [Nilesh - [`f67b45c`](https://github.com/eea/volto-tableau/commit/f67b45c170f58f8d0301192994226f173e4cb00a)]
 - latest volto compatibility refs #154757 [nileshgulia1 - [`881ba48`](https://github.com/eea/volto-tableau/commit/881ba482dc9b82e7fdac16549d41e80a6d26b3de)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`58e25df`](https://github.com/eea/volto-tableau/commit/58e25df2291add09670143bee54cde103ee835b9)]
 ### [1.3.0](https://github.com/eea/volto-tableau/compare/1.2.5...1.3.0) - 28 September 2022
 
 #### :hammer_and_wrench: Others
@@ -255,15 +260,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Use volto 16 alpha 14 [Miu Razvan - [`93641be`](https://github.com/eea/volto-tableau/commit/93641be4c2393f49008aff789400cf7c947949fd)]
 - Revert volto-tableau group to common [Andrei Grigore - [`9d24c6d`](https://github.com/eea/volto-tableau/commit/9d24c6d2767fed6a840cddaee55dbd5cecb544b5)]
 - Tableaugroup typo fix [Andrei Grigore - [`b0b5378`](https://github.com/eea/volto-tableau/commit/b0b5378a437043120a96c9e5e8802584145daa22)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`3234347`](https://github.com/eea/volto-tableau/commit/3234347e524cc0ed4918242f503fe9e7dba266b2)]
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`d237e1c`](https://github.com/eea/volto-tableau/commit/d237e1c72817d7e68a3eb698563674d1514db24f)]
 ### [1.2.4](https://github.com/eea/volto-tableau/compare/1.2.3...1.2.4) - 25 October 2021
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`2b19679`](https://github.com/eea/volto-tableau/commit/2b19679e2c7bcdc83082d1c73a595eea8b86d14f)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`384ccae`](https://github.com/eea/volto-tableau/commit/384ccaebed8c414a5c90eb96c6ce0a2b091f249c)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`589258e`](https://github.com/eea/volto-tableau/commit/589258e9b3cbba9cee37c57bb85ca5b707bc65d7)]
 ### [1.2.3](https://github.com/eea/volto-tableau/compare/1.2.2...1.2.3) - 14 June 2021
 
 #### :hammer_and_wrench: Others

package/Jenkinsfile

@@ -1,4 +1,7 @@
 pipeline {
+  tools {
+    jdk 'Java17'
+  }
   agent {
     node { label 'docker-host' }
   }

package/README.md

@@ -24,6 +24,10 @@ Registers a VisualizationView component for a content type named 'tableau_visual
 
 ## Getting started
 
+### Upgrade
+
+#### 7.x.x -> requires >= eea.api.dataconnector@7.0
+
 ### Try volto-tableau with Docker
 
       git clone https://github.com/eea/volto-tableau.git
@@ -43,25 +47,25 @@ Go to http://localhost:3000
 
 1. Start Volto frontend
 
-* If you already have a volto project, just update `package.json`:
+- If you already have a volto project, just update `package.json`:
 
-   ```JSON
-   "addons": [
-       "@eeacms/volto-tableau"
-   ],
+  ```JSON
+  "addons": [
+      "@eeacms/volto-tableau"
+  ],
 
-   "dependencies": {
-       "@eeacms/volto-tableau": "*"
-   }
-   ```
+  "dependencies": {
+      "@eeacms/volto-tableau": "*"
+  }
+  ```
 
-* If not, create one:
+- If not, create one:
 
-   ```
-   npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-tableau
-   cd my-volto-project
-   ```
+  ```
+  npm install -g yo @plone/generator-volto
+  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-tableau
+  cd my-volto-project
+  ```
 
 1. Install new add-ons and restart Volto:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "6.0.6",
+  "version": "7.0.0",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -75,4 +75,4 @@
     "cypress:open": "make cypress-open",
     "prepare": "husky install"
   }
-}
+}

package/src/Blocks/EmbedTableauVisualization/Edit.jsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import { SidebarPortal } from '@plone/volto/components';
-import View from './View';
 import getSchema from './schema';
 
+import View from './View';
+
 const Edit = (props) => {
   const schema = React.useMemo(() => getSchema(props), [props]);
 
   return (
     <React.Fragment>
-      <View {...props} mode="edit" />
+      <View mode="edit" {...props} />
       <SidebarPortal selected={props.selected}>
         <BlockDataForm
           block={props.block}

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import Edit from './Edit';
+import installEmbedTableau from '.';
+
+installEmbedTableau(config);
+
+const mockStore = configureStore([]);
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+jest.mock('@plone/volto/components', () => ({
+  Icon: ({ children }) => <img alt="incon">{children}</img>,
+  Toast: ({ children }) => <p>{children}</p>,
+  SidebarPortal: jest.requireActual(
+    '@plone/volto/components/manage/Sidebar/SidebarPortal',
+  ).default,
+}));
+
+jest.mock('@eeacms/volto-matomo/utils', () => ({
+  trackLink: jest.fn(),
+}));
+
+jest.mock(
+  '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection',
+  () => ({ children }) => {
+    return children;
+  },
+);
+
+jest.mock('@eeacms/volto-embed/helpers', () => ({
+  pickMetadata: (data) => data,
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+    subrequests: [],
+  },
+  connected_data_parameters: {},
+});
+
+describe('Edit', () => {
+  const data = {
+    '@type': 'embed_tableau_visualization',
+    dataprotection: {
+      enabled: false,
+    },
+    tableau_vis_url: 'http://localhost:3000/tableau-ct',
+    with_download: true,
+    with_more_info: true,
+    with_notes: true,
+    with_share: true,
+  };
+
+  it('should render the component', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <Edit
+          id="my-tableau"
+          data={data}
+          pathname="/news"
+          selected={false}
+          block="1234"
+          index={1}
+          onChangeBlock={() => {}}
+          onSelectBlock={() => {}}
+          onDeleteBlock={() => {}}
+          onFocusPreviousBlock={() => {}}
+          onFocusNextBlock={() => {}}
+          handleKeyDown={() => {}}
+          content={{}}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -1,14 +1,30 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import React, { useEffect } from 'react';
 import { Message } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
 import { getContent } from '@plone/volto/actions';
-import { PrivacyProtection } from '@eeacms/volto-embed';
+import PrivacyProtection from '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 
+function getTableauVisualization(props) {
+  const { isBlock } = props;
+  const content = (isBlock ? props.tableauContent : props.content) || {};
+  const tableau_visualization =
+    (isBlock
+      ? props.tableauContent?.tableau_visualization
+      : props.content?.tableau_visualization) ||
+    props.data.tableau_visualization ||
+    {};
+  return {
+    ...pickMetadata(content),
+    ...tableau_visualization,
+  };
+}
+
 const View = (props) => {
-  const data = props.data;
+  const { isBlock, id, mode, data, getContent } = props;
   const {
     with_notes = true,
     with_sources = true,
@@ -18,32 +34,27 @@ const View = (props) => {
     with_enlarge = true,
     tableau_height = 700,
   } = data;
-  const { figure_note = [], data_provenance = {}, tableau_visualization } =
-    props.tableau_visualization_data || {};
 
   const tableau_vis_url = flattenToAppURL(data.tableau_vis_url || '');
 
-  React.useEffect(() => {
-    if (tableau_vis_url) {
-      props.getContent(tableau_vis_url, null, props.id);
-    }
-    // eslint-disable-next-line
-  }, [tableau_vis_url]);
+  const tableau_visualization = getTableauVisualization(props);
 
-  if (props.mode === 'edit' && !tableau_vis_url) {
-    return (
-      <Message>
-        Please select a tableau visualization from block editor.
-      </Message>
-    );
-  }
+  useEffect(() => {
+    const tableauVisId = flattenToAppURL(tableau_visualization['@id'] || '');
+    if (
+      isBlock &&
+      mode === 'edit' &&
+      tableau_vis_url &&
+      tableau_vis_url !== tableauVisId
+    ) {
+      getContent(tableau_vis_url, null, id);
+    }
+  }, [id, isBlock, getContent, mode, tableau_vis_url, tableau_visualization]);
 
-  if (props.mode === 'edit' && !tableau_visualization?.url) {
-    return <Message>Url is not set in the visualization</Message>;
-  }
+  const { figure_note = [], data_provenance = {} } = tableau_visualization;
 
-  if (!tableau_visualization?.url) {
-    return null;
+  if (props.mode === 'edit' && !tableau_vis_url) {
+    return <Message>Please select a tableau from block editor.</Message>;
   }
 
   return (
@@ -65,7 +76,7 @@ const View = (props) => {
             tableau_vis_url,
           }}
           figure_note={figure_note}
-          sources={data_provenance.data || []}
+          sources={data_provenance?.data || []}
         />
       </PrivacyProtection>
     </div>
@@ -75,7 +86,8 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
-      tableau_visualization_data: state.content.subrequests?.[props.id]?.data,
+      tableauContent: state.content.subrequests?.[props.id]?.data,
+      isBlock: !!props.data?.['@type'],
     }),
     {
       getContent,

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

@@ -1,31 +1,51 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
 import View from './View';
 
 const mockStore = configureStore([]);
-const store = mockStore({ content: { subrequests: [] } });
 
 window.URL.createObjectURL = jest.fn(() => 'test');
 
-jest.mock('@eeacms/volto-embed', () => ({
-  PrivacyProtection: ({ children }) => <div>{children}</div>,
-}));
-
 jest.mock('@plone/volto/components', () => ({
   Icon: ({ children }) => <img alt="incon">{children}</img>,
+  Toast: ({ children }) => <p>{children}</p>,
 }));
 
-jest.mock('@plone/volto/components', () => ({
-  Toast: ({ children }) => <p>{children}</p>,
+jest.mock('@eeacms/volto-matomo/utils', () => ({
+  trackLink: jest.fn(),
 }));
 
+jest.mock(
+  '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection',
+  () => ({ children }) => {
+    return children;
+  },
+);
+
+jest.mock('@eeacms/volto-embed/helpers', () => ({
+  pickMetadata: (data) => data,
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+    subrequests: [],
+  },
+  connected_data_parameters: {},
+});
+
 describe('View', () => {
   const data = {
     '@type': 'embed_tableau_visualization',
-    dataprotection: {},
+    dataprotection: {
+      enabled: false,
+    },
     tableau_vis_url: 'http://localhost:3000/tableau-ct',
     with_download: true,
     with_more_info: true,
@@ -34,12 +54,12 @@ describe('View', () => {
   };
 
   it('should render the component', () => {
-    const { asFragment } = render(
+    const component = renderer.create(
       <Provider store={store}>
         <View data={data} />
       </Provider>,
     );
-    expect(asFragment()).toMatchSnapshot();
-    //expect(container.querySelector('.embed-tableau')).toBeInTheDocument();
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Edit should render the component 1`] = `
+<div
+  className="embed-tableau"
+>
+  <div
+    className="tableau-wrapper"
+  >
+    <div
+      className="tableau tableau-2.8.0"
+      style={
+        Object {
+          "height": "700px",
+        }
+      }
+    />
+  </div>
+</div>
+`;

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

@@ -1,3 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`View should render the component 1`] = `<DocumentFragment />`;
+exports[`View should render the component 1`] = `
+<div
+  className="embed-tableau"
+>
+  <div
+    className="tableau-wrapper"
+  >
+    <div
+      className="tableau tableau-2.8.0"
+      style={
+        Object {
+          "height": "700px",
+        }
+      }
+    />
+  </div>
+</div>
+`;

package/src/Utils/Download.test.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import Download from './Download';
+
+const mockStore = configureStore([]);
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+jest.mock('semantic-ui-react', () => ({
+  Popup: ({ content, trigger }) => {
+    return (
+      <div className="popup">
+        <div className="trigger">{trigger}</div>
+        <div className="content">{content}</div>
+      </div>
+    );
+  },
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+    subrequests: [],
+  },
+});
+
+describe('Edit', () => {
+  it('should render the component', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <Download />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/Utils/__snapshots__/Download.test.jsx.snap

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Edit should render the component 1`] = `
+<div
+  className="popup"
+>
+  <div
+    className="trigger"
+  >
+    <div
+      className="tableau-download-container"
+    >
+      <button
+        className="trigger-button"
+      >
+        <i
+          className="ri-download-fill"
+        />
+        Download
+      </button>
+    </div>
+  </div>
+  <div
+    className="content"
+  >
+    <div
+      className="item"
+    >
+      <span
+        className="label"
+      >
+        Data formats
+      </span>
+      <div
+        className="types"
+      >
+        <div
+          className="type"
+        >
+          <button
+            onClick={[Function]}
+          >
+            <span>
+              CSV
+            </span>
+          </button>
+        </div>
+        <div
+          className="type"
+        >
+          <button
+            onClick={[Function]}
+          >
+            <span>
+              Excel
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      className="item"
+    >
+      <span
+        className="label"
+      >
+        Image formats
+      </span>
+      <div
+        className="types"
+      >
+        <div
+          className="type"
+        >
+          <button
+            onClick={[Function]}
+          >
+            <span>
+              PNG
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      className="item"
+    >
+      <span
+        className="label"
+      >
+        Other formats
+      </span>
+      <div
+        className="types"
+      >
+        <div
+          className="type"
+        >
+          <button
+            onClick={[Function]}
+          >
+            <span>
+              PDF
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;