eionet2-dashboard 3.2.0 → 3.2.2

package/tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/eionet2-dashboard",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "MS Teams app for accessing Eionet activity and managing account information.",
   "dependencies": {
@@ -16,7 +16,7 @@
     "date-fns": "^2.30.0",
     "dompurify": "^3.2.4",
     "history": "^5.3.0",
-    "ics": "^3.8.1",
+    "ics": "3.6.3",
     "postcss-scss": "^4.0.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -61,7 +61,7 @@
   },
   "scripts": {
     "prepare": "npm run build",
-    "test": "jest",
+    "test": "jest --coverage",
     "dev:teamsfx": "env-cmd --silent -f .env.teamsfx.local npm run start",
     "start": "cross-env REACT_APP_VERSION=$npm_package_version GENERATE_SOURCEMAP=false react-scripts start",
     "install:teamsfx": "npm install",

package/tabs/public/auth-start.html

@@ -130,7 +130,7 @@
         for (var i = 0; i < 36; i++) {
           if (guidHolder[i] !== "-" && guidHolder[i] !== "4") {
             // each x and y needs to be random
-            r = (Math.random() * 16) | 0;
+            r = Math.trunc(Math.random() * 16);
           }
           if (guidHolder[i] === "x") {
             guidResponse += hex[r];
@@ -175,4 +175,4 @@
   </script>
 </body>
 
-</html>
+</html>

package/tabs/src/components/App.test.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+describe('App', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  test('renders loading state', () => {
+    jest.doMock('./lib/useTeamsAuth', () => ({
+      useTeamsAuth: () => ({ theme: null, loading: true, error: null }),
+    }));
+    jest.doMock('./Privacy', () => () => null);
+    jest.doMock('./TermsOfUse', () => () => null);
+    jest.doMock('./Tab', () => () => null);
+    jest.doMock('./TabConfig', () => () => null);
+    jest.doMock('@fluentui/react-components', () => ({
+      FluentProvider: 'div',
+      teamsLightTheme: {},
+      Spinner: () => <div>loading-spinner</div>,
+      Text: 'span',
+    }));
+    jest.doMock('react-router-dom', () => ({
+      HashRouter: React.Fragment,
+      Navigate: () => null,
+      Route: () => null,
+      Routes: React.Fragment,
+    }));
+
+    const mod = require('./App');
+    const App = mod.default;
+    const html = renderToStaticMarkup(<App />);
+
+    expect(html).toContain('loading-spinner');
+  });
+
+  test('renders fatal error message when auth fails', () => {
+    jest.doMock('./lib/useTeamsAuth', () => ({
+      useTeamsAuth: () => ({ theme: null, loading: false, error: new Error('Auth failed') }),
+    }));
+    jest.doMock('./Privacy', () => () => null);
+    jest.doMock('./TermsOfUse', () => () => null);
+    jest.doMock('./Tab', () => () => null);
+    jest.doMock('./TabConfig', () => () => null);
+    jest.doMock('@fluentui/react-components', () => ({
+      FluentProvider: 'div',
+      teamsLightTheme: {},
+      Spinner: () => <div>loading-spinner</div>,
+      Text: 'span',
+    }));
+    jest.doMock('react-router-dom', () => ({
+      HashRouter: React.Fragment,
+      Navigate: () => null,
+      Route: () => null,
+      Routes: React.Fragment,
+    }));
+
+    const mod = require('./App');
+    const App = mod.default;
+    const html = renderToStaticMarkup(<App />);
+
+    expect(html).toContain(
+      'Something went wrong while initializing Microsoft Teams authentication.',
+    );
+    expect(html).toContain('Auth failed');
+  });
+});

package/tabs/src/components/BottomMenu.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { useMediaQuery } from 'react-responsive';
+
+const mockButton = jest.fn(({ children }) => <div>{children}</div>);
+const mockMenuItem = jest.fn(({ children }) => <div>{children}</div>);
+
+jest.mock('react-responsive', () => ({
+  useMediaQuery: jest.fn(),
+}));
+jest.mock('./Tab.scss', () => ({}));
+jest.mock('@mui/icons-material/OpenInNew', () => () => <span>open-icon</span>);
+jest.mock('@mui/material', () => ({
+  Menu: ({ children }) => <div>{children}</div>,
+  MenuItem: (props) => mockMenuItem(props),
+  Typography: ({ children }) => <div>{children}</div>,
+  Box: ({ children }) => <div>{children}</div>,
+  BottomNavigation: ({ children }) => <div>{children}</div>,
+  Button: (props) => mockButton(props),
+}));
+
+import { BottomMenu } from './BottomMenu';
+
+describe('BottomMenu', () => {
+  const configuration = {
+    ConsultationListUrl: 'https://example.org/consultations',
+    MeetingListUrl: 'https://example.org/events',
+    InquiryListUrl: 'https://example.org/enquiries',
+    OrganisationListUrl: 'https://example.org/organisations',
+    UserListUrl: 'https://example.org/users',
+  };
+
+  const getNodeText = (node) => {
+    if (node === null || node === undefined || typeof node === 'boolean') {
+      return '';
+    }
+    if (typeof node === 'string' || typeof node === 'number') {
+      return String(node);
+    }
+    if (Array.isArray(node)) {
+      return node.map(getNodeText).join('');
+    }
+    if (node.props && node.props.children !== undefined) {
+      return getNodeText(node.props.children);
+    }
+    return '';
+  };
+
+  const findByLabel = (mockFn, label) =>
+    mockFn.mock.calls
+      .map(([props]) => props)
+      .find((props) => getNodeText(props.children).includes(label));
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    process.env.REACT_APP_VERSION = '9.9.9';
+    global.window = { open: jest.fn() };
+  });
+
+  test('renders desktop details section and opens expected links', () => {
+    useMediaQuery.mockReturnValue(false);
+
+    const html = renderToStaticMarkup(<BottomMenu configuration={configuration} />);
+
+    findByLabel(mockButton, 'All consultations').onClick();
+    findByLabel(mockButton, 'All enquiries').onClick();
+    findByLabel(mockButton, 'All events').onClick();
+
+    expect(html).toContain('View details:');
+    expect(html).toContain('v9.9.9');
+    expect(window.open).toHaveBeenCalledWith(
+      'https://example.org/consultations&useFiltersInViewXml=1&FilterFields2=IsECConsultation&FilterValues2=Eionet-and-EC%3B%23Eionet-only%3B%23N%2FA&FilterTypes2=Choice&FilterOp2=In',
+      '_blank',
+    );
+    expect(window.open).toHaveBeenCalledWith(
+      'https://example.org/enquiries&useFiltersInViewXml=1&FilterFields2=IsECConsultation&FilterValues2=Eionet-and-EC%3B%23Eionet-only%3B%23N%2FA&FilterTypes2=Choice&FilterOp2=In',
+      '_blank',
+    );
+    expect(window.open).toHaveBeenCalledWith('https://example.org/events', '_blank');
+  });
+
+  test('renders mobile view and opens selected menu links', () => {
+    useMediaQuery.mockReturnValue(true);
+
+    const html = renderToStaticMarkup(<BottomMenu configuration={configuration} />);
+
+    findByLabel(mockButton, 'View details').onClick({ currentTarget: { id: 'anchor' } });
+    findByLabel(mockMenuItem, 'All users').onClick();
+
+    expect(html).toContain('View details');
+    expect(html).not.toContain('View details:');
+    expect(window.open).toHaveBeenCalledWith('https://example.org/users', '_blank');
+  });
+});

