eionet2-dashboard 3.2.1 → 3.2.2

package/tabs/src/components/my_country/CountryMembers.test.jsx

@@ -0,0 +1,117 @@
+jest.mock('react', () => {
+  const actual = jest.requireActual('react');
+  return {
+    ...actual,
+    React: actual,
+    useState: jest.fn(actual.useState),
+    useEffect: jest.fn((fn) => fn()),
+  };
+});
+
+import React from 'react';
+jest.mock('./my_country.scss', () => ({}));
+import { renderToStaticMarkup } from 'react-dom/server';
+import { CountryMembers } from './CountryMembers';
+import { getADUserInfos } from '../../data/sharepointProvider';
+
+jest.mock('../../data/sharepointProvider', () => ({
+  getADUserInfos: jest.fn(),
+}));
+
+jest.mock('./UserCard', () => ({
+  UserCard: ({ userInfo }) => <div>{userInfo.UserName}</div>,
+}));
+
+function mockStateSequence(values) {
+  let index = 0;
+  React.useState.mockImplementation((initialValue) => {
+    if (index < values.length) {
+      const value = values[index];
+      index += 1;
+      return [value, jest.fn()];
+    }
+    return [initialValue, jest.fn()];
+  });
+}
+
+describe('CountryMembers', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    React.useState.mockImplementation((initialValue) => [initialValue, jest.fn()]);
+    React.useEffect.mockImplementation((fn) => fn());
+    getADUserInfos.mockResolvedValue([]);
+  });
+
+  test('renders wrapper and no sections when countryInfo is missing', () => {
+    const html = renderToStaticMarkup(<CountryMembers countryInfo={null} />);
+
+    expect(html).toContain('grid-container');
+    expect(html).not.toContain('Country desk officer for');
+    expect(html).not.toContain('Country desk officer team members');
+  });
+
+  test('renders leads and members sections when state contains users', () => {
+    mockStateSequence([
+      false,
+      [{ id: 'l1', UserName: 'Lead User' }],
+      [{ id: 'm1', UserName: 'Member User' }],
+    ]);
+
+    const html = renderToStaticMarkup(
+      <CountryMembers countryInfo={{ CountryName: 'Romania', CDO: [], TeamMember: [] }} />,
+    );
+
+    expect(html).toContain('Country desk officer for Romania');
+    expect(html).toContain('Country desk officer team members');
+    expect(html).toContain('Lead User');
+    expect(html).toContain('Member User');
+  });
+
+  test('loads AD users for CDO and team members', async () => {
+    const countryInfo = {
+      CountryName: 'Romania',
+      CDO: [{ LookupId: 101 }],
+      TeamMember: [{ LookupId: 202 }],
+    };
+
+    getADUserInfos.mockResolvedValue([
+      {
+        id: 'a',
+        lookupId: 101,
+        displayName: 'CDO 1',
+        mail: 'cdo@example.org',
+        companyName: 'EEA',
+        businessPhones: ['+40'],
+        jobTitle: 'Officer',
+        department: 'Dept',
+      },
+      {
+        id: 'b',
+        lookupId: 202,
+        displayName: 'Team 1',
+        mail: 'team@example.org',
+        companyName: 'EEA',
+        businessPhones: [],
+        jobTitle: 'Member',
+        department: 'Dept',
+        base64Photo: 'abc123',
+      },
+      null,
+    ]);
+
+    renderToStaticMarkup(<CountryMembers countryInfo={countryInfo} />);
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(getADUserInfos).toHaveBeenCalledWith([101, 202]);
+  });
+
+  test('does not load users when there are no member ids', async () => {
+    renderToStaticMarkup(
+      <CountryMembers countryInfo={{ CountryName: 'Romania', CDO: [], TeamMember: [] }} />,
+    );
+    await Promise.resolve();
+
+    expect(getADUserInfos).not.toHaveBeenCalled();
+  });
+});

