@eeacms/volto-clms-theme 1.0.66 → 1.0.67

package/CHANGELOG.md

@@ -4,8 +4,23 @@ 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).
 
+#### [1.0.67](https://github.com/eea/volto-clms-theme/compare/1.0.66...1.0.67)
+
+- code smells [`b07ed5d`](https://github.com/eea/volto-clms-theme/commit/b07ed5d8101981349d768e47553277d1f049eed5)
+- small fix [`3fc4119`](https://github.com/eea/volto-clms-theme/commit/3fc4119394c6fc0782d41878e153bff79060605d)
+- all initial test created [`240fc74`](https://github.com/eea/volto-clms-theme/commit/240fc74514051740098b026cc0ad834d3a3a1763)
+- render loading component while libraries accordion is loading [`d7955ae`](https://github.com/eea/volto-clms-theme/commit/d7955aebabc3b969a7753a89e54e63f58799dd1e)
+- fix test imports [`3c61991`](https://github.com/eea/volto-clms-theme/commit/3c61991b8559c508ec009d2a4ebdc8bdb704a985)
+- hide searchbox when the results are less than 10 [`eedda03`](https://github.com/eea/volto-clms-theme/commit/eedda03b4d752f2c54714dbb97c624eba8332494)
+- downloadable files modifications [`7bdf690`](https://github.com/eea/volto-clms-theme/commit/7bdf6909693640d33e4087281d49c8497cf65c02)
+- downloadable files modifications [`16b86fd`](https://github.com/eea/volto-clms-theme/commit/16b86fd056cc2790335505f80fc67d37c674f260)
+- redesign dataset view [`05b2688`](https://github.com/eea/volto-clms-theme/commit/05b2688d0d490c35fe65810e0a5497712948db24)
+
 #### [1.0.66](https://github.com/eea/volto-clms-theme/compare/1.0.65...1.0.66)
 
+> 9 February 2022
+
+- Add tests [`#201`](https://github.com/eea/volto-clms-theme/pull/201)
 - Setup testing [`#199`](https://github.com/eea/volto-clms-theme/pull/199)
 - Setup testing [`#200`](https://github.com/eea/volto-clms-theme/pull/200)
 - Bugs n improvements [`#198`](https://github.com/eea/volto-clms-theme/pull/198)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.66",
+  "version": "1.0.67",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclButtonBlock/CclButtonBlockEdit.test.jsx

@@ -1,15 +1,14 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-import { MemoryRouter } from 'react-router-dom';
+import Enzyme, { mount } from 'enzyme';
 
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import CclButtonBlockEdit from './CclButtonBlockEdit';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
 
-import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 // import { shallow } from 'enzyme';
-import { mount } from 'enzyme';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -87,4 +86,38 @@ describe('CclButtonBlockEdit', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+  //jest test for CclButtonBlockEdit onChangeBlock statement
+  it('CclButtonBlockEdit onChangeBlock', () => {
+    const store = mockStore({
+      content: {
+        create: {},
+        data: {},
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const data = {
+      href: ['https://www.google.com', 'https://www.google.com'],
+      disabled: true,
+    };
+    const component = mount(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CclButtonBlockEdit
+            data={data}
+            selected={false}
+            block="1234"
+            onChangeBlock={() => {}}
+            onSelectBlock={() => {}}
+            onChangeField={() => {}}
+            setSidebarTab={() => {}}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const legend = component.find('.ccl-block-editor-header');
+    legend.simulate('click');
+  });
 });

package/src/components/Blocks/CclCardBlock/CclCardBlockEdit.test.jsx

@@ -1,15 +1,14 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-import { MemoryRouter } from 'react-router-dom';
+import Enzyme, { mount } from 'enzyme';
 
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import CclCardBlockEdit from './CclCardBlockEdit';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
 
-import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 // import { shallow } from 'enzyme';
-import { mount } from 'enzyme';
 
 Enzyme.configure({ adapter: new Adapter() });
 

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards.test.jsx

@@ -1,12 +1,12 @@
-import CclListingCards from './CclListingCards';
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import Enzyme, { mount } from 'enzyme';
 
-import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import configureStore from 'redux-mock-store';
+import CclListingCards from './CclListingCards';
+import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-intl-redux';
-import { mount } from 'enzyme';
+import React from 'react';
+import configureStore from 'redux-mock-store';
+
 Enzyme.configure({ adapter: new Adapter() });
 
 const mockStore = configureStore();

package/src/components/CLMSDatasetDetailView/BoundingBoxComponent.test.jsx

@@ -0,0 +1,27 @@
+import BoundingBoxComponent from './BoundingBoxComponent';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { mount } from 'enzyme';
+Enzyme.configure({ adapter: new Adapter() });
+
+//jest test for BoundingBoxComponent
+describe('BoundingBoxComponent', () => {
+  //test for BoundingBoxComponent rendering
+  it('Check if BoundingBoxComponent is rendered', () => {
+    const boundingBox = {
+      west: -180,
+      east: 180,
+      north: 90,
+      south: -90,
+    };
+    const wrapper = mount(
+      <MemoryRouter>
+        <BoundingBoxComponent bbox={boundingBox} />
+      </MemoryRouter>,
+    );
+    expect(wrapper).toBeDefined();
+  });
+});

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -6,14 +6,13 @@
 import {
   DataSetInfoContent,
   DownloadDataSetContent,
-  // MetadataContent,
 } from '@eeacms/volto-clms-theme/components/CLMSDatasetDetailView';
-import { FormattedMessage } from 'react-intl';
 import { Modal, Segment } from 'semantic-ui-react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import CclTabs from '@eeacms/volto-clms-theme/components/CclTab/CclTabs';
+import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { compose } from 'redux';
@@ -181,15 +180,19 @@ const CLMSDatasetDetailView = ({ content, token }) => {
         )}
       <CclTabs routing={true}>
         <div tabTitle="General Info">{DataSetInfoContent(content)}</div>
-        {/* borratzeko */}
-        {/* <div tabTitle="Metadata">{MetadataContent(content)}</div> */}
-        {/*  */}
-
-        {content?.downloadable_dataset ? (
-          <div tabTitle="Download">{DownloadDataSetContent(content)}</div>
-        ) : (
-          <div tabTitle=""></div>
-        )}
+        {content?.downloadable_dataset &&
+          content?.downloadable_files?.items?.length > 0 && (
+            <div tabTitle="Download">{DownloadDataSetContent(content)}</div>
+          )}
+        {content?.downloadable_dataset &&
+          content?.downloadable_files?.items?.length === 0 && (
+            <div
+              tabTitle="Download"
+              redirect={`${location.pathname}/download-by-area`}
+            >
+              {''}
+            </div>
+          )}
 
         <div underPanel={true}>
           <nav className="left-menu-detail">

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.test.jsx

@@ -31,6 +31,81 @@ describe('CLMSDatasetDetailView', () => {
           'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
         alt: 'Placeholder',
       },
+      downloadable_dataset: true,
+      downloadable_files: [
+        {
+          title: 'example title',
+          description: 'example description',
+          tooltip: 'example tooltip',
+          url: './example',
+        },
+        {
+          title: 'example title',
+          description: 'example description',
+          tooltip: 'example tooltip',
+          url: './example',
+        },
+      ],
+    };
+    const store = mockStore({
+      content: {
+        ...content,
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      search: {
+        subrequest: {
+          '123': { items: [] },
+        },
+      },
+      users: {
+        user: { roles: ['Manager'] },
+      },
+      userSession: {
+        token:
+          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTY0NDM4MzA0NCwiZnVsbG5hbWUiOm51bGx9.cB_q3Q0Jhu8h2m_SDmmknodpDxDLfb4o-qY6Y2plE04',
+      },
+    });
+
+    const DatasetDetailView = renderer
+      .create(
+        <Provider store={store}>
+          <MemoryRouter>
+            <CLMSDatasetDetailView content={content}>
+              <p>Metadata view test</p>
+            </CLMSDatasetDetailView>
+          </MemoryRouter>
+        </Provider>,
+      )
+      .toJSON();
+    expect(DatasetDetailView).toBeDefined();
+  });
+  it('Check metadata view without downloadable files', () => {
+    const content = {
+      title: 'Test title!',
+      url: './example',
+      description: 'Description test',
+      download: true,
+      dataResourceTitle: 'example title',
+      dataResourceAbstract: {
+        data: 'exampledata',
+      },
+      dataSources: {
+        title: 'example title',
+        description: 'example description',
+        tooltip: 'example tooltip',
+        data: 'Source data',
+      },
+      dataResourceLocator: 'Resource locator',
+      image: {
+        src:
+          'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
+        alt: 'Placeholder',
+      },
+      downloadable_dataset: true,
+      downloadable_files: [],
     };
     const store = mockStore({
       content: {
@@ -67,4 +142,53 @@ describe('CLMSDatasetDetailView', () => {
       .toJSON();
     expect(DatasetDetailView).toBeDefined();
   });
+  it('Check metadata view with geonetwork_identifiers items lenght > 0 user roles exists and user roles includes manager', () => {
+    const content = {
+      geonetwork_identifiers: [
+        {
+          title: 'example title',
+          description: 'example description',
+          tooltip: 'example tooltip',
+          url: './example',
+        },
+        {
+          title: 'example title',
+          description: 'example description',
+          tooltip: 'example tooltip',
+          url: './example',
+        },
+      ],
+    };
+    const store = mockStore({
+      content: {
+        ...content,
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      search: {
+        subrequest: {
+          '123': { items: [] },
+        },
+      },
+      user: { roles: ['Manager'] },
+      userSession: {
+        token:
+          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTY0NDM4MzA0NCwiZnVsbG5hbWUiOm51bGx9.cB_q3Q0Jhu8h2m_SDmmknodpDxDLfb4o-qY6Y2plE04',
+      },
+    });
+    const DatasetDetailView = renderer
+      .create(
+        <Provider store={store}>
+          <MemoryRouter>
+            <CLMSDatasetDetailView content={content}>
+              <p>Metadata view test</p>
+            </CLMSDatasetDetailView>
+          </MemoryRouter>
+        </Provider>,
+      )
+      .toJSON();
+    expect(DatasetDetailView).toBeDefined();
+  });
 });

package/src/components/CLMSDatasetDetailView/ContactComponent.test.jsx

@@ -0,0 +1,34 @@
+import ContactComponent from './ContactComponent';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
+
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+Enzyme.configure({ adapter: new Adapter() });
+//jest test for ContactComponent
+describe('ContactComponent', () => {
+  //test for ContactComponent rendering
+  it('Check if ContactComponent is rendered', () => {
+    const contact = {
+      organisationName: 'Test',
+      deliveryPoint: 'Test',
+      city: 'Test',
+      administrativeArea: 'Test',
+      postalCode: 'Test',
+      country: 'Test',
+      electronicMailAddress: 'Test',
+      url: 'Test',
+      urlTitle: 'Test',
+      roleCode: 'Test',
+    };
+    const contactComponent = renderer
+      .create(
+        <MemoryRouter>
+          <ContactComponent contact={contact} />
+        </MemoryRouter>,
+      )
+      .toJSON();
+    expect(contactComponent).toBeDefined();
+  });
+});

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -1,7 +1,7 @@
+import { Accordion, Loader, Segment } from 'semantic-ui-react';
 import { CclInfoContainer, CclInfoDescription } from '../CclInfoDescription';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { Accordion } from 'semantic-ui-react';
 import AnimateHeight from 'react-animate-height';
 import CclCard from '@eeacms/volto-clms-theme/components/CclCard/CclCard';
 import CclCitation from '@eeacms/volto-clms-theme/components/CclCitation/CclCitation';
@@ -13,30 +13,37 @@ import { searchContent } from '@plone/volto/actions';
 
 const DataSetInfoContent = (props) => {
   const dispatch = useDispatch();
-  const { UID, id } = props;
-  const path = props['@id'];
+  const {
+    UID,
+    id,
+    validation,
+    dataResourceAbstract,
+    data,
+    geonetwork_identifiers,
+    citation,
+  } = props;
   const searchSubrequests = useSelector((state) => state.search.subrequests);
   let libraries = searchSubrequests?.[id]?.items || [];
-
+  let librariesPending = searchSubrequests?.[id]?.loading;
   React.useEffect(() => {
-    dispatch(
-      searchContent(
-        path,
-        {
-          fullobjects: 1,
-          portal_type: 'TechnicalLibrary',
-          path: '/',
-          associated_datasets: UID,
-        },
-        id,
-      ),
-    );
-  }, [path, id, UID, dispatch]);
+    UID &&
+      dispatch(
+        searchContent(
+          '',
+          {
+            fullobjects: 1,
+            portal_type: 'TechnicalLibrary',
+            path: '/',
+            associated_datasets: UID,
+          },
+          id,
+        ),
+      );
+  }, [id, UID, dispatch]);
 
-  const [activeIndex, setActiveIndex] = React.useState([0]);
+  const [activeIndex, setActiveIndex] = React.useState([99]);
 
-  const handleClick = (e, itemProps) => {
-    const { index } = itemProps;
+  const handleClick = ({ index }) => {
     const newIndex =
       activeIndex.indexOf(index) === -1
         ? [...activeIndex, index]
@@ -46,96 +53,144 @@ const DataSetInfoContent = (props) => {
   };
   const titleIcons = config.blocks?.blocksConfig?.accordion?.titleIcons;
 
-  const isExclusive = (index) => {
-    return activeIndex.includes(index);
+  const renderAccordion = (gn, lib) => {
+    return gn?.length > 0 || lib?.length > 0;
   };
 
-  function iconName(iProps, iTitleIcons) {
-    return iProps?.data?.right_arrows
+  function iconName(iconData, iTitleIcons) {
+    return iconData?.right_arrows
       ? iTitleIcons.rightPosition
       : iTitleIcons.leftPosition;
   }
 
   return (
     <div>
-      {props?.validation?.data && (
+      {validation?.data && validation?.data !== '<p><br/></p>' && (
         <CclCitation
           title="Validation status"
           marginBottom={true}
-          children={<StringToHTML string={props.validation.data} />}
+          children={<StringToHTML string={validation.data} />}
         ></CclCitation>
       )}
       <CclInfoContainer>
-        <h2>General Info</h2>
-
-        {props?.dataResourceAbstract?.data && (
-          <CclInfoDescription
-            title="Data resource title"
-            description={props.dataResourceTitle}
-            tooltip="Name by which the cited resource is known"
-          ></CclInfoDescription>
-        )}
-
-        {props?.dataResourceAbstract?.data && (
+        {dataResourceAbstract?.data && (
           <CclInfoDescription
             title="Data resource abstract"
-            description={
-              <StringToHTML string={props.dataResourceAbstract.data} />
-            }
+            description={<StringToHTML string={dataResourceAbstract.data} />}
             tooltip="Brief narrative summary of the content of the resource(s) with coverage, main attributes, data sources, important of the work, etc."
           ></CclInfoDescription>
         )}
-
-        {props?.dataSources?.data && (
-          <CclInfoDescription
-            title="Resource type"
-            description={<StringToHTML string={props.dataSources.data} />}
-            tooltip="Scope to which metadata applies."
-          ></CclInfoDescription>
-        )}
       </CclInfoContainer>
-      {libraries?.length > 0 && (
-        <div className="dataset-info-documents dropdown">
-          <div className="accordion-block">
-            <Accordion fluid styled>
-              <React.Fragment>
-                <Accordion.Title
-                  as={'h2'}
-                  onClick={handleClick}
-                  className={'accordion-title align-arrow-right'}
-                >
-                  {isExclusive() ? (
-                    <Icon
-                      name={iconName(props, titleIcons.opened)}
-                      size="24px"
-                    />
-                  ) : (
-                    <Icon
-                      name={iconName(props, titleIcons.closed)}
-                      size="24px"
-                    />
-                  )}
-                  <span>Technical documents</span>
-                </Accordion.Title>
-                <Accordion.Content active={isExclusive()}>
-                  <AnimateHeight animateOpacity duration={500} height={'auto'}>
-                    {libraries.map((item, index) => (
-                      <CclCard key={index} type="doc" card={item} />
-                    ))}
-                  </AnimateHeight>
-                </Accordion.Content>
-              </React.Fragment>
-            </Accordion>
-          </div>
+      <div className="dataset-info-documents dropdown">
+        <div className="accordion-block">
+          {renderAccordion(geonetwork_identifiers?.items, libraries) && (
+            <Segment basic>
+              {geonetwork_identifiers?.items?.length > 0 && (
+                <Accordion fluid styled>
+                  <Accordion.Title
+                    as={'h2'}
+                    onClick={() => handleClick({ index: 0 })}
+                    className={'accordion-title align-arrow-right'}
+                  >
+                    {activeIndex.includes(0) ? (
+                      <Icon
+                        name={iconName(data, titleIcons.opened)}
+                        size="24px"
+                      />
+                    ) : (
+                      <Icon
+                        name={iconName(data, titleIcons.closed)}
+                        size="24px"
+                      />
+                    )}
+                    <span>Metadata</span>
+                  </Accordion.Title>
+                  <Accordion.Content active={activeIndex.includes(0)}>
+                    <AnimateHeight
+                      animateOpacity
+                      duration={500}
+                      height={'auto'}
+                    >
+                      <ul>
+                        {geonetwork_identifiers.items.map((geonetwork, key) => (
+                          <li key={key}>
+                            <strong>{geonetwork.title}</strong> -{' '}
+                            <a
+                              href={
+                                geonetwork.type === 'EEA'
+                                  ? `https://sdi.eea.europa.eu/catalogue/srv/api/records/${geonetwork.id}/formatters/xsl-view?output=pdf&language=eng&approved=true`
+                                  : `https://land.copernicus.vgt.vito.be/geonetwork/srv/api/records/${geonetwork.id}/formatters/xsl-view?root=div&output=pdf`
+                              }
+                              rel="noreferrer"
+                              target="_blank"
+                            >
+                              PDF
+                            </a>{' '}
+                            -{' '}
+                            <a
+                              href={
+                                geonetwork.type === 'EEA'
+                                  ? `https://sdi.eea.europa.eu/catalogue/srv/api/records/${geonetwork.id}/formatters/xml?approved=true`
+                                  : `https://land.copernicus.vgt.vito.be/geonetwork/srv/api/records/${geonetwork.id}/formatters/xml?attachment=true`
+                              }
+                              rel="noreferrer"
+                              target="_blank"
+                            >
+                              XML
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </AnimateHeight>
+                  </Accordion.Content>
+                </Accordion>
+              )}
+              {librariesPending && <Loader active inline="centered" />}
+              {libraries?.length > 0 && (
+                <Accordion fluid styled>
+                  <Accordion.Title
+                    as={'h2'}
+                    onClick={() => handleClick({ index: 1 })}
+                    className={'accordion-title align-arrow-right'}
+                  >
+                    {activeIndex.includes(1) ? (
+                      <Icon
+                        name={iconName(data, titleIcons.opened)}
+                        size="24px"
+                      />
+                    ) : (
+                      <Icon
+                        name={iconName(data, titleIcons.closed)}
+                        size="24px"
+                      />
+                    )}
+                    <span>Technical documents</span>
+                  </Accordion.Title>
+                  <Accordion.Content active={activeIndex.includes(1)}>
+                    <AnimateHeight
+                      animateOpacity
+                      duration={500}
+                      height={'auto'}
+                    >
+                      {libraries.map((item, index) => (
+                        <CclCard key={index} type="doc" card={item} />
+                      ))}
+                    </AnimateHeight>
+                  </Accordion.Content>
+                </Accordion>
+              )}
+            </Segment>
+          )}
         </div>
-      )}
+      </div>
 
-      <CclCitation title="Dataset citation" marginBottom={true}>
-        <p>
-          © European Union, Copernicus Land Monitoring Service , European
-          Environment Agency (EEA)
-        </p>
-      </CclCitation>
+      {citation?.data && citation?.data !== '<p><br/></p>' && (
+        <CclCitation
+          title="Citation status"
+          marginBottom={true}
+          children={<StringToHTML string={citation?.data} />}
+        ></CclCitation>
+      )}
     </div>
   );
 };