@jmruthers/pace-core 0.5.110 → 0.5.112

package/src/components/NavigationMenu/NavigationMenu.test.tsx

@@ -487,11 +487,25 @@ describe('NavigationMenu Component', () => {
       mockUsePermissions.mockReturnValue({
         permissions: {
           'dashboard:read': true,
+          // Add page permissions for items with hrefs (NavigationMenu checks these)
+          'read:page.dashboard': true,
+          'read:page.users': true,
+          'read:page.settings': true,
         } as any,
         isLoading: false,
         error: null,
-        hasPermission: vi.fn((p: any) => p === 'dashboard:read'),
-        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => p === 'dashboard:read')),
+        hasPermission: vi.fn((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        }),
+        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        })),
         hasAllPermissions: vi.fn(() => true),
         refetch: vi.fn(),
       });
@@ -636,11 +650,25 @@ describe('NavigationMenu Component', () => {
       mockUsePermissions.mockReturnValue({
         permissions: {
           'dashboard:read': true,
+          // Add page permissions for items with hrefs (NavigationMenu checks these)
+          'read:page.dashboard': true,
+          'read:page.users': true,
+          'read:page.settings': true,
         } as any,
         isLoading: false,
         error: null,
-        hasPermission: vi.fn((p: any) => p === 'dashboard:read'),
-        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => p === 'dashboard:read')),
+        hasPermission: vi.fn((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        }),
+        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        })),
         hasAllPermissions: vi.fn(() => true),
         refetch: vi.fn(),
       });
@@ -700,11 +728,25 @@ describe('NavigationMenu Component', () => {
       mockUsePermissions.mockReturnValue({
         permissions: {
           'dashboard:read': true,
+          // Add page permissions for items with hrefs (NavigationMenu checks these)
+          'read:page.dashboard': true,
+          'read:page.users': true,
+          'read:page.settings': true,
         } as any,
         isLoading: false,
         error: null,
-        hasPermission: vi.fn((p: any) => p === 'dashboard:read'),
-        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => p === 'dashboard:read')),
+        hasPermission: vi.fn((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        }),
+        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        })),
         hasAllPermissions: vi.fn(() => true),
         refetch: vi.fn(),
       });
@@ -894,11 +936,17 @@ describe('NavigationMenu Component', () => {
       mockUsePermissions.mockReturnValue({
         permissions: {
           'valid-permission': true,
+          // Add page permission for /test href (NavigationMenu checks this)
+          'read:page.test': true,
         } as any,
         isLoading: false,
         error: null,
-        hasPermission: vi.fn((p: any) => p === 'valid-permission'),
-        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => typeof p === 'string' && p === 'valid-permission')),
+        hasPermission: vi.fn((p: any) => {
+          return p === 'valid-permission' || p === 'read:page.test';
+        }),
+        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => {
+          return (typeof p === 'string' && p === 'valid-permission') || p === 'read:page.test';
+        })),
         hasAllPermissions: vi.fn(() => true),
         refetch: vi.fn(),
       });

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -446,19 +446,71 @@ export const NavigationMenu = React.forwardRef<
     selectedEventId: selectedEvent?.event_id || null
   });
 
+  // Stabilize scope object to prevent unnecessary permission refetches
+  // This prevents the permission map from being cleared when scope object reference changes
+  const stableScopeRef = React.useRef<{ organisationId: string; eventId?: string; appId?: string }>({
+    organisationId: '',
+    eventId: undefined,
+    appId: undefined
+  });
+
+  // Only update stable scope if values actually changed
+  if (resolvedScope?.organisationId) {
+    const newOrgId = resolvedScope.organisationId;
+    const newEventId = resolvedScope.eventId;
+    const newAppId = resolvedScope.appId;
+    
+    if (stableScopeRef.current.organisationId !== newOrgId ||
+        stableScopeRef.current.eventId !== newEventId ||
+        stableScopeRef.current.appId !== newAppId) {
+      stableScopeRef.current = {
+        organisationId: newOrgId,
+        eventId: newEventId,
+        appId: newAppId
+      };
+    }
+  } else if (!resolvedScope) {
+    // Only reset if we had a previous value - don't clear on initial render
+    if (stableScopeRef.current.organisationId !== '') {
+      stableScopeRef.current = {
+        organisationId: '',
+        eventId: undefined,
+        appId: undefined
+      };
+    }
+  }
+
+  const stableScope = stableScopeRef.current;
+
   // Get permissions map for synchronous permission checks
   const userId = authContext?.user?.id || '';