package/tabs/src/components/CustomColumnResizeIcon.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import CustomColumnResizeIcon from './CustomColumnResizeIcon';
+
+jest.mock('@mui/x-data-grid', () => ({
+  GridSeparatorIcon: () => <span>grid-separator</span>,
+}));
+
+describe('CustomColumnResizeIcon', () => {
+  test('renders the draggable resize icon handle', () => {
+    const html = renderToStaticMarkup(<CustomColumnResizeIcon />);
+
+    expect(html).toContain('class="resizable"');
+    expect(html).toContain('draggable="true"');
+    expect(html).toContain('grid-separator');
+  });
+});

package/tabs/src/components/CustomDrawer.test.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import CustomDrawer from './CustomDrawer';
+
+describe('CustomDrawer', () => {
+  test('renders permanent drawer with provided content', () => {
+    const html = renderToStaticMarkup(
+      <CustomDrawer drawerOptions={<div>Drawer options content</div>} />,
+    );
+
+    expect(html).toContain(' drawer ');
+    expect(html).toContain('Drawer options content');
+  });
+});

package/tabs/src/components/CustomGridToolbar.test.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+describe('CustomGridToolbar', () => {
+  test('loads module even if exports are commented out', () => {
+    const mod = require('./CustomGridToolbar');
+    expect(mod).toBeDefined();
+  });
+});

package/tabs/src/components/EventDialogTitle.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { EventDialogTitle } from './EventDialogTitle';
+
+jest.mock('../data/hooks/useConfiguration', () => ({
+  useConfiguration: jest.fn(() => ({})),
+}));
+
+describe('EventDialogTitle', () => {
+  test('renders dialog title and event title', () => {
+    const html = renderToStaticMarkup(
+      <EventDialogTitle
+        title="Registration"
+        event={{
+          Title: 'Climate meeting',
+          MeetingStart: new Date('2025-01-01T10:00:00Z'),
+          MeetingEnd: new Date('2025-01-01T11:00:00Z'),
+        }}
+      />,
+    );
+
+    expect(html).toContain('Registration');
+    expect(html).toContain('Event: Climate meeting');
+  });
+});

