refactor: rename PublicRoute with AutoRedirectRoute
This commit is contained in:
@@ -3,125 +3,125 @@ import { MemoryRouter, Route, Routes } from "react-router-dom";
|
||||
import { beforeEach, describe, expect, it } from "vitest";
|
||||
import { mockUser } from "../../test/fixtures/user.fixture";
|
||||
import { useAuthStore } from "../store/useAuthStore";
|
||||
import { ProtectedRoute, PublicRoute } from "./RouteGuards";
|
||||
import { ProtectedRoute, AutoRedirectRoute } from "./RouteGuards";
|
||||
|
||||
function renderGuard(ui: React.ReactNode, mountPath: "/protected" | "/public") {
|
||||
return render(
|
||||
<MemoryRouter initialEntries={[mountPath]}>
|
||||
<Routes>
|
||||
<Route path="/login" element={<div>Login Page</div>} />
|
||||
<Route path="/drawer" element={<div>Drawer Page</div>} />
|
||||
<Route path="/protected" element={ui} />
|
||||
<Route path="/public" element={ui} />
|
||||
</Routes>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
return render(
|
||||
<MemoryRouter initialEntries={[mountPath]}>
|
||||
<Routes>
|
||||
<Route path="/login" element={<div>Login Page</div>} />
|
||||
<Route path="/drawer" element={<div>Drawer Page</div>} />
|
||||
<Route path="/protected" element={ui} />
|
||||
<Route path="/public" element={ui} />
|
||||
</Routes>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
useAuthStore.setState({
|
||||
accessToken: null,
|
||||
user: null,
|
||||
isInitializing: true,
|
||||
});
|
||||
useAuthStore.setState({
|
||||
accessToken: null,
|
||||
user: null,
|
||||
isInitializing: true,
|
||||
});
|
||||
});
|
||||
|
||||
describe("ProtectedRoute", () => {
|
||||
it("should show SplashScreen while auth is initializing", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: true,
|
||||
accessToken: null,
|
||||
user: null,
|
||||
it("should show SplashScreen while auth is initializing", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: true,
|
||||
accessToken: null,
|
||||
user: null,
|
||||
});
|
||||
renderGuard(
|
||||
<ProtectedRoute>
|
||||
<div>Secret</div>
|
||||
</ProtectedRoute>,
|
||||
"/protected",
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Unsealing/i)).toBeInTheDocument();
|
||||
expect(screen.queryByText("Secret")).not.toBeInTheDocument();
|
||||
});
|
||||
renderGuard(
|
||||
<ProtectedRoute>
|
||||
<div>Secret</div>
|
||||
</ProtectedRoute>,
|
||||
"/protected",
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Unsealing/i)).toBeInTheDocument();
|
||||
expect(screen.queryByText("Secret")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should redirect unauthenticated users to /login", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: false,
|
||||
accessToken: null,
|
||||
user: null,
|
||||
it("should redirect unauthenticated users to /login", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: false,
|
||||
accessToken: null,
|
||||
user: null,
|
||||
});
|
||||
renderGuard(
|
||||
<ProtectedRoute>
|
||||
<div>Secret</div>
|
||||
</ProtectedRoute>,
|
||||
"/protected",
|
||||
);
|
||||
expect(screen.getByText("Login Page")).toBeInTheDocument();
|
||||
expect(screen.queryByText("Secret")).not.toBeInTheDocument();
|
||||
});
|
||||
renderGuard(
|
||||
<ProtectedRoute>
|
||||
<div>Secret</div>
|
||||
</ProtectedRoute>,
|
||||
"/protected",
|
||||
);
|
||||
expect(screen.getByText("Login Page")).toBeInTheDocument();
|
||||
expect(screen.queryByText("Secret")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render page for authenticated users", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: false,
|
||||
accessToken: "token",
|
||||
user: mockUser,
|
||||
it("should render page for authenticated users", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: false,
|
||||
accessToken: "token",
|
||||
user: mockUser,
|
||||
});
|
||||
renderGuard(
|
||||
<ProtectedRoute>
|
||||
<div>Secret</div>
|
||||
</ProtectedRoute>,
|
||||
"/protected",
|
||||
);
|
||||
|
||||
expect(screen.getByText("Secret")).toBeInTheDocument();
|
||||
});
|
||||
renderGuard(
|
||||
<ProtectedRoute>
|
||||
<div>Secret</div>
|
||||
</ProtectedRoute>,
|
||||
"/protected",
|
||||
);
|
||||
|
||||
expect(screen.getByText("Secret")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("PublicRoute", () => {
|
||||
it("should show SplashScreen while auth is initializing", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: true,
|
||||
accessToken: null,
|
||||
user: null,
|
||||
it("should show SplashScreen while auth is initializing", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: true,
|
||||
accessToken: null,
|
||||
user: null,
|
||||
});
|
||||
renderGuard(
|
||||
<AutoRedirectRoute>
|
||||
<div>Login Page</div>
|
||||
</AutoRedirectRoute>,
|
||||
"/public",
|
||||
);
|
||||
expect(screen.getByText(/Unsealing/i)).toBeInTheDocument();
|
||||
expect(screen.queryByText("Login Page")).not.toBeInTheDocument();
|
||||
});
|
||||
renderGuard(
|
||||
<PublicRoute>
|
||||
<div>Login Page</div>
|
||||
</PublicRoute>,
|
||||
"/public",
|
||||
);
|
||||
expect(screen.getByText(/Unsealing/i)).toBeInTheDocument();
|
||||
expect(screen.queryByText("Login Page")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should redirect authenticated users to /drawer", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: false,
|
||||
accessToken: "token",
|
||||
user: mockUser,
|
||||
it("should redirect authenticated users to /drawer", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: false,
|
||||
accessToken: "token",
|
||||
user: mockUser,
|
||||
});
|
||||
renderGuard(
|
||||
<AutoRedirectRoute>
|
||||
<div>Login Form</div>
|
||||
</AutoRedirectRoute>,
|
||||
"/public",
|
||||
);
|
||||
expect(screen.getByText("Drawer Page")).toBeInTheDocument();
|
||||
expect(screen.queryByText("Login Form")).not.toBeInTheDocument();
|
||||
});
|
||||
renderGuard(
|
||||
<PublicRoute>
|
||||
<div>Login Form</div>
|
||||
</PublicRoute>,
|
||||
"/public",
|
||||
);
|
||||
expect(screen.getByText("Drawer Page")).toBeInTheDocument();
|
||||
expect(screen.queryByText("Login Form")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render page for unauthenticated users", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: false,
|
||||
accessToken: null,
|
||||
user: null,
|
||||
it("should render page for unauthenticated users", () => {
|
||||
useAuthStore.setState({
|
||||
isInitializing: false,
|
||||
accessToken: null,
|
||||
user: null,
|
||||
});
|
||||
renderGuard(
|
||||
<AutoRedirectRoute>
|
||||
<div>Login Form</div>
|
||||
</AutoRedirectRoute>,
|
||||
"/public",
|
||||
);
|
||||
expect(screen.getByText("Login Form")).toBeInTheDocument();
|
||||
});
|
||||
renderGuard(
|
||||
<PublicRoute>
|
||||
<div>Login Form</div>
|
||||
</PublicRoute>,
|
||||
"/public",
|
||||
);
|
||||
expect(screen.getByText("Login Form")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -9,30 +9,30 @@ import SplashScreen from "./SplashScreen";
|
||||
* state so the Login component can link them back after sign-in
|
||||
*/
|
||||
export function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated, isInitializing } = useAuth();
|
||||
const location = useLocation();
|
||||
const { isAuthenticated, isInitializing } = useAuth();
|
||||
const location = useLocation();
|
||||
|
||||
if (isInitializing) return <SplashScreen />;
|
||||
if (isInitializing) return <SplashScreen />;
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to={ROUTES.LOGIN} state={{ from: location }} replace />;
|
||||
}
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to={ROUTES.LOGIN} state={{ from: location }} replace />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Public - auth route guard.
|
||||
* Auto-redirect - auth route guard.
|
||||
* If authenticated, redirect all the auth related flows to the drawer
|
||||
*/
|
||||
export function PublicRoute({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated, isInitializing } = useAuth();
|
||||
export function AutoRedirectRoute({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated, isInitializing } = useAuth();
|
||||
|
||||
if (isInitializing) return <SplashScreen />;
|
||||
if (isInitializing) return <SplashScreen />;
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Navigate to={ROUTES.DRAWER} replace />;
|
||||
}
|
||||
if (isAuthenticated) {
|
||||
return <Navigate to={ROUTES.DRAWER} replace />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user