@eeacms/volto-bise-policy 1.3.11 → 1.3.13

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMap.test.jsx

@@ -1,165 +1,285 @@
+import './mockJsdom';
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+
 import CaseStudyMap from './CaseStudyMap';
-import { getFeatures, centerAndResetMapZoom, scrollToElement } from './utils';
+import { centerAndResetMapZoom, getFeatures } from './utils';
 import { createMockMap, createMockOl } from './testUtils';
 
 jest.mock('@eeacms/volto-openlayers-map', () => ({
-  withOpenLayers: (Comp) => Comp,
+  withOpenLayers: (Component) => Component,
 }));
 
-jest.mock('@eeacms/volto-openlayers-map/api', () => ({
-  Map: ({ children }) => <div data-testid="mock-map">{children}</div>,
-  Layer: {
-    Tile: ({ source }) => <div data-testid="mock-tile-layer" />,
-    Vector: ({ source }) => <div data-testid="mock-vector-layer" />,
-  },
-  Layers: ({ children }) => <div data-testid="mock-layers">{children}</div>,
-  Controls: () => <div data-testid="mock-controls" />,
-  useMapContext: () => ({ map: mockMap }),
-}));
+const mockMap = createMockMap();
+
+jest.mock('@eeacms/volto-openlayers-map/api', () => {
+  let vectorStyle = null;
 
-// Mock child components so we don't render full DOM
-jest.mock('./InfoOverlay', () => () => <div data-testid="mock-info-overlay" />);
-jest.mock('./FeatureInteraction', () => () => (
-  <div data-testid="mock-feature-interaction" />
-));
-jest.mock('./CaseStudyListing', () => () => (
-  <div data-testid="mock-case-study-list" />
-));
+  return {
+    __getVectorStyle: () => vectorStyle,
+    Map: ({ children }) => <div data-testid="mock-map">{children}</div>,
+    Layer: {
+      Tile: () => <div data-testid="mock-tile-layer" />,
+      Vector: ({ style }) => {
+        vectorStyle = style;
+        return <div data-testid="mock-vector-layer" />;
+      },
+    },
+    Layers: ({ children }) => <div data-testid="mock-layers">{children}</div>,
+    Controls: () => <div data-testid="mock-controls" />,
+    useMapContext: () => ({ map: mockMap }),
+  };
+});
 
 jest.mock('./utils', () => ({
-  getFeatures: jest.fn(),
-  getSelectInteraction: jest.fn(() => null),
+  ...jest.requireActual('./utils'),
   centerAndResetMapZoom: jest.fn(),
-  scrollToElement: jest.fn(),
+  getFeatures: jest.fn(),
 }));
 
-const mockOl = createMockOl();
-const mockMap = createMockMap();
+const mockOl = {
+  ...createMockOl(),
+  extent: {
+    createEmpty: () => [Infinity, Infinity, -Infinity, -Infinity],
+    extend: jest.fn(),
+  },
+};
+
+const items = [
+  {
+    geometry: { type: 'Point', coordinates: [14.4, 50.1] },
+    properties: {
+      title: 'Peatlands',
+      path: '/case-peatlands',
+      current_status: 'ongoing',
+    },
+  },
+  {
+    geometry: { type: 'Point', coordinates: [10.4, 51.1] },
+    properties: {
+      title: 'Rivers',
+      path: '/case-rivers',
+      current_status: 'completed',
+    },
+  },
+];
+
+const renderMap = (props = {}) =>
+  render(
+    <IntlProvider locale="en">
+      <CaseStudyMap
+        items={items}
+        setMap={jest.fn()}
+        map={mockMap}
+        ol={mockOl}
+        onSelect={jest.fn()}
+        {...props}
+      />
+    </IntlProvider>,
+  );
+
+const rerenderMap = (rerender, props = {}) =>
+  rerender(
+    <IntlProvider locale="en">
+      <CaseStudyMap
+        items={items}
+        setMap={jest.fn()}
+        map={mockMap}
+        ol={mockOl}
+        onSelect={jest.fn()}
+        {...props}
+      />
+    </IntlProvider>,
+  );
+
+/* The points source the component creates with `new ol.source.Vector()`. */
+const pointsSource = () => mockOl.source.Vector.mock.results[0].value;
+
+const mapClickHandler = () => {
+  const calls = mockMap.on.mock.calls.filter(([event]) => event === 'click');
+  return calls[calls.length - 1][1];
+};
+
+const vectorStyle = () =>
+  require('@eeacms/volto-openlayers-map/api').__getVectorStyle();
+
+const styleForPath = (path) =>
+  vectorStyle()({
+    get: (key) =>
+      key === 'features'
+        ? [{ get: (prop) => ({ path, color: '#FF9933' })[prop] }]
+        : null,
+  });
 
 describe('CaseStudyMap', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    getFeatures.mockReturnValue([{ id: 1 }]);
+    mockMap.getPixelFromCoordinate = jest.fn(() => [100, 200]);
   });
 
