@eeacms/volto-cca-policy 1.0.2 → 1.0.4

package/src/components/theme/Views/ExtendedToolView.test.jsx

@@ -1,74 +1,436 @@
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
 import '@testing-library/jest-dom';
-import { Provider } from 'react-intl-redux';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
 import ExtendedToolView from './ExtendedToolView';
-import renderer from 'react-test-renderer';
-import config from '@plone/volto/registry';
+import { useCompareTools } from '../CompareTools/utils';
+import { formatFunctionalityScore } from '../../Search/NavigatorCatalogue/utils';
+
+jest.mock('../CompareTools/utils', () => ({
+  useCompareTools: jest.fn(),
+}));
+
+jest.mock('@eeacms/volto-cca-policy/components', () => ({
+  CompareToolsPanel: () => <div data-testid="compare-tools-panel" />,
+  PortalMessage: () => <div data-testid="portal-message" />,
+}));
+
+jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
+  HTMLField: ({ value }) =>
+    value ? <div dangerouslySetInnerHTML={{ __html: value }} /> : null,
+
+  TextField: ({ label, value }) =>
+    value !== null && value !== undefined && value !== '' ? (
+      <div>
+        <span>{label}</span>
+        <span>{String(value)}</span>
+      </div>
+    ) : null,
+
+  BooleanField: ({ label, value, yesLabel, noLabel }) => (
+    <div>
+      <span>{label}</span>
+      <span>{value ? yesLabel : noLabel}</span>
+    </div>
+  ),
+
+  VocabularyField: ({ label, values = [] }) =>
+    values.length > 0 ? (
+      <div>
+        <span>{label}</span>
+        <span>{values.join(', ')}</span>
+      </div>
+    ) : null,
 
-config.blocks = {
-  blocksConfig: {
-    title: {
-      view: () => <div>Title Block Component</div>,
+  ContentMetadata: () => <div data-testid="content-metadata" />,
+  ItemLogo: () => <div data-testid="item-logo" />,
+  DocumentsList: () => <div data-testid="documents-list" />,
+}));
+
+jest.mock('@plone/volto/registry', () => ({
+  blocks: {
+    blocksConfig: {
+      title: {
+        view: ({ metadata }) => <h1>{metadata.title}</h1>,
+      },
     },
   },
-};
-
-const mockStore = configureStore();
+}));
 
