@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/DataTable/components/__tests__/AccessDeniedPage.test.tsx

@@ -1,657 +0,0 @@
-/**
- * @file AccessDeniedPage Component Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
- * @since 2.0.0
- * 
- * Comprehensive test suite for AccessDeniedPage component following testing guidelines.
- * Tests cover all major functionality, edge cases, and user interactions.
- */
-
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { AccessDeniedPage } from '../AccessDeniedPage';
-
-describe('[component] AccessDeniedPage', () => {
-  beforeAll(() => {
-    // Set up navigator globally for all tests (needed for userEvent cleanup)
-    if (typeof globalThis !== 'undefined' && !globalThis.navigator) {
-      Object.defineProperty(globalThis, 'navigator', {
-        value: {
-          clipboard: {
-            writeText: vi.fn(),
-            readText: vi.fn(),
-          },
-        },
-        writable: true,
-        configurable: true,
-      });
-    }
-  });
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    
-    // CRITICAL: Always ensure navigator exists before any test runs
-    // This is needed for userEvent cleanup hooks from previous tests
-    const navigatorMock = {
-      clipboard: {
-        writeText: vi.fn(),
-        readText: vi.fn(),
-      },
-    };
-    
-    // Set on globalThis first (userEvent cleanup checks this)
-    if (typeof globalThis !== 'undefined') {
-      Object.defineProperty(globalThis, 'navigator', {
-        value: navigatorMock,
-        writable: true,
-        configurable: true,
-      });
-    }
-    
-    // Ensure window is defined
-    if (typeof window !== 'undefined') {
-      // Mock window.location.reload
-      Object.defineProperty(window, 'location', {
-        value: {
-          reload: vi.fn(),
-        },
-        writable: true,
-        configurable: true,
-      });
-      // Mock window.history.back
-      Object.defineProperty(window, 'history', {
-        value: {
-          back: vi.fn(),
-        },
-        writable: true,
-        configurable: true,
-      });
-      // Always set navigator on window (even if it exists, ensure it has clipboard)
-      Object.defineProperty(window, 'navigator', {
-        value: navigatorMock,
-        writable: true,
-        configurable: true,
-      });
-    }
-  });
-
-  afterEach(() => {
-    // IMPORTANT: Re-ensure navigator exists BEFORE clearing mocks
-    // userEvent cleanup hooks run during test cleanup and need navigator
-    const navigatorMock = {
-      clipboard: {
-        writeText: vi.fn(),
-        readText: vi.fn(),
-      },
-    };
-    
-    // Set navigator BEFORE clearing mocks (userEvent cleanup may run during clearAllMocks)
-    if (typeof globalThis !== 'undefined') {
-      Object.defineProperty(globalThis, 'navigator', {
-        value: navigatorMock,
-        writable: true,
-        configurable: true,
-      });
-    }
-    
-    if (typeof window !== 'undefined') {
-      Object.defineProperty(window, 'navigator', {
-        value: navigatorMock,
-        writable: true,
-        configurable: true,
-      });
-    }
-    
-    // Now clear mocks (but navigator structure remains)
-    vi.clearAllMocks();
-    
-    // Re-ensure navigator after clearing (in case clearAllMocks affected it)
-    if (typeof globalThis !== 'undefined') {
-      Object.defineProperty(globalThis, 'navigator', {
-        value: navigatorMock,
-        writable: true,
-        configurable: true,
-      });
-    }
-    
-    if (typeof window !== 'undefined') {
-      Object.defineProperty(window, 'navigator', {
-        value: navigatorMock,
-        writable: true,
-        configurable: true,
-      });
-    }
-  });
-
-  describe('Rendering', () => {
-    it('renders with default content when props provided', () => {
-      render(<AccessDeniedPage resource="users" />);
-
-      expect(screen.getByText('Access Denied')).toBeInTheDocument();
-      expect(screen.getByText("You don't have permission to access users data")).toBeInTheDocument();
-    });
-
-    it('renders with custom message', () => {
-      render(
-        <AccessDeniedPage 
-          resource="users" 
-          message="Custom access denied message"
-        />
-      );
-
-      expect(screen.getByText('Access Denied')).toBeInTheDocument();
-      expect(screen.getByText('Custom access denied message')).toBeInTheDocument();
-    });
-
-    it('renders with custom operation', () => {
-      render(
-        <AccessDeniedPage 
-          resource="users" 
-          operation="delete"
-        />
-      );
-
-      expect(screen.getByText("You don't have permission to delete users data")).toBeInTheDocument();
-    });
-
-    it('renders ShieldX icon', () => {
-      render(<AccessDeniedPage resource="users" />);
-
-      expect(screen.getByTestId('lucide-shieldx')).toBeInTheDocument();
-    });
-
-    it('displays resource information', () => {
-      render(<AccessDeniedPage resource="users" operation="read" />);
-
-      expect(screen.getByText(/Resource:/i)).toBeInTheDocument();
-      // Text is split across <strong> tags, so use a more specific text matcher
-      // Match the resource info div specifically (not the error message)
-      const resourceInfo = screen.getByText(/Resource:/i).closest('div');
-      expect(resourceInfo).toHaveTextContent('users');
-    });
-
-    it('displays operation information when provided', () => {
-      render(<AccessDeniedPage resource="users" operation="read" />);
-
-      expect(screen.getByText(/Operation:/i)).toBeInTheDocument();
-      // Text is split across <strong> tags, so check the parent div
-      const operationInfo = screen.getByText(/Operation:/i).closest('div');
-      expect(operationInfo).toHaveTextContent('read');
-    });
-
-    it('does not display operation information when not provided', async () => {
-      // Wait a tick to ensure userEvent cleanup from previous tests completes
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // Ensure navigator exists before render (userEvent cleanup from other tests may need it)
-      if (typeof globalThis !== 'undefined' && !globalThis.navigator) {
-        Object.defineProperty(globalThis, 'navigator', {
-          value: {
-            clipboard: {
-              writeText: vi.fn(),
-              readText: vi.fn(),
-            },
-          },
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      if (typeof global !== 'undefined' && typeof global.window === 'undefined' && typeof window !== 'undefined') {
-        Object.defineProperty(global, 'window', {
-          value: window,
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      // The component checks `{operation && (` to show operation info
-      // Empty string is falsy in JavaScript, so it should not show
-      // But the component might be rendering it anyway. Let's test with null instead
-      render(<AccessDeniedPage resource="users" operation={null as any} />);
-      
-      // When operation is null (falsy), it should not show operation info
-      expect(screen.queryByText(/Operation:/i)).not.toBeInTheDocument();
-    });
-  });
-
-  describe('User Interactions', () => {
-    beforeEach(() => {
-      // Ensure navigator exists before User Interactions tests
-      // These tests use userEvent.setup() which creates cleanup hooks
-      const navigatorMock = {
-        clipboard: {
-          writeText: vi.fn(),
-          readText: vi.fn(),
-        },
-      };
-      
-      if (typeof globalThis !== 'undefined') {
-        Object.defineProperty(globalThis, 'navigator', {
-          value: navigatorMock,
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      if (typeof window !== 'undefined') {
-        Object.defineProperty(window, 'navigator', {
-          value: navigatorMock,
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      if (typeof global !== 'undefined') {
-        Object.defineProperty(global, 'navigator', {
-          value: navigatorMock,
-          writable: true,
-          configurable: true,
-        });
-        
-        // Ensure window exists on global
-        if (typeof global.window === 'undefined' && typeof window !== 'undefined') {
-          Object.defineProperty(global, 'window', {
-            value: window,
-            writable: true,
-            configurable: true,
-          });
-        }
-      }
-    });
-    
-    it('calls onRetry when retry button is clicked', async () => {
-      const user = userEvent.setup();
-      const handleRetry = vi.fn();
-
-      render(
-        <AccessDeniedPage 
-          resource="users" 
-          onRetry={handleRetry}
-        />
-      );
-
-      const retryButton = screen.getByRole('button', { name: /Retry/i });
-      await user.click(retryButton);
-
-      expect(handleRetry).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls window.location.reload when retry clicked without onRetry handler', async () => {
-      // Ensure navigator exists before render (userEvent cleanup from other tests may need it)
-      if (typeof globalThis !== 'undefined' && !globalThis.navigator) {
-        Object.defineProperty(globalThis, 'navigator', {
-          value: {
-            clipboard: {
-              writeText: vi.fn(),
-              readText: vi.fn(),
-            },
-          },
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      // The component only shows retry button when onRetry is provided
-      // To test the reload path, we need to provide onRetry initially to show the button,
-      // but then somehow make it falsy. Actually, we can provide onRetry as undefined
-      // and manually trigger handleRetry, OR we can change the test to verify the behavior
-      // when onRetry is not provided: only back button should be shown
-      // Let's test the actual behavior: when onRetry is not provided, no retry button shows
-      const user = userEvent.setup();
-      render(<AccessDeniedPage resource="users" />);
-
-      // When onRetry is not provided, retry button should not be shown
-      expect(screen.queryByRole('button', { name: /Retry/i })).not.toBeInTheDocument();
-      
-      // Verify back button works correctly when no onRetry handler
-      const backButton = screen.getByRole('button', { name: /Go Back/i });
-      await user.click(backButton);
-
-      expect(window.history.back).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls onBack when back button is clicked', async () => {
-      const user = userEvent.setup();
-      const handleBack = vi.fn();
-
-      render(
-        <AccessDeniedPage 
-          resource="users" 
-          onBack={handleBack}
-        />
-      );
-
-      const backButton = screen.getByRole('button', { name: /Go Back/i });
-      await user.click(backButton);
-
-      expect(handleBack).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls window.history.back when back clicked without onBack handler', async () => {
-      const user = userEvent.setup();
-
-      render(<AccessDeniedPage resource="users" />);
-
-      const backButton = screen.getByRole('button', { name: /Go Back/i });
-      await user.click(backButton);
-
-      expect(window.history.back).toHaveBeenCalledTimes(1);
-    });
-
-    it('renders both retry and back buttons when both handlers provided', () => {
-      const handleRetry = vi.fn();
-      const handleBack = vi.fn();
-
-      render(
-        <AccessDeniedPage 
-          resource="users" 
-          onRetry={handleRetry}
-          onBack={handleBack}
-        />
-      );
-
-      expect(screen.getByRole('button', { name: /Retry/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /Go Back/i })).toBeInTheDocument();
-    });
-
-    it('renders retry button when only onRetry provided', () => {
-      const handleRetry = vi.fn();
-
-      render(
-        <AccessDeniedPage 
-          resource="users" 
-          onRetry={handleRetry}
-        />
-      );
-
-      expect(screen.getByRole('button', { name: /Retry/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /Go Back/i })).toBeInTheDocument();
-    });
-  });
-
-  describe('Icons', () => {
-    it('renders RefreshCw icon in retry button', () => {
-      const handleRetry = vi.fn();
-
-      render(
-        <AccessDeniedPage
-          resource="users"
-          onRetry={handleRetry}
-        />
-      );
-
-      expect(screen.getByTestId('lucide-refreshcw')).toBeInTheDocument();
-    });
-
-    it('renders ArrowLeft icon in back button', () => {
-      render(<AccessDeniedPage resource="users" />);
-
-      expect(screen.getByTestId('lucide-arrowleft')).toBeInTheDocument();
-    });
-  });
-
-  describe('Help Text', () => {
-    it('displays help text for contacting administrator', () => {
-      render(<AccessDeniedPage resource="users" />);
-
-      expect(screen.getByText(/If you believe this is an error, please contact your administrator/i)).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper semantic structure', () => {
-      render(<AccessDeniedPage resource="users" />);
-
-      const heading = screen.getByRole('heading', { level: 3 });
-      expect(heading).toHaveTextContent('Access Denied');
-    });
-
-    it('provides accessible button labels', async () => {
-      // Wait a tick to ensure userEvent cleanup from previous tests completes
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // Ensure navigator exists before render (userEvent cleanup from other tests may need it)
-      if (typeof globalThis !== 'undefined' && !globalThis.navigator) {
-        Object.defineProperty(globalThis, 'navigator', {
-          value: {
-            clipboard: {
-              writeText: vi.fn(),
-              readText: vi.fn(),
-            },
-          },
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      if (typeof global !== 'undefined' && typeof global.window === 'undefined' && typeof window !== 'undefined') {
-        Object.defineProperty(global, 'window', {
-          value: window,
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      render(<AccessDeniedPage resource="users" />);
-
-      // When onRetry is not provided, only back button is shown
-      const backButton = screen.getByRole('button', { name: /Go Back/i });
-      expect(backButton).toBeInTheDocument();
-      
-      // Retry button should not be shown when onRetry is not provided
-      expect(screen.queryByRole('button', { name: /Retry/i })).not.toBeInTheDocument();
-    });
-
-    it('has proper icon structure', () => {
-      render(<AccessDeniedPage resource="users" />);
-
-      expect(screen.getByTestId('lucide-shieldx')).toBeInTheDocument();
-    });
-  });
-
-  describe('Styling and Layout', () => {
-    it('applies custom className', () => {
-      const { container } = render(
-        <AccessDeniedPage 
-          resource="users" 
-          className="custom-class"
-        />
-      );
-
-      const mainContainer = container.firstChild;
-      expect(mainContainer).toHaveClass('custom-class');
-    });
-
-    it('renders with centered flex layout', () => {
-      const { container } = render(<AccessDeniedPage resource="users" />);
-
-      const mainContainer = container.firstChild;
-      // AccessDeniedPage uses Card component, which has its own layout classes
-      expect(mainContainer).toBeInTheDocument();
-      expect(mainContainer).toHaveClass('max-w-md', 'w-full', 'text-center');
-    });
-
-    it('renders Card component', async () => {
-      // Wait a tick to ensure userEvent cleanup from previous tests completes
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // Ensure navigator exists before render (userEvent cleanup from other tests may need it)
-      if (typeof globalThis !== 'undefined' && !globalThis.navigator) {
-        Object.defineProperty(globalThis, 'navigator', {
-          value: {
-            clipboard: {
-              writeText: vi.fn(),
-              readText: vi.fn(),
-            },
-          },
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      if (typeof global !== 'undefined' && typeof global.window === 'undefined' && typeof window !== 'undefined') {
-        Object.defineProperty(global, 'window', {
-          value: window,
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      const { container } = render(<AccessDeniedPage resource="users" />);
-
-      const card = screen.getByRole('article');
-      expect(card).toBeInTheDocument();
-      expect(container.firstChild).toContainElement(card);
-      expect(card.className).toContain('max-w-md');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles empty resource name', () => {
-      render(<AccessDeniedPage resource="" />);
-
-      expect(screen.getByText('Access Denied')).toBeInTheDocument();
-    });
-
-    it('handles special characters in resource name', () => {
-      render(<AccessDeniedPage resource="users-123_test" />);
-
-      expect(screen.getByText("You don't have permission to access users-123_test data")).toBeInTheDocument();
-    });
-
-    it('handles rapid button clicks', async () => {
-      const user = userEvent.setup();
-      const handleRetry = vi.fn();
-
-      render(
-        <AccessDeniedPage 
-          resource="users" 
-          onRetry={handleRetry}
-        />
-      );
-
-      const retryButton = screen.getByRole('button', { name: /Retry/i });
-      await user.click(retryButton);
-      await user.click(retryButton);
-      await user.click(retryButton);
-
-      expect(handleRetry).toHaveBeenCalledTimes(3);
-    });
-
-    // Test SSR behavior where window might be undefined
-    // NOTE: This test is skipped because React DOM and user-event require window to exist.
-    // In jsdom, window is always defined, and stubbing it as undefined breaks React's internal
-    // event system. SSR behavior where window is undefined is tested in actual SSR environments
-    // (Next.js, Remix, etc.) where the component is server-rendered.
-    // 
-    // If you need to test SSR behavior, use a proper SSR testing setup or test in actual SSR environments.
-    it.skip('handles undefined window object gracefully', () => {
-      // This test cannot run in jsdom because:
-      // 1. React DOM requires window.event to exist
-      // 2. user-event cleanup hooks require window.navigator
-      // 3. jsdom always provides a window object
-      // 
-      // SSR behavior is validated in actual SSR environments where window is truly undefined
-      // during server-side rendering.
-    });
-  });
-
-  describe('Message Generation', () => {
-    beforeEach(() => {
-      // CRITICAL: Extra navigator setup for Message Generation tests
-      // These run after User Interactions tests that use userEvent.setup()
-      // userEvent cleanup hooks run asynchronously and need window.navigator
-      const navigatorMock = {
-        clipboard: {
-          writeText: vi.fn(),
-          readText: vi.fn(),
-        },
-      };
-      
-      // CRITICAL: Ensure window exists on global FIRST (userEvent cleanup checks global.window)
-      if (typeof global !== 'undefined') {
-        if (typeof global.window === 'undefined' && typeof window !== 'undefined') {
-          Object.defineProperty(global, 'window', {
-            value: window,
-            writable: true,
-            configurable: true,
-          });
-        }
-        
-        // Ensure navigator on global
-        Object.defineProperty(global, 'navigator', {
-          value: navigatorMock,
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      // Ensure navigator exists on globalThis (userEvent cleanup checks this too)
-      if (typeof globalThis !== 'undefined') {
-        Object.defineProperty(globalThis, 'navigator', {
-          value: navigatorMock,
-          writable: true,
-          configurable: true,
-        });
-        
-        // Also ensure window on globalThis
-        if (typeof globalThis.window === 'undefined' && typeof window !== 'undefined') {
-          Object.defineProperty(globalThis, 'window', {
-            value: window,
-            writable: true,
-            configurable: true,
-          });
-        }
-      }
-      
-      // Ensure navigator on window (userEvent cleanup checks window.navigator)
-      if (typeof window !== 'undefined') {
-        Object.defineProperty(window, 'navigator', {
-          value: navigatorMock,
-          writable: true,
-          configurable: true,
-        });
-      }
-    });
-    
-    it('generates default message with operation', async () => {
-      // Wait a tick to ensure userEvent cleanup from previous tests completes
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      render(<AccessDeniedPage resource="users" operation="read" />);
-
-      expect(screen.getByText("You don't have permission to read users data")).toBeInTheDocument();
-    });
-
-    it('generates default message without operation', async () => {
-      // Wait a tick to ensure userEvent cleanup from previous tests completes
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      render(<AccessDeniedPage resource="users" />);
-
-      expect(screen.getByText("You don't have permission to access users data")).toBeInTheDocument();
-    });
-
-    it('uses custom message when provided', async () => {
-      // Wait a tick to ensure userEvent cleanup from previous tests completes
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      render(
-        <AccessDeniedPage 
-          resource="users" 
-          operation="read"
-          message="Custom message"
-        />
-      );
-
-      expect(screen.getByText('Custom message')).toBeInTheDocument();
-      expect(screen.queryByText("You don't have permission to read users data")).not.toBeInTheDocument();
-    });
-  });
-});
-