@eeacms/volto-embed 9.1.0 → 10.0.0

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,11 +4,19 @@ 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).
 
-### [9.1.0](https://github.com/eea/volto-embed/compare/9.0.7...9.1.0) - 17 January 2024
+### [10.0.0](https://github.com/eea/volto-embed/compare/9.1.1...10.0.0) - 23 April 2024
 
 #### :rocket: New Features
 
-- feat: show embed error + always show sources [Razvan - [`105d620`](https://github.com/eea/volto-embed/commit/105d6207b244df85eea6d6b9b3bd8e03da0a439b)]
+- feat: Release 10.0.0 - Volto 17 support [alin - [`bea6fba`](https://github.com/eea/volto-embed/commit/bea6fba260bf0551ac17f7c2e30ddd5717756733)]
+- feat: Volto 17 support - refs #264527 [EEA Jenkins - [`fd4b412`](https://github.com/eea/volto-embed/commit/fd4b412405a32abfb680383c2769013974184371)]
+
+### [9.1.1](https://github.com/eea/volto-embed/compare/9.1.0...9.1.1) - 6 February 2024
+
+#### :hammer_and_wrench: Others
+
+- fallbacks [Razvan - [`53441ff`](https://github.com/eea/volto-embed/commit/53441ffa005800032ceb7577d20b6f29c30905dd)]
+### [9.1.0](https://github.com/eea/volto-embed/compare/9.0.7...9.1.0) - 17 January 2024
 
 #### :hammer_and_wrench: Others
 

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,25 +11,30 @@ 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',
   },
-  transformIgnorePatterns: [
-    'node_modules/(?!@eeacms)/volto-datablocks/helpers',
-  ],
   coverageThreshold: {
     global: {
       branches: 5,
@@ -36,7 +43,9 @@ module.exports = {
       statements: 5,
     },
   },
-  setupFilesAfterEnv: [
-    '<rootDir>/node_modules/@eeacms/volto-embed/jest.setup.js',
-  ],
-};
+  ...(process.env.JEST_USE_SETUP === 'ON' && {
+    setupFilesAfterEnv: [
+      '<rootDir>/node_modules/@eeacms/volto-embed/jest.setup.js',
+    ],
+  }),
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "9.1.0",
+  "version": "10.0.0",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -27,6 +27,7 @@
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "cypress-fail-fast": "^5.0.1",
+    "dotenv": "^16.3.2",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "md5": "^2.3.0"

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

@@ -1,51 +1,122 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render, fireEvent } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
 
 import Edit from './Edit';
 import installEmbedMaps from '.';
+import '@testing-library/jest-dom/extend-expect';
 
 installEmbedMaps(config);
 
-test('renders an edit embed map block component', () => {
-  const component = renderer.create(
-    <Provider store={global.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={true}
-        block="1234"
-        index={1}
-        onChangeBlock={() => {}}
-        onSelectBlock={() => {}}
-        onDeleteBlock={() => {}}
-        onFocusPreviousBlock={() => {}}
-        onFocusNextBlock={() => {}}
-        handleKeyDown={() => {}}
-        content={{}}
-      />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+jest.mock('@plone/volto/components', () => ({
+  SidebarPortal: ({ children }) => (
+    <div data-testid="sidebar-portal">{children}</div>
+  ),
+  UniversalLink: ({ children, href }) => <a href={href}>{children}</a>,
+}));
+
+jest.mock(
+  '@plone/volto/components/manage/Form/BlockDataForm',
+  () => (props) => (
+    <div data-testid="block-data-form">
+      <p>Mocked BlockDataForm</p>
+      <input data-testid="block-data-input" onChange={props.onChangeField} />
+    </div>
+  ),
+);
+
+jest.mock('./View', () =>
+  jest.fn((props) => (
+    <div>
+      <div data-testid="view-component" mode={props.mode}>
+        Mocked View Component
+      </div>
+      {props.children}
+    </div>
+  )),
+);
+
+describe('Edit component', () => {
+  const mockOnChangeBlock = jest.fn();
+  const props = {
+    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: true,
+    block: '1234',
+    index: 1,
+    onChangeBlock: jest.fn(),
+    onSelectBlock: jest.fn(),
+    onDeleteBlock: jest.fn(),
+    onFocusPreviousBlock: jest.fn(),
+    onFocusNextBlock: jest.fn(),
+    handleKeyDown: jest.fn(),
+    content: {},
+  };
+
+  it('should render View component with mode set to edit', () => {
+    const { getByTestId } = render(
+      <Provider store={global.store}>
+        <Edit {...props} />
+      </Provider>,
+    );
+
+    const viewComponent = getByTestId('view-component');
+    expect(viewComponent).toBeInTheDocument();
+    expect(viewComponent).toHaveAttribute('mode', 'edit');
+  });
+
+  it('should render SidebarPortal when selected is true', () => {
+    const { getByTestId } = render(
+      <Provider store={global.store}>
+        <Edit {...props} />
+      </Provider>,
+    );
+    const sidebarPortal = getByTestId('sidebar-portal');
+    expect(sidebarPortal).toBeInTheDocument();
+  });
+
+  it('should render SidebarPortal and BlockDataForm', () => {
+    const { getByTestId } = render(
+      <Provider store={global.store}>
+        <Edit {...props} />
+      </Provider>,
+    );
+
+    const sidebarPortal = getByTestId('sidebar-portal');
+    const blockDataForm = getByTestId('block-data-form');
+    expect(sidebarPortal).toBeInTheDocument();
+    expect(blockDataForm).toBeInTheDocument();
+  });
+
+  it('should call onChangeBlock when onChangeField is triggered', () => {
+    const { getByTestId } = render(
+      <Provider store={global.store}>
+        <Edit {...props} onChangeBlock={mockOnChangeBlock} />
+      </Provider>,
+    );
+
+    const inputField = getByTestId('block-data-input');
+    fireEvent.change(inputField, { target: { value: 'new value' } });
+
+    expect(mockOnChangeBlock).toHaveBeenCalled();
+  });
 });

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

@@ -1,71 +1,118 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import View from './View';
 import installEmbedMaps from '.';
 
 installEmbedMaps(config);
 
-test('renders a view embed map block component', () => {
-  const component = renderer.create(
-    <Provider store={global.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,
-          parameters: {
-            '@id': '647e4a0f-d4a0-4b8a-9965-0a016f017ebd',
-            field: 'zoomtocountry',
-            value: 'RO',
-          },
-          height: '800',
-        }}
-        data_query={[
-          {
-            i: 'Country',
-            o: 'plone.app.querystring.operation.selection.is',
-            v: ['RO'],
-          },
-        ]}
-      />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+describe('EmbedMaps Block View', () => {
+  it('renders a view embed map block component', () => {
+    render(
+      <Provider store={global.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,
+            parameters: {
+              '@id': '647e4a0f-d4a0-4b8a-9965-0a016f017ebd',
+              field: 'zoomtocountry',
+              value: 'RO',
+            },
+            height: '800',
+          }}
+          data_query={[
+            {
+              i: 'Country',
+              o: 'plone.app.querystring.operation.selection.is',
+              v: ['RO'],
+            },
+          ]}
+        />
+      </Provider>,
+    );
+    expect(screen.getByTitle('Embeded ESRI Maps')).toBeInTheDocument();
+    expect(screen.getByText('Sources')).toBeInTheDocument();
+    expect(screen.getByText('More info')).toBeInTheDocument();
+    expect(screen.getByText('Share')).toBeInTheDocument();
+    expect(screen.getByText('Enlarge')).toBeInTheDocument();
+  });
+
+  it('renders an edit view embed map block component', () => {
+    render(
+      <Provider store={global.store}>
+        <View
+          id="my-map"
+          mode="edit"
+          data={{
+            '@type': 'embed_maps',
+            url: '',
+            maps: {},
+          }}
+        />
+      </Provider>,
+    );
+    expect(
+      screen.getByText('Please select a map from block editor.'),
+    ).toBeInTheDocument();
+  });
+
+  it('handles map error', () => {
+    render(
+      <Provider store={global.store}>
+        <View
+          id="my-map"
+          data={{
+            '@type': 'embed_maps',
+            maps: {
+              error: 'Error message',
+            },
+          }}
+        />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Error message')).toBeInTheDocument();
+  });
+
+  it('handles share button click', () => {
+    render(
+      <Provider store={global.store}>
+        <View
+          id="my-map"
+          data={{
+            '@type': 'embed_maps',
+            with_share: 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',
+            },
+          }}
+        />
+      </Provider>,
+    );
 
-test('renders an edit view embed map block component', () => {
-  const component = renderer.create(
-    <Provider store={global.store}>
-      <View
-        id="my-map"
-        mode="edit"
-        data={{
-          '@type': 'embed_maps',
-          url: '',
-          maps: {},
-        }}
-      />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+    fireEvent.click(screen.getByText('Share'));
+    expect(screen.getByDisplayValue('/path/to/map')).toBeInTheDocument();
+  });
 });

package/src/Blocks/EmbedMaps/schema.js

@@ -27,7 +27,7 @@ const parameters = {
   required: [],
 };
 
-export default (props) => {
+const getSchema = (props) => {
   return {
     title: 'Embed interactive Map',
     fieldsets: [
@@ -101,3 +101,5 @@ export default (props) => {
     required: [],
   };
 };
+
+export default getSchema;

package/src/Blocks/Maps/Edit.jsx

@@ -145,11 +145,17 @@ class Edit extends Component {
    * @returns {undefined}
    */
   onSubmitUrl() {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      url: this.getSrc(this.state.url),
-      privacy_notification: this.state.privacy_notification,
-    });
+    try {
+      const url = this.getSrc(this.state.url);
+      new URL(url);
+      this.props.onChangeBlock(this.props.block, {
+        ...this.props.data,
+        url: this.getSrc(this.state.url),
+        privacy_notification: this.state.privacy_notification,
+      });
+    } catch {
+      this.setState({ error: true });
+    }
   }
 
   /**

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render, screen, fireEvent } 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';
 
@@ -26,8 +27,7 @@ describe('Test Maps Block editing', () => {
 
   const data = {
     '@type': 'maps',
-    url:
-      '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11255.043736345397!2d24.6862147!3d45.15143895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x474d3248f30cd7b5%3A0x307c5acf21ded9e3!2sHotel%20Posada!5e0!3m2!1sro!2sro!4v1701254795494!5m2!1sro!2sro" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>',
+    url: '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11255.043736345397!2d24.6862147!3d45.15143895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x474d3248f30cd7b5%3A0x307c5acf21ded9e3!2sHotel%20Posada!5e0!3m2!1sro!2sro!4v1701254795494!5m2!1sro!2sro" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>',
     dataprotection: {
       enabled: false,
       privacy_statement: 'This is a privacy statement',
@@ -35,8 +35,8 @@ describe('Test Maps Block editing', () => {
     useVisibilitySensor: false,
   };
 
-  test('test-1', () => {
-    const component = renderer.create(
+  it('renders the edit form with a map', () => {
+    const { container } = render(
       <Provider store={global.store}>
         <Edit
           data={data}
@@ -54,15 +54,18 @@ describe('Test Maps Block editing', () => {
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(screen.getByTitle('ESRI Maps Embedded Block')).toBeInTheDocument();
+    expect(container.querySelector('iframe')).toBeInTheDocument();
   });
 
-  test('test-2', () => {
-    const component = renderer.create(
+  it('renders the edit form without a map', () => {
+    render(
       <Provider store={global.store}>
         <Edit
-          data={data}
+          data={{
+            '@type': 'maps',
+            url: '',
+          }}
           pathname="/news"
           selected={true}
           block="1234"
@@ -77,12 +80,15 @@ describe('Test Maps Block editing', () => {
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(
+      screen.getByText(
+        'Please enter the embed code or URL for the ESRI webmap.',
+      ),
+    ).toBeInTheDocument();
   });
 
-  test('test-3', () => {
-    const component = renderer.create(
+  it('handles URL input', () => {
+    const { container } = render(
       <Provider store={global.store}>
         <Edit
           data={{
@@ -93,17 +99,22 @@ describe('Test Maps Block editing', () => {
           selected={true}
           block="1234"
           index={1}
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-          content={{}}
+          onChangeBlock={jest.fn()}
+          onSelectBlock={jest.fn()}
+          onDeleteBlock={jest.fn()}
+          onFocusPreviousBlock={jest.fn()}
+          onFocusNextBlock={jest.fn()}
+          handleKeyDown={jest.fn()}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    const input = screen.getByPlaceholderText('Enter map Embed Code');
+    fireEvent.change(input, { target: { value: 'https://example.com/map' } });
+    fireEvent.click(container.querySelector('button.primary.button'));
+
+    expect(
+      screen.getByDisplayValue('https://example.com/map'),
+    ).toBeInTheDocument();
   });
 });

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/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 View from './View';
 import installEmbedMaps from '.';
@@ -32,29 +32,32 @@ config.blocks.blocksConfig = {
   },
 };
 
-describe('Test Maps Block rendering', () => {
+describe('Maps Block View', () => {
   const 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',
+    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,
     },
   };
 
-  test('test-1', () => {
-    const component = renderer.create(
+  it('test-1', () => {
+    const { container } = render(
       <Provider store={global.store}>
         <View data={data} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(screen.getByTitle('Embeded ESRI Maps')).toBeInTheDocument();
+    expect(container.querySelector('iframe')).toHaveAttribute(
+      'src',
+      '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',
+    );
   });
 
-  test('test-2', () => {
-    const component = renderer.create(
+  it('test-2', () => {
+    const { container } = render(
       <Provider store={global.store}>
         <View
           data={{
@@ -64,11 +67,14 @@ describe('Test Maps Block rendering', () => {
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container.querySelector('iframe')).toHaveAttribute(
+      'style',
+      'height: 100vh;',
+    );
   });
 
-  test('test-3', () => {
+  it('test-3', () => {
     const Component = (props) => (
       <Provider store={global.store}>
         <View
@@ -86,11 +92,8 @@ describe('Test Maps Block rendering', () => {
     );
     const { container, rerender } = render(<Component />);
 
-    expect(container).toMatchSnapshot();
-
     container.querySelector('.privacy-button button').click();
 
     rerender(<Component />);
-    expect(container).toMatchSnapshot();
   });
 });

package/src/EmbedMap/EmbedMap.test.js

@@ -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 EmbedMap from './EmbedMap';
 
@@ -23,28 +24,65 @@ config.blocks.blocksConfig = {
   },
 };
 
-test('renders map component', () => {
-  const component = renderer.create(
-    <Provider store={global.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,
-          parameters: {
-            Country: 'RO',
-            zoomtocountry: 'RO',
-          },
-        }}
-      />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+describe('EmbedMap', () => {
+  it('renders map component', () => {
+    const { container } = render(
+      <Provider store={global.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,
+            parameters: {
+              Country: 'RO',
+              zoomtocountry: 'RO',
+            },
+          }}
+        />
+      </Provider>,
+    );
+    expect(screen.getByTitle('Embeded ESRI Maps')).toBeInTheDocument();
+    expect(container.querySelector('iframe')).toHaveAttribute(
+      'src',
+      '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&Country=RO&zoomtocountry=RO',
+    );
+    expect(screen.getByText('More info')).toBeInTheDocument();
+    expect(screen.getByText('Share')).toBeInTheDocument();
+    expect(screen.getByText('Enlarge')).toBeInTheDocument();
+  });
+
+  it('handles mobile view', () => {
+    const { container } = render(
+      <Provider store={global.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,
+            parameters: {
+              Country: 'RO',
+              zoomtocountry: 'RO',
+            },
+          }}
+          intl={{ formatMessage: (message) => message.defaultMessage }}
+          screen={{ width: 400 }}
+        />
+      </Provider>,
+    );
+
+    expect(container.querySelector('iframe')).toHaveClass('google-map');
+    expect(container.querySelector('.visualization-toolbar')).toHaveClass(
+      'mobile',
+    );
+  });
 });

package/src/PrivacyProtection/schema.js

@@ -24,8 +24,7 @@ export const ProtectionSchema = () => ({
         {
           children: [
             {
-              text:
-                'This map is hosted by a third party, Environmental Systems Research Institute. By showing the external content you accept the terms and conditions of ',
+              text: 'This map is hosted by a third party, Environmental Systems Research Institute. By showing the external content you accept the terms and conditions of ',
             },
             {
               type: 'a',
@@ -37,8 +36,7 @@ export const ProtectionSchema = () => ({
               ],
             },
             {
-              text:
-                '. This includes their cookie policies, which we have no control over.',
+              text: '. This includes their cookie policies, which we have no control over.',
             },
           ],
         },

package/src/PrivacyProtection/styles.less

@@ -19,9 +19,9 @@
   .wrapped {
     width: 300px;
     padding: 1.4rem;
+    border-radius: 5px;
     margin: 0 auto;
     background: white;
-    border-radius: 5px;
     opacity: 1;
   }
 

package/src/Toolbar/Toolbar.test.js

@@ -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 { Enlarge, FigureNote, MoreInfo, Share, Sources } from '.';
 
@@ -24,7 +25,7 @@ config.blocks.blocksConfig = {
 };
 
 test('renders toolbar components', () => {
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={global.store}>
       <div className="visualization-toolbar">
         <div className="left-col">
@@ -43,6 +44,37 @@ test('renders toolbar components', () => {
       </div>
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(screen.getByText('Note')).toBeInTheDocument();
+  expect(screen.getByText('Sources')).toBeInTheDocument();
+  expect(screen.getByText('More info')).toBeInTheDocument();
+  expect(screen.getByText('Share')).toBeInTheDocument();
+  expect(screen.getByText('Enlarge')).toBeInTheDocument();
+  expect(
+    screen.getByDisplayValue('/path/to/embeded/content'),
+  ).toBeInTheDocument();
+  expect(screen.getByText('Copy')).toBeInTheDocument();
+  expect(container.querySelector('.figure-note')).toBeInTheDocument();
+  expect(container.querySelector('.sources')).toBeInTheDocument();
+  expect(container.querySelector('.more-info')).toBeInTheDocument();
+  expect(container.querySelector('.enlarge')).toBeInTheDocument();
+  expect(container.querySelector('.share')).toBeInTheDocument();
+  expect(container.querySelector('p')).toHaveTextContent('This is a note');
+  expect(
+    screen.getByText('Data provenance is not set for this visualization.'),
+  ).toBeInTheDocument();
+  expect(container.querySelector('a')).toHaveAttribute(
+    'href',
+    '/path/to/embeded/content',
+  );
+  expect(
+    container.querySelector('i.ri-external-link-line'),
+  ).toBeInTheDocument();
+  expect(container.querySelector('i.ri-fullscreen-line')).toBeInTheDocument();
+  expect(container.querySelector('i.ri-share-fill')).toBeInTheDocument();
+  expect(container.querySelector('input')).toHaveAttribute(
+    'value',
+    '/path/to/embeded/content',
+  );
+  expect(container.querySelector('button.copy-button')).toBeInTheDocument();
 });

package/src/Views/MapView.test.js

@@ -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 MapView from './MapView';
 
@@ -29,7 +30,7 @@ config.blocks.blocksConfig = {
 };
 
 test('renders map component', () => {
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={global.store}>
       <MapView
         content={{
@@ -40,14 +41,33 @@ test('renders map component', () => {
             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',
+            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();
+
+  expect(screen.getByTitle('Embeded ESRI Maps')).toBeInTheDocument();
+  expect(container.querySelector('iframe')).toHaveAttribute(
+    'src',
+    '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',
+  );
+  expect(container.querySelector('.more-info')).toBeInTheDocument();
+  expect(container.querySelector('.more-info a')).toHaveAttribute(
+    'href',
+    '/path/to/map',
+  );
+  expect(container.querySelector('.share')).toBeInTheDocument();
+  expect(container.querySelector('.share button')).toBeInTheDocument();
+  expect(container.querySelector('.enlarge')).toBeInTheDocument();
+  expect(container.querySelector('.enlarge button')).toBeInTheDocument();
+  expect(container.querySelector('.ui.input.share-link input')).toHaveAttribute(
+    'value',
+    '/path/to/map',
+  );
+  expect(
+    container.querySelector('.ui.primary.button.copy-button'),
+  ).toBeInTheDocument();
 });

package/src/Widgets/MapsWidget.jsx

@@ -21,8 +21,8 @@ const messages = defineMessages({
 
 function MapEditorModal({ id, onClose, onChange, ...rest }) {
   const intl = useIntl();
-  const [value, setValue] = useState(rest.value);
-  const [url, setUrl] = useState(rest.value.url);
+  const [value, setValue] = useState(rest.value || {});
+  const [url, setUrl] = useState(rest.value?.url || '');
   const [error, setError] = useState(false);
 
   const schema = useMemo(
@@ -213,11 +213,11 @@ export default function MapsWidget(props) {
         </Button>
       </div>
       {description && <p className="help">{description}</p>}
-      {value.url && <EmbedMap {...props} data={value} />}
+      {value?.url && <EmbedMap {...props} data={value} />}
       {mapEditor && (
         <MapEditorModal
           id={id}
-          value={value}
+          value={value || {}}
           onChange={onChange}
           onClose={() => setMapEditor(false)}
         />

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',
-      },
-    },
-  },
-};
-