@jmruthers/pace-core 0.2.4

package/src/components/__tests__/SuperAdminGuard.unit.test.tsx

@@ -0,0 +1,456 @@
+/**
+ * @file SuperAdminGuard Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/SuperAdminGuard
+ * @since 1.0.0
+ * 
+ * Comprehensive tests for the SuperAdminGuard component and related utilities.
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import '@testing-library/jest-dom';
+import { SuperAdminGuard, SuperAdminBadge, SuperAdminDebugPanel } from '../SuperAdminGuard';
+import { renderWithProviders, rerenderWithProviders } from '../../__tests__/shared';
+
+// Mock the useRBAC hook
+const mockUseRBAC = vi.fn();
+vi.mock('../../hooks/useRBAC', () => ({
+  useRBAC: () => mockUseRBAC()
+}));
+
+// Mock console.log to avoid noise in tests
+const mockConsoleLog = vi.fn();
+
+describe('SuperAdminGuard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConsoleLog.mockClear();
+    // Set up console.log mock
+    vi.spyOn(console, 'log').mockImplementation(mockConsoleLog);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('SuperAdminGuard Component', () => {
+    it('renders children when user is super admin', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      renderWithProviders(
+        <SuperAdminGuard>
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      expect(screen.getByTestId('super-admin-content')).toBeInTheDocument();
+      expect(screen.getByText('Super Admin Content')).toBeInTheDocument();
+    });
+
+    it('renders fallback when user is not super admin', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        hasGlobalPermission: vi.fn().mockReturnValue(false),
+        isLoading: false
+      });
+
+      renderWithProviders(
+        <SuperAdminGuard fallback={<div data-testid="fallback-content">Access Denied</div>}>
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      expect(screen.getByTestId('fallback-content')).toBeInTheDocument();
+      expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      expect(screen.queryByTestId('super-admin-content')).not.toBeInTheDocument();
+    });
+
+    it('renders null fallback when no fallback is provided', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        hasGlobalPermission: vi.fn().mockReturnValue(false),
+        isLoading: false
+      });
+
+      const { container } = renderWithProviders(
+        <SuperAdminGuard>
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      const fallbackElement = container.querySelector('div.super-admin-fallback');
+      expect(fallbackElement).toHaveClass('super-admin-fallback');
+      expect(screen.queryByTestId('super-admin-content')).not.toBeInTheDocument();
+    });
+
+    it('shows loading state when isLoading is true', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        hasGlobalPermission: vi.fn().mockReturnValue(false),
+        isLoading: true
+      });
+
+      renderWithProviders(
+        <SuperAdminGuard>
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+      expect(screen.queryByTestId('super-admin-content')).not.toBeInTheDocument();
+    });
+
+    it('logs debug info when showDebugInfo is true', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      // Clear any previous calls
+      mockConsoleLog.mockClear();
+
+      renderWithProviders(
+        <SuperAdminGuard showDebugInfo={true}>
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      expect(mockConsoleLog).toHaveBeenCalledWith('[SuperAdminGuard] Debug Info:', {
+        isSuperAdmin: true,
+        isLoading: false
+      });
+    });
+
+    it('does not log debug info when showDebugInfo is false', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      renderWithProviders(
+        <SuperAdminGuard showDebugInfo={false}>
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      // Clear any console.log calls from UnifiedAuthProvider setup
+      mockConsoleLog.mockClear();
+
+      // Now test that SuperAdminGuard itself doesn't log anything
+      expect(mockConsoleLog).not.toHaveBeenCalled();
+    });
+
+    it('applies correct CSS classes', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      const { container } = renderWithProviders(
+        <SuperAdminGuard>
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      const contentElement = container.querySelector('div.super-admin-content');
+      expect(contentElement).toHaveClass('super-admin-content');
+    });
+
+    it('handles multiple children correctly', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      renderWithProviders(
+        <SuperAdminGuard>
+          <div data-testid="child-1">Child 1</div>
+          <div data-testid="child-2">Child 2</div>
+          <span data-testid="child-3">Child 3</span>
+        </SuperAdminGuard>
+      );
+
+      expect(screen.getByTestId('child-1')).toBeInTheDocument();
+      expect(screen.getByTestId('child-2')).toBeInTheDocument();
+      expect(screen.getByTestId('child-3')).toBeInTheDocument();
+    });
+
+    it('handles complex fallback content', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        hasGlobalPermission: vi.fn().mockReturnValue(false),
+        isLoading: false
+      });
+
+      renderWithProviders(
+        <SuperAdminGuard 
+          fallback={
+            <div data-testid="complex-fallback">
+              <h2>Access Denied</h2>
+              <p>You do not have permission to view this content.</p>
+              <button>Contact Administrator</button>
+            </div>
+          }
+        >
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      expect(screen.getByTestId('complex-fallback')).toBeInTheDocument();
+      expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      expect(screen.getByText('You do not have permission to view this content.')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Contact Administrator' })).toBeInTheDocument();
+    });
+  });
+
+  describe('SuperAdminBadge Component', () => {
+    it('renders badge when user is super admin', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      renderWithProviders(<SuperAdminBadge />);
+
+      expect(screen.getByText('SUPER ADMIN')).toBeInTheDocument();
+      expect(screen.getByText('SUPER ADMIN')).toHaveClass('badge-text');
+    });
+
+    it('does not render when user is not super admin', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        hasGlobalPermission: vi.fn().mockReturnValue(false),
+        isLoading: false
+      });
+
+      const { container } = renderWithProviders(<SuperAdminBadge />);
+
+      expect(container.querySelector('div.super-admin-badge')).toBeNull();
+    });
+
+    it('applies correct CSS classes', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      const { container } = renderWithProviders(<SuperAdminBadge />);
+
+      const badgeElement = container.querySelector('div.super-admin-badge');
+      expect(badgeElement).toHaveClass('super-admin-badge');
+      expect(screen.getByText('SUPER ADMIN')).toHaveClass('badge-text');
+    });
+  });
+
+  describe('SuperAdminDebugPanel Component', () => {
+    const originalEnv = process.env.NODE_ENV;
+
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    afterEach(() => {
+      process.env.NODE_ENV = originalEnv;
+    });
+
+    it('renders debug panel for super admin in production', () => {
+      process.env.NODE_ENV = 'production';
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      renderWithProviders(<SuperAdminDebugPanel />);
+
+      expect(screen.getByText('Super Admin Debug Info')).toBeInTheDocument();
+      expect(screen.getByText((content, element) => {
+        return element?.textContent === 'Is Super Admin: Yes';
+      })).toBeInTheDocument();
+      expect(screen.getByText((content, element) => {
+        return element?.textContent === 'Is Loading: No';
+      })).toBeInTheDocument();
+      expect(screen.getByText((content, element) => {
+        return element?.textContent === 'Environment: production';
+      })).toBeInTheDocument();
+    });
+
+    it('renders debug panel in development mode even for non-super admin', () => {
+      process.env.NODE_ENV = 'development';
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        hasGlobalPermission: vi.fn().mockReturnValue(false),
+        isLoading: false
+      });
+
+      renderWithProviders(<SuperAdminDebugPanel />);
+
+      expect(screen.getByText('Super Admin Debug Info')).toBeInTheDocument();
+      expect(screen.getByText((content, element) => {
+        return element?.textContent === 'Is Super Admin: No';
+      })).toBeInTheDocument();
+      expect(screen.getByText((content, element) => {
+        return element?.textContent === 'Is Loading: No';
+      })).toBeInTheDocument();
+      expect(screen.getByText((content, element) => {
+        return element?.textContent === 'Environment: development';
+      })).toBeInTheDocument();
+    });
+
+    it('does not render in production for non-super admin', () => {
+      process.env.NODE_ENV = 'production';
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        hasGlobalPermission: vi.fn().mockReturnValue(false),
+        isLoading: false
+      });
+
+      const { container } = renderWithProviders(<SuperAdminDebugPanel />);
+
+      expect(container.querySelector('div.super-admin-debug-panel')).toBeNull();
+    });
+
+    it('shows loading state in debug panel', () => {
+      process.env.NODE_ENV = 'development';
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: true
+      });
+
+      renderWithProviders(<SuperAdminDebugPanel />);
+
+      expect(screen.getByText((content, element) => {
+        return element?.textContent === 'Is Loading: Yes';
+      })).toBeInTheDocument();
+    });
+
+    it('applies correct CSS classes', () => {
+      process.env.NODE_ENV = 'development';
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      const { container } = renderWithProviders(<SuperAdminDebugPanel />);
+
+      const debugElement = container.querySelector('div.super-admin-debug-panel');
+      expect(debugElement).toHaveClass('super-admin-debug-panel');
+      expect(screen.getByText('Super Admin Debug Info')).toBeInTheDocument();
+    });
+
+    it('handles different environment values', () => {
+      process.env.NODE_ENV = 'test';
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      renderWithProviders(<SuperAdminDebugPanel />);
+
+      expect(screen.getByText((content, element) => {
+        return element?.textContent === 'Environment: test';
+      })).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases and Error Handling', () => {
+    it('handles undefined user state gracefully', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: undefined,
+        hasGlobalPermission: vi.fn().mockReturnValue(undefined),
+        isLoading: false
+      });
+
+      renderWithProviders(
+        <SuperAdminGuard>
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      // Should render fallback when isSuperAdmin is undefined
+      expect(screen.queryByTestId('super-admin-content')).not.toBeInTheDocument();
+    });
+
+    it('handles null children gracefully', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      const { container } = renderWithProviders(
+        <SuperAdminGuard>
+          {null}
+        </SuperAdminGuard>
+      );
+
+      const contentElement = container.querySelector('div.super-admin-content');
+      expect(contentElement).toHaveClass('super-admin-content');
+    });
+
+    it('handles empty children array', () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+
+      const { container } = renderWithProviders(
+        <SuperAdminGuard>
+          {[]}
+        </SuperAdminGuard>
+      );
+
+      const contentElement = container.querySelector('div.super-admin-content');
+      expect(contentElement).toHaveClass('super-admin-content');
+    });
+
+    it('handles rapid state changes', async () => {
+      // Start with loading
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        hasGlobalPermission: vi.fn().mockReturnValue(false),
+        isLoading: true
+      });
+
+      const { rerender } = renderWithProviders(
+        <SuperAdminGuard>
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      expect(screen.getByText('Checking permissions...')).toBeInTheDocument();
+
+      // Change to super admin
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        hasGlobalPermission: vi.fn().mockReturnValue(true),
+        isLoading: false
+      });
+      rerender(
+        <SuperAdminGuard>
+          <div data-testid="super-admin-content">Super Admin Content</div>
+        </SuperAdminGuard>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('super-admin-content')).toBeInTheDocument();
+      });
+    });
+  });
+});

package/src/components/examples/PermissionExample.tsx

@@ -0,0 +1,150 @@
+/**
+ * @file Permission System Example
+ * @package @jmruthers/pace-core
+ * @module Components/Examples
+ * @since 0.4.0
+ *
+ * Example component demonstrating the hybrid permission system
+ * that supports both direct app access and event-based permissions.
+ */
+
+import React from 'react';
+import { useUnifiedAuth } from '../../providers/UnifiedAuthProvider';
+import { useAppConfig } from '../../hooks/useAppConfig';
+import { AccessLevel } from '../../types/unified';
+
+export function PermissionExample() {
+  const { 
+    user, 
+    isAuthenticated, 
+    hasPermission, 
+    hasAccessLevel, 
+    accessLevel,
+    selectedEventId,
+    setSelectedEventId 
+  } = useUnifiedAuth();
+  
+  const { supportsDirectAccess, requiresEvent, isLoading, appName } = useAppConfig();
+
+  if (!isAuthenticated) {
+    return <div>Please log in to see permissions</div>;
+  }
+
+  if (isLoading) {
+    return <div>Loading app configuration...</div>;
+  }
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <h2>Permission System Example</h2>
+      
+      {/* App Configuration Info */}
+              <div className="mb-6 p-4 bg-sec-100 rounded-lg">
+        <h3>App Configuration: {appName}</h3>
+        <div className="space-y-1">
+          <div>Supports Direct Access: {supportsDirectAccess ? '✅' : '❌'}</div>
+          <div>Requires Event: {requiresEvent ? '✅' : '❌'}</div>
+          <div>Current Access Level: {accessLevel}</div>
+        </div>
+      </div>
+
+      {/* Event Selection */}
+      {requiresEvent && (
+        <div className="mb-6 p-4 border rounded-lg">
+          <h3>Event Context</h3>
+          <div className="space-y-2">
+            <div>Selected Event: {selectedEventId || 'None'}</div>
+            <div className="space-x-2">
+              <button 
+                onClick={() => setSelectedEventId('event-123')}
+                className="px-3 py-1 bg-main-500 text-main-50 rounded"
+              >
+                Select Event 123
+              </button>
+              <button 
+                onClick={() => setSelectedEventId(null)}
+                className="px-3 py-1 bg-sec-500 text-main-50 rounded"
+              >
+                Clear Event
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Permission Examples */}
+      <div className="space-y-4">
+        <h3>Permission Examples</h3>
+        
+        <div className="grid gap-4 md:grid-cols-2">
+          {/* Basic Permissions */}
+          <div className="p-4 border rounded-lg">
+            <h4>Basic Permissions</h4>
+            <div className="space-y-1 text-sm">
+              <div>Can Read: {hasPermission('app:read') ? '✅' : '❌'}</div>
+              <div>Can Write: {hasPermission('app:write') ? '✅' : '❌'}</div>
+              <div>Can Delete: {hasPermission('app:delete') ? '✅' : '❌'}</div>
+            </div>
+          </div>
+
+          {/* Access Level Checks */}
+          <div className="p-4 border rounded-lg">
+            <h4>Access Level Checks</h4>
+            <div className="space-y-1 text-sm">
+              <div>Is Editor+: {hasAccessLevel(AccessLevel.EDITOR) ? '✅' : '❌'}</div>
+              <div>Is Planner+: {hasAccessLevel(AccessLevel.PLANNER) ? '✅' : '❌'}</div>
+              <div>Is Admin: {hasAccessLevel(AccessLevel.ADMIN) ? '✅' : '❌'}</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Conditional Rendering Examples */}
+        <div className="p-4 border rounded-lg">
+          <h4>Conditional UI Elements</h4>
+          <div className="space-y-2">
+            {hasPermission('app:read') && (
+              <div className="p-2 bg-main-100 text-main-800 rounded">
+                ✅ You can see this because you have read permission
+              </div>
+            )}
+            
+            {hasPermission('app:write') && (
+              <button className="px-4 py-2 bg-main-500 text-main-50 rounded">
+                Edit (Available with write permission)
+              </button>
+            )}
+            
+            {hasAccessLevel(AccessLevel.ADMIN) && (
+              <div className="p-2 bg-acc-100 text-acc-800 rounded">
+                🔒 Admin-only content visible
+              </div>
+            )}
+            
+            {!hasPermission('app:delete') && (
+              <div className="p-2 bg-acc-100 text-acc-800 rounded">
+                ⚠️ Delete functionality not available for your access level
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Status Summary */}
+        <div className="p-4 bg-main-50 rounded-lg">
+          <h4>Current Status</h4>
+          <div className="text-sm space-y-1">
+            <div>User: {user?.email}</div>
+            <div>App: {appName}</div>
+            <div>Event: {selectedEventId || 'Direct Access'}</div>
+            <div>
+              Permission Model: {
+                selectedEventId ? 'Event-based' : 
+                supportsDirectAccess ? 'Direct Access' : 
+                'No Access (requires event)'
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}