(test) Add some missing test cases and improve typing in test files (openmrs#1239)

This PR improves test coverage and standardizes test descriptions across Core. Key changes include:

- Adding coverage for missing test cases in the Devtools, Help Menu, and Implementer Tools test suites among others.
- Standardizing test case descriptions across all modules.
- Improving TypeScript types in test files.
- Using `jest.mocked()` instead of direct type assertions for mocks as suggested in our [mocking patterns](https://o3-docs.openmrs.org/docs/frontend-modules/unit-and-integration-testing#mocking-patterns) guide.
- Adding proper type annotations for mock data and responses
- Cleaning up redundant type casts and improving mock implementations
- Maintaining consistent naming conventions for mock variables (mock* prefix)
- Adding missing type information to test utilities and helpers

Author: denniskigen

packages/apps/esm-devtools-app/src/devtools/devtools.component.test.tsx

@@ -1,9 +1,75 @@
 import React from 'react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { type AppProps } from 'single-spa';
+import { render, screen } from '@testing-library/react';
 import Root from './devtools.component';
-import { render } from '@testing-library/react';
 
-describe(`<Root />`, () => {
-  it(`renders without dying`, () => {
-    render(<Root />);
+jest.mock('./import-map.component', () => ({
+  __esModule: true,
+  default: () => <div role="dialog">Mock Import Map</div>,
+  importMapOverridden: false,
+}));
+
+const defaultProps: AppProps = {
+  name: '@openmrs/esm-devtools-app-page-0',
+  singleSpa: {},
+  mountParcel: jest.fn(),
+};
+
+describe('DevTools', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    delete window.spaEnv;
+    jest.resetModules();
+  });
+
+  describe('Root component', () => {
+    it('should not render DevTools in production without the devtools localStorage flag', () => {
+      window.spaEnv = 'production';
+
+      const { container } = render(<Root {...defaultProps} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should render DevTools in development environments', () => {
+      window.spaEnv = 'development';
+
+      render(<Root {...defaultProps} />);
+
+      expect(screen.getByRole('button', { name: '{···}' })).toBeInTheDocument();
+    });
+
+    it('should render DevTools when the devtools localStorage flag is set', () => {
+      localStorage.setItem('openmrs:devtools', 'true');
+
+      render(<Root {...defaultProps} />);
+
+      expect(screen.getByRole('button', { name: '{···}' })).toBeInTheDocument();
+    });
+  });
+
+  describe('DevTools component', () => {
+    const user = userEvent.setup();
+
+    beforeEach(() => {
+      window.spaEnv = 'development';
+    });
+
+    it('should toggle DevToolsPopup when clicking trigger button', async () => {
+      render(<Root {...defaultProps} />);
+
+      const triggerButton = screen.getByRole('button', { name: '{···}' });
+      // Initially, popup should not be present
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+      // Click to open
+      await user.click(triggerButton);
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+      // Click to close
+      await user.click(triggerButton);
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
   });
 });

packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx

@@ -1,18 +1,20 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
+import { type AppProps } from 'single-spa';
 import { importMapOverridden } from './import-map.component';
 import DevToolsPopup from './devtools-popup.component';
 import styles from './devtools.styles.css';
 
-export default function Root(props) {
+export default function Root(props: AppProps) {
   return window.spaEnv === 'development' || Boolean(localStorage.getItem('openmrs:devtools')) ? (
     <DevTools {...props} />
   ) : null;
 }
 
-function DevTools() {
+function DevTools(props: AppProps) {
   const [devToolsOpen, setDevToolsOpen] = useState(false);
   const [isOverridden, setIsOverridden] = useState(importMapOverridden);
+
   return (
     <>
       <div