package/tabs/src/components/my_country/CountryProgress.test.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+jest.mock('./my_country.scss', () => ({}));
+import { renderToStaticMarkup } from 'react-dom/server';
+import { CountryProgress } from './CountryProgress';
+
+jest.mock('./YearlyProgress', () => ({
+  YearlyProgress: ({ yearData }) => <div>yearly-{yearData.year}</div>,
+}));
+
+describe('CountryProgress', () => {
+  test('renders yearly overview tabs', () => {
+    const html = renderToStaticMarkup(
+      <CountryProgress configuration={{}} lastYears={[{ year: 2024 }, { year: 2023 }]} />,
+    );
+
+    expect(html).toContain('Yearly overview:');
+    expect(html).toContain('2024');
+    expect(html).toContain('2023');
+    expect(html).toContain('yearly-2024');
+  });
+});

package/tabs/src/components/my_country/DataReporters.test.jsx

@@ -0,0 +1,156 @@
+import React from 'react';
+jest.mock('./my_country.scss', () => ({}));
+import { renderToStaticMarkup } from 'react-dom/server';
+import { DataReporters } from './DataReporters';
+import { getFlows } from '../../data/reportingProvider';
+
+jest.mock('../../data/reportingProvider', () => ({
+  getFlows: jest.fn(),
+}));
+
+const mockResizableGrid = jest.fn(({ rows }) => <div>grid-rows-{rows?.length || 0}</div>);
+jest.mock('../ResizableGrid', () => ({
+  __esModule: true,
+  default: (props) => mockResizableGrid(props),
+}));
+jest.mock('../HtmlBox', () => ({
+  HtmlBox: ({ html }) => <div>{html}</div>,
+}));
+jest.mock('@mui/x-data-grid', () => ({
+  GridToolbarContainer: ({ children }) => <div>{children}</div>,
+  GridToolbarFilterButton: () => <button>filter</button>,
+  GridToolbarExport: () => <button>export</button>,
+}));
+
+describe('DataReporters', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    global.window = { open: jest.fn() };
+  });
+
+  test('renders coordinator text and grid', () => {
+    const html = renderToStaticMarkup(
+      <DataReporters
+        configuration={{
+          DataflowCoordinatorsTag: 'Coordinator',
+          ReportingInfoText: 'Reporting info',
+          DateFormatDashboard: 'dd-MMM-yyyy',
+        }}
+        country="RO"
+        users={[{ Title: 'John Doe', AllMemberships: ['Coordinator'] }]}
+      />,
+    );
+
+    expect(html).toContain('National Dataflow Coordinator: John Doe');
+    expect(html).toContain('Reporting info');
+    expect(html).toContain('grid-rows-0');
+  });
+
+  test('returns empty output when country is missing', () => {
+    const html = renderToStaticMarkup(
+      <DataReporters
+        configuration={{
+          DataflowCoordinatorsTag: 'Coordinator',
+          ReportingInfoText: 'Reporting info',
+        }}
+        country=""
+        users={[]}
+      />,
+    );
+
+    expect(html).toBe('');
+    expect(mockResizableGrid).not.toHaveBeenCalled();
+  });
+
+  test('configures toolbar and column renderers', () => {
+    renderToStaticMarkup(
+      <DataReporters
+        configuration={{
+          DataflowCoordinatorsTag: 'Coordinator',
+          ReportingInfoText: 'Reporting info',
+          DateFormatDashboard: 'dd-MMM-yyyy',
+        }}
+        country="RO"
+        users={[]}
+      />,
+    );
+
+    const gridProps = mockResizableGrid.mock.calls[0][0];
+    expect(gridProps.showToolbar).toBe(true);
+    expect(gridProps.pageSizeOptions).toEqual([25, 50, 100]);
+    expect(gridProps.hideFooterSelectedRowCount).toBe(true);
+    expect(gridProps.initialState.pagination.paginationModel.pageSize).toBe(25);
+    expect(gridProps.initialState.sorting.sortModel[0]).toEqual({
+      field: 'firstReleaseDate',
+      sort: 'desc',
+    });
+    expect(gridProps.getRowHeight()).toBe('auto');
+
+    const toolbarHtml = renderToStaticMarkup(<gridProps.components.Toolbar />);
+    expect(toolbarHtml).toContain('filter');
+    expect(toolbarHtml).toContain('export');
+
+    const titleColumn = gridProps.columns.find((c) => c.field === 'dataflowName');
+    const reportersColumn = gridProps.columns.find((c) => c.field === 'reporterEmailsString');
+    const deadlineColumn = gridProps.columns.find((c) => c.field === 'deadlineDate');
+    const releaseColumn = gridProps.columns.find((c) => c.field === 'firstReleaseDate');
+    const statusColumn = gridProps.columns.find((c) => c.field === 'status');
+    const deliveryColumn = gridProps.columns.find((c) => c.field === 'deliveryStatus');
+    const coreColumn = gridProps.columns.find((c) => c.field === 'isEEACore');
+
+    const sampleRow = {
+      dataflowName: 'Dataflow A',
+      dataflowURL: 'https://example.org/df',
+      obligationName: 'Obligation B',
+      obligationURL: '',
+      legalInstrumentName: 'Instrument C',
+      legalInstrumentURL: 'https://example.org/li',
+      reporterEmails: ['a@example.org', 'b@example.org'],
+      deadlineDate: new Date('2024-01-10'),
+      firstReleaseDate: new Date('2024-01-01'),
+      lastReleaseDate: new Date('2024-02-01'),
+      status: 'Open',
+      deliveryStatus: 'Final feedback',
+      isEEACore: true,
+    };
+
+    const titleHeaderHtml = renderToStaticMarkup(<>{titleColumn.renderHeader()}</>);
+    expect(titleHeaderHtml).toContain('Dataflow');
+    expect(titleHeaderHtml).toContain('Obligation');
+    expect(titleHeaderHtml).toContain('Legal instrument');
+
+    const titleCellHtml = renderToStaticMarkup(<>{titleColumn.renderCell({ row: sampleRow })}</>);
+    expect(titleCellHtml).toContain('Dataflow A');
+    expect(titleCellHtml).toContain('Obligation B');
+    expect(titleCellHtml).toContain('Instrument C');
+
+    const reportersHtml = renderToStaticMarkup(
+      <>{reportersColumn.renderCell({ row: sampleRow })}</>,
+    );
+    expect(reportersHtml).toContain('mailto:a@example.org');
+    expect(reportersHtml).toContain('mailto:b@example.org');
+
+    const deadlineHtml = renderToStaticMarkup(<>{deadlineColumn.renderCell({ row: sampleRow })}</>);
+    expect(deadlineHtml).toContain('10-Jan-2024');
+
+    const releaseHtml = renderToStaticMarkup(<>{releaseColumn.renderCell({ row: sampleRow })}</>);
+    expect(releaseHtml).toContain('(first)');
+    expect(releaseHtml).toContain('(latest)');
+
+    const statusHtml = renderToStaticMarkup(<>{statusColumn.renderCell({ row: sampleRow })}</>);
+    expect(statusHtml).toContain('status-open');
+    expect(statusHtml).toContain('Open');
+
+    const closedStatusHtml = renderToStaticMarkup(
+      <>{statusColumn.renderCell({ row: { ...sampleRow, status: 'Closed' } })}</>,
+    );
+    expect(closedStatusHtml).toContain('status-closed');
+    expect(closedStatusHtml).toContain('Closed');
+
+    const deliveryHtml = renderToStaticMarkup(<>{deliveryColumn.renderCell({ row: sampleRow })}</>);
+    expect(deliveryHtml).toContain('delivery-status-finalfeedback');
+
+    const coreHtml = renderToStaticMarkup(<>{coreColumn.renderCell({ row: sampleRow })}</>);
+    expect(coreHtml).toContain('svg');
+  });
+});

