eionet2-dashboard 3.2.1 → 3.2.3

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

@@ -0,0 +1,220 @@
+jest.mock('react', () => {
+  const actual = jest.requireActual('react');
+  return {
+    ...actual,
+    React: actual,
+    useState: jest.fn(actual.useState),
+    useEffect: jest.fn((fn) => fn()),
+    useCallback: jest.fn((fn) => fn),
+  };
+});
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { MyCountry } from './MyCountry';
+import {
+  getMappingsList,
+  getInvitedUsers,
+  getOrganisationList,
+  getAvailableGroups,
+  getCountryCodeMappingsList,
+} from '../../data/sharepointProvider';
+import { useAppInsightsContext } from '@microsoft/applicationinsights-react-js';
+
+jest.mock('./my_country.scss', () => ({}));
+
+jest.mock('@mui/material', () => {
+  const ReactLocal = require('react');
+  const passthrough =
+    (Tag = 'div') =>
+    ({ children }) =>
+      ReactLocal.createElement(Tag, {}, children);
+
+  const ListItemButton = ({ children, onClick }) => {
+    onClick && onClick();
+    return <div>{children}</div>;
+  };
+
+  return {
+    Backdrop: passthrough(),
+    Box: passthrough(),
+    CircularProgress: passthrough('span'),
+    Typography: passthrough('span'),
+    ListItem: passthrough(),
+    ListItemText: ({ primary }) => <div>{primary}</div>,
+    ListItemButton,
+    ListItemIcon: passthrough(),
+  };
+});
+
+jest.mock('@mui/icons-material/Preview', () => () => <span>preview-icon</span>);
+jest.mock('@mui/icons-material/ManageAccounts', () => () => <span>manage-accounts-icon</span>);
+jest.mock('@mui/icons-material/Group', () => () => <span>group-icon</span>);
+jest.mock('@mui/icons-material/Groups', () => () => <span>groups-icon</span>);
+jest.mock('@mui/icons-material/GroupWork', () => () => <span>group-work-icon</span>);
+jest.mock('@mui/icons-material/Summarize', () => () => <span>summarize-icon</span>);
+
+jest.mock('../../data/sharepointProvider', () => ({
+  getMappingsList: jest.fn(),
+  getInvitedUsers: jest.fn(),
+  getOrganisationList: jest.fn(),
+  getAvailableGroups: jest.fn(),
+  getCountryCodeMappingsList: jest.fn(),
+}));
+
+jest.mock('@microsoft/applicationinsights-react-js', () => ({
+  useAppInsightsContext: jest.fn(),
+}));
+
+jest.mock('./AtAGlance', () => ({
+  AtAGlance: () => <div>at-a-glance</div>,
+}));
+jest.mock('./ManagementBoard', () => ({
+  ManagementBoard: () => <div>management-board</div>,
+}));
+jest.mock('./GroupsBoard', () => ({
+  GroupsBoard: () => <div>groups-board</div>,
+}));
+jest.mock('./CountryMembers', () => ({
+  CountryMembers: () => <div>country-members</div>,
+}));
+jest.mock('./DataReporters', () => ({
+  DataReporters: () => <div>data-reporters</div>,
+}));
+jest.mock('../CustomDrawer', () => ({
+  __esModule: true,
+  default: ({ drawerOptions }) => <div>{drawerOptions}</div>,
+}));
+
+function mockStateSequence(values) {
+  let index = 0;
+  React.useState.mockImplementation((initialValue) => {
+    if (index < values.length) {
+      const current = values[index];
+      index += 1;
+      return [current, jest.fn()];
+    }
+    return [initialValue, jest.fn()];
+  });
+}
+
+function buildStates(tabValue = 0) {
+  return [
+    tabValue,
+    [{ id: 1 }],
+    [{ OtherMembership: false }, { OtherMembership: true }],
+    false,
+    [{ id: 'org' }],
+    { CountryCode: 'RO', Name: 'Romania' },
+    ['Air', 'Climate'],
+  ];
+}
+
+describe('MyCountry', () => {
+  const trackEvent = jest.fn();
+  const closeDrawer = jest.fn();
+
+  const baseProps = {
+    userInfo: { isNFP: true },
+    selectedCountry: 'RO',
+    configuration: {},
+    drawerOpen: true,
+    closeDrawer,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    React.useEffect.mockImplementation((fn) => fn());
+    React.useCallback.mockImplementation((fn) => fn);
+    React.useState.mockImplementation((initialValue) => [initialValue, jest.fn()]);
+
+    useAppInsightsContext.mockReturnValue({ trackEvent });
+
+    getInvitedUsers.mockResolvedValue([{ id: 1 }]);
+    getOrganisationList.mockResolvedValue([{ id: 'org' }]);
+    getAvailableGroups.mockResolvedValue(['wg-test', 'Air group']);
+    getCountryCodeMappingsList.mockResolvedValue([{ CountryCode: 'RO' }]);
+    getMappingsList.mockResolvedValue([{ OtherMembership: false }, { OtherMembership: true }]);
+  });
+
+  test('renders drawer menu and at-a-glance tab', () => {
+    mockStateSequence(buildStates(0));
+
+    const html = renderToStaticMarkup(<MyCountry {...baseProps} />);
+
+    expect(html).toContain('At a glance');
+    expect(html).toContain('NFPs');
+    expect(html).toContain('Eionet groups');
+    expect(html).toContain('ETCs');
+    expect(html).toContain('Country desk officers');
+    expect(html).toContain('Reporting');
+    expect(html).toContain('at-a-glance');
+    expect(closeDrawer).toHaveBeenCalled();
+    expect(trackEvent).toHaveBeenCalled();
+  });
+
+  test('renders management board tab', () => {
+    mockStateSequence(buildStates(1));
+
+    const html = renderToStaticMarkup(<MyCountry {...baseProps} />);
+
+    expect(html).toContain('management-board');
+  });
+
+  test('renders groups board tabs', () => {
+    mockStateSequence(buildStates(2));
+    const htmlGroups = renderToStaticMarkup(<MyCountry {...baseProps} />);
+    expect(htmlGroups).toContain('groups-board');
+
+    mockStateSequence(buildStates(3));
+    const htmlEtc = renderToStaticMarkup(<MyCountry {...baseProps} />);
+    expect(htmlEtc).toContain('groups-board');
+  });
+
+  test('renders country members and data reporters tabs', () => {
+    mockStateSequence(buildStates(4));
+    const htmlMembers = renderToStaticMarkup(<MyCountry {...baseProps} />);
+    expect(htmlMembers).toContain('country-members');
+
+    mockStateSequence(buildStates(5));
+    const htmlReporters = renderToStaticMarkup(<MyCountry {...baseProps} />);
+    expect(htmlReporters).toContain('data-reporters');
+  });
+
+  test('hides country-specific tabs when selectedCountry is missing', () => {
+    mockStateSequence(buildStates(0));
+
+    const html = renderToStaticMarkup(<MyCountry {...baseProps} selectedCountry={''} />);
+
+    expect(html).not.toContain('Country desk officers');
+    expect(html).not.toContain('Reporting');
+  });
+
+  test('loads data from providers', async () => {
+    mockStateSequence(buildStates(0));
+
+    renderToStaticMarkup(<MyCountry {...baseProps} />);
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(getInvitedUsers).toHaveBeenCalledWith('RO');
+    expect(getOrganisationList).toHaveBeenCalledWith('RO');
+    expect(getAvailableGroups).toHaveBeenCalled();
+    expect(getCountryCodeMappingsList).toHaveBeenCalled();
+    expect(getMappingsList).toHaveBeenCalled();
+  });
+
+  test('handles invited users loading errors', async () => {
+    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+    getInvitedUsers.mockRejectedValue(new Error('failed users'));
+    mockStateSequence(buildStates(0));
+
+    renderToStaticMarkup(<MyCountry {...baseProps} />);
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(logSpy).toHaveBeenCalledWith('failed users');
+    logSpy.mockRestore();
+  });
+});

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { ProgressGauge } from './ProgressGauge';
+
+describe('ProgressGauge', () => {
+  test('renders label and ratio values', () => {
+    const html = renderToStaticMarkup(
+      <ProgressGauge
+        totalCount={20}
+        responseCount={8}
+        label="Consultations"
+        infoText="Info text"
+      />,
+    );
+
+    expect(html).toContain('Consultations');
+    expect(html).toContain('/20');
+    expect(html).toContain('8');
+  });
+
+  test('renders details link text when url exists', () => {
+    const html = renderToStaticMarkup(
+      <ProgressGauge
+        totalCount={2}
+        responseCount={1}
+        label="Events"
+        infoText="Info"
+        url="https://example.org"
+      />,
+    );
+
+    expect(html).toContain('Events');
+  });
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { ScientificCommittee } from './ScientificCommittee';
+
+describe('ScientificCommittee', () => {
+  test('renders under construction message', () => {
+    const html = renderToStaticMarkup(<ScientificCommittee />);
+
+    expect(html).toContain('Page under construction');
+  });
+});

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { UserCard } from './UserCard';
+
+describe('UserCard', () => {
+  test('renders user name, email and organisation', () => {
+    const html = renderToStaticMarkup(
+      <UserCard
+        showAvatar={true}
+        userInfo={{
+          UserName: 'John Doe',
+          PhotoSrc: 'photo',
+          Email: 'john@example.org',
+          Organisation: 'EEA',
+        }}
+      />,
+    );
+
+    expect(html).toContain('John Doe');
+    expect(html).toContain('john@example.org');
+    expect(html).toContain('EEA');
+    expect(html).toContain('img');
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { YearlyProgress } from './YearlyProgress';
+
+describe('YearlyProgress', () => {
+  test('renders participation header and three gauge labels', () => {
+    const html = renderToStaticMarkup(
+      <YearlyProgress
+        yearData={{
+          consultationsCount: 10,
+          responseConsultationsCount: 5,
+          consultationsUrl: 'https://example.org/c',
+          surveysCount: 8,
+          responseSurveysCount: 4,
+          surveysUrl: 'https://example.org/s',
+          meetingsCount: 6,
+          attendedMeetingsCount: 3,
+          meetingsUrl: 'https://example.org/m',
+        }}
+        configuration={{
+          YearlyConsultationsCountInfo: 'c',
+          YearlySurveysCountInfo: 's',
+          YearlyEventsCountInfo: 'e',
+        }}
+      />,
+    );
+
+    expect(html).toContain('Participation:');
+    expect(html).toContain('Consultations');
+    expect(html).toContain('Enquiries');
+    expect(html).toContain('Events');
+  });
+});

package/tabs/src/components/self_service/UserEdit.test.jsx

@@ -0,0 +1,213 @@
+jest.mock('react', () => {
+  const actual = jest.requireActual('react');
+  return {
+    ...actual,
+    React: actual,
+    useEffect: jest.fn((fn) => fn()),
+  };
+});
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { UserEdit } from './UserEdit';
+import { saveData } from '../../data/selfServiceProvider';
+import { getGenderList } from '../../data/selfServiceSharepointProvider';
+import { validateMandatoryField, validateName, validatePhone } from '../../data/validator';
+
+const formSubmitHandlers = [];
+const textFieldProps = [];
+const autocompleteProps = [];
+
+jest.mock('@mui/material', () => {
+  const ReactLocal = require('react');
+  const passthrough =
+    (Tag = 'div') =>
+    ({ children }) =>
+      ReactLocal.createElement(Tag, {}, children);
+
+  const Box = ({ children, component, onSubmit }) => {
+    if (component === 'form' && onSubmit) {
+      formSubmitHandlers.push(onSubmit);
+    }
+    return <div>{children}</div>;
+  };
+
+  const TextField = (props) => {
+    textFieldProps.push(props);
+    return <div>{props.label || props.id || ''}</div>;
+  };
+
+  const Autocomplete = (props) => {
+    autocompleteProps.push(props);
+    return <div>{props.renderInput ? props.renderInput({ id: 'gender' }) : null}</div>;
+  };
+
+  return {
+    Box,
+    TextField,
+    Autocomplete,
+    Button: passthrough('button'),
+    FormLabel: passthrough('label'),
+    CircularProgress: passthrough('span'),
+    Chip: ({ label }) => <div>{label}</div>,
+    Paper: passthrough(),
+    InputLabel: passthrough('label'),
+    Link: ({ children, href }) => <a href={href}>{children}</a>,
+    Typography: passthrough('span'),
+    Divider: passthrough('hr'),
+    Tooltip: ({ children }) => <div>{children}</div>,
+  };
+});
+
+jest.mock('@mui/icons-material/Check', () => () => <span>check-icon</span>);
+jest.mock('@mui/icons-material/Save', () => () => <span>save-icon</span>);
+jest.mock('@mui/icons-material/Contacts', () => () => <span>contacts-icon</span>);
+
+jest.mock('./UserEdit.scss', () => ({}));
+jest.mock('../../data/selfServiceProvider', () => ({
+  saveData: jest.fn(),
+}));
+jest.mock('../../data/selfServiceSharepointProvider', () => ({
+  getGenderList: jest.fn(),
+}));
+jest.mock('../../data/validator', () => ({
+  validateMandatoryField: jest.fn(),
+  validateName: jest.fn(),
+  validatePhone: jest.fn(),
+}));
+
+describe('UserEdit', () => {
+  const baseUser = {
+    Gender: 'Mr',
+    FirstName: 'John',
+    LastName: 'Doe',
+    JobTitle: 'Expert',
+    Phone: '+40123',
+    Department: 'Air',
+    Country: 'Romania',
+    Email: 'john.doe@example.org',
+    Organisation: 'EEA',
+    SelfSeviceHelpdeskPersonalDetailsText: 'Personal help text',
+    SelfSeviceHelpdeskPreferencesText: 'Preferences help text',
+    PCP: [],
+    Memberships: [],
+    OtherMemberships: [],
+    NFP: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    formSubmitHandlers.length = 0;
+    textFieldProps.length = 0;
+    autocompleteProps.length = 0;
+
+    getGenderList.mockResolvedValue(['Mr', 'Mrs']);
+    validateMandatoryField.mockReturnValue('');
+    validateName.mockReturnValue('');
+    validatePhone.mockReturnValue('');
+    saveData.mockResolvedValue({ Success: true });
+  });
+
+  test('renders form content and optional blocks', () => {
+    const html = renderToStaticMarkup(
+      <UserEdit
+        user={{
+          ...baseUser,
+          PCP: ['Air group'],
+          Memberships: ['Air group', 'Climate group'],
+          OtherMemberships: ['External network'],
+          NFP: 'Romania NFP',
+        }}
+        configuration={{ DashboardLeadIconTooltip: 'Lead contact' }}
+      />,
+    );
+
+    expect(html).toContain('Manage personal details');
+    expect(html).toContain('Memberships');
+    expect(html).toContain('Other memberships');
+    expect(html).toContain('Romania NFP');
+    expect(html).toContain('helpdesk@eea.europa.eu');
+    expect(html).toContain('Manage preferences');
+    expect(getGenderList).toHaveBeenCalled();
+  });
+
+  test('runs submit success flow', async () => {
+    const user = { ...baseUser };
+    renderToStaticMarkup(<UserEdit user={user} configuration={{}} />);
+
+    const submit = formSubmitHandlers[0];
+    expect(submit).toBeDefined();
+
+    const preventDefault = jest.fn();
+    await submit({ preventDefault });
+
+    expect(preventDefault).toHaveBeenCalled();
+    expect(saveData).toHaveBeenCalledWith(user);
+    expect(validateMandatoryField).toHaveBeenCalledWith(user.Gender);
+    expect(validateName).toHaveBeenCalledWith(user.FirstName);
+    expect(validatePhone).toHaveBeenCalledWith(user.Phone);
+  });
+
+  test('runs submit error flow when save fails', async () => {
+    saveData.mockResolvedValue({ Success: false, Message: 'Save failed', Error: 'Backend error' });
+
+    renderToStaticMarkup(<UserEdit user={{ ...baseUser }} configuration={{}} />);
+
+    await formSubmitHandlers[0]({ preventDefault: jest.fn() });
+
+    expect(saveData).toHaveBeenCalled();
+  });
+
+  test('stops submit when form has validation errors', async () => {
+    validateMandatoryField.mockReturnValue('Required');
+
+    renderToStaticMarkup(<UserEdit user={{ ...baseUser }} configuration={{}} />);
+
+    await formSubmitHandlers[0]({ preventDefault: jest.fn() });
+
+    expect(saveData).not.toHaveBeenCalled();
+  });
+
+  test('triggers field handlers for validation and mutations', () => {
+    const user = { ...baseUser };
+    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+
+    renderToStaticMarkup(<UserEdit user={user} configuration={{}} />);
+
+    const firstName = textFieldProps.find((p) => p.id === 'firstName');
+    const lastName = textFieldProps.find((p) => p.id === 'lastName' && p.label === 'Last name');
+    const jobTitle = textFieldProps.find((p) => p.id === 'jobTitle');
+    const phone = textFieldProps.find((p) => p.id === 'phone');
+    const department = textFieldProps.find((p) => p.id === 'department');
+    const salutation = textFieldProps.find((p) => p.label === 'Salutation');
+
+    firstName.onChange({ target: { id: 'firstName', value: 'Alice' } });
+    lastName.onChange({ target: { id: 'lastName', value: 'Smith' } });
+    phone.onChange({ target: { id: 'phone', value: '+49123' } });
+    jobTitle.onChange({ target: { id: 'jobTitle', value: 'Manager' } });
+    department.onChange({ target: { id: 'department', value: 'Climate' } });
+
+    salutation.onBlur({ target: { id: 'gender' } });
+
+    const autocomplete = autocompleteProps[0];
+    autocomplete.onChange({}, 'Mrs');
+
+    expect(user.FirstName).toBe('Alice');
+    expect(user.LastName).toBe('Smith');
+    expect(user.Phone).toBe('+49123');
+    expect(user.JobTitle).toBe('Manager');
+    expect(user.Department).toBe('Climate');
+    expect(user.Gender).toBe('Mrs');
+
+    expect(validateName).toHaveBeenCalled();
+    expect(validatePhone).toHaveBeenCalled();
+    expect(logSpy).toHaveBeenCalledWith('Undefined field for validation');
+
+    logSpy.mockRestore();
+  });
+
+  test('renders empty container when user is missing', () => {
+    const html = renderToStaticMarkup(<UserEdit user={null} configuration={{}} />);
+    expect(html).toBe('<div class=""></div>');
+  });
+});