@openmrs/esm-styleguide 8.0.1-pre.3723 → 8.0.1-pre.3727

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3723",
+  "version": "8.0.1-pre.3727",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "main": "dist/openmrs-esm-styleguide.js",
@@ -98,17 +98,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3723",
-    "@openmrs/esm-config": "8.0.1-pre.3723",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3723",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3723",
-    "@openmrs/esm-extensions": "8.0.1-pre.3723",
-    "@openmrs/esm-globals": "8.0.1-pre.3723",
-    "@openmrs/esm-navigation": "8.0.1-pre.3723",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3723",
-    "@openmrs/esm-state": "8.0.1-pre.3723",
-    "@openmrs/esm-translations": "8.0.1-pre.3723",
-    "@openmrs/esm-utils": "8.0.1-pre.3723",
+    "@openmrs/esm-api": "8.0.1-pre.3727",
+    "@openmrs/esm-config": "8.0.1-pre.3727",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3727",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3727",
+    "@openmrs/esm-extensions": "8.0.1-pre.3727",
+    "@openmrs/esm-globals": "8.0.1-pre.3727",
+    "@openmrs/esm-navigation": "8.0.1-pre.3727",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3727",
+    "@openmrs/esm-state": "8.0.1-pre.3727",
+    "@openmrs/esm-translations": "8.0.1-pre.3727",
+    "@openmrs/esm-utils": "8.0.1-pre.3727",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",

package/src/dashboard-extension/dashboard.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { DashboardExtension } from './index';
+
+describe('DashboardExtension', () => {
+  describe('Basic Rendering', () => {
+    it('renders with required props (path and title)', () => {
+      renderDashboardExtension('/base', 'dashboard', 'Dashboard', '/base');
+      expect(screen.getByText('Dashboard')).toBeInTheDocument();
+      const link = screen.getByRole('link');
+      expect(link).toBeInTheDocument();
+    });
+
+    it('renders ConfigurableLink with correct href', () => {
+      renderDashboardExtension('/base', 'dashboard', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('href', '/base/dashboard');
+    });
+  });
+
+  describe('Active State Logic', () => {
+    it('is active when current pathname matches dashboard path', () => {
+      renderDashboardExtension('/base/dashboard', 'dashboard', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveClass('active-left-nav-link');
+    });
+
+    it('is active when path segments match (partial match)', () => {
+      renderDashboardExtension('/base/dashboard/patients', 'patients', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveClass('active-left-nav-link');
+    });
+
+    it('is not active when path does not match', () => {
+      renderDashboardExtension('/base/other', 'dashboard', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).not.toHaveClass('active-left-nav-link');
+    });
+
+    it('handles empty path (returns false)', () => {
+      renderDashboardExtension('/base', '', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).not.toHaveClass('active-left-nav-link');
+    });
+
+    it('handles path with encoded characters in location', () => {
+      renderDashboardExtension('/base/dashboard%20%26%20test', 'dashboard & test', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveClass('active-left-nav-link');
+      expect(link).toHaveAttribute('href', '/base/dashboard%20%26%20test');
+    });
+  });
+});
+
+const renderDashboardExtension = (browserPath: string, path: string, title: string, basePath: string) => {
+  render(
+    <MemoryRouter initialEntries={[browserPath]}>
+      <DashboardExtension path={path} title={title} basePath={basePath} />
+    </MemoryRouter>,
+  );
+};

package/src/dashboard-extension/index.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter, useLocation } from 'react-router-dom';
-import { shallowEqual } from '@openmrs/esm-utils';
 import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework';
 import { type IconId } from '../icons';
 import styles from './dashboard.module.scss';
@@ -26,13 +25,14 @@ export const DashboardExtension = ({ path, title, basePath, icon }: DashboardExt
     if (p.startsWith('http')) {
       return p === window.location.href;
     }
-    const paths = p.split('/').map((s) => decodeURIComponent(s));
-
-    const localPath = (location.pathname ?? '')
+    const pathSegments = p.split('/').map((s) => decodeURIComponent(s));
+    const localSegments = (location.pathname ?? '')
       .split('/')
-      .slice(-1 * paths.length)
+      .slice(1)
       .map((s) => decodeURIComponent(s));
-    return shallowEqual(paths, localPath);
+
+    // Check if pathSegments appear as a contiguous slice anywhere in localSegments
+    return localSegments.some((_, i) => pathSegments.every((seg, j) => localSegments[i + j] === seg));
   }, [location.pathname, path]);
 
   return (