-jest.mock('semantic-ui-react', () => ({
-  ...jest.requireActual('semantic-ui-react'),
+jest.mock('../../Search/NavigatorCatalogue/utils', () => ({
+  formatFunctionalityScore: jest.fn((value) => `Formatted score: ${value}`),
 }));
 
-jest.mock('@eeacms/volto-embed', () => {
-  return {
-    PrivacyProtection: jest.fn(({ children }) => <div>{children}</div>),
-  };
-});
+const toggle = jest.fn();
+
+const renderComponent = (content = {}) =>
+  render(
+    <IntlProvider locale="en" messages={{}}>
+      <ExtendedToolView content={content} />
+    </IntlProvider>,
+  );
 
 describe('ExtendedToolView', () => {
-  it('should render the component', () => {
-    const content = {
-      title: 'My ExtendedToolView',
-      long_description: {
-        'content-type': null,
-        data: '<p>Nam commodo suscipit quam. Praesent egestas neque eu enim. Quisque rutrum.</p>',
-        encoding: 'utf-8',
-      },
-      publication_date: '2022-06-24',
-      geochars:
-        '{\r\n "geoElements":{"element":"GLOBAL",\r\n "macrotrans":null,"biotrans":null,"countries":[],\r\n "subnational":[],"city":""}}',
-      keywords: ['keyword 1', 'keyword 2'],
-      websites: ['https://example.org/'],
-      contributions: [
-        {
-          title: 'Contributor 1',
-          url: '/contributor-1',
-        },
-        {
-          title: 'Contributor 2',
-          url: '/contributor-2',
-        },
-      ],
-    };
-
-    const store = mockStore({
-      userSession: { token: '1234' },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    useCompareTools.mockReturnValue({
+      isSelected: false,
+      isLimitReached: false,
+      toggle,
+    });
+  });
+
+  it('renders the title and acronym', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      acronym: 'CT',
+    });
+
+    expect(
+      screen.getByRole('heading', {
+        name: 'Climate Tool (CT)',
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the title without an acronym', () => {
+    renderComponent({
+      title: 'Climate Tool',
+    });
+
+    expect(
+      screen.getByRole('heading', {
+        name: 'Climate Tool',
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the open-tool button when a hyperlink is provided', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      hyperlink: 'https://example.com/tool',
+    });
+
+    const openToolButton = screen.getByRole('button', {
+      name: /open tool/i,
+    });
+
+    expect(openToolButton).toHaveAttribute('href', 'https://example.com/tool');
+    expect(openToolButton).toHaveAttribute('target', '_blank');
+    expect(openToolButton).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('does not render the open-tool button without a hyperlink', () => {
+    renderComponent({
+      title: 'Climate Tool',
+    });
+
+    expect(
+      screen.queryByRole('button', {
+        name: /open tool/i,
+      }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('adds the tool to comparison when the button is clicked', () => {
+    renderComponent({
+      UID: 'tool-uid',
+      '@id': '/tools/climate-tool',
+      title: 'Climate Tool',
     });
 
-    const component = renderer.create(
-      <Provider store={store}>
-        <MemoryRouter>
-          <ExtendedToolView content={content} />
-        </MemoryRouter>
-      </Provider>,
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /add to comparison/i,
+      }),
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(toggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('passes the correct tool data to useCompareTools', () => {
+    renderComponent({
+      UID: 'tool-uid',
+      '@id': '/tools/climate-tool',
+      title: 'Climate Tool',
+    });
+
+    expect(useCompareTools).toHaveBeenCalledWith({
+      uid: 'tool-uid',
+      title: 'Climate Tool',
+      href: '/tools/climate-tool',
+    });
+  });
+
+  it('disables the comparison button when the tool is selected', () => {
+    useCompareTools.mockReturnValue({
+      isSelected: true,
+      isLimitReached: false,
+      toggle,
+    });
+
+    renderComponent({
+      UID: 'tool-uid',
+      '@id': '/tools/climate-tool',
+      title: 'Climate Tool',
+    });
+
+    const button = screen.getByRole('button', {
+      name: /add to comparison/i,
+    });
+
+    expect(button).toBeDisabled();
+  });
+
+  it('disables the comparison button when the comparison limit is reached', () => {
+    useCompareTools.mockReturnValue({
+      isSelected: false,
+      isLimitReached: true,
+      toggle,
+    });
+
+    renderComponent({
+      UID: 'tool-uid',
+      '@id': '/tools/climate-tool',
+      title: 'Climate Tool',
+    });
+
+    const button = screen.getByRole('button', {
+      name: /add to comparison/i,
+    });
+
+    expect(button).toBeDisabled();
+  });
+
+  it('does not call toggle when the comparison button is disabled', () => {
+    useCompareTools.mockReturnValue({
+      isSelected: true,
+      isLimitReached: false,
+      toggle,
+    });
+
+    renderComponent({
+      UID: 'tool-uid',
+      '@id': '/tools/climate-tool',
+      title: 'Climate Tool',
+    });
+
+    const button = screen.getByRole('button', {
+      name: /add to comparison/i,
+    });
+
+    fireEvent.click(button);
+
+    expect(toggle).not.toHaveBeenCalled();
+  });
+
+  it('does not render the comparison button without a UID', () => {
+    renderComponent({
+      title: 'Climate Tool',
+    });
+
+    expect(
+      screen.queryByRole('button', {
+        name: /add to comparison/i,
+      }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders English and the additional available language', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      tool_available_english: true,
+      tool_available_language: 'French',
+    });
+
+    expect(screen.getByText('English, French')).toBeInTheDocument();
+  });
+
+  it('renders only English when no additional language is provided', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      tool_available_english: true,
+    });
+
+    expect(screen.getByText('English')).toBeInTheDocument();
+  });
+
+  it('renders only the additional language when English is unavailable', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      tool_available_english: false,
+      tool_available_language: 'Romanian',
+    });
+
+    expect(screen.getByText('Romanian')).toBeInTheDocument();
+    expect(screen.queryByText(/English,/)).not.toBeInTheDocument();
+  });
+
+  it('does not render an available-language value when none exists', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      tool_available_english: false,
+      tool_available_language: '',
+    });
+
+    expect(screen.queryByText('Available language')).not.toBeInTheDocument();
+  });
+
+  it('formats the functionality score', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      functionality: 4,
+    });
+
+    expect(formatFunctionalityScore).toHaveBeenCalledWith(4);
+    expect(screen.getByText('Formatted score: 4')).toBeInTheDocument();
+  });
+
+  it('formats a functionality score of zero', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      functionality: 0,
+    });
+
+    expect(formatFunctionalityScore).toHaveBeenCalledWith(0);
+    expect(screen.getByText('Formatted score: 0')).toBeInTheDocument();
+  });
+
+  it('does not format an undefined functionality score', () => {
+    renderComponent({
+      title: 'Climate Tool',
+    });
+
+    expect(formatFunctionalityScore).not.toHaveBeenCalled();
+  });
+
+  it('does not format a null functionality score', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      functionality: null,
+    });
+
+    expect(formatFunctionalityScore).not.toHaveBeenCalled();
+  });
+
+  it('renders text fields', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      tool_provider: 'Example Provider',
+      public_private_mode: 'Public',
+      spatial_resolution: 'Regional',
+      underlying_data_maintenance: 'Updated yearly',
+      strengths_and_possible_limitations: 'Easy to use',
+    });
+
+    expect(screen.getByText('Example Provider')).toBeInTheDocument();
+    expect(screen.getByText('Public')).toBeInTheDocument();
+    expect(screen.getByText('Regional')).toBeInTheDocument();
+    expect(screen.getByText('Updated yearly')).toBeInTheDocument();
+    expect(screen.getByText('Easy to use')).toBeInTheDocument();
+  });
+
+  it('renders coder fields', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      coder_1: 'Coder One',
+      coder_2: 'Coder Two',
+    });
+
+    expect(screen.getByText('Coder1')).toBeInTheDocument();
+    expect(screen.getByText('Coder One')).toBeInTheDocument();
+    expect(screen.getByText('Coder2')).toBeInTheDocument();
+    expect(screen.getByText('Coder Two')).toBeInTheDocument();
+  });
+
+  it('renders HTML descriptions', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      long_description: '<p>Long tool description</p>',
+      description: '<p>Short tool description</p>',
+    });
+
+    expect(screen.getByText('Long tool description')).toBeInTheDocument();
+    expect(screen.getByText('Short tool description')).toBeInTheDocument();
+  });
+
+  it('renders boolean fields with YES values', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      only_interactive_support_tool: true,
+      adaptation_cycle_step: true,
+      updating_cycle_of_the_tool: true,
+      language_accessibility: true,
+      free_access: true,
+    });
+
+    expect(screen.getAllByText('YES')).toHaveLength(5);
+  });
+
+  it('renders boolean fields with NO values', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      only_interactive_support_tool: false,
+      adaptation_cycle_step: false,
+      updating_cycle_of_the_tool: false,
+      language_accessibility: false,
+      free_access: false,
+    });
+
+    expect(screen.getAllByText('NO')).toHaveLength(5);
+  });
+
+  it('renders vocabulary fields', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      intended_user_groups: ['Policy makers', 'Researchers'],
+      place_of_implementation: ['Europe'],
+      type_of_data: ['Climate data'],
+      data_sources: ['Satellite'],
+      license_status: ['Open source'],
+      user_support_provisions: ['Documentation'],
+      tool_validation_use: ['Validated'],
+      number_of_users_tool: ['More than 1,000'],
+      tool_provider_mode: ['Public provider'],
+      adaptation_support_cycle_step: ['Assessing risks'],
+      type_of_outputs: ['Maps'],
+      temporality_of_data: ['Historical'],
+    });
+
+    expect(screen.getByText('Policy makers, Researchers')).toBeInTheDocument();
+    expect(screen.getByText('Europe')).toBeInTheDocument();
+    expect(screen.getByText('Climate data')).toBeInTheDocument();
+    expect(screen.getByText('Satellite')).toBeInTheDocument();
+    expect(screen.getByText('Open source')).toBeInTheDocument();
+    expect(screen.getByText('Documentation')).toBeInTheDocument();
+    expect(screen.getByText('Validated')).toBeInTheDocument();
+    expect(screen.getByText('More than 1,000')).toBeInTheDocument();
+    expect(screen.getByText('Public provider')).toBeInTheDocument();
+    expect(screen.getByText('Assessing risks')).toBeInTheDocument();
+    expect(screen.getByText('Maps')).toBeInTheDocument();
+    expect(screen.getByText('Historical')).toBeInTheDocument();
+  });
+
+  it('renders accessibility and usability as a vocabulary value', () => {
+    renderComponent({
+      title: 'Climate Tool',
+      accessibility_and_usability: 'Easy to use',
+    });
+
+    expect(screen.getByText('Easy to use')).toBeInTheDocument();
+  });
+
+  it('renders supporting components', () => {
+    renderComponent({
+      title: 'Climate Tool',
+    });
+
+    expect(screen.getByTestId('item-logo')).toBeInTheDocument();
+    expect(screen.getByTestId('compare-tools-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('portal-message')).toBeInTheDocument();
+    expect(screen.getByTestId('content-metadata')).toBeInTheDocument();
+    expect(screen.getByTestId('documents-list')).toBeInTheDocument();
   });
 });