package/tabs/src/components/HtmlBox.test.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+jest.mock('dompurify', () => ({
+  __esModule: true,
+  default: {
+    isSupported: true,
+    addHook: jest.fn(),
+    sanitize: jest.fn((html) => html),
+  },
+}));
+
+import DOMPurify from 'dompurify';
+import { HtmlBox } from './HtmlBox';
+
+describe('HtmlBox', () => {
+  beforeEach(() => {
+    DOMPurify.sanitize.mockClear();
+    DOMPurify.sanitize.mockImplementation((html) => html);
+  });
+
+  test('registers dompurify hook at module load', () => {
+    expect(DOMPurify.addHook).toHaveBeenCalledWith('afterSanitizeAttributes', expect.any(Function));
+  });
+
+  test('does not render content when html is missing', () => {
+    const html = renderToStaticMarkup(<HtmlBox />);
+
+    expect(html).toBe('<div></div>');
+    expect(DOMPurify.sanitize).not.toHaveBeenCalled();
+  });
+
+  test('sanitizes and renders html when provided', () => {
+    DOMPurify.sanitize.mockReturnValue('<p>Safe</p>');
+
+    const html = renderToStaticMarkup(<HtmlBox html={'<img src=x onerror=1 /><p>Safe</p>'} />);
+
+    expect(DOMPurify.sanitize).toHaveBeenCalledWith('<img src=x onerror=1 /><p>Safe</p>');
+    expect(html).toContain('<p>Safe</p>');
+  });
+});

package/tabs/src/components/Privacy.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import Privacy from './Privacy';
+
+describe('Privacy', () => {
+  test('renders privacy statement title', () => {
+    const html = renderToStaticMarkup(<Privacy />);
+
+    expect(html).toContain('<h1>Privacy Statement</h1>');
+  });
+});

package/tabs/src/components/ResizableGrid.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { DataGrid } from '@mui/x-data-grid';
+import ResizableGrid from './ResizableGrid';
+import Constants from '../data/constants.json';
+
+const mockResizeIcon = jest.fn(() => <div data-testid="resize-icon">resize-icon</div>);
+
+jest.mock('@mui/x-data-grid', () => {
+  const React = require('react');
+  return {
+    DataGrid: jest.fn(() => <div>mock-data-grid</div>),
+  };
+});
+
+jest.mock('./CustomColumnResizeIcon', () => ({
+  __esModule: true,
+  default: (props) => mockResizeIcon(props),
+}));
+
+describe('ResizableGrid', () => {
+  beforeEach(() => {
+    DataGrid.mockClear();
+    mockResizeIcon.mockClear();
+  });
+
+  test('renders data grid with provided columns and rows and wires resize component', () => {
+    const columns = [{ field: 'title', headerName: 'Title' }];
+
+    const html = renderToStaticMarkup(
+      <ResizableGrid id="grid1" rows={[{ id: 1, title: 'A' }]} columns={columns} />,
+    );
+
+    expect(html).toContain('mock-data-grid');
+    expect(DataGrid).toHaveBeenCalled();
+    const props = DataGrid.mock.calls[0][0];
+    expect(props.columns).toEqual(columns);
+    expect(props.getRowHeight()).toBe(Constants.GridRowHeight);
+    expect(props.components).toMatchObject({
+      ColumnResizeIcon: expect.any(Function),
+    });
+
+    renderToStaticMarkup(<props.components.ColumnResizeIcon />);
+    expect(mockResizeIcon).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'grid1', onWidthChanged: expect.any(Function) }),
+    );
+  });
+
+  test('forwards extra props to DataGrid', () => {
+    renderToStaticMarkup(
+      <ResizableGrid
+        id="grid1"
+        autoHeight
+        rows={[{ id: 1, title: 'A' }]}
+        columns={[{ field: 'title', headerName: 'Title' }]}
+      />,
+    );
+
+    const props = DataGrid.mock.calls[0][0];
+    expect(props.id).toBe('grid1');
+    expect(props.autoHeight).toBe(true);
+    expect(props.rows).toEqual([{ id: 1, title: 'A' }]);
+  });
+});

package/tabs/src/components/Tab.scss

@@ -183,3 +183,9 @@ body {
   align-self: center !important;
   font-size: 14px !important;
 }
+
+.MuiDataGrid-cell {
+  display: flex !important;
+  align-items: center !important;
+  /* vertical center */
+}