@eeacms/volto-eea-website-theme 3.7.0 → 3.9.0

package/src/components/manage/Blocks/Title/variations/WebReportPage.test.jsx

@@ -0,0 +1,232 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import WebReportPage from './WebReportPage';
+
+// Add jest-dom matchers
+import '@testing-library/jest-dom';
+
+// Mock dependencies
+jest.mock('react-portal', () => ({
+  Portal: ({ children, node }) => (
+    <div data-testid="portal" data-node={node?.tagName}>
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock('@plone/volto/components', () => ({
+  MaybeWrap: ({ children, condition, as: Component }) =>
+    condition ? <Component>{children}</Component> : <div>{children}</div>,
+}));
+
+jest.mock(
+  '@eeacms/volto-eea-website-theme/components/theme/Banner/View',
+  () => {
+    return function MockBannerView({ data, ...props }) {
+      // Safe JSON stringify that handles circular references
+      const safeStringify = (obj) => {
+        try {
+          return JSON.stringify(obj, (key, value) => {
+            if (key === 'aboveTitle') return '[React Element]';
+            if (typeof value === 'object' && value !== null && value.$$typeof)
+              return '[React Element]';
+            return value;
+          });
+        } catch (e) {
+          return '[Circular Reference]';
+        }
+      };
+
+      return (
+        <div data-testid="banner-view" data-props={safeStringify(props)}>
+          <div data-testid="banner-data">{safeStringify(data)}</div>
+          {data.aboveTitle && (
+            <div data-testid="above-title">{data.aboveTitle}</div>
+          )}
+        </div>
+      );
+    };
+  },
+);
+
+jest.mock('clsx', () => jest.fn((classes) => classes));
+
+jest.mock('@plone/volto/helpers', () => ({
+  BodyClass: ({ className }) => (
+    <div data-testid="body-class" data-classname={className} />
+  ),
+}));
+
+describe('WebReportPage', () => {
+  const defaultProps = {
+    data: {
+      title: 'Test Report Title',
+      subtitle: 'Test Subtitle',
+      content_type: 'Report',
+      hideContentType: false,
+    },
+    properties: {
+      type_title: 'Default Type Title',
+    },
+    isEditMode: false,
+  };
+
+  beforeEach(() => {
+    // Mock document.querySelector for Portal
+    document.querySelector = jest.fn().mockReturnValue({
+      tagName: 'HEADER',
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    render(<WebReportPage {...defaultProps} />);
+    expect(screen.getByTestId('banner-view')).toBeInTheDocument();
+  });
+
+  it('renders in Portal when not in edit mode', () => {
+    render(<WebReportPage {...defaultProps} />);
+    expect(screen.getByTestId('portal')).toBeInTheDocument();
+  });
+
+  it('does not render in Portal when in edit mode', () => {
+    const props = { ...defaultProps, isEditMode: true };
+    render(<WebReportPage {...props} />);
+    expect(screen.queryByTestId('portal')).not.toBeInTheDocument();
+  });
+
+  it('renders BodyClass with correct className', () => {
+    render(<WebReportPage {...defaultProps} />);
+    expect(screen.getByTestId('body-class')).toHaveAttribute(
+      'data-classname',
+      'homepage-inverse light-header',
+    );
+  });
+
+  it('renders content type when not hidden', () => {
+    render(<WebReportPage {...defaultProps} />);
+    const aboveTitle = screen.getByTestId('above-title');
+    expect(aboveTitle).toHaveTextContent('Report');
+  });
+
+  it('does not render content type when hidden', () => {
+    const props = {
+      ...defaultProps,
+      data: { ...defaultProps.data, hideContentType: true },
+    };
+    render(<WebReportPage {...props} />);
+    const aboveTitle = screen.getByTestId('above-title');
+    expect(aboveTitle).not.toHaveTextContent('Report');
+  });
+
+  it('uses properties.type_title when data.content_type is not provided', () => {
+    const props = {
+      ...defaultProps,
+      data: { ...defaultProps.data, content_type: undefined },
+    };
+    render(<WebReportPage {...props} />);
+    const aboveTitle = screen.getByTestId('above-title');
+    expect(aboveTitle).toHaveTextContent('Default Type Title');
+  });
+
+  it('renders subtitle', () => {
+    render(<WebReportPage {...defaultProps} />);
+    const aboveTitle = screen.getByTestId('above-title');
+    expect(aboveTitle).toHaveTextContent('Test Subtitle');
+  });
+
+  it('passes all props to BannerView', () => {
+    const customProps = {
+      ...defaultProps,
+      customProp: 'custom-value',
+      anotherProp: { nested: 'object' },
+    };
+    render(<WebReportPage {...customProps} />);
+
+    const bannerPropsText = screen
+      .getByTestId('banner-view')
+      .getAttribute('data-props');
+    expect(bannerPropsText).toContain('custom-value');
+    expect(bannerPropsText).toContain('nested');
+  });
+
+  it('merges data with aboveTitle correctly', () => {
+    render(<WebReportPage {...defaultProps} />);
+
+    const bannerDataText = screen.getByTestId('banner-data').textContent;
+    expect(bannerDataText).toContain('Test Report Title');
+    expect(bannerDataText).toContain('Test Subtitle');
+    expect(bannerDataText).toContain('[React Element]'); // aboveTitle is a React element
+  });
+
+  it('handles missing subtitle gracefully', () => {
+    const props = {
+      ...defaultProps,
+      data: { ...defaultProps.data, subtitle: undefined },
+    };
+    render(<WebReportPage {...props} />);
+    expect(screen.getByTestId('banner-view')).toBeInTheDocument();
+  });
+
+  it('handles missing content_type and type_title gracefully', () => {
+    const props = {
+      ...defaultProps,
+      data: { ...defaultProps.data, content_type: undefined },
+      properties: { ...defaultProps.properties, type_title: undefined },
+    };
+    render(<WebReportPage {...props} />);
+    expect(screen.getByTestId('banner-view')).toBeInTheDocument();
+  });
+
+  describe('IsomorphicPortal', () => {
+    it('renders children directly on server side', () => {
+      // Mock useState to simulate server-side rendering
+      const originalUseState = React.useState;
+      React.useState = jest.fn().mockReturnValue([false, jest.fn()]);
+
+      render(<WebReportPage {...defaultProps} />);
+      expect(screen.getByTestId('banner-view')).toBeInTheDocument();
+
+      React.useState = originalUseState;
+    });
+
+    it('renders in Portal on client side', () => {
+      // Mock useState to simulate client-side rendering
+      const originalUseState = React.useState;
+      const mockSetIsClient = jest.fn();
+      React.useState = jest.fn().mockReturnValue([true, mockSetIsClient]);
+
+      render(<WebReportPage {...defaultProps} />);
+      expect(screen.getByTestId('portal')).toBeInTheDocument();
+
+      React.useState = originalUseState;
+    });
+
+    it('calls setIsClient in useEffect', () => {
+      const originalUseState = React.useState;
+      const originalUseEffect = React.useEffect;
+
+      const mockSetIsClient = jest.fn();
+      React.useState = jest.fn().mockReturnValue([false, mockSetIsClient]);
+      React.useEffect = jest.fn().mockImplementation((fn) => fn());
+
+      render(<WebReportPage {...defaultProps} />);
+
+      expect(mockSetIsClient).toHaveBeenCalledWith(true);
+
+      React.useState = originalUseState;
+      React.useEffect = originalUseEffect;
+    });
+  });
+
+  it('handles document.querySelector returning null', () => {
+    document.querySelector = jest.fn().mockReturnValue(null);
+
+    expect(() => {
+      render(<WebReportPage {...defaultProps} />);
+    }).not.toThrow();
+  });
+});

package/src/components/theme/Banner/View.jsx

@@ -5,7 +5,7 @@ import { connect, useDispatch } from 'react-redux';
 import { withRouter } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
 import startCase from 'lodash/startCase';
-import { Icon, Loader } from 'semantic-ui-react';
+import { Icon } from 'semantic-ui-react';
 import Popup from '@eeacms/volto-eea-design-system/ui/Popup/Popup';
 import config from '@plone/volto/registry';
 import Banner from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
@@ -14,8 +14,8 @@ import {
   sharePage,
 } from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
 import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';
-import { setIsPrint } from '@eeacms/volto-eea-website-theme/actions/print';
-import cx from 'classnames';
+import { setupPrintView } from '@eeacms/volto-eea-website-theme/helpers/setupPrintView';
+
 import './styles.less';
 
 const messages = defineMessages({
@@ -173,95 +173,14 @@ const View = (props) => {
               </>
             )}
             {!hideDownloadButton && (
-              <>
-                <Banner.Action
-                  icon="ri-download-2-fill"
-                  title={intl.formatMessage(messages.download)}
-                  className="download"
-                  onClick={() => {
-                    // set tabs to be visible
-                    const tabs = document.getElementsByClassName('ui tab');
-                    Array.from(tabs).forEach((tab) => {
-                      tab.style.display = 'block';
-                    });
-
-                    dispatch(setIsPrint(true));
-                    // display loader
-                    const printLoader = document.getElementById(
-                      'download-print-loader',
-                    );
-                    printLoader.style.display = 'flex';
-
-                    let timeoutValue = 1000;
-                    // if we have plotlycharts increase timeout
-                    setTimeout(() => {
-                      const plotlyCharts = document.getElementsByClassName(
-                        'visualization-wrapper',
-                      );
-                      if (plotlyCharts.length > 0) {
-                        timeoutValue = timeoutValue + 1000;
-                      }
-                    }, timeoutValue);
-
-                    // scroll to iframes to make them be in the viewport
-                    // use timeout to wait for load
-                    setTimeout(() => {
-                      const iframes = document.getElementsByTagName('iframe');
-                      if (iframes.length > 0) {
-                        timeoutValue = timeoutValue + 2000;
-                        Array.from(iframes).forEach((element, index) => {
-                          setTimeout(() => {
-                            element.scrollIntoView({
-                              behavior: 'instant',
-                              block: 'nearest',
-                              inline: 'center',
-                            });
-                          }, timeoutValue);
-                          timeoutValue = timeoutValue + 3000;
-                        });
-                        timeoutValue = timeoutValue + 1000;
-                      }
-
-                      setTimeout(() => {
-                        window.scrollTo({
-                          top: 0,
-                        });
-                        Array.from(tabs).forEach((tab) => {
-                          tab.style.display = '';
-                        });
-                        printLoader.style.display = 'none';
-                        dispatch(setIsPrint(false));
-                        window.print();
-                      }, timeoutValue);
-                    }, timeoutValue);
-                  }}
-                />
-                <div
-                  id="download-print-loader"
-                  className={cx('ui warning message')}
-                  style={{
-                    position: 'fixed',
-                    left: '40%',
-                    right: '40%',
-                    backgroundColor: '#fff',
-                    padding: '1em',
-                    display: 'none',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    top: '40%',
-                    zIndex: '9999',
-                  }}
-                >
-                  <Loader
-                    disabled={false}
-                    indeterminate
-                    active
-                    inline
-                    size="medium"
-                  ></Loader>
-                  <div>Preparing download</div>
-                </div>
-              </>
+              <Banner.Action
+                icon="ri-download-2-fill"
+                title={intl.formatMessage(messages.download)}
+                className="download"
+                onClick={() => {
+                  setupPrintView(dispatch);
+                }}
+              />
             )}
             {rssLinks?.map((rssLink, index) => (
               <>

package/src/components/theme/PrintLoader/PrintLoader.jsx

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { Loader } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { loadLazyImages } from '@eeacms/volto-eea-website-theme/helpers/loadLazyImages';
+import { setupPrintView } from '@eeacms/volto-eea-website-theme/helpers/setupPrintView';
+
+import './style.less';
+
+const messages = defineMessages({
+  preparingDownload: {
+    id: 'Preparing download',
+    defaultMessage: 'Preparing download',
+  },
+});
+
+const PrintLoader = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const showLoader = useSelector((state) => state.print.isPrintLoading);
+
+  useEffect(() => {
+    const handleBeforePrint = () => {
+      loadLazyImages();
+    };
+
+    const handleKeyDown = (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
+        event.preventDefault();
+        setupPrintView(dispatch);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('beforeprint', handleBeforePrint);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('beforeprint', handleBeforePrint);
+    };
+  }, [dispatch]);
+
+  return showLoader ? (
+    <div
+      id="download-print-loader"
+      className="ui warning message"
+      role="status"
+      aria-live="polite"
+    >
+      <Loader active inline size="medium" />
+      <div>{intl.formatMessage(messages.preparingDownload)}</div>
+    </div>
+  ) : null;
+};
+
+export default PrintLoader;

package/src/components/theme/PrintLoader/PrintLoader.test.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import PrintLoader from './PrintLoader';
+import { IntlProvider } from 'react-intl';
+
+jest.mock('@eeacms/volto-eea-website-theme/helpers/setupPrintView', () => ({
+  setupPrintView: jest.fn(),
+}));
+
+jest.mock('@eeacms/volto-eea-website-theme/helpers/loadLazyImages', () => ({
+  loadLazyImages: jest.fn(),
+}));
+
+const mockStore = configureStore();
+
+describe('PrintLoader', () => {
+  it('should render loader when showLoader is true', () => {
+    const store = mockStore({
+      print: { isPrintLoading: true },
+    });
+
+    const { getByText } = render(
+      <Provider store={store}>
+        <IntlProvider locale="en" messages={{}}>
+          <PrintLoader />
+        </IntlProvider>
+      </Provider>,
+    );
+
+    expect(getByText('Preparing download')).toBeInTheDocument();
+  });
+
+  it('should not render anything when showLoader is false', () => {
+    const store = mockStore({
+      print: { isPrintLoading: false },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <IntlProvider locale="en" messages={{}}>
+          <PrintLoader />
+        </IntlProvider>
+      </Provider>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should call setupPrintView when Ctrl+P is pressed', () => {
+    const store = mockStore({
+      print: { isPrintLoading: false },
+    });
+
+    render(
+      <Provider store={store}>
+        <IntlProvider locale="en" messages={{}}>
+          <PrintLoader />
+        </IntlProvider>
+      </Provider>,
+    );
+
+    fireEvent.keyDown(window, { key: 'p', ctrlKey: true });
+    expect(
+      require('@eeacms/volto-eea-website-theme/helpers/setupPrintView')
+        .setupPrintView,
+    ).toHaveBeenCalled();
+  });
+
+  it('should call loadLazyImages before printing', () => {
+    const store = mockStore({
+      print: { isPrintLoading: false },
+    });
+
+    render(
+      <Provider store={store}>
+        <IntlProvider locale="en" messages={{}}>
+          <PrintLoader />
+        </IntlProvider>
+      </Provider>,
+    );
+
+    window.dispatchEvent(new Event('beforeprint'));
+    expect(
+      require('@eeacms/volto-eea-website-theme/helpers/loadLazyImages')
+        .loadLazyImages,
+    ).toHaveBeenCalled();
+  });
+});

package/src/components/theme/PrintLoader/style.less

@@ -0,0 +1,12 @@
+#download-print-loader {
+  position: fixed;
+  z-index: 9999;
+  top: 40%;
+  right: 40%;
+  left: 40%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1em;
+  background-color: #fff;
+}