@eeacms/volto-embed 8.0.0 → 9.0.0

package/CHANGELOG.md

@@ -4,11 +4,21 @@ 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.0](https://github.com/eea/volto-embed/compare/7.0.2...8.0.0) - 17 November 2023
+### [9.0.0](https://github.com/eea/volto-embed/compare/8.0.0...9.0.0) - 23 November 2023
 
-#### :rocket: New Features
+#### :bug: Bug Fixes
+
+- fix: sonarqube [Miu Razvan - [`712eb36`](https://github.com/eea/volto-embed/commit/712eb36b87bbd9e0dbae67260081056ae2a0dfd6)]
+
+#### :hammer_and_wrench: Others
 
-- feat: add new embed_maps block [Miu Razvan - [`0bbea27`](https://github.com/eea/volto-embed/commit/0bbea272c46623683c6c70f7b0c2da6513c31031)]
+- update [Miu Razvan - [`8612b33`](https://github.com/eea/volto-embed/commit/8612b3348f486c121614073c950a5794e3fc979b)]
+- update [Miu Razvan - [`7ee9b67`](https://github.com/eea/volto-embed/commit/7ee9b6700e88f2901066919443624313ef08dd1a)]
+- update [Miu Razvan - [`926beb8`](https://github.com/eea/volto-embed/commit/926beb87d2c44907aebe57369312eea7bf22d656)]
+- update [Miu Razvan - [`da351ae`](https://github.com/eea/volto-embed/commit/da351ae9ffaaef756f7a665618a03fd04cb9b01d)]
+- use volto-datablocks@develop dependency [Miu Razvan - [`b379d84`](https://github.com/eea/volto-embed/commit/b379d8478657dd39dad066181b349cee7ac2531d)]
+- add tets + fixes [Miu Razvan - [`b013196`](https://github.com/eea/volto-embed/commit/b013196cbaebaada27dd9ae5a0e4fe6908637152)]
+## [8.0.0](https://github.com/eea/volto-embed/compare/7.0.2...8.0.0) - 17 November 2023
 
 #### :hammer_and_wrench: Others
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -20,8 +20,7 @@
   ],
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
-    "@eeacms/volto-datablocks": "*",
-    "react-visibility-sensor": "5.1.1"
+    "@eeacms/volto-datablocks": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",
@@ -72,4 +71,4 @@
     "cypress:open": "make cypress-open",
     "prepare": "husky install"
   }
-}
+}

package/src/Blocks/EmbedMaps/Edit.test.js

@@ -0,0 +1,75 @@
+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 installEmbedMaps from '.';
+
+installEmbedMaps(config);
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  SidebarPortal: jest.requireActual(
+    '@plone/volto/components/manage/Sidebar/SidebarPortal',
+  ).default,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+  },
+  connected_data_parameters: {},
+});
+
+test('renders an edit embed map block component', () => {
+  const component = renderer.create(
+    <Provider store={store}>
+      <Edit
+        id="my-map"
+        data={{
+          '@type': 'embed_maps',
+          with_notes: false,
+          with_sources: false,
+          with_more_info: true,
+          with_share: true,
+          with_enlarge: true,
+          url: '/path/to/map',
+          maps: {
+            '@id': '/path/to/map',
+            title: 'My map',
+            url:
+              'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          },
+          dataprotection: {
+            enabled: false,
+          },
+          useVisibilitySensor: false,
+        }}
+        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/EmbedMaps/View.jsx

@@ -1,14 +1,24 @@
 import React, { useEffect, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { Message } from 'semantic-ui-react';
+import { getContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import Map from '@eeacms/volto-embed/Map/Map';
+import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 
-import { getContent } from '@plone/volto/actions';
+function getMaps(props) {
+  const content = props.mapsContent || {};
+  const maps = content.maps || props.data?.maps || {};
+  return {
+    ...pickMetadata(content),
+    ...maps,
+  };
+}
 
 function View(props) {
+  const { id, getContent, mode } = props;
   const {
-    url,
+    useVisibilitySensor = true,
     with_notes = true,
     with_sources = true,
     with_more_info = true,
@@ -16,32 +26,16 @@ function View(props) {
     with_enlarge = true,
   } = props.data;
 
-  const maps = useMemo(() => {
-    if (props.data.maps) {
-      return props.data.maps;
-    }
-    if (props.mapsContent?.maps) {
-      return {
-        ...props.mapsContent.maps,
-        '@id': props.mapsContent['@id'],
-        title: props.mapsContent['title'],
-        publisher: props.mapsContent['publisher'],
-        geo_coverage: props.mapsContent['geo_coverage'],
-        temporal_coverage: props.mapsContent['temporal_coverage'],
-        other_organisations: props.mapsContent['other_organisations'],
-        data_provenance: props.mapsContent['data_provenance'],
-        figure_note: props.mapsContent['figure_note'],
-      };
-    }
-    return undefined;
-  }, [props.data.maps, props.mapsContent]);
+  const url = flattenToAppURL(props.data.url || '');
+
+  const maps = useMemo(() => getMaps(props), [props]);
 
   useEffect(() => {
-    if (props.data.url && !props.data.maps) {
-      props.getContent(flattenToAppURL(props.data.url), null, props.id);
+    const mapsId = maps['@id'] ? flattenToAppURL(maps['@id']) : undefined;
+    if (mode === 'edit' && url && url !== mapsId) {
+      getContent(url, null, id);
     }
-    /* eslint-disable-next-line */
-  }, [props.data.url]);
+  }, [id, getContent, mode, url, maps]);
 
   if (props.mode === 'edit' && !url) {
     return <Message>Please select a map from block editor.</Message>;
@@ -53,9 +47,10 @@ function View(props) {
 
   return (
     <div className="embed-map">
-      <Map
+      <EmbedMap
         data={{
           ...maps,
+          useVisibilitySensor,
           with_notes,
           with_sources,
           with_more_info,

package/src/Blocks/EmbedMaps/View.test.js

@@ -0,0 +1,60 @@
+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 View from './View';
+import installEmbedMaps from '.';
+
+installEmbedMaps(config);
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+test('renders a view embed map block component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <View
+        id="my-map"
+        data={{
+          '@type': 'embed_maps',
+          with_notes: false,
+          with_sources: false,
+          with_more_info: true,
+          with_share: true,
+          with_enlarge: true,
+          url: '/path/to/map',
+          maps: {
+            '@id': '/path/to/map',
+            title: 'My map',
+            url:
+              'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          },
+          dataprotection: {
+            enabled: false,
+          },
+          useVisibilitySensor: false,
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/Blocks/EmbedMaps/index.js

@@ -3,7 +3,7 @@ import EmbedView from './View';
 
 import sliderSVG from '@plone/volto/icons/slider.svg';
 
-const embedConfig = (config) => {
+const applyConfig = (config) => {
   config.blocks.blocksConfig.embed_maps = {
     id: 'embed_maps',
     title: 'Embed Map',
@@ -19,4 +19,4 @@ const embedConfig = (config) => {
   return config;
 };
 
-export default embedConfig;
+export default applyConfig;

package/src/Blocks/Maps/Edit.jsx

@@ -229,6 +229,7 @@ class Edit extends Component {
             <PrivacyProtection
               data={this.props.data}
               editable={this.props.editable}
+              useVisibilitySensor={this.props.data.useVisibilitySensor ?? true}
             >
               <iframe
                 title={this.props.intl.formatMessage(

package/src/Blocks/Maps/Edit.test.js

@@ -0,0 +1,79 @@
+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';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  SidebarPortal: jest.requireActual(
+    '@plone/volto/components/manage/Sidebar/SidebarPortal',
+  ).default,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+  },
+  connected_data_parameters: {},
+});
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders an edit map block component', () => {
+  const component = renderer.create(
+    <Provider store={store}>
+      <Edit
+        data={{
+          '@type': 'maps',
+          url:
+            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          dataprotection: {
+            enabled: false,
+          },
+          useVisibilitySensor: false,
+        }}
+        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/Maps/View.jsx

@@ -40,7 +40,11 @@ const View = ({ data, intl, id }) => {
           'full-width': data.align === 'full',
         })}
       >
-        <PrivacyProtection data={data} id={id}>
+        <PrivacyProtection
+          data={data}
+          id={id}
+          useVisibilitySensor={data.useVisibilitySensor}
+        >
           <iframe
             title={intl.formatMessage(messages.EmbededGoogleMaps)}
             src={data.url}

package/src/Blocks/Maps/View.test.js

@@ -0,0 +1,67 @@
+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 View from './View';
+import installEmbedMaps from '.';
+
+installEmbedMaps(config);
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders a view map block component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <View
+        data={{
+          '@type': 'maps',
+          url:
+            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          useVisibilitySensor: false,
+          dataprotection: {
+            enabled: false,
+          },
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/{Map/Map.jsx → EmbedMap/EmbedMap.jsx}

@@ -21,7 +21,7 @@ const messages = defineMessages({
   },
 });
 
-function Map({ data, intl, id, screen }) {
+function EmbedMap({ data, intl, id, screen }) {
   const el = useRef();
   const [mobile, setMobile] = useState(false);
 
@@ -53,7 +53,12 @@ function Map({ data, intl, id, screen }) {
           'full-width': data.align === 'full',
         })}
       >
-        <PrivacyProtection data={data} id={id} height={data.height}>
+        <PrivacyProtection
+          data={data}
+          id={id}
+          height={data.height}
+          useVisibilitySensor={data.useVisibilitySensor ?? true}
+        >
           <iframe
             title={intl.formatMessage(messages.EmbededGoogleMaps)}
             src={data.url}
@@ -66,14 +71,14 @@ function Map({ data, intl, id, screen }) {
       </div>
       <div className={cx('visualization-toolbar', { mobile })}>
         <div className="left-col">
-          {data.with_notes && <FigureNote note={data.figure_note || []} />}
+          {data.with_notes && <FigureNote notes={data.figure_note || []} />}
           {data.with_sources && <Sources sources={data.sources} />}
           {data.with_more_info && <MoreInfo href={data['@id']} />}
         </div>
         <div className="right-col">
           {data.with_enlarge && (
             <Enlarge className="enlarge-embed-maps">
-              <Map
+              <EmbedMap
                 data={{
                   ...data,
                   height: '100%',
@@ -98,4 +103,4 @@ function Map({ data, intl, id, screen }) {
 export default compose(
   injectIntl,
   connect((state) => ({ screen: state.screen })),
-)(Map);
+)(EmbedMap);

package/src/EmbedMap/EmbedMap.test.js

@@ -0,0 +1,66 @@
+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 EmbedMap from './EmbedMap';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders map component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <EmbedMap
+        id="my-map"
+        data={{
+          with_notes: false,
+          with_sources: false,
+          with_more_info: true,
+          with_share: true,
+          with_enlarge: true,
+          url:
+            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          useVisibilitySensor: false,
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/PrivacyProtection/PrivacyProtection.jsx

@@ -87,6 +87,7 @@ const PrivacyProtection = (props) => {
     intl,
     path,
     cookies,
+    useVisibilitySensor = true,
   } = props;
   const {
     enabled = false,
@@ -173,6 +174,7 @@ const PrivacyProtection = (props) => {
           <Placeholder.Image rectangular />
         </Placeholder>
       )}
+      useVisibilitySensor={useVisibilitySensor}
     >
       <div
         className={cx('privacy-protection-wrapper', className)}

package/src/Toolbar/FigureNote.jsx

@@ -38,8 +38,7 @@ export default function FigureNote({ notes = [] }) {
           <button className={cx('trigger-button', { open })}>Note</button>
         </div>
       }
-    >
-      <Popup.Content>{serializeText(notes)}</Popup.Content>
-    </Popup>
+      content={serializeText(notes)}
+    />
   );
 }

package/src/Toolbar/Toolbar.test.js

@@ -0,0 +1,96 @@
+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 { Enlarge, FigureNote, MoreInfo, Share, Sources } from '.';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+jest.mock('@plone/volto-slate/editor/render', () => ({
+  __esModule: true,
+  serializeNodes: (nodes) => {
+    return nodes.map((node, index) => {
+      const Tag = node.type;
+      return (
+        <Tag key={`node-${index}`}>
+          {node.children.map((item, index) => (
+            <span key={`item-${index}`}>{item.text}</span>
+          ))}
+        </Tag>
+      );
+    });
+  },
+  serializeNodesToText: (nodes) => {
+    return nodes
+      .reduce((texts, node) => {
+        if (node.children) {
+          node.children.forEach((item) => {
+            texts.push(item.text);
+          });
+        }
+        return texts;
+      }, [])
+      .join('');
+  },
+}));
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders toolbar components', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <div className="visualization-toolbar">
+        <div className="left-col">
+          <FigureNote
+            notes={[{ type: 'p', children: [{ text: 'This is a note' }] }]}
+          />
+          <Sources sources={[]} />
+          <MoreInfo href={'/path/to/embeded/content'} />
+        </div>
+        <div className="right-col">
+          <Enlarge className="enlarge-embed-maps">
+            <div>Some enlarged content</div>
+          </Enlarge>
+          <Share href="/path/to/embeded/content" />
+        </div>
+      </div>
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/Views/MapView.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Container } from 'semantic-ui-react';
-import Map from '@eeacms/volto-embed/Map/Map';
+import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
 
 const MapView = (props) => {
   return (
     <Container>
-      <Map data={props.content.maps} id={props.content['@id']} />
+      <EmbedMap data={props.content.maps} id={props.content['@id']} />
     </Container>
   );
 };

package/src/Views/MapView.test.js

@@ -0,0 +1,68 @@
+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 MapView from './MapView';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders map component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <MapView
+        content={{
+          maps: {
+            '@id': '/path/to/map',
+            with_notes: false,
+            with_sources: false,
+            with_more_info: true,
+            with_share: true,
+            with_enlarge: true,
+            url:
+              'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+            useVisibilitySensor: false,
+          },
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/Widgets/MapsViewWidget.jsx

@@ -1,5 +1,5 @@
-import Map from '@eeacms/volto-embed/Map/Map';
+import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
 
 export default function MapsViewWidget({ id, value }) {
-  return <Map data={value} id={id} />;
+  return <EmbedMap data={value} id={id} />;
 }

package/src/Widgets/MapsWidget.jsx

@@ -5,7 +5,7 @@ import { Button, Modal, Grid, Label, Input, Message } from 'semantic-ui-react';
 import { map } from 'lodash';
 import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
-import Map from '@eeacms/volto-embed/Map/Map';
+import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
 import { MapsSchema } from '@eeacms/volto-embed/Blocks/Maps/schema';
 
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -103,7 +103,7 @@ function MapEditorModal({ id, onClose, onChange, ...rest }) {
                 computer={8}
                 className="tableau-visualization-column"
               >
-                <Map data={value} id={id} />
+                <EmbedMap data={value} id={id} />
               </Grid.Column>
             </Grid>
           )}
@@ -204,7 +204,7 @@ export default function MapsWidget(props) {
         </Button>
       </div>
       {description && <p className="help">{description}</p>}
-      {value.url && <Map {...props} data={value} />}
+      {value.url && <EmbedMap {...props} data={value} />}
       {mapEditor && (
         <MapEditorModal
           id={id}

package/src/helpers.js

@@ -0,0 +1,16 @@
+import { pick } from 'lodash';
+
+export function pickMetadata(content) {
+  return {
+    ...pick(content, [
+      '@id',
+      'title',
+      'data_provenance',
+      'figure_note',
+      'other_organisations',
+      'temporan_coverage',
+      'publisher',
+      'geo_coverage',
+    ]),
+  };
+}

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

@@ -1,119 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React from 'react';
-import config from '@plone/volto/registry';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { Provider } from 'react-intl-redux';
-import configureStore from 'redux-mock-store';
-import Edit from './Edit';
-import '@testing-library/jest-dom/extend-expect';
-
-const mockStore = configureStore();
-
-const store = mockStore(() => ({
-  connected_data_parameters: {},
-  router: {
-    location: {
-      pathname: '',
-    },
-  },
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-}));
-
-config.blocks.blocksConfig = {
-  ...config.blocks.blocksConfig,
-  maps: {
-    id: 'maps',
-    title: 'Maps',
-    group: 'media',
-    extensions: {},
-    variations: [],
-    restricted: false,
-    mostUsed: true,
-    sidebarTab: 1,
-    security: {
-      addPermission: [],
-      view: [],
-    },
-  },
-};
-
-jest.mock(
-  '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection',
-  () => ({ children }) => children,
-);
-
-describe('Edit', () => {
-  it('renders without crashing', () => {
-    render(
-      <Provider store={store}>
-        <Edit
-          selected={false}
-          block="block"
-          index={1}
-          data={{
-            '@type': 'maps',
-            url:
-              'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
-          }}
-          pathname="/"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-        />
-      </Provider>,
-    );
-  });
-
-  it('submits url when button is clicked', async () => {
-    const url =
-      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166';
-
-    const { container, getByPlaceholderText } = render(
-      <Provider store={store}>
-        <Edit
-          selected={false}
-          block="block"
-          index={1}
-          data={{
-            '@type': 'maps',
-            dataprotection: {
-              privacy_statement: 'test',
-            },
-          }}
-          pathname="/"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-        />
-      </Provider>,
-    );
-
-    const input = getByPlaceholderText('Enter map Embed Code');
-
-    fireEvent.click(input);
-    fireEvent.change(input, { target: { value: url } });
-    // screen.debug();
-    // expect(input.value).toBe(url);
-
-    // fireEvent.click(container.querySelector('button.cancel'));
-
-    // fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    // fireEvent.keyDown(input, { key: 'Escape', code: 'Escape' });
-    // fireEvent.keyDown(input, { key: 'KeyA', code: 'KeyA' });
-
-    // fireEvent.change(input, { target: { value: '<iframe src="test"/>' } });
-    // fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-
-    // const button = container.querySelector('button.ui.basic.primary.button');
-    // fireEvent.click(button);
-  });
-});