Add tests for ProtectedRoute component

Introduces a comprehensive test suite for the ProtectedRoute component, covering scenarios for authentication, loading state, fallback and redirect behavior, and error handling. This improves test coverage and ensures correct behavior under various conditions.

Author: d3varaja

packages/tanstack-router/esbuild.config.mjs

@@ -50,4 +50,4 @@ await build({
   format: 'cjs',
   outfile: 'dist/cjs/index.js',
   sourcemap: true,
-});
+});

packages/tanstack-router/src/components/__tests__/ProtectedRoute.test.tsx

@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ProtectedRoute from '../ProtectedRoute';
+import { useAsgardeo } from '@asgardeo/react';
+
+// Mock the dependencies
+vi.mock('@asgardeo/react', () => ({
+  useAsgardeo: vi.fn(),
+  AsgardeoRuntimeError: class AsgardeoRuntimeError extends Error {
+    code: string;
+    component: string;
+    traceId: string | undefined;
+
+    constructor(message: string, code: string, component: string, traceId?: string) {
+      super(message);
+      this.name = 'AsgardeoRuntimeError';
+      this.code = code;
+      this.component = component;
+      this.traceId = traceId;
+    }
+  },
+}));
+
+vi.mock('@tanstack/react-router', () => ({
+  Navigate: ({ to }: { to: string }) => <div data-testid="navigate">Navigate to: {to}</div>,
+}));
+
+describe('ProtectedRoute', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render loader when isLoading is true', () => {
+    vi.mocked(useAsgardeo).mockReturnValue({
+      isSignedIn: false,
+      isLoading: true,
+    } as any);
+
+    render(
+      <ProtectedRoute redirectTo="/signin" loader={<div data-testid="loader">Loading...</div>}>
+        <div data-testid="protected-content">Protected Content</div>
+      </ProtectedRoute>
+    );
+
+    expect(screen.getByTestId('loader')).toBeDefined();
+    expect(screen.queryByTestId('protected-content')).toBeNull();
+  });
+
+  it('should render children when user is authenticated', () => {
+    vi.mocked(useAsgardeo).mockReturnValue({
+      isSignedIn: true,
+      isLoading: false,
+    } as any);
+
+    render(
+      <ProtectedRoute redirectTo="/signin">
+        <div data-testid="protected-content">Protected Content</div>
+      </ProtectedRoute>
+    );
+
+    expect(screen.getByTestId('protected-content')).toBeDefined();
+  });
+
+  it('should render fallback when user is not authenticated and fallback is provided', () => {
+    vi.mocked(useAsgardeo).mockReturnValue({
+      isSignedIn: false,
+      isLoading: false,
+    } as any);
+
+    render(
+      <ProtectedRoute
+        redirectTo="/signin"
+        fallback={<div data-testid="fallback">Access Denied</div>}
+      >
+        <div data-testid="protected-content">Protected Content</div>
+      </ProtectedRoute>
+    );
+
+    expect(screen.getByTestId('fallback')).toBeDefined();
+    expect(screen.queryByTestId('protected-content')).toBeNull();
+  });
+
+  it('should navigate to redirectTo when user is not authenticated and no fallback is provided', () => {
+    vi.mocked(useAsgardeo).mockReturnValue({
+      isSignedIn: false,
+      isLoading: false,
+    } as any);
+
+    render(
+      <ProtectedRoute redirectTo="/signin">
+        <div data-testid="protected-content">Protected Content</div>
+      </ProtectedRoute>
+    );
+
+    const navigate = screen.getByTestId('navigate');
+    expect(navigate).toBeDefined();
+    expect(navigate.textContent).toBe('Navigate to: /signin');
+    expect(screen.queryByTestId('protected-content')).toBeNull();
+  });
+
+  it('should throw error when neither fallback nor redirectTo is provided', () => {
+    vi.mocked(useAsgardeo).mockReturnValue({
+      isSignedIn: false,
+      isLoading: false,
+    } as any);
+
+    expect(() => {
+      render(
+        <ProtectedRoute>
+          <div data-testid="protected-content">Protected Content</div>
+        </ProtectedRoute>
+      );
+    }).toThrow('"fallback" or "redirectTo" prop is required.');
+  });
+
+  it('should render null loader by default when isLoading is true and no loader is provided', () => {
+    vi.mocked(useAsgardeo).mockReturnValue({
+      isSignedIn: false,
+      isLoading: true,
+    } as any);
+
+    const { container } = render(
+      <ProtectedRoute redirectTo="/signin">
+        <div data-testid="protected-content">Protected Content</div>
+      </ProtectedRoute>
+    );
+
+    expect(container.textContent).toBe('');
+    expect(screen.queryByTestId('protected-content')).toBeNull();
+  });
+
+  it('should prioritize fallback over redirectTo when both are provided', () => {
+    vi.mocked(useAsgardeo).mockReturnValue({
+      isSignedIn: false,
+      isLoading: false,
+    } as any);
+
+    render(
+      <ProtectedRoute
+        redirectTo="/signin"
+        fallback={<div data-testid="fallback">Custom Fallback</div>}
+      >
+        <div data-testid="protected-content">Protected Content</div>
+      </ProtectedRoute>
+    );
+
+    expect(screen.getByTestId('fallback')).toBeDefined();
+    expect(screen.queryByTestId('navigate')).toBeNull();
+    expect(screen.queryByTestId('protected-content')).toBeNull();
+  });
+});