package/tabs/src/components/my_country/FullCircularProgress.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { FullCircularProgress } from './FullCircularProgress';
+
+describe('FullCircularProgress', () => {
+  test('renders determinate progress circles with computed value', () => {
+    const html = renderToStaticMarkup(<FullCircularProgress totalCount={10} responseCount={5} />);
+
+    expect(html).toContain('MuiCircularProgress-root');
+    expect(html).toContain('50');
+  });
+
+  test('falls back to 0 value when total count is zero', () => {
+    const html = renderToStaticMarkup(<FullCircularProgress totalCount={0} responseCount={5} />);
+
+    expect(html).toContain('MuiCircularProgress-root');
+    expect(html).toContain('0');
+  });
+});

package/tabs/src/components/my_country/GroupView.test.jsx

@@ -0,0 +1,165 @@
+let mockRunEffect = true;
+
+jest.mock('react', () => {
+  const actual = jest.requireActual('react');
+  return {
+    ...actual,
+    React: actual,
+    useState: jest.fn(actual.useState),
+    useEffect: jest.fn((fn) => {
+      if (mockRunEffect) {
+        mockRunEffect = false;
+        fn();
+      }
+    }),
+  };
+});
+
+import React from 'react';
+jest.mock('./my_country.scss', () => ({}));
+import { renderToStaticMarkup } from 'react-dom/server';
+import { GroupView } from './GroupView';
+import { getADUserInfos } from '../../data/sharepointProvider';
+
+const gridProps = [];
+
+jest.mock('../../data/sharepointProvider', () => ({
+  getADUserInfos: jest.fn(),
+}));
+
+jest.mock('./UserCard', () => ({
+  UserCard: ({ userInfo }) => <div>{userInfo.UserName}</div>,
+}));
+
+jest.mock('../ResizableGrid', () => ({
+  __esModule: true,
+  default: (props) => {
+    gridProps.push(props);
+    return <div>grid-rows-{props.rows?.length || 0}</div>;
+  },
+}));
+
+describe('GroupView', () => {
+  const baseGroup = {
+    GroupName: 'Air',
+    OfficialGroupName: 'Air Group',
+    ETCManagerIds: [202],
+    EEAGroupLeadsIds: [101],
+    OtherMembership: true,
+    Users: [
+      { id: 1, Title: 'Member 1', Organisation: 'Org', Email: 'm1@example.org', PCP: ['Air'] },
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockRunEffect = true;
+    gridProps.length = 0;
+    React.useState.mockImplementation((initialValue) => [initialValue, jest.fn()]);
+
+    getADUserInfos.mockResolvedValue([
+      {
+        id: 'a',
+        lookupId: 101,
+        displayName: 'Lead User',
+        mail: 'lead@example.org',
+        companyName: 'EEA',
+        businessPhones: ['+1'],
+        jobTitle: 'Lead',
+        department: 'Dept',
+      },
+      {
+        id: 'b',
+        lookupId: 202,
+        displayName: 'ETC User',
+        mail: 'etc@example.org',
+        companyName: 'EEA',
+        businessPhones: [],
+        jobTitle: 'Manager',
+        department: 'Dept',
+        base64Photo: 'abc',
+      },
+    ]);
+  });
+
+  test('renders group title and users grid', () => {
+    const html = renderToStaticMarkup(
+      <GroupView configuration={{ DashboardLeadIconTooltip: 'Lead' }} group={{ ...baseGroup }} />,
+    );
+
+    expect(html).toContain('Air Group');
+    expect(html).toContain('grid-rows-1');
+    expect(gridProps[0].id).toBe('Air');
+  });
+
+  test('renders no content for missing group', () => {
+    const html = renderToStaticMarkup(
+      <GroupView configuration={{ DashboardLeadIconTooltip: 'Lead' }} group={null} />,
+    );
+
+    expect(html).toContain('grid-container');
+    expect(html).not.toContain('grid-rows-');
+  });
+
+  test('renders lead and etc manager sections from state', () => {
+    let call = 0;
+    React.useState.mockImplementation((initialValue) => {
+      call += 1;
+      if (call === 1) return [false, jest.fn()];
+      if (call === 2) return [[{ id: 'l1', UserName: 'Lead User' }], jest.fn()];
+      if (call === 3) return [[{ id: 'e1', UserName: 'ETC User' }], jest.fn()];
+      if (call === 4) return [true, jest.fn()];
+      return [initialValue, jest.fn()];
+    });
+
+    const html = renderToStaticMarkup(
+      <GroupView configuration={{ DashboardLeadIconTooltip: 'Lead' }} group={{ ...baseGroup }} />,
+    );
+
+    expect(html).toContain('EEA ETC Lead:');
+    expect(html).toContain('ETC Manager:');
+    expect(html).toContain('Lead User');
+    expect(html).toContain('ETC User');
+  });
+
+  test('loads AD user infos for leads and etc managers', async () => {
+    renderToStaticMarkup(
+      <GroupView configuration={{ DashboardLeadIconTooltip: 'Lead' }} group={{ ...baseGroup }} />,
+    );
+
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(getADUserInfos).toHaveBeenCalledWith([101]);
+  });
+
+  test('skips AD call when no lead ids exist', async () => {
+    renderToStaticMarkup(
+      <GroupView
+        configuration={{ DashboardLeadIconTooltip: 'Lead' }}
+        group={{ ...baseGroup, EEAGroupLeadsIds: [], ETCManagerIds: [], OtherMembership: false }}
+      />,
+    );
+
+    await Promise.resolve();
+
+    expect(getADUserInfos).not.toHaveBeenCalled();
+  });
+
+  test('renders title column with PCP icon from grid renderCell', () => {
+    renderToStaticMarkup(
+      <GroupView
+        configuration={{ DashboardLeadIconTooltip: 'Lead tooltip' }}
+        group={{ ...baseGroup }}
+      />,
+    );
+
+    const titleColumn = gridProps[0].columns.find((c) => c.field === 'Title');
+    const cellHtml = renderToStaticMarkup(
+      titleColumn.renderCell({ row: { Title: 'Member 1', PCP: ['Air'] } }),
+    );
+
+    expect(cellHtml).toContain('Member 1');
+    expect(cellHtml).toContain('svg');
+  });
+});

