@openmrs/esm-react-utils 9.0.3-pre.4235 → 9.0.3-pre.4241

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 53 files with swc (94.16ms)
+[0] Successfully compiled: 53 files with swc (97.74ms)
 [0] swc --strip-leading-paths src -d dist exited with code 0
 [1] tsc --project tsconfig.build.json exited with code 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "9.0.3-pre.4235",
+  "version": "9.0.3-pre.4241",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "type": "module",
@@ -79,17 +79,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "9.0.3-pre.4235",
-    "@openmrs/esm-config": "9.0.3-pre.4235",
-    "@openmrs/esm-context": "9.0.3-pre.4235",
-    "@openmrs/esm-emr-api": "9.0.3-pre.4235",
-    "@openmrs/esm-error-handling": "9.0.3-pre.4235",
-    "@openmrs/esm-extensions": "9.0.3-pre.4235",
-    "@openmrs/esm-feature-flags": "9.0.3-pre.4235",
-    "@openmrs/esm-globals": "9.0.3-pre.4235",
-    "@openmrs/esm-navigation": "9.0.3-pre.4235",
-    "@openmrs/esm-state": "9.0.3-pre.4235",
-    "@openmrs/esm-utils": "9.0.3-pre.4235",
+    "@openmrs/esm-api": "9.0.3-pre.4241",
+    "@openmrs/esm-config": "9.0.3-pre.4241",
+    "@openmrs/esm-context": "9.0.3-pre.4241",
+    "@openmrs/esm-emr-api": "9.0.3-pre.4241",
+    "@openmrs/esm-error-handling": "9.0.3-pre.4241",
+    "@openmrs/esm-extensions": "9.0.3-pre.4241",
+    "@openmrs/esm-feature-flags": "9.0.3-pre.4241",
+    "@openmrs/esm-globals": "9.0.3-pre.4241",
+    "@openmrs/esm-navigation": "9.0.3-pre.4241",
+    "@openmrs/esm-state": "9.0.3-pre.4241",
+    "@openmrs/esm-utils": "9.0.3-pre.4241",
     "@swc/cli": "0.8.0",
     "@swc/core": "1.15.18",
     "@vitest/coverage-v8": "^4.0.18",

package/src/useLayoutType.test.tsx

@@ -0,0 +1,107 @@
+import { describe, expect, it, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useLayoutType, isDesktop, type LayoutType } from './useLayoutType';
+
+// Breakpoint class → layout mapping used across tests
+
+const LAYOUT_CASES: Array<[string, LayoutType]> = [
+  ['omrs-breakpoint-lt-tablet', 'phone'],
+  ['omrs-breakpoint-gt-tablet', 'small-desktop'],
+  ['omrs-breakpoint-gt-small-desktop', 'large-desktop'],
+];
+
+const ALL_BREAKPOINT_CLASSES = LAYOUT_CASES.map(([className]) => className);
+
+// Helper to apply a breakpoint class to the body
+
+function setBreakpoint(className?: string) {
+  document.body.classList.remove(...ALL_BREAKPOINT_CLASSES);
+  if (className) {
+    document.body.classList.add(className);
+  }
+}
+
+function renderWithBreakpoint(className?: string) {
+  setBreakpoint(className);
+  return renderHook(() => useLayoutType());
+}
+
+describe('useLayoutType', () => {
+  afterEach(() => {
+    document.body.classList.remove(...ALL_BREAKPOINT_CLASSES);
+  });
+
+  it('returns "tablet" by default when no breakpoint class is present', () => {
+    const { result } = renderWithBreakpoint();
+    expect(result.current).toBe('tablet');
+  });
+
+  it.each(LAYOUT_CASES)('maps class "%s" to layout "%s"', (className, expectedLayout) => {
+    const { result } = renderWithBreakpoint(className);
+    expect(result.current).toBe(expectedLayout);
+  });
+
+  it('updates layout when breakpoint class changes on resize', () => {
+    const { result } = renderHook(() => useLayoutType());
+    expect(result.current).toBe('tablet');
+
+    act(() => {
+      setBreakpoint('omrs-breakpoint-lt-tablet');
+      window.dispatchEvent(new Event('resize'));
+    });
+    expect(result.current).toBe('phone');
+
+    act(() => {
+      setBreakpoint('omrs-breakpoint-gt-small-desktop');
+      window.dispatchEvent(new Event('resize'));
+    });
+    expect(result.current).toBe('large-desktop');
+  });
+
+  it('falls back to "tablet" when all breakpoint classes are removed', () => {
+    const { result } = renderHook(() => useLayoutType());
+
+    act(() => {
+      setBreakpoint('omrs-breakpoint-gt-tablet');
+      window.dispatchEvent(new Event('resize'));
+    });
+    expect(result.current).toBe('small-desktop');
+
+    act(() => {
+      setBreakpoint(); // clears all classes
+      window.dispatchEvent(new Event('resize'));
+    });
+    expect(result.current).toBe('tablet');
+  });
+
+  it('ignores unrelated window events', () => {
+    const { result } = renderHook(() => useLayoutType());
+
+    act(() => {
+      setBreakpoint('omrs-breakpoint-lt-tablet');
+      window.dispatchEvent(new Event('scroll'));
+      window.dispatchEvent(new Event('click'));
+    });
+
+    // DOM changed but no resize fired — hook should not have re-read the class
+    expect(result.current).toBe('tablet');
+  });
+});
+
+describe('isDesktop', () => {
+  it.each<[LayoutType, boolean]>([
+    ['phone', false],
+    ['tablet', false],
+    ['small-desktop', true],
+    ['large-desktop', true],
+  ])('returns %s for layout "%s"', (layout, expected) => {
+    expect(isDesktop(layout)).toBe(expected);
+  });
+
+  it('identifies non-desktop layouts correctly', () => {
+    const nonDesktopLayouts = LAYOUT_CASES.map(([, layout]) => layout).filter(
+      (layout) => !isDesktop(layout),
+    );
+    expect(nonDesktopLayouts).toEqual(['phone']);
+  });
+});