-  it('renders nothing when no features', () => {
+  test('still renders the map without features', () => {
     getFeatures.mockReturnValueOnce([]);
-    const { container } = render(
-      <CaseStudyMap items={[]} ol={mockOl} setMap={jest.fn()} />,
-    );
-    expect(container.firstChild).toBeNull();
+    renderMap({ items: [] });
+
+    expect(screen.getByTestId('mock-map')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-tile-layer')).toBeInTheDocument();
   });
 
-  it('renders map and layers when features exist', () => {
-    getFeatures.mockReturnValueOnce([{ id: 1 }]);
-    render(
-      <CaseStudyMap
-        items={[{ id: 1 }]}
-        ol={mockOl}
-        setMap={jest.fn()}
-        map={mockMap}
-        onSelectedCase={jest.fn()}
-      />,
-    );
+  test('renders the map, layers and the status legend', () => {
+    renderMap();
+
     expect(screen.getByTestId('mock-map')).toBeInTheDocument();
     expect(screen.getByTestId('mock-tile-layer')).toBeInTheDocument();
     expect(screen.getByTestId('mock-vector-layer')).toBeInTheDocument();
-    expect(screen.getByTestId('mock-case-study-list')).toBeInTheDocument();
+    expect(screen.getByText('Planned')).toBeInTheDocument();
+    expect(screen.getByText('Ongoing')).toBeInTheDocument();
+    expect(screen.getByText('Completed')).toBeInTheDocument();
   });
 
-  it('does not render CaseStudyList when hideFilters is true', () => {
-    getFeatures.mockReturnValueOnce([{ id: 1 }]);
-    render(
-      <CaseStudyMap
-        items={[{ id: 1 }]}
-        ol={mockOl}
-        hideFilters
-        setMap={jest.fn()}
-        map={mockMap}
-        onSelectedCase={jest.fn()}
-      />,
-    );
-    expect(
-      screen.queryByTestId('mock-case-study-list'),
-    ).not.toBeInTheDocument();
+  test('selects a case study when its pin is clicked', () => {
+    const onSelect = jest.fn();
+    renderMap({ onSelect });
+
+    const member = {
+      get: (key) => (key === 'path' ? '/case-peatlands' : null),
+    };
+    const cluster = { get: (key) => (key === 'features' ? [member] : null) };
+    mockMap.forEachFeatureAtPixel = jest.fn(() => cluster);
+
+    mapClickHandler()({ pixel: [10, 20] });
+
+    expect(onSelect).toHaveBeenCalledWith('/case-peatlands');
   });
 
-  it('does not refresh the points source when only the ol wrapper identity changes', () => {
-    getFeatures.mockReturnValue([{ id: 1 }]);
-    const activeItems = [{ id: 1 }];
+  test('zooms instead of guessing when a cluster is clicked', () => {
+    const onSelect = jest.fn();
+    renderMap({ onSelect });
 
-    const { rerender } = render(
-      <CaseStudyMap
-        items={[{ id: 1 }]}
-        activeItems={activeItems}
-        ol={mockOl}
-        setMap={jest.fn()}
-        map={mockMap}
-        onSelectedCase={jest.fn()}
-      />,
-    );
-
-    const pointsSource = mockOl.source.Vector.mock.results[0].value;
-    const clearCount = pointsSource.clear.mock.calls.length;
-    expect(clearCount).toBeGreaterThan(0);
-
-    // withOpenLayers builds a fresh `ol` object literal on every render;
-    // refreshing the points source would regenerate the cluster features and
-    // drop the currently selected feature from the rendered set.
-    rerender(
-      <CaseStudyMap
-        items={[{ id: 1 }]}
-        activeItems={activeItems}
-        ol={{ ...mockOl }}
-        setMap={jest.fn()}
-        map={mockMap}
-        onSelectedCase={jest.fn()}
-      />,
-    );
+    const member = {
+      getGeometry: () => ({ getExtent: () => [0, 0, 1, 1] }),
+    };
+    const cluster = {
+      get: (key) => (key === 'features' ? [member, member] : null),
+    };
+    mockMap.forEachFeatureAtPixel = jest.fn(() => cluster);
+
+    mapClickHandler()({ pixel: [10, 20] });
 
-    expect(pointsSource.clear.mock.calls.length).toBe(clearCount);
+    expect(onSelect).toHaveBeenCalledWith(null);
+    expect(mockMap.getView().fit).toHaveBeenCalled();
   });
 
-  it('clicking Reset map calls utils and clears features', () => {
-    getFeatures.mockReturnValueOnce([{ id: 1 }]);
-    const onSelectedCase = jest.fn();
-    render(
-      <CaseStudyMap
-        items={[{ id: 1 }]}
-        ol={mockOl}
-        setMap={jest.fn()}
-        map={mockMap}
-        onSelectedCase={onSelectedCase}
-      />,
-    );
-
-    fireEvent.click(screen.getByText('Reset map'));
-    expect(scrollToElement).toHaveBeenCalledWith('search-input');
-    expect(onSelectedCase).toHaveBeenCalledWith(null);
-    expect(centerAndResetMapZoom).toHaveBeenCalledWith({
-      map: mockMap,
-      ol: mockOl,
+  test('clears the selection when empty map space is clicked', () => {
+    const onSelect = jest.fn();
+    renderMap({ onSelect });
+
+    mockMap.forEachFeatureAtPixel = jest.fn(() => null);
+    mapClickHandler()({ pixel: [10, 20] });
+
+    expect(onSelect).toHaveBeenCalledWith(null);
+  });
+
+  test('keeps the loader up until OpenLayers finishes rendering', () => {
+    renderMap();
+
+    expect(screen.getByRole('status')).toHaveTextContent('Loading map');
+
+    const renderComplete = mockMap.on.mock.calls
+      .filter(([event]) => event === 'rendercomplete')
+      .pop()[1];
+    act(() => renderComplete());
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  test('removes the render listener once the map is ready', () => {
+    renderMap();
+
+    const renderComplete = mockMap.on.mock.calls
+      .filter(([event]) => event === 'rendercomplete')
+      .pop()[1];
+    act(() => renderComplete());
+
+    expect(mockMap.un).toHaveBeenCalledWith('rendercomplete', renderComplete);
+  });
+
+  test('resets the map and clears the selection', () => {
+    const onSelect = jest.fn();
+    renderMap({ onSelect });
+
+    fireEvent.click(screen.getByRole('button', { name: /Reset map/ }));
+
+    expect(onSelect).toHaveBeenCalledWith(null);
+    expect(centerAndResetMapZoom).toHaveBeenCalled();
+  });
+
+  test('shows the title of the selected case study in a popup over its pin', () => {
+    const { container } = renderMap({ selectedPath: '/case-peatlands' });
+
+    expect(screen.getByText('Peatlands')).toBeInTheDocument();
+    expect(container.querySelector('.cse-map-popup-anchor')).toHaveStyle({
+      transform: 'translate(100px, 200px)',
+      visibility: 'visible',
     });
   });
 
-  it('map moveend listener toggles resetMapButtonClass', () => {
-    getFeatures.mockReturnValueOnce([{ id: 1 }]);
-    render(
-      <CaseStudyMap
-        items={[{ id: 1 }]}
-        ol={mockOl}
-        setMap={jest.fn()}
-        map={mockMap}
-        onSelectedCase={jest.fn()}
-      />,
-    );
+  test('has no popup without a selection', () => {
+    const { container } = renderMap({ selectedPath: null });
+
+    expect(container.querySelector('.cse-map-popup-anchor')).toBeNull();
+  });
+
+  test('keeps the popup over the pin while the map moves', () => {
+    mockMap.getPixelFromCoordinate = jest
+      .fn()
+      .mockReturnValueOnce([10, 20])
+      .mockReturnValueOnce([30, 40]);
+
+    const { container } = renderMap({ selectedPath: '/case-peatlands' });
+    const anchor = container.querySelector('.cse-map-popup-anchor');
+    expect(anchor).toHaveStyle({ transform: 'translate(10px, 20px)' });
+
+    const place = mockMap.on.mock.calls
+      .filter(([event]) => event === 'postrender')
+      .pop()[1];
+    act(() => place());
+
+    expect(anchor).toHaveStyle({ transform: 'translate(30px, 40px)' });
+  });
+
+  test('paints the selected pin dark green and leaves the others as they are', () => {
+    renderMap({ selectedPath: '/case-peatlands' });
+
+    styleForPath('/case-peatlands');
+    expect(mockOl.style.Fill).toHaveBeenCalledWith({ color: '#005248' });
+
+    mockOl.style.Fill.mockClear();
+    styleForPath('/case-rivers');
+    expect(mockOl.style.Fill).not.toHaveBeenCalledWith({ color: '#005248' });
+  });
+
+  test('repaints the pins when the selection changes', () => {
+    const { rerender } = renderMap({ selectedPath: null });
+    const source = pointsSource();
+    source.changed.mockClear();
+
+    rerenderMap(rerender, { selectedPath: '/case-peatlands' });
+
+    expect(source.changed).toHaveBeenCalled();
+  });
 
-    const moveendCb = mockMap.on.mock.calls.find((c) => c[0] === 'moveend')[1];
+  test('paints the newly selected pin dark green after the selection moves', () => {
+    const { rerender } = renderMap({ selectedPath: '/case-peatlands' });
+    rerenderMap(rerender, { selectedPath: '/case-rivers' });
 
-    moveendCb();
+    mockOl.style.Fill.mockClear();
+    styleForPath('/case-peatlands');
+    expect(mockOl.style.Fill).not.toHaveBeenCalledWith({ color: '#005248' });
 
-    expect(mockMap.getView).toHaveBeenCalled();
+    styleForPath('/case-rivers');
+    expect(mockOl.style.Fill).toHaveBeenCalledWith({ color: '#005248' });
   });
 });

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMapLazy.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import CaseStudyMap from './CaseStudyMap';
+
+const ROOT_MARGIN = '600px';
+
+/**
+ * True once the element is within `ROOT_MARGIN` of the viewport. Stays true
+ * afterwards so scrolling away does not tear the map down.
+ *
+ * `enabled` delays observing until the element is actually rendered (the
+ * explorer renders nothing while its data is still loading).
+ */
+export const useNearViewport = (elementRef, enabled = true) => {
+  const [near, setNear] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!enabled || near) return undefined;
+
+    const element = elementRef.current;
+    if (!element) return undefined;
+
+    if (typeof IntersectionObserver === 'undefined') {
+      setNear(true);
+      return undefined;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setNear(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: ROOT_MARGIN },
+    );
+
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, [elementRef, enabled, near]);
+
+  return near;
+};
+
+/**
+ * OpenLayers is roughly 1MB of JavaScript and the explorer usually sits far
+ * below the fold, so `<CaseStudyMap>` (and with it the OpenLayers chunk) is
+ * only mounted once the visitor is about to reach it. The slot keeps the
+ * map's height so deferring does not move the rest of the page.
+ */
+export default function CaseStudyMapLazy(props) {
+  const slotRef = React.useRef(null);
+  const near = useNearViewport(slotRef);
+
+  return (
+    <div className="cse-map-slot" ref={slotRef}>
+      {near ? <CaseStudyMap {...props} /> : null}
+    </div>
+  );
+}

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMapLazy.test.jsx

@@ -0,0 +1,89 @@
+import './mockJsdom';
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import CaseStudyMapLazy from './CaseStudyMapLazy';
+
+jest.mock('./CaseStudyMap', () => () => <div data-testid="case-study-map" />);
+
+const items = [
+  {
+    geometry: { type: 'Point', coordinates: [14.4, 50.1] },
+    properties: { title: 'Peatlands', path: '/case-peatlands' },
+  },
+];
+
+const installIntersectionObserver = () => {
+  const observers = [];
+  class MockIntersectionObserver {
+    constructor(callback) {
+      this.callback = callback;
+      this.observe = jest.fn();
+      this.disconnect = jest.fn();
+      observers.push(this);
+    }
+  }
+  global.IntersectionObserver = MockIntersectionObserver;
+  return observers;
+};
+
+describe('CaseStudyMapLazy', () => {
+  const originalObserver = global.IntersectionObserver;
+
+  afterEach(() => {
+    global.IntersectionObserver = originalObserver;
+    jest.clearAllMocks();
+  });
+
+  test('renders the map slot without case studies', () => {
+    const observers = installIntersectionObserver();
+    const { container } = render(<CaseStudyMapLazy items={[]} />);
+
+    expect(container.querySelector('.cse-map-slot')).toBeInTheDocument();
+    expect(observers[0].observe).toHaveBeenCalledWith(
+      container.querySelector('.cse-map-slot'),
+    );
+  });
+
+  test('mounts the map without case studies once it is near the viewport', () => {
+    const observers = installIntersectionObserver();
+    render(<CaseStudyMapLazy items={[]} />);
+
+    act(() => {
+      observers[0].callback([{ isIntersecting: true }]);
+    });
+
+    expect(screen.getByTestId('case-study-map')).toBeInTheDocument();
+  });
+
+  test('defers the map until it is near the viewport', () => {
+    const observers = installIntersectionObserver();
+    const { container } = render(<CaseStudyMapLazy items={items} />);
+
+    expect(container.querySelector('.cse-map-slot')).toBeInTheDocument();
+    expect(screen.queryByTestId('case-study-map')).not.toBeInTheDocument();
+    expect(observers[0].observe).toHaveBeenCalledWith(
+      container.querySelector('.cse-map-slot'),
+    );
+  });
+
+  test('mounts the map once the slot scrolls into view', () => {
+    const observers = installIntersectionObserver();
+    render(<CaseStudyMapLazy items={items} />);
+
+    act(() => {
+      observers[0].callback([{ isIntersecting: true }]);
+    });
+
+    expect(screen.getByTestId('case-study-map')).toBeInTheDocument();
+    expect(observers[0].disconnect).toHaveBeenCalled();
+  });
+
+  test('mounts the map immediately without IntersectionObserver support', () => {
+    delete global.IntersectionObserver;
+    render(<CaseStudyMapLazy items={items} />);
+
+    expect(screen.getByTestId('case-study-map')).toBeInTheDocument();
+  });
+});

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyResults.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import CaseStudyCard from './CaseStudyCard';
+import Pagination from './Pagination';
+import messages from './messages';
+
+export const SORT_OPTIONS = [
+  { value: 'title', label: messages.sortTitle },
+  { value: 'newest', label: messages.sortNewest },
+];
+
+export const PER_PAGE_OPTIONS = [4, 8, 16];
+
+/**
+ * Results pane: count line, sort and page-size controls, the cards and the
+ * pagination. Slicing happens here, filtering and ordering do not.
+ */
+export default function CaseStudyResults({
+  items = [],
+  selectedPath,
+  onShowOnMap,
+  onResetMap,
+  sortBy = 'title',
+  onSortChange,
+  perPage = 4,
+  onPerPageChange,
+  page = 1,
+  onPageChange,
+  onResetFilters,
+}) {
+  const intl = useIntl();
+  const pageCount = Math.max(1, Math.ceil(items.length / perPage));
+  const currentPage = Math.min(page, pageCount);
+  const visible = items.slice(
+    perPage * (currentPage - 1),
+    perPage * currentPage,
+  );
+
+  return (
+    <div className="cse-results">
+      <h2 className="cse-visually-hidden">
+        {intl.formatMessage(messages.resultsHeading)}
+      </h2>
+
+      <div className="cse-results-header">
+        <p className="cse-results-count" role="status">
+          {items.length === 1
+            ? intl.formatMessage(messages.resultsShowingOne)
+            : intl.formatMessage(messages.resultsShowing, {
+                count: items.length,
+              })}
+        </p>
+
+        <div className="cse-results-controls">
+          <label className="cse-results-control">
+            <span className="cse-results-control-label">
+              {intl.formatMessage(messages.sortBy)}
+            </span>
+            <select
+              value={sortBy}
+              onChange={(event) => onSortChange(event.target.value)}
+            >
+              {SORT_OPTIONS.map((option) => (
+                <option value={option.value} key={option.value}>
+                  {intl.formatMessage(option.label)}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="cse-results-control">
+            <span className="cse-results-control-label">
+              {intl.formatMessage(messages.perPage)}
+            </span>
+            <select
+              value={perPage}
+              onChange={(event) => onPerPageChange(Number(event.target.value))}
+            >
+              {PER_PAGE_OPTIONS.map((option) => (
+                <option value={option} key={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+      </div>
+
+      {visible.length === 0 ? (
+        <div className="cse-results-empty">
+          <h3>{intl.formatMessage(messages.noResultsTitle)}</h3>
+          <p>{intl.formatMessage(messages.noResultsHint)}</p>
+          {onResetFilters ? (
+            <button
+              type="button"
+              className="cse-reset-filters"
+              onClick={onResetFilters}
+            >
+              {intl.formatMessage(messages.resetFilters)}
+            </button>
+          ) : null}
+        </div>
+      ) : (
+        <ul className="cse-results-list">
+          {visible.map((item) => (
+            <li key={item.properties?.path || item.properties?.url}>
+              <CaseStudyCard
+                item={item}
+                selected={selectedPath === item.properties?.path}
+                onShowOnMap={onShowOnMap}
+                onResetMap={onResetMap}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {visible.length > 0 ? (
+        <Pagination
+          page={currentPage}
+          pageCount={pageCount}
+          onPageChange={onPageChange}
+        />
+      ) : null}
+    </div>
+  );
+}