package/tabs/src/components/my_country/GroupsBoard.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+jest.mock('./my_country.scss', () => ({}));
+import { renderToStaticMarkup } from 'react-dom/server';
+import { GroupsBoard } from './GroupsBoard';
+
+jest.mock('react-responsive', () => ({
+  useMediaQuery: () => false,
+}));
+jest.mock('./GroupView', () => ({
+  GroupView: ({ group }) => <div>group-view-{group?.GroupName}</div>,
+}));
+jest.mock('../CustomDrawer', () => ({
+  __esModule: true,
+  default: ({ drawerOptions }) => <div>{drawerOptions}</div>,
+}));
+
+describe('GroupsBoard', () => {
+  test('renders group list and selected group view', () => {
+    const html = renderToStaticMarkup(
+      <GroupsBoard
+        configuration={{}}
+        users={[{ AllMemberships: ['Air'] }]}
+        mappings={[{ Membership: 'Air', OfficialGroupName: 'Air Group' }]}
+      />,
+    );
+
+    expect(html).toContain('Air');
+    expect(html).toContain('group-view-Air');
+  });
+});

package/tabs/src/components/my_country/IndicatorCard.test.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { IndicatorCard } from './IndicatorCard';
+
+describe('IndicatorCard', () => {
+  test('renders label and value', () => {
+    const html = renderToStaticMarkup(
+      <IndicatorCard labelText="Users" valueText="42" infoText="Details" />,
+    );
+
+    expect(html).toContain('Users');
+    expect(html).toContain('42');
+  });
+
+  test('renders details link when url exists', () => {
+    const html = renderToStaticMarkup(
+      <IndicatorCard
+        labelText="Users"
+        valueText="42"
+        infoText="Details"
+        url="https://example.org"
+      />,
+    );
+
+    expect(html).toContain('Details');
+  });
+});

