(fix) O3-3890 Help menu (and menu items) should use a standard Carbon…

… menu

src/tutorial/styles.scss

@@ -28,3 +28,10 @@
 
   }
 }
+
+.tutorialMenuItem {
+  color: black !important;
+  &:focus {
+    outline: none;
+  }
+}

src/tutorial/tutorial.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import '@testing-library/jest-dom';
+import { showModal } from "@openmrs/esm-framework";
+import Tutorial from "./tutorial";
+
+jest.mock('@openmrs/esm-framework', () => ({
+	showModal: jest.fn(),
+}))
+
+describe('Tutorial Component', () => {
+	it('renders the menu item with the correct label', () => {
+		render(<Tutorial />);
+
+		expect(screen.getByText(/Tutorials/i)).toBeInTheDocument();
+	})
+
+	it('calls showModal when the menu item is clicked', () => {
+		render(<Tutorial />);
+
+		const menuItem = screen.getByText(/Tutorials/i);
+		fireEvent.click(menuItem);
+
+		expect(showModal).toHaveBeenCalledWith('tutorial-modal', expect.any(Object))
+	})
+})

src/tutorial/tutorial.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { showModal } from '@openmrs/esm-framework';
+import { MenuItem } from '@carbon/react';
+import styles from './styles.scss';
 
 const Tutorial = () => {
   const { t } = useTranslation();
@@ -13,7 +15,11 @@ const Tutorial = () => {
 
   return (
     <>
-      <div onClick={handleOpenModal}>{t('tutorials', 'Tutorials')}</div>
+      <MenuItem 
+        onClick={handleOpenModal}
+        label={t('tutorials', 'Tutorials')}
+        className={styles.tutorialMenuItem}
+      />
     </>
   );
 };