@eeacms/volto-bise-policy 1.3.7 → 1.3.9

package/CHANGELOG.md

@@ -4,6 +4,34 @@ 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.3.9](https://github.com/eea/volto-bise-policy/compare/1.3.8...1.3.9) - 27 August 2026
+
+#### :bug: Bug Fixes
+
+- fix(NRRWidgets): small fix for Measures widgets [laszlocseh - [`8989933`](https://github.com/eea/volto-bise-policy/commit/89899332011e4882b3c77209103b2460b3dfce3c)]
+
+#### :hammer_and_wrench: Others
+
+- test(NRRWidgets): update test to expect leading label for measures [laszlocseh - [`913e8ad`](https://github.com/eea/volto-bise-policy/commit/913e8adb1d5a575978f96c2bf8667d924322e26d)]
+### [1.3.8](https://github.com/eea/volto-bise-policy/compare/1.3.7...1.3.8) - 26 August 2026
+
+#### :rocket: New Features
+
+- feat: add NRR widget views and update HTML structure [laszlocseh - [`3ba2075`](https://github.com/eea/volto-bise-policy/commit/3ba207547d4f56790b5a10a23b6aefabb9bb3b70)]
+
+#### :nail_care: Enhancements
+
+- refactor(NRRWidgets): refactor shared components and parse helper [laszlocseh - [`8a0bbfa`](https://github.com/eea/volto-bise-policy/commit/8a0bbfaac42647a244b180b393ff3dea61a8a5c5)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`0d9e222`](https://github.com/eea/volto-bise-policy/commit/0d9e222a45bad204e1d22ca7f1939ab6c1166549)]
+
+#### :hammer_and_wrench: Others
+
+- test(EUNISObjectListWidget): mock uuid module [laszlocseh - [`4053526`](https://github.com/eea/volto-bise-policy/commit/405352685a516f18e1c4f04d36f069dfcc584f36)]
+- test(EUNISObjectListWidget): mock volto helpers to fix jest resolution [laszlocseh - [`92910f0`](https://github.com/eea/volto-bise-policy/commit/92910f09ebb1fa7ebed4caf1442db7935cb58684)]
+- test: add unit tests for EUNIS and NRR widgets [laszlocseh - [`862db64`](https://github.com/eea/volto-bise-policy/commit/862db648d7a3546e3f7c7c5d812d35497116adb4)]
 ### [1.3.7](https://github.com/eea/volto-bise-policy/compare/1.3.6...1.3.7) - 20 August 2026
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Widgets/EUNISObjectListWidget.test.jsx

@@ -0,0 +1,391 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+
+import {
+  EUNISMSFDView,
+  EUNISCodeView,
+  EUNISHDView,
+  EUNISEuropeanRedListView,
+  EUNISLinksToFinerEUNISHabitatsView,
+  EUNISCountryCodeView,
+  EUNISRegionalSeaConventionValueView,
+  EUNISEuropeanRedListWidget,
+  EUNISMSFDWidget,
+  EUNISHDWidget,
+  EUNISLinksToFinerEUNISHabitatsWidget,
+  EUNISRegionalSeaConventionValueWidget,
+  EUNISCountryCodeWidget,
+} from './EUNISObjectListWidget';
+
+// Mock the heavy @plone/volto building blocks used by BaseObjectListWidget so
+// that we can render the widget without mounting react-beautiful-dnd, the
+// ObjectWidget editor or the full FormFieldWrapper machinery.
+jest.mock('@plone/volto/components/manage/DragDropList/DragDropList', () => ({
+  __esModule: true,
+  default: ({ childList, onMoveItem, children }) => (
+    <div data-testid="dragdrop-list">
+      {childList.map((childEntry, index) =>
+        children({
+          child: childEntry[1],
+          childId: childEntry[0],
+          index,
+          draginfo: {
+            innerRef: jest.fn(),
+            draggableProps: {},
+            dragHandleProps: {},
+          },
+        }),
+      )}
+    </div>
+  ),
+}));
+
+jest.mock('@plone/volto/components/manage/Widgets/FormFieldWrapper', () => ({
+  __esModule: true,
+  default: ({ children }) => <div data-testid="form-wrapper">{children}</div>,
+}));
+
+jest.mock('@plone/volto/components/manage/Widgets/ObjectWidget', () => ({
+  __esModule: true,
+  default: () => <div data-testid="object-widget" />,
+}));
+
+jest.mock('@plone/volto/components/theme/Icon/Icon', () => ({
+  __esModule: true,
+  default: () => <span data-testid="icon" />,
+}));
+
+// Mock the volto helpers too: the real `Blocks.js` requires `uuid`, which
+// cannot always be resolved from within node_modules in the jest environment
+// (and the repository already mocks @plone/volto/helpers in other suites).
+// The schemas used here have no `default`s, so `applySchemaDefaults` is
+// faithfully reproduced by returning the input data.
+jest.mock('@plone/volto/helpers/Blocks/Blocks', () => ({
+  __esModule: true,
+  applySchemaDefaults: jest.fn(({ data }) => data),
+}));
+
+jest.mock('@plone/volto/helpers/Utils/Utils', () => ({
+  __esModule: true,
+  reorderArray: jest.fn((array) => array),
+}));
+
+// `uuid` is imported (and used) by the widget module directly. In some jest
+// environments it cannot be resolved from the add-on source, so use a virtual
+// mock to bypass module resolution entirely and return unique, deterministic ids
+// (same pattern as volto-freshwater-policy's NWRMObjectListWidget test).
+jest.mock(
+  'uuid',
+  () => {
+    let value = 0;
+    return {
+      v4: jest.fn(() => `uuid-${value++}`),
+    };
+  },
+  { virtual: true },
+);
+
+// EUNISCodeView reads the current content data from the Redux store. Expose a
+// mutable slice so each test can control what useSelector returns.
+let mockContentData = {};
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: (selector) => selector({ content: { data: mockContentData } }),
+}));
+
+const renderView = (Component, props) => render(<Component {...props} />);
+
+describe('EUNISMSFDView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = renderView(EUNISMSFDView, { value: '' });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing on invalid JSON', () => {
+    const { container } = renderView(EUNISMSFDView, { value: 'not json' });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders relation and value for each item', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', relation: '=', value: 'V1' },
+      { '@id': '/2', relation: '#', value: 'V2' },
+    ]);
+
+    const { container } = renderView(EUNISMSFDView, { value });
+
+    const view = container.querySelector('.eunis-widget-view');
+    expect(view).toBeInTheDocument();
+
+    const items = view.querySelectorAll('.eunis-widget-item');
+    expect(items).toHaveLength(2);
+    expect(items[0].textContent).toContain('=');
+    expect(items[0].textContent).toContain('V1');
+    expect(items[1].textContent).toContain('#');
+    expect(items[1].textContent).toContain('V2');
+  });
+
+  it('supports an object value with a value array', () => {
+    const value = { value: [{ '@id': '/1', relation: '=', value: 'V' }] };
+    const { container } = renderView(EUNISMSFDView, { value });
+    expect(container.querySelector('.eunis-widget-view')).toBeInTheDocument();
+  });
+});
+
+describe('EUNISHDView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = renderView(EUNISHDView, { value: [] });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the item.link href when present', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', relation: '=', value: 'V', link: 'http://x/1' },
+    ]);
+
+    const { container } = renderView(EUNISHDView, { value });
+
+    const a = container.querySelector('.eunis-widget-item a');
+    expect(a).toHaveAttribute('href', 'http://x/1');
+    expect(a).toHaveTextContent('V');
+    expect(
+      container.querySelector('.eunis-widget-item span'),
+    ).toHaveTextContent('=');
+  });
+
+  it('renders the Annex I URL when no link is present', () => {
+    const value = JSON.stringify([{ '@id': '/1', relation: '>', value: 'A1' }]);
+
+    const { container } = renderView(EUNISHDView, { value });
+
+    const a = container.querySelector('.eunis-widget-item a');
+    expect(a).toHaveAttribute('href', '/habitats/ANNEX1_A1');
+    expect(a).toHaveAttribute('target', '_blank');
+    expect(a).toHaveAttribute('rel', 'noopener');
+    expect(a).toHaveTextContent('A1');
+  });
+});
+
+describe('EUNISEuropeanRedListView', () => {
+  it('renders the item.link href when present', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', relation: '=', value: 'V', link: 'http://x/2' },
+    ]);
+
+    const { container } = renderView(EUNISEuropeanRedListView, { value });
+
+    expect(container.querySelector('.eunis-widget-item a')).toHaveAttribute(
+      'href',
+      'http://x/2',
+    );
+  });
+
+  it('builds the Red List URL from the code part of the value', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', relation: '=', value: 'Kelp communities - BAL1' },
+    ]);
+
+    const { container } = renderView(EUNISEuropeanRedListView, { value });
+
+    const a = container.querySelector('.eunis-widget-item a');
+    expect(a).toHaveAttribute('href', '/habitats_rl/REDLIST_BAL1');
+    expect(a).toHaveAttribute('target', '_blank');
+    expect(a).toHaveTextContent('Kelp communities - BAL1');
+  });
+});
+
+describe('EUNISLinksToFinerEUNISHabitatsView', () => {
+  it('renders the item.link href when present', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', value: 'E1', link: 'http://x/3' },
+    ]);
+
+    const { container } = renderView(EUNISLinksToFinerEUNISHabitatsView, {
+      value,
+    });
+
+    expect(container.querySelector('.eunis-widget-item a')).toHaveAttribute(
+      'href',
+      'http://x/3',
+    );
+  });
+
+  it('builds the EUNIS revised URL when no link is present', () => {
+    const value = JSON.stringify([{ '@id': '/1', value: 'E1' }]);
+
+    const { container } = renderView(EUNISLinksToFinerEUNISHabitatsView, {
+      value,
+    });
+
+    const a = container.querySelector('.eunis-widget-item a');
+    expect(a).toHaveAttribute('href', '/habitats_eunis_revised/EUNISrev_E1');
+    expect(a).toHaveAttribute('target', '_blank');
+    expect(a).toHaveTextContent('E1');
+  });
+});
+
+describe('EUNISCountryCodeView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = renderView(EUNISCountryCodeView, { value: '' });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders countries and their national items', () => {
+    const value = JSON.stringify([
+      {
+        '@id': '/cc1',
+        countryCode: ['BE', 'NL'],
+        national: [{ '@id': '/n1', relation: '=', value: 'V1' }],
+      },
+    ]);
+
+    const { container } = renderView(EUNISCountryCodeView, { value });
+
+    expect(container.querySelector('.country-item')).toHaveTextContent(
+      'BE, NL',
+    );
+
+    const items = container.querySelectorAll('.eunis-widget-item');
+    expect(items).toHaveLength(1);
+    expect(items[0].textContent).toContain('=');
+    expect(items[0].textContent).toContain('V1');
+  });
+});
+
+describe('EUNISRegionalSeaConventionValueView', () => {
+  it('behaves like the MSFD view', () => {
+    const value = JSON.stringify([{ '@id': '/1', relation: '=', value: 'V' }]);
+
+    const { container } = renderView(EUNISRegionalSeaConventionValueView, {
+      value,
+    });
+
+    expect(container.querySelector('.eunis-widget-view')).toBeInTheDocument();
+  });
+});
+
+describe('EUNISCodeView', () => {
+  beforeEach(() => {
+    mockContentData = {};
+  });
+
+  it('builds the default EUNIS revised href', () => {
+    const { container } = renderView(EUNISCodeView, { value: 'E123' });
+
+    const a = container.querySelector('a');
+    expect(a).toHaveAttribute('href', '/habitats_eunis_revised/EUNISrev_E123');
+    expect(a).toHaveAttribute('target', '_blank');
+    expect(a).toHaveAttribute('rel', 'noopener');
+    expect(a).toHaveTextContent('E123');
+  });
+
+  it('uses the trimmed eunis_code_alt_url from the store when present', () => {
+    mockContentData = { eunis_code_alt_url: '  http://alt/1  ' };
+    const { container } = renderView(EUNISCodeView, { value: 'E123' });
+
+    expect(container.querySelector('a')).toHaveAttribute(
+      'href',
+      'http://alt/1',
+    );
+  });
+
+  it('prefers the content prop over the store', () => {
+    mockContentData = { eunis_code_alt_url: 'http://store/1' };
+    const { container } = renderView(EUNISCodeView, {
+      value: 'E123',
+      content: { eunis_code_alt_url: 'http://content/2' },
+    });
+
+    expect(container.querySelector('a')).toHaveAttribute(
+      'href',
+      'http://content/2',
+    );
+  });
+
+  it('returns the value unchanged when no value is provided', () => {
+    const { container } = renderView(EUNISCodeView, { value: null });
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+const renderWidget = (Widget, props) =>
+  render(
+    <IntlProvider locale="en" messages={{}}>
+      <Widget
+        id="w"
+        value={{ value: [] }}
+        fieldSet="default"
+        block={{}}
+        {...props}
+      />
+    </IntlProvider>,
+  );
+
+describe('BaseObjectListWidget (via the named widget wrappers)', () => {
+  it.each([
+    ['MSFD', EUNISMSFDWidget, 'Add MSFD'],
+    ['HD (Annex I)', EUNISHDWidget, 'Add HD (Annex I)'],
+    ['European Red List', EUNISEuropeanRedListWidget, 'Add European Red List'],
+    [
+      'Links to finer EUNIS habitats',
+      EUNISLinksToFinerEUNISHabitatsWidget,
+      'Add Links to finer EUNIS habitats',
+    ],
+    [
+      'Regional Sea Convention Value',
+      EUNISRegionalSeaConventionValueWidget,
+      'Add Regional Sea Convention Value',
+    ],
+    ['Country Code', EUNISCountryCodeWidget, 'Add Country Code'],
+  ])('renders the add button for %s', (title, Widget, label) => {
+    const { getByRole } = renderWidget(Widget, { onChange: jest.fn() });
+    expect(getByRole('button', { name: label })).toBeInTheDocument();
+  });
+
+  it('renders the empty-state input when there are no items', () => {
+    const { container } = renderWidget(EUNISMSFDWidget, {
+      onChange: jest.fn(),
+    });
+
+    const hidden = container.querySelector('input[type="hidden"]');
+    expect(hidden).toHaveValue('Empty object list');
+  });
+
+  it('adds a new item when the add button is clicked', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderWidget(EUNISMSFDWidget, { onChange });
+
+    fireEvent.click(getByRole('button', { name: 'Add MSFD' }));
+
+    expect(onChange).toHaveBeenCalledWith('w', {
+      value: expect.arrayContaining([
+        expect.objectContaining({ '@id': expect.any(String) }),
+      ]),
+    });
+  });
+
+  it('removes an item when the remove button is clicked', () => {
+    const onChange = jest.fn();
+    const value = {
+      value: [{ '@id': '/1', relation: '=', value: 'V' }],
+    };
+
+    const { getByRole } = render(
+      <IntlProvider locale="en" messages={{}}>
+        <EUNISMSFDWidget
+          id="w"
+          value={value}
+          fieldSet="default"
+          block={{}}
+          onChange={onChange}
+        />
+      </IntlProvider>,
+    );
+
+    fireEvent.click(getByRole('button', { name: 'Remove item #1' }));
+
+    expect(onChange).toHaveBeenCalledWith('w', { value: [] });
+  });
+});

package/src/components/Widgets/NRRWidgets.jsx

@@ -1,165 +1,189 @@
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { Popup } from 'semantic-ui-react';
-export const NRRTypologyOfMeasuresView = ({ value }) => {
+
+/**
+ * Normalize a relation/array field value into a plain array.
+ * Handles a JSON-encoded string, a raw array, or an object with a `value` array.
+ * Returns [] when the value can't be parsed or is empty.
+ */
+const parseItems = (value) => {
   let parsedValue = value;
 
   if (typeof value === 'string') {
     try {
       parsedValue = JSON.parse(value);
     } catch (e) {
-      return null;
+      return [];
     }
   }
 
-  const items = Array.isArray(parsedValue)
-    ? parsedValue
-    : parsedValue?.value || [];
+  return Array.isArray(parsedValue) ? parsedValue : parsedValue?.value || [];
+};
 
-  if (!items || items.length === 0) return null;
+const Label = ({ label, secondary = false }) =>
+  label ? (
+    <span className={secondary ? 'secondary' : undefined}>
+      <b>{label}: </b>
+    </span>
+  ) : null;
+
+/** Renders a labeled list of items separated by commas. */
+const InlineList = ({ label, secondary, items, render }) => (
+  <p>
+    <Label label={label} secondary={secondary} />
+    {items.map((item, index) => (
+      <span key={item['@id'] ?? index}>
+        {render(item)}
+        {index < items.length - 1 ? ', ' : ''}
+      </span>
+    ))}
+  </p>
+);
+
+/** Renders a labeled <ul> of items. */
+const LinkedList = ({ label, secondary, items, render }) => (
+  <div className="nrr-linked-list">
+    <Label label={label} secondary={secondary} />
+    <ul>
+      {items.map((item, index) => (
+        <li key={item['@id'] ?? index}>{render(item)}</li>
+      ))}
+    </ul>
+  </div>
+);
+
+export const NRRTypologyOfMeasuresView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
   return (
-    <div className="eunis-widget-view">
-      <span>
-        <b>Related typology of measures: </b>
-      </span>
-      <ul>
-        {items.map((item) => {
-          const description = item.title.split(' - ')?.pop();
-          const code = item.title.split(' - ').slice(0, 2).join(' - ');
-          return (
-            <li key={item['@id']}>
-              <Popup content={description} trigger={<b>{code}</b>} />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
+    <LinkedList
+      label="Related typology of measures"
+      secondary
+      items={items}
+      render={(item) => {
+        const parts = item.title.split(' - ');
+        const code = parts.slice(0, 2).join(' - ');
+        const description = parts[parts.length - 1];
+        return <Popup content={description} trigger={<b>{code}</b>} />;
+      }}
+    />
   );
 };
 
 export const NRRArticleView = ({ value }) => {
-  let parsedValue = value;
-
-  if (typeof value === 'string') {
-    try {
-      parsedValue = JSON.parse(value);
-    } catch (e) {
-      return null;
-    }
-  }
-
-  const items = Array.isArray(parsedValue)
-    ? parsedValue
-    : parsedValue?.value || [];
-
-  if (!items || items.length === 0) return null;
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
   return (
-    <div className="eunis-widget-viewZ">
-      <span>
-        <b>NRR Article: </b>
-      </span>
-      {items.map((item) => (
-        <span key={item['@id']}>
-          {item.title.split(' - ')[0].split(' ')[1]}
-          {items.indexOf(item) < items.length - 1 ? ', ' : ''}
-        </span>
-      ))}
-    </div>
+    <InlineList
+      label="NRR Article"
+      secondary
+      items={items}
+      render={(item) => item.title.split(' - ')[0].split(' ')[1]}
+    />
   );
 };
 
 export const NRRrelatedCaseStudiesView = ({ value }) => {
-  let parsedValue = value;
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
-  if (typeof value === 'string') {
-    try {
-      parsedValue = JSON.parse(value);
-    } catch (e) {
-      return null;
-    }
-  }
-
-  const items = Array.isArray(parsedValue)
-    ? parsedValue
-    : parsedValue?.value || [];
+  return (
+    <LinkedList
+      label="Related Case Studies"
+      secondary
+      items={items}
+      render={(item) => (
+        <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
+      )}
+    />
+  );
+};
 
-  if (!items || items.length === 0) return null;
+export const NRRMeasuresImplementedView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
   return (
-    <div className="eunis-widget-viewZ">
-      <span>
-        <b>Related Case Studies: </b>
-      </span>
-      <ul>
-        {items.map((item, index) => (
-          <li key={item['@id'] ?? index}>
-            <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <LinkedList
+      label="Measures Implemented"
+      items={items}
+      secondary
+      render={(item) => (
+        <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
+      )}
+    />
   );
 };
 
-export const NRRMeasuresImplementedView = ({ value }) => {
-  let parsedValue = value;
+export const NRREcosystemTypologyView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
-  if (typeof value === 'string') {
-    try {
-      parsedValue = JSON.parse(value);
-    } catch (e) {
-      return null;
-    }
-  }
+  return (
+    <InlineList
+      label="Ecosystem type"
+      secondary
+      items={items}
+      render={(item) => item.title}
+    />
+  );
+};
 
-  const items = Array.isArray(parsedValue)
-    ? parsedValue
-    : parsedValue?.value || [];
+export const NRRHabitatEcosystemTypeView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
-  if (!items || items.length === 0) return null;
+  return (
+    <InlineList
+      label="Habitat/Ecosystem type"
+      secondary
+      items={items}
+      render={(item) => item.title}
+    />
+  );
+};
+
+export const NRRScaleOfPlanningView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
 
   return (
-    <div className="eunis-widget-viewZ">
-      <ul>
-        {items.map((item, index) => (
-          <li key={item['@id'] ?? index}>
-            <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <InlineList
+      label="Scale of planning"
+      secondary
+      items={items}
+      render={(item) => item.title}
+    />
   );
 };
 
-export const NRREcosystemTypologyView = ({ value }) => {
+export const NRRCurrentStatusView = ({ value }) => {
   let parsedValue = value;
 
   if (typeof value === 'string') {
     try {
       parsedValue = JSON.parse(value);
     } catch (e) {
-      return null;
+      // Not JSON — keep the raw string value.
     }
   }
 
-  const items = Array.isArray(parsedValue)
-    ? parsedValue
-    : parsedValue?.value || [];
+  // Choice field: value is a single token, not an array.
+  if (!parsedValue) return null;
 
-  if (!items || items.length === 0) return null;
+  const text =
+    typeof parsedValue === 'string'
+      ? parsedValue
+      : parsedValue?.title || parsedValue?.token || parsedValue?.value;
+
+  if (!text) return null;
 
   return (
-    <div className="eunis-widget-view">
-      <span>
-        <b>Ecosystem type: </b>
-      </span>
-      {items.map((item) => (
-        <span key={item['@id']}>
-          {item.title}
-          {items.indexOf(item) < items.length - 1 ? ', ' : ''}
-        </span>
-      ))}
-    </div>
+    <p>
+      <Label label="Current status" secondary />
+      {text}
+    </p>
   );
 };

package/src/components/Widgets/NRRWidgets.test.jsx

@@ -0,0 +1,255 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import {
+  NRRTypologyOfMeasuresView,
+  NRRArticleView,
+  NRRrelatedCaseStudiesView,
+  NRRMeasuresImplementedView,
+  NRREcosystemTypologyView,
+  NRRHabitatEcosystemTypeView,
+  NRRScaleOfPlanningView,
+  NRRCurrentStatusView,
+} from './NRRWidgets';
+
+// Mock the heavy @plone/volto UniversalLink for the linked-list views so that
+// we only assert on the rendered markup without having to mount a Router.
+jest.mock('@plone/volto/components/manage/UniversalLink/UniversalLink', () => ({
+  __esModule: true,
+  default: ({ href, children }) => <a href={href}>{children}</a>,
+}));
+
+// Render the semantic-ui-react Popup inline (instead of via a portal) so the
+// trigger and content are directly assertable. The mock factory uses
+// jest.requireActual to avoid the TDZ hoisting issue of referencing a const.
+jest.mock('semantic-ui-react', () => {
+  const actual = jest.requireActual('semantic-ui-react');
+  return {
+    ...actual,
+    Popup: ({ content, trigger }) => (
+      <div className="popup">
+        <div className="trigger">{trigger}</div>
+        <div className="content">{content}</div>
+      </div>
+    ),
+  };
+});
+
+describe('NRRTypologyOfMeasuresView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRRTypologyOfMeasuresView value="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing when value is invalid JSON', () => {
+    const { container } = render(
+      <NRRTypologyOfMeasuresView value="not json" />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders a labeled linked list and splits title into code/description', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', title: '001 - Sector A - Description one' },
+      { '@id': '/2', title: '002 - Sector B - Description two' },
+    ]);
+
+    const { container } = render(<NRRTypologyOfMeasuresView value={value} />);
+
+    const list = container.querySelector('.nrr-linked-list');
+    expect(list).toBeInTheDocument();
+    expect(list.textContent).toContain('Related typology of measures: ');
+
+    const popups = list.querySelectorAll('.popup');
+    expect(popups).toHaveLength(2);
+
+    // code = first two parts joined, description = last part
+    expect(popups[0].querySelector('.trigger')).toHaveTextContent(
+      '001 - Sector A',
+    );
+    expect(popups[0].querySelector('.content')).toHaveTextContent(
+      'Description one',
+    );
+    expect(popups[1].querySelector('.trigger')).toHaveTextContent(
+      '002 - Sector B',
+    );
+    expect(popups[1].querySelector('.content')).toHaveTextContent(
+      'Description two',
+    );
+  });
+});
+
+describe('NRRArticleView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRRArticleView value={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('extracts the article number from the title and renders an inline list', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', title: 'Article 5 - xxx' },
+      { '@id': '/2', title: 'Article 7 - yyy' },
+    ]);
+
+    const { container } = render(<NRRArticleView value={value} />);
+
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    expect(p.textContent).toContain('NRR Article: ');
+    // render = title.split(' - ')[0].split(' ')[1]
+    expect(p.textContent).toContain('5');
+    expect(p.textContent).toContain('7');
+    // one label span plus one span per item
+    expect(p.querySelectorAll('span').length).toBe(3);
+  });
+});
+
+describe('NRRrelatedCaseStudiesView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRRrelatedCaseStudiesView value={null} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders links to each related case study', () => {
+    const value = JSON.stringify([
+      { '@id': '/c1', title: 'Case One' },
+      { '@id': '/c2', title: 'Case Two' },
+    ]);
+
+    const { container } = render(<NRRrelatedCaseStudiesView value={value} />);
+
+    const list = container.querySelector('.nrr-linked-list');
+    expect(list.textContent).toContain('Related Case Studies: ');
+
+    const links = list.querySelectorAll('a');
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveAttribute('href', '/c1');
+    expect(links[0]).toHaveTextContent('Case One');
+    expect(links[1]).toHaveAttribute('href', '/c2');
+    expect(links[1]).toHaveTextContent('Case Two');
+  });
+});
+
+describe('NRRMeasuresImplementedView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRRMeasuresImplementedView value="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders measures as links with a leading label', () => {
+    const value = [
+      { '@id': '/m1', title: 'Measure One' },
+      { '@id': '/m2', title: 'Measure Two' },
+    ];
+
+    const { container } = render(<NRRMeasuresImplementedView value={value} />);
+
+    const list = container.querySelector('.nrr-linked-list');
+    expect(list).toBeInTheDocument();
+
+    // labeled like the other linked-list views
+    expect(list.querySelector('b')).toHaveTextContent('Measures Implemented:');
+
+    const links = list.querySelectorAll('a');
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveAttribute('href', '/m1');
+    expect(links[0]).toHaveTextContent('Measure One');
+    expect(links[1]).toHaveAttribute('href', '/m2');
+    expect(links[1]).toHaveTextContent('Measure Two');
+  });
+});
+
+describe('NRREcosystemTypologyView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRREcosystemTypologyView value={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the ecosystem types as an inline list of titles', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', title: 'Grassland' },
+      { '@id': '/2', title: 'Wetland' },
+    ]);
+
+    const { container } = render(<NRREcosystemTypologyView value={value} />);
+
+    const p = container.querySelector('p');
+    expect(p.textContent).toContain('Ecosystem type: ');
+    expect(p.textContent).toContain('Grassland');
+    expect(p.textContent).toContain('Wetland');
+  });
+});
+
+describe('NRRHabitatEcosystemTypeView', () => {
+  it('renders a labeled inline list of habitat/ecosystem types', () => {
+    const value = [
+      { '@id': '/1', title: 'Forest' },
+      { '@id': '/2', title: 'Heathland' },
+    ];
+
+    const { container } = render(<NRRHabitatEcosystemTypeView value={value} />);
+
+    const p = container.querySelector('p');
+    expect(p.textContent).toContain('Habitat/Ecosystem type: ');
+    expect(p.textContent).toContain('Forest');
+    expect(p.textContent).toContain('Heathland');
+    // the label span of a "secondary" view carries the secondary class
+    expect(container.querySelector('p span.secondary')).toBeInTheDocument();
+  });
+});
+
+describe('NRRScaleOfPlanningView', () => {
+  it('renders a labeled inline list of planning scales', () => {
+    const value = JSON.stringify([
+      { '@id': '/1', title: 'National' },
+      { '@id': '/2', title: 'Regional' },
+    ]);
+
+    const { container } = render(<NRRScaleOfPlanningView value={value} />);
+
+    const p = container.querySelector('p');
+    expect(p.textContent).toContain('Scale of planning: ');
+    expect(p.textContent).toContain('National');
+    expect(p.textContent).toContain('Regional');
+    expect(container.querySelector('p span.secondary')).toBeInTheDocument();
+  });
+});
+
+describe('NRRCurrentStatusView', () => {
+  it('renders nothing when value is empty', () => {
+    const { container } = render(<NRRCurrentStatusView value="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing for undefined or null', () => {
+    const { container } = render(<NRRCurrentStatusView value={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the raw string value when it is not JSON', () => {
+    const { container } = render(<NRRCurrentStatusView value="Ongoing" />);
+    expect(container.textContent).toContain('Current status: ');
+    expect(container.textContent).toContain('Ongoing');
+  });
+
+  it('renders the title of an object value', () => {
+    const value = JSON.stringify({ title: 'Active' });
+    const { container } = render(<NRRCurrentStatusView value={value} />);
+    expect(container.textContent).toContain('Active');
+  });
+
+  it('falls back to token then value for object values', () => {
+    const { container } = render(
+      <NRRCurrentStatusView value={{ token: 't1', value: 'raw' }} />,
+    );
+    expect(container.textContent).toContain('t1');
+  });
+
+  it('renders nothing for an array value', () => {
+    const { container } = render(
+      <NRRCurrentStatusView value={JSON.stringify(['a', 'b'])} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});

package/src/components/Widgets/styles.less

@@ -17,3 +17,7 @@
     margin-bottom: 0;
   }
 }
+
+.nrr-linked-list {
+  margin-bottom: 1em;
+}

package/src/index.js

@@ -32,6 +32,9 @@ import {
   NRRArticleView,
   NRRrelatedCaseStudiesView,
   NRRMeasuresImplementedView,
+  NRRHabitatEcosystemTypeView,
+  NRRScaleOfPlanningView,
+  NRRCurrentStatusView,
 } from './components/Widgets/NRRWidgets';
 import RichTextWidget from './components/Widgets/RichTextWidget';
 
@@ -283,7 +286,11 @@ const applyConfig = (config) => {
   config.widgets.id.geolocation = GeolocationWidget;
   config.widgets.views.id.nrr_typology_of_measures = NRRTypologyOfMeasuresView;
   config.widgets.views.id.nrr_ecosystem_typology = NRREcosystemTypologyView;
+  config.widgets.views.id.nrr_habitat_ecosystem_type =
+    NRRHabitatEcosystemTypeView;
+  config.widgets.views.id.nrr_scale_of_planning = NRRScaleOfPlanningView;
   config.widgets.views.id.nrr_article = NRRArticleView;
+  config.widgets.views.id.nrr_current_status = NRRCurrentStatusView;
   // EUNIS Widgets
   config.widgets.id.eunis_national_json = EUNISCountryCodeWidget;
   config.widgets.views.id.eunis_national_json = EUNISCountryCodeView;