package/tabs/src/components/my_country/ManagementBoard.test.jsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { ManagementBoard } from './ManagementBoard';
+
+const gridProps = [];
+
+jest.mock('@mui/material', () => ({
+  Box: ({ children, className }) => <div className={className}>{children}</div>,
+  Chip: ({ label }) => <span>{label}</span>,
+  Tooltip: ({ title, children }) => (
+    <div>
+      <span>{title}</span>
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock('../ResizableGrid', () => ({
+  __esModule: true,
+  default: (props) => {
+    gridProps.push(props);
+    return <div>grid-rows-{props.rows?.length || 0}</div>;
+  },
+}));
+
+describe('ManagementBoard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    gridProps.length = 0;
+  });
+
+  test('renders filtered board users in grid', () => {
+    const html = renderToStaticMarkup(
+      <ManagementBoard
+        mappings={[{ ManagementBoard: true, Membership: 'Board' }]}
+        users={[
+          {
+            id: 1,
+            Organisation: 'Org',
+            Title: 'Member',
+            Email: 'm@example.org',
+            Membership: ['Board'],
+            OtherMemberships: ['Other'],
+          },
+          {
+            id: 2,
+            Organisation: 'Org2',
+            Title: 'Ignored',
+            Email: 'i@example.org',
+            Membership: ['NonBoard'],
+            OtherMemberships: [],
+          },
+        ]}
+      />,
+    );
+
+    expect(html).toContain('grid-rows-1');
+    expect(gridProps[0].rows[0].BoardMembership).toBe('Board');
+    expect(gridProps[0].rows[0].Name).toBe('Member');
+  });
+
+  test('includes NFP users even without board mapping membership', () => {
+    renderToStaticMarkup(
+      <ManagementBoard
+        mappings={[{ ManagementBoard: true, Membership: 'Board' }]}
+        users={[
+          {
+            id: 3,
+            Organisation: 'Org3',
+            Title: 'NFP User',
+            Email: 'nfp@example.org',
+            NFP: 'NFP role',
+            Membership: ['NonBoard'],
+            OtherMemberships: [],
+          },
+        ]}
+      />,
+    );
+
+    expect(gridProps[0].rows).toHaveLength(1);
+    expect(gridProps[0].rows[0].BoardMembership).toBe('NFP role');
+  });
+
+  test('renders other memberships cell chips excluding board membership', () => {
+    renderToStaticMarkup(
+      <ManagementBoard
+        mappings={[{ ManagementBoard: true, Membership: 'Board' }]}
+        users={[
+          {
+            id: 4,
+            Organisation: 'Org4',
+            Title: 'Board Member',
+            Email: 'board@example.org',
+            NFP: 'NFP role',
+            Membership: ['Board', 'Group A'],
+            OtherMemberships: ['Group B'],
+          },
+        ]}
+      />,
+    );
+
+    const otherMembershipsColumn = gridProps[0].columns.find((c) => c.field === 'OtherMemberships');
+    const cellHtml = renderToStaticMarkup(
+      otherMembershipsColumn.renderCell({
+        row: {
+          BoardMembership: 'Board',
+          Membership: ['Board', 'Group A'],
+          OtherMemberships: ['Group B'],
+          NFP: 'NFP role',
+        },
+      }),
+    );
+
+    expect(cellHtml).toContain('Group A');
+    expect(cellHtml).toContain('Group B');
+    expect(cellHtml).toContain('NFP role');
+    expect(cellHtml).not.toContain('>Board<');
+  });
+});