package/src/constants.js

@@ -123,54 +123,6 @@ export const DOWNLOAD_MISSION_FUNDING_FIELDS = [
   },
 ];
 
-// Download fields for mission content types
-// Don't delete - might be needed later (ticket refs #295149)
-// export const DOWNLOAD_MISSION_STORIES_FIELDS = [
-//   { field: 'about', name: 'About' },
-//   { field: 'title', name: 'Title' },
-//   { field: 'main_content', name: 'Content' },
-//   { field: 'created', name: 'Creation Date' },
-//   { field: 'issued', name: 'Issued Date' },
-//   { field: 'cca_climate_impacts', name: 'Climate impact' },
-//   { field: 'cca_adaptation_sectors', name: 'Sectors' },
-//   { field: 'key_system', name: 'Key Community Systems' },
-//   { field: 'cca_funding_programme', name: 'Funding programme' },
-//   {
-//     field: 'spatial',
-//     name: 'Countries ',
-//   },
-//   { field: 'cca_keywords', name: 'Keywords' },
-// ];
-
-// export const DOWNLOAD_MISSION_PROJECTS_FIELDS = [
-//   { field: 'about', name: 'About' },
-//   { field: 'title', name: 'Title' },
-//   { field: 'main_content', name: 'Content' },
-//   { field: 'created', name: 'Creation Date' },
-//   { field: 'issued', name: 'Issued Date' },
-//   { field: 'cca_keywords', name: 'Keywords' },
-//   { field: 'cca_funding_programme', name: 'Funding Programme' },
-//   { field: 'cca_climate_impacts', name: 'Climate impact' },
-//   { field: 'cca_adaptation_elements', name: 'Adaptation Approaches' },
-//   { field: 'cca_adaptation_sectors', name: 'Sectors' },
-//   { field: 'cca_geographic_countries', name: 'Countries' },
-// ];
-
-// export const DOWNLOAD_MISSION_TOOLS_FIELDS = [
-//   { field: 'about', name: 'About' },
-//   { field: 'title', name: 'Title' },
-//   { field: 'main_content', name: 'Content' },
-//   { field: 'created', name: 'Creation Date' },
-//   { field: 'issued', name: 'Issued Date' },
-//   { field: 'cca_rast_steps', name: 'RAST step(s) of relevance' },
-//   { field: 'cca_geographical_scale', name: 'Geographical scale' },
-//   { field: 'cca_climate_impacts', name: 'Climate impact' },
-//   { field: 'cca_tool_language', name: 'Language(s) of the tool' },
-//   { field: 'cca_adaptation_sectors', name: 'Sectors' },
-//   { field: 'cca_most_useful_for', name: 'Most useful for' },
-//   { field: 'cca_user_requirements', name: 'User requirements' },
-// ];
-
 export const EEA_LANGUAGES = [
   { name: 'български', code: 'bg' },
   { name: 'Español', code: 'es' },

package/src/customizations/volto/reducers/breadcrumbs/breadcrumbs.js

@@ -67,7 +67,7 @@ export default function breadcrumbs(state = initialState, action = {}) {
         'breadcrumbs',
         getBaseUrl(flattenToAppURL(action.result['@id'])),
       );
-      if (!hasExpander) {
+      if (action.manual || !hasExpander) {
         return {
           ...state,
           error: null,

package/src/helpers/Utils.jsx

@@ -62,6 +62,35 @@ export const HTMLField = ({ value, className }) => {
   );
 };
 
+export const TextField = ({ label, value }) => {
+  if (value === null || value === undefined || value === '') return null;
+
+  return (
+    <>
+      <h5>{label}</h5>
+      <p>{value}</p>
+    </>
+  );
+};
+
+export const BooleanField = ({ label, value, yesLabel, noLabel }) => (
+  <TextField label={label} value={value ? yesLabel : noLabel} />
+);
+
+export const VocabularyField = ({ label, values }) => {
+  if (!values?.length) return null;
+
+  return (
+    <TextField
+      label={label}
+      value={values
+        .map((value) => value?.title || value?.token || value)
+        .filter(Boolean)
+        .join(', ')}
+    />
+  );
+};
+
 export const ExternalLink = (props) => {
   let { url, text } = props;
 

package/src/helpers/index.js

@@ -1,6 +1,9 @@
 import { OBSERVATORY_PARTNERS } from '@eeacms/volto-cca-policy/constants';
 export {
   HTMLField,
+  TextField,
+  BooleanField,
+  VocabularyField,
   ExternalLink,
   PublishedModifiedInfo,
   LinksList,

package/src/index.js

@@ -13,6 +13,7 @@ import {
   MissionSignatoryProfileView,
   CreateArchivedCopyButton,
   ImageWidget,
+  CompareToolsView,
 } from '@eeacms/volto-cca-policy/components';
 
 import CcaEventView from './components/theme/Views/CcaEventView';
@@ -49,6 +50,11 @@ import GeocharsWidget from './components/theme/Widgets/GeocharsWidget';
 import PromotionalImageWidget from './components/theme/Widgets/PromotionalImageWidget';
 import HealthHorizontalCardItem from './components/Result/HealthHorizontalCardItem';
 import ClusterHorizontalCardItem from './components/Result/ClusterHorizontalCardItem';
+import NavigatorCatalogueCardItem from './components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem';
+import NavigatorCatalogueMapView from './components/Search/NavigatorCatalogue/NavigatorCatalogueMapView';
+import NavigatorCatalogueContentView from './components/Search/NavigatorCatalogue/NavigatorCatalogueContentView';
+import NavigatorGuideLayout from './components/Search/NavigatorGuide/NavigatorGuideLayout';
+import NavigatorGuideContentView from './components/Search/NavigatorGuide/NavigatorGuideContentView';
 
 import { langRedirection } from './store/middleware';
 
@@ -418,6 +424,21 @@ const applyConfig = (config) => {
   config.settings.searchlib.resolve.ClusterHorizontalCardItem = {
     component: ClusterHorizontalCardItem,
   };
+  config.settings.searchlib.resolve.NavigatorCatalogueCardItem = {
+    component: NavigatorCatalogueCardItem,
+  };
+  config.settings.searchlib.resolve.NavigatorCatalogueMapView = {
+    component: NavigatorCatalogueMapView,
+  };
+  config.settings.searchlib.resolve.NavigatorCatalogueContentView = {
+    component: NavigatorCatalogueContentView,
+  };
+  config.settings.searchlib.resolve.NavigatorGuideLayout = {
+    component: NavigatorGuideLayout,
+  };
+  config.settings.searchlib.resolve.NavigatorGuideContentView = {
+    component: NavigatorGuideContentView,
+  };
   // Custom widgets
   config.widgets.id.geochars = GeocharsWidget;
   config.widgets.id.geolocation = GeolocationWidget;
@@ -434,6 +455,7 @@ const applyConfig = (config) => {
     { cssClass: 'large-text', label: 'Large text' },
     { cssClass: 'medium-text', label: 'Medium text' },
     { cssClass: 'small-text', label: 'Small text' },
+    { cssClass: 'green-text', label: 'Green text' },
   ];
 
   // TODO: fix in all languages
@@ -496,13 +518,17 @@ const applyConfig = (config) => {
       path: `/broken-links`,
       component: BrokenLinks,
     },
-
+    {
+      path: `*/navigator/compare`,
+      component: CompareToolsView,
+    },
     ...(config.addonRoutes || []),
   ];
 
   config.settings.nonContentRoutes = [
     ...config.settings.nonContentRoutes,
     '/broken-links',
+    '/navigator/compare',
   ];
 
   config.settings.appExtras = [
@@ -568,7 +594,7 @@ const applyConfig = (config) => {
 
   config.settings.themeColors = [
     ...config.settings.themeColors,
-    { value: 'green', title: 'EEA Green' },
+    { value: 'green', title: 'Green' },
   ];
 
   config.settings.matomoTrackerIdFn = (pathname) => {