-  const scope = resolvedScope || { organisationId: '', eventId: undefined, appId: undefined };
-  const { permissions: permissionMap, hasAnyPermission, isLoading: permissionsLoading } = usePermissions(
+  const { permissions: permissionMap, hasAnyPermission, isLoading: permissionsLoading, error: permissionsError } = usePermissions(
     userId as any,
-    scope as any
+    stableScope as any
   );
 
   // NEW: Phase 2 - Enhanced Security Features
   // Filter navigation items based on permissions using RBAC hooks
   const filteredItems = React.useMemo(() => {
-    // If filtering disabled, auth unavailable, RBAC unavailable, scope/permissions loading, or no org context: show all items (except hidden)
-    if (!filterByPermissions || !authContext || !rbacContext || scopeLoading || permissionsLoading || !resolvedScope?.organisationId) {
+    // Security: If filtering is enabled but we're missing required context or still loading, show NO items
+    // This prevents security risk of showing items before permissions are verified
+    if (filterByPermissions) {
+      if (!authContext || !rbacContext || scopeLoading || permissionsLoading || !resolvedScope?.organisationId) {
+        // Still loading - show nothing to prevent security risk
+        return [];
+      }
+      
+      // If there's an error or empty permission map after loading, show nothing
+      // Security: Better to show nothing than risk showing unauthorized items
+      if (permissionsError || !permissionMap || Object.keys(permissionMap).length === 0) {
+        console.warn('[NavigationMenu] Permission map is empty or has error - showing no items for security', {
+          permissionsError: permissionsError?.message,
+          permissionMapSize: permissionMap ? Object.keys(permissionMap).length : 0
+        });
+        return [];
+      }
+    } else {
+      // Filtering disabled - only filter out hidden items
       return (items || []).filter(item => !item.meta?.hidden);
     }
     
@@ -553,25 +605,32 @@ export const NavigationMenu = React.forwardRef<
         }
       }
       
-      // NEW: Auto-check page permissions for items with href but no explicit permissions
-      // If item has an href but no explicit permissions/roles/accessLevel, check page permission
-      if (item.href && !item.permissions && !item.roles && !item.accessLevel) {
+      // NEW: Auto-check page permissions for items with href
+      // Always check page permissions for items with href, even if they have explicit permissions/roles/accessLevel
+      // This ensures that items are filtered out if the user doesn't have access to the page itself
+      if (item.href) {
         const pageId = item.pageId || getPageIdFromHref(item.href);
         if (pageId) {
           // Check for read permission on the page
           const pagePermission: Permission = `read:page.${pageId}` as Permission;
           
           // Check permission map (super admin has access to everything via '*' key)
-          const hasPagePermission = permissionMap['*'] === true || permissionMap[pagePermission] === true;
+          // Only allow if permission is explicitly true (undefined/false means no access)
+          const isSuperAdmin = permissionMap['*'] === true;
+          const hasPagePermission = permissionMap[pagePermission] === true;
+          const finalHasPermission = isSuperAdmin || hasPagePermission;
           
-          if (!hasPagePermission) {
+          if (!finalHasPermission) {
             if (auditLog) {
               console.log(`[NavigationMenu] Filtering out navigation item "${item.label}" - no page permission:`, {
                 itemId: item.id,
                 href: item.href,
                 pageId,
                 permission: pagePermission,
-                hasPermission: hasPagePermission
+                hasPermission: finalHasPermission,
+                isSuperAdmin,
+                permissionMapValue: permissionMap[pagePermission],
+                permissionMapKeys: Object.keys(permissionMap).slice(0, 10) // Show first 10 keys for debugging
               });
             }
             return false;
@@ -610,9 +669,13 @@ export const NavigationMenu = React.forwardRef<
       };
     };
     
-    return (items || [])
+    // Filter items based on permissions - only show items with explicit permission
+    // Security: No fallback - if items don't have permission, they are hidden
+    const filtered = (items || [])
       .map(item => filterItem(item))
       .filter((item): item is NavigationItem => item !== null);
+    
+    return filtered;
   }, [
     items, 
     filterByPermissions, 

package/src/components/PaceAppLayout/PaceAppLayout.test.tsx

@@ -54,13 +54,91 @@ vi.mock('../../providers/UnifiedAuthProvider', () => ({
   useUnifiedAuth: vi.fn(() => mockUnifiedAuth),
 }));
 
+// Mock useOrganisations hook
+const mockSelectedOrganisation = {
+  id: 'org-123',
+  name: 'Test Organisation',
+  display_name: 'Test Organisation',
+  slug: 'test-org',
+  description: 'Test organisation',
+  subscription_tier: 'basic',
+  settings: {},
+  is_active: true,
+  created_at: '2023-01-01T00:00:00Z',
+  updated_at: '2023-01-01T00:00:00Z',
+};
+
+vi.mock('../../hooks/useOrganisations', () => ({
+  useOrganisations: vi.fn(() => ({
+    selectedOrganisation: mockSelectedOrganisation,
+    organisations: [mockSelectedOrganisation],
+    userMemberships: [],
+    isLoading: false,
+    error: null,
+    hasValidOrganisationContext: true,
+    setSelectedOrganisation: vi.fn(),
+    switchOrganisation: vi.fn().mockResolvedValue(undefined),
+    getUserRole: vi.fn().mockReturnValue('member'),
+    validateOrganisationAccess: vi.fn().mockReturnValue(true),
+    ensureOrganisationContext: vi.fn().mockReturnValue(mockSelectedOrganisation),
+    refreshOrganisations: vi.fn().mockResolvedValue(undefined),
+    getPrimaryOrganisation: vi.fn().mockReturnValue(mockSelectedOrganisation),
+    isOrganisationSecure: vi.fn().mockReturnValue(true),
+  })),
+}));
+
+// Mock useEvents hook (optional - wrapped in try/catch in component)
+vi.mock('../../providers/EventsProvider', () => ({
+  useEvents: vi.fn(() => ({
+    selectedEvent: { event_id: 'event-123' },
+    events: [],
+    isLoading: false,
+    error: null,
+  })),
+}));
+
 // Mock RBAC functions
+const mockIsPermitted = vi.fn().mockResolvedValue(true);
+const mockIsPermittedCached = vi.fn().mockResolvedValue(true);
+
 vi.mock('../../rbac/api', () => ({
-  isPermitted: vi.fn().mockResolvedValue(true),
+  isPermitted: vi.fn(),
+  isPermittedCached: vi.fn(),
   isSuperAdmin: vi.fn().mockResolvedValue(false),
   setupRBAC: vi.fn(),
 }));
 
+// Mock useCan hook - this is what PaceAppLayout actually uses
+const mockUseCan = vi.fn(() => ({
+  can: true,
+  isLoading: false,
+  error: null,
+  refetch: vi.fn().mockResolvedValue(undefined),
+}));
+
+// Mock RBAC hooks
+const mockHasPermissionFn = vi.fn().mockResolvedValue(true);
+vi.mock('../../rbac/hooks', () => ({
+  useRBAC: vi.fn(() => ({
+    hasPermission: mockHasPermissionFn,
+    isLoading: false,
+    error: null,
+    hasGlobalPermission: vi.fn().mockResolvedValue(true),
+    hasOrganisationPermission: vi.fn().mockResolvedValue(true),
+    hasEventPermission: vi.fn().mockResolvedValue(true),
+    globalRole: null,
+    organisationRoles: [],
+    eventRoles: [],
+    permissionMap: {},
+  })),
+  useCan: (...args: any[]) => mockUseCan(...args),
+  useResolvedScope: vi.fn(() => ({
+    resolvedScope: { organisationId: 'org-123', eventId: 'event-123', appId: 'app-123' },
+    isLoading: false,
+    error: null,
+  })),
+}));
+
 // Mock Header component
 vi.mock('../Header', () => ({
   Header: ({ 
@@ -151,10 +229,21 @@ describe('PaceAppLayout Component', () => {
     vi.clearAllMocks();
     // Reset location mock
     mockLocation.pathname = '/dashboard';
-    // Reset RBAC mocks
-    const { isPermitted, isSuperAdmin } = await import('../../rbac/api');
+    // Reset RBAC hook mocks
+    mockHasPermissionFn.mockClear();
+    mockHasPermissionFn.mockResolvedValue(true);
+    mockUseCan.mockReturnValue({
+      can: true,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn().mockResolvedValue(undefined),
+    });
+    // Reset RBAC API mocks
+    const { isPermitted, isPermittedCached, isSuperAdmin } = await import('../../rbac/api');
     vi.mocked(isPermitted).mockReset();
     vi.mocked(isPermitted).mockResolvedValue(true);
+    vi.mocked(isPermittedCached).mockReset();
+    vi.mocked(isPermittedCached).mockResolvedValue(true);
     vi.mocked(isSuperAdmin).mockReset();
     vi.mocked(isSuperAdmin).mockResolvedValue(false);
   });
@@ -360,8 +449,13 @@ describe('PaceAppLayout Component', () => {
     });
 
     it('shows loading state when checking permissions', async () => {
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockImplementation(() => new Promise(resolve => setTimeout(() => resolve(true), 100)));
+      // Mock useCan to return loading state
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: true,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
       
       renderWithProviders(
         <TestWrapper>
@@ -374,8 +468,13 @@ describe('PaceAppLayout Component', () => {
     });
 
     it('shows permission error when check fails', async () => {
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockRejectedValue(new Error('Permission check failed'));
+      // Mock useCan to return an error state
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: new Error('Permission check failed'),
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
       
       renderWithProviders(
         <TestWrapper>
@@ -390,8 +489,13 @@ describe('PaceAppLayout Component', () => {
     });
 
     it('shows access denied when user lacks permission', async () => {
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(false);
+      // Mock useCan to return false (no permission)
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
       
       renderWithProviders(
         <TestWrapper>
@@ -406,11 +510,16 @@ describe('PaceAppLayout Component', () => {
     });
 
     it('shows custom permission fallback when provided', async () => {
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(false);
-      
+      // Arrange
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
       const customFallback = <div data-testid="custom-fallback">Custom Access Denied</div>;
       
+      // Act
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
@@ -421,17 +530,23 @@ describe('PaceAppLayout Component', () => {
         </TestWrapper>
       );
       
+      // Assert - No need to wait for loading since mock returns immediately
       await waitFor(() => {
         expect(screen.getByTestId('custom-fallback')).toBeInTheDocument();
-      }, { timeout: 3000 });
+      });
     });
 
     it('shows page permission fallback when enforcePagePermissions is true', async () => {
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(false);
-      
+      // Arrange
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
       const pageFallback = <div data-testid="page-fallback">Page Access Denied</div>;
       
+      // Act
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
@@ -443,9 +558,10 @@ describe('PaceAppLayout Component', () => {
         </TestWrapper>
       );
       
+      // Assert - No need to wait for loading since mock returns immediately
       await waitFor(() => {
         expect(screen.getByTestId('page-fallback')).toBeInTheDocument();
-      }, { timeout: 3000 });
+      });
     });
   });
 
@@ -514,9 +630,6 @@ describe('PaceAppLayout Component', () => {
 
   describe('Route-Specific Permissions', () => {
     it('uses route-specific permissions when provided', async () => {
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(true);
-      
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
@@ -533,23 +646,18 @@ describe('PaceAppLayout Component', () => {
       );
       
       await waitFor(() => {
-        expect(vi.mocked(isPermitted)).toHaveBeenCalledWith({
-          userId: 'user-123',
-          scope: {
-            organisationId: 'org-123',
-            eventId: 'event-123',
-            appId: 'app-123',
-          },
-          permission: 'update:page.dashboard-page',
-          pageId: 'dashboard-page',
-        });
-      }, { timeout: 3000 });
-    });
+        // useCan is called with userId, scope, permission, pageId, useCache
+        expect(mockUseCan).toHaveBeenCalledWith(
+          'user-123',
+          expect.objectContaining({ organisationId: 'org-123' }),
+          'update:page.dashboard-page',
+          'dashboard-page',
+          true
+        );
+      }, { timeout: 5000 });
+    }, { timeout: 6000 });
 
     it('uses default permission when route not in routePermissions', async () => {
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(true);
-      
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
@@ -564,18 +672,17 @@ describe('PaceAppLayout Component', () => {
       );
       
       await waitFor(() => {
-        expect(vi.mocked(isPermitted)).toHaveBeenCalledWith({
-          userId: 'user-123',
-          scope: {
-            organisationId: 'org-123',
-            eventId: 'event-123',
-            appId: 'app-123',
-          },
-          permission: 'create:page.dashboard',
-          pageId: 'dashboard',
-        });
-      }, { timeout: 3000 });
-    });
+        // useCan is called with userId, scope, permission, pageId, useCache
+        // Uses defaultPermission "create" since /dashboard is not in routePermissions
+        expect(mockUseCan).toHaveBeenCalledWith(
+          'user-123',
+          expect.objectContaining({ organisationId: 'org-123' }),
+          'create:page.dashboard',
+          'dashboard',
+          true
+        );
+      }, { timeout: 5000 });
+    }, { timeout: 6000 });
   });
 
   describe('Super Admin Bypass', () => {
@@ -601,11 +708,16 @@ describe('PaceAppLayout Component', () => {
 
   describe('Callbacks and Event Handling', () => {
     it('calls onPageAccessDenied when access is denied', async () => {
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(false);
-      
+      // Arrange
       const onPageAccessDenied = vi.fn();
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
       
+      // Act
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
@@ -616,17 +728,23 @@ describe('PaceAppLayout Component', () => {
         </TestWrapper>
       );
       
+      // Assert - Callback should be called immediately when can is false
       await waitFor(() => {
         expect(onPageAccessDenied).toHaveBeenCalledWith('dashboard', 'read');
-      }, { timeout: 3000 });
+      });
     });
 
     it('calls onStrictModeViolation when strict mode is violated', async () => {
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(false);
-      
+      // Arrange
       const onStrictModeViolation = vi.fn();
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
       
+      // Act
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
@@ -638,9 +756,10 @@ describe('PaceAppLayout Component', () => {
         </TestWrapper>
       );
       
+      // Assert - Callback should be called immediately when can is false
       await waitFor(() => {
         expect(onStrictModeViolation).toHaveBeenCalledWith('dashboard', 'read');
-      }, { timeout: 3000 });
+      });
     });
   });
 
@@ -714,8 +833,14 @@ describe('PaceAppLayout Component', () => {
       // Mock the useUnifiedAuth hook to return null user
       vi.mocked(useUnifiedAuth).mockReturnValue(mockAuthWithoutUser);
       
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(false);
+      // When there's no user, useCan is called with empty string userId
+      // and will return false (no permission)
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
       
       renderWithProviders(
         <TestWrapper>
@@ -732,6 +857,7 @@ describe('PaceAppLayout Component', () => {
     });
 
     it('handles missing organisation context', async () => {
+      // Arrange
       const mockUserWithoutOrg = {
         ...mockUser,
         user_metadata: {},
@@ -743,12 +869,15 @@ describe('PaceAppLayout Component', () => {
         user: mockUserWithoutOrg,
       };
       
-      // Mock the useUnifiedAuth hook to return user without org context
       vi.mocked(useUnifiedAuth).mockReturnValue(mockAuthWithoutOrg);
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
       
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(false);
-      
+      // Act
       renderWithProviders(
         <TestWrapper>
           <PaceAppLayout 
@@ -758,9 +887,10 @@ describe('PaceAppLayout Component', () => {
         </TestWrapper>
       );
       
+      // Assert - Component should show access denied
       await waitFor(() => {
-        expect(screen.getByText('Access Denied')).toBeInTheDocument();
-      }, { timeout: 3000 });
+        expect(screen.getByRole('heading', { name: 'Access Denied' })).toBeInTheDocument();
+      });
     });
   });