eionet2-dashboard 3.2.1 → 3.2.3

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

@@ -0,0 +1,463 @@
+jest.mock('react', () => {
+  const actual = jest.requireActual('react');
+  return {
+    ...actual,
+    React: actual,
+    useState: jest.fn(actual.useState),
+    useEffect: jest.fn(),
+    useCallback: jest.fn((fn) => fn),
+  };
+});
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import Tab from './Tab';
+import { useMediaQuery } from 'react-responsive';
+import { useConfiguration } from '../data/hooks/useConfiguration';
+import { getMe } from '../data/provider';
+import { getCountries, getCurrentParticipant, getParticipants } from '../data/sharepointProvider';
+
+jest.mock('./Tab.scss', () => ({}));
+
+jest.mock('@mui/material/styles', () => ({
+  ThemeProvider: ({ children }) => <>{children}</>,
+  createTheme: () => ({
+    breakpoints: {
+      up: () => '@media (min-width: 600px)',
+    },
+  }),
+}));
+
+const mockMenuItem = jest.fn(({ children }) => <button>{children}</button>);
+const mockIconButton = jest.fn(({ children }) => <button>{children}</button>);
+const mockAutocomplete = jest.fn(({ renderInput, renderOption, options, onChange }) => {
+  if (onChange && options?.[0]) {
+    onChange(null, options[0]);
+  }
+  return (
+    <div>
+      {renderInput ? renderInput({}) : null}
+      {options && options[0] && renderOption ? renderOption({}, options[0]) : null}
+    </div>
+  );
+});
+
+jest.mock('@mui/material', () => {
+  const ReactLocal = require('react');
+  const passthrough =
+    (Tag = 'div') =>
+    ({ children }) =>
+      ReactLocal.createElement(Tag, {}, children);
+
+  const Menu = ({ open, children }) => (open ? <div>{children}</div> : null);
+  const Dialog = ({ open, children }) => (open ? <div>{children}</div> : null);
+
+  return {
+    Backdrop: passthrough(),
+    CircularProgress: passthrough('span'),
+    AppBar: passthrough('header'),
+    Toolbar: passthrough(),
+    Menu,
+    MenuItem: (props) => mockMenuItem(props),
+    Typography: passthrough('span'),
+    Autocomplete: (props) => mockAutocomplete(props),
+    Box: passthrough(),
+    TextField: passthrough('input'),
+    Paper: passthrough(),
+    Dialog,
+    DialogTitle: passthrough(),
+    IconButton: (props) => mockIconButton(props),
+  };
+});
+
+jest.mock('@mui/icons-material/Close', () => () => <span>close-icon</span>);
+jest.mock('@mui/icons-material/Menu', () => () => <span>menu-icon</span>);
+jest.mock('@mui/icons-material/ChevronLeft', () => () => <span>chevron-left-icon</span>);
+jest.mock('@mui/icons-material/Summarize', () => () => <span>summarize-icon</span>);
+
+jest.mock('react-responsive', () => ({
+  useMediaQuery: jest.fn(),
+}));
+
+jest.mock('../data/provider', () => ({
+  getMe: jest.fn(),
+}));
+
+jest.mock('../data/hooks/useConfiguration', () => ({
+  useConfiguration: jest.fn(),
+}));
+
+jest.mock('../data/sharepointProvider', () => ({
+  getCountries: jest.fn(),
+  getCurrentParticipant: jest.fn(),
+  getParticipants: jest.fn(),
+}));
+
+jest.mock('@microsoft/applicationinsights-react-js', () => ({
+  AppInsightsContext: {
+    Provider: ({ children }) => children,
+  },
+}));
+
+jest.mock('../data/appInsights', () => ({
+  reactPlugin: {},
+}));
+
+jest.mock('./BottomMenu', () => ({
+  BottomMenu: () => <div>bottom-menu</div>,
+}));
+
+const mockActivity = jest.fn(() => <div>activity-component</div>);
+jest.mock('./activity/Activity', () => ({
+  Activity: (props) => mockActivity(props),
+}));
+
+jest.mock('./my_country/MyCountry', () => ({
+  MyCountry: () => <div>my-country-component</div>,
+}));
+
+jest.mock('./self_service/UserEdit', () => ({
+  UserEdit: () => <div>user-edit-component</div>,
+}));
+
+const mockApprovalDialog = jest.fn(({ open }) => (
+  <div>{open ? 'approval-open' : 'approval-closed'}</div>
+));
+jest.mock('./event_registration/ApprovalDialog', () => ({
+  ApprovalDialog: (props) => mockApprovalDialog(props),
+}));
+
+const mockEventRatingDialog = jest.fn(({ open }) => (
+  <div>{open ? 'rating-open' : 'rating-closed'}</div>
+));
+jest.mock('./event_rating/EventRatingDialog', () => ({
+  EventRatingDialog: (props) => mockEventRatingDialog(props),
+}));
+
+jest.mock('./HtmlBox', () => ({
+  HtmlBox: ({ html }) => <div>{html || ''}</div>,
+}));
+
+const mockUserMenu = jest.fn(() => <div>user-menu-component</div>);
+jest.mock('./UserMenu', () => ({
+  UserMenu: (props) => mockUserMenu(props),
+}));
+
+function mockStateSequence(values) {
+  let index = 0;
+  React.useState.mockImplementation((initialValue) => {
+    if (index < values.length) {
+      const next = values[index];
+      index += 1;
+      return [next, jest.fn()];
+    }
+    return [initialValue, jest.fn()];
+  });
+}
+
+describe('Tab', () => {
+  const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+  const waitForMockCall = async (mockFn, retries = 25) => {
+    for (let i = 0; i < retries; i += 1) {
+      if (mockFn.mock.calls.length > 0) {
+        return;
+      }
+      await flush();
+    }
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    process.env.REACT_APP_VERSION = '1.0.0';
+    React.useCallback.mockImplementation((fn) => fn);
+    React.useEffect.mockImplementation(() => {});
+    React.useState.mockImplementation((initialValue) => [initialValue, jest.fn()]);
+  });
+
+  test('renders activity mode with open dialogs and version message', () => {
+    useMediaQuery.mockReturnValue(false);
+    useConfiguration.mockReturnValue({ AppVersionMessage: 'Please reload' });
+
+    mockStateSequence([
+      {
+        isAdmin: false,
+        isNFP: true,
+        isGuest: false,
+        country: 'RO',
+        isLoaded: true,
+        isEionetUser: true,
+      },
+      { isLoaded: true },
+      { event2Approve: [{ id: 1 }], events2Rate: [{ id: 2 }], allEvents: [] },
+      true,
+      'RO',
+      ['RO', 'DE'],
+      true,
+      false,
+      { id: 1 },
+      { Title: 'Event', HasVoted: false, AllowVote: true },
+      true,
+      true,
+      true,
+      false,
+      1,
+      null,
+    ]);
+
+    const html = renderToStaticMarkup(<Tab />);
+
+    expect(html).toContain('activity-component');
+    expect(html).toContain('approval-open');
+    expect(html).toContain('rating-open');
+    expect(html).toContain('Please reload');
+    expect(html).toContain('user-menu-component');
+    expect(html).toContain('bottom-menu');
+  });
+
+  test('renders my-country view when menu is set to 2', () => {
+    useMediaQuery.mockReturnValue(false);
+    useConfiguration.mockReturnValue({});
+
+    mockStateSequence([
+      {
+        isAdmin: false,
+        isNFP: false,
+        isGuest: false,
+        country: 'RO',
+        isLoaded: true,
+        isEionetUser: true,
+      },
+      { isLoaded: true },
+      { event2Approve: [], events2Rate: [], allEvents: [] },
+      true,
+      'RO',
+      ['RO'],
+      false,
+      false,
+      {},
+      {},
+      false,
+      false,
+      false,
+      true,
+      2,
+      null,
+    ]);
+
+    const html = renderToStaticMarkup(<Tab />);
+    expect(html).toContain('my-country-component');
+  });
+
+  test('renders self service view when menu is set to 4', () => {
+    useMediaQuery.mockReturnValue(false);
+    useConfiguration.mockReturnValue({});
+
+    mockStateSequence([
+      {
+        isAdmin: false,
+        isNFP: false,
+        isGuest: false,
+        country: 'RO',
+        isLoaded: true,
+        isEionetUser: true,
+      },
+      { isLoaded: true, FirstName: 'User' },
+      { event2Approve: [], events2Rate: [], allEvents: [] },
+      true,
+      'RO',
+      ['RO'],
+      false,
+      false,
+      {},
+      {},
+      false,
+      false,
+      false,
+      true,
+      4,
+      null,
+    ]);
+
+    const html = renderToStaticMarkup(<Tab />);
+    expect(html).toContain('user-edit-component');
+  });
+
+  test('renders mobile header controls', () => {
+    useMediaQuery.mockReturnValue(true);
+    useConfiguration.mockReturnValue({});
+
+    mockStateSequence([
+      {
+        isAdmin: false,
+        isNFP: false,
+        isGuest: false,
+        country: 'UK',
+        isLoaded: true,
+        isEionetUser: true,
+      },
+      { isLoaded: true },
+      { event2Approve: [], events2Rate: [], allEvents: [] },
+      true,
+      'UK',
+      ['UK'],
+      false,
+      false,
+      {},
+      {},
+      false,
+      false,
+      false,
+      false,
+      1,
+      null,
+    ]);
+
+    const html = renderToStaticMarkup(<Tab />);
+    expect(html).toContain('menu-icon');
+    expect(html).toContain('summarize-icon');
+    expect(html).toContain('flagcdn.com/h20/gb.png');
+  });
+
+  test('runs initialization effect and can change country for admin users', async () => {
+    useMediaQuery.mockReturnValue(false);
+    useConfiguration.mockReturnValue({ DashboardVersion: '2.0.0' });
+    getMe.mockResolvedValue({
+      isAdmin: true,
+      isNFP: false,
+      isGuest: false,
+      country: 'EL',
+      isEionetUser: true,
+      mail: 'user@example.org',
+      displayName: 'User',
+      givenName: 'Given',
+      surname: 'Name',
+    });
+    getCountries.mockResolvedValue(['EL', 'RO']);
+
+    React.useEffect.mockImplementation((fn) => {
+      fn();
+    });
+
+    mockStateSequence([
+      { isLoaded: false },
+      {},
+      { event2Approve: [], events2Rate: [], allEvents: [] },
+      true,
+      'EL',
+      ['EL', 'RO'],
+      true,
+      false,
+      {},
+      {},
+      false,
+      false,
+      false,
+      true,
+      1,
+      null,
+    ]);
+
+    const html = renderToStaticMarkup(<Tab />);
+    await waitForMockCall(getMe);
+    await waitForMockCall(getCountries);
+
+    expect(getMe).toHaveBeenCalled();
+    expect(getCountries).toHaveBeenCalled();
+    expect(html).toContain('flagcdn.com/h20/gr.png');
+    expect(html).toContain('flagcdn.com/w20/gr.png');
+  });
+
+  test('wires menu and dialog handlers through child props', async () => {
+    useMediaQuery.mockReturnValue(false);
+    useConfiguration.mockReturnValue({});
+    getCurrentParticipant.mockResolvedValue({ id: 'participant' });
+    getParticipants.mockResolvedValue([{ id: 'p1' }]);
+
+    const selectedEvent = { id: 10, Title: 'Event X', HasVoted: false, AllowVote: true };
+    mockStateSequence([
+      {
+        isAdmin: false,
+        isNFP: true,
+        isGuest: false,
+        country: 'RO',
+        isLoaded: true,
+        isEionetUser: true,
+        mail: 'user@example.org',
+      },
+      { isLoaded: true },
+      {
+        event2Approve: [],
+        events2Rate: [],
+        allEvents: [{ id: 1, IsUpcoming: false, AllowVote: true }],
+      },
+      true,
+      'RO',
+      ['RO'],
+      false,
+      false,
+      {},
+      selectedEvent,
+      true,
+      true,
+      true,
+      false,
+      1,
+      null,
+    ]);
+
+    renderToStaticMarkup(<Tab />);
+
+    await mockUserMenu.mock.calls[0][0].openRating({ id: 10, Title: 'Event X' });
+    await mockUserMenu.mock.calls[0][0].openApproval({ id: 10, Title: 'Event X' });
+    mockApprovalDialog.mock.calls[0][0].handleClose();
+    mockEventRatingDialog.mock.calls[0][0].handleClose(true);
+    mockUserMenu.mock.calls[0][0].openSelfService();
+    mockMenuItem.mock.calls[0][0].onClick();
+    mockMenuItem.mock.calls[1][0].onClick();
+
+    expect(getCurrentParticipant).toHaveBeenCalledTimes(2);
+    expect(getParticipants).toHaveBeenCalledWith(10, 'RO');
+    expect(selectedEvent.HasVoted).toBe(true);
+    expect(selectedEvent.AllowVote).toBe(false);
+  });
+
+  test('handles mobile menu and drawer callbacks', () => {
+    useMediaQuery.mockReturnValue(true);
+    useConfiguration.mockReturnValue({});
+
+    mockStateSequence([
+      {
+        isAdmin: false,
+        isNFP: false,
+        isGuest: false,
+        country: 'IO',
+        isLoaded: true,
+        isEionetUser: true,
+      },
+      { isLoaded: true },
+      { event2Approve: [], events2Rate: [], allEvents: [] },
+      true,
+      'IO',
+      ['IO'],
+      false,
+      false,
+      {},
+      {},
+      false,
+      false,
+      false,
+      true,
+      1,
+      { id: 'anchor' },
+    ]);
+
+    const html = renderToStaticMarkup(<Tab />);
+
+    mockIconButton.mock.calls[0][0].onClick();
+    mockIconButton.mock.calls[1][0].onClick({ currentTarget: { id: 'new-anchor' } });
+    mockMenuItem.mock.calls[0][0].onClick();
+    mockMenuItem.mock.calls[1][0].onClick();
+
+    expect(html).not.toContain('flagcdn.com/h20/.png');
+  });
+});

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import TabConfig from './TabConfig';
+import * as microsoftTeams from '@microsoft/teams-js';
+
+jest.mock('@microsoft/teams-js', () => ({
+  initialize: jest.fn(),
+  settings: {
+    registerOnSaveHandler: jest.fn(),
+    setSettings: jest.fn(),
+    setValidityState: jest.fn(),
+  },
+}));
+
+describe('TabConfig', () => {
+  test('renders configuration content and initializes teams settings', () => {
+    const originalWindow = global.window;
+    global.window = { location: { hostname: 'localhost', port: '3000' } };
+    const html = renderToStaticMarkup(<TabConfig />);
+
+    expect(html).toContain('Tab Configuration');
+    expect(microsoftTeams.initialize).toHaveBeenCalled();
+    expect(microsoftTeams.settings.registerOnSaveHandler).toHaveBeenCalled();
+    expect(microsoftTeams.settings.setValidityState).toHaveBeenCalledWith(true);
+    global.window = originalWindow;
+  });
+});

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import TabPanel from './TabPanel';
+
+describe('TabPanel', () => {
+  test('renders content when selected tab index matches value', () => {
+    const html = renderToStaticMarkup(
+      <TabPanel value={1} index={1}>
+        Visible content
+      </TabPanel>,
+    );
+
+    expect(html).toContain('role="tabpanel"');
+    expect(html).toContain('id="simple-tabpanel-1"');
+    expect(html).toContain('aria-labelledby="simple-tab-1"');
+    expect(html).not.toContain('hidden=""');
+    expect(html).toContain('Visible content');
+  });
+
+  test('hides and does not render content when index does not match value', () => {
+    const html = renderToStaticMarkup(
+      <TabPanel value={0} index={1}>
+        Hidden content
+      </TabPanel>,
+    );
+
+    expect(html).toContain('role="tabpanel"');
+    expect(html).toContain('hidden=""');
+    expect(html).not.toContain('Hidden content');
+  });
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import TermsOfUse from './TermsOfUse';
+
+describe('TermsOfUse', () => {
+  test('renders terms of use title', () => {
+    const html = renderToStaticMarkup(<TermsOfUse />);
+
+    expect(html).toContain('<h1>Terms of Use</h1>');
+  });
+});

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { UnderConstruction } from './UnderConstruction';
+
+describe('UnderConstruction', () => {
+  test('renders the under construction message and icon container', () => {
+    const html = renderToStaticMarkup(<UnderConstruction />);
+
+    expect(html).toContain('Page under construction');
+    expect(html).toContain('svg');
+    expect(html).toContain('data-testid="ConstructionIcon"');
+  });
+});

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { useMediaQuery } from 'react-responsive';
+
+jest.mock('react', () => {
+  const actual = jest.requireActual('react');
+  return {
+    ...actual,
+    React: actual,
+  };
+});
+
+jest.mock('react-responsive', () => ({
+  useMediaQuery: jest.fn(),
+}));
+
+import { UserMenu } from './UserMenu';
+
+describe('UserMenu', () => {
+  const baseProps = {
+    userInfo: {
+      displayName: 'John Doe',
+      isNFP: true,
+    },
+    openSelfService: jest.fn(),
+    events2Rate: [{ id: 1, Title: 'Event A' }],
+    events2Approve: [{ id: 2, Title: 'Event B' }],
+    openRating: jest.fn(),
+    openApproval: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders display name on desktop', () => {
+    useMediaQuery.mockReturnValue(false);
+
+    const html = renderToStaticMarkup(<UserMenu {...baseProps} />);
+
+    expect(html).toContain('John Doe');
+    expect(html).toContain('user-menu-button');
+  });
+
+  test('hides display name on mobile', () => {
+    useMediaQuery.mockReturnValue(true);
+
+    const html = renderToStaticMarkup(<UserMenu {...baseProps} />);
+
+    expect(html).not.toContain('John Doe');
+    expect(html).toContain('user-menu-button');
+  });
+});