From e68d5a2594340bff8f22dd0a791ba1dfc2df086f Mon Sep 17 00:00:00 2001
From: "groombook-engineer[bot]"
 <269742240+groombook-engineer[bot]@users.noreply.github.com>
Date: Sat, 28 Mar 2026 00:45:21 +0000
Subject: [PATCH] fix(web): import App.tsx (not App.js) in App.test.tsx (#137)

* fix(web): mock /api/auth/get-session in Dev login selector test

The "redirects to /login when auth is disabled and no user selected" test
fails because useSession() from better-auth/react calls /api/auth/get-session
which wasn't mocked, causing sessionLoading to stay true indefinitely.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

* fix(web): import App.tsx (not App.js) in test to get authDisabled bypass

The Dev login selector test was importing the compiled App.js instead of
the source App.tsx. App.js has different logic (uses import.meta.env.DEV
instead of API-based authDisabled) and doesn't implement the
sessionLoading bypass needed for tests to pass.

Also applied the rawSession/rawSessionLoading refactor in App.tsx that
bypasses useSession result when authDisabled=true.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

* fix(web): use extensionless import for App in test

The `.tsx` extension in the import path is not allowed without
`allowImportingTsExtensions` (TS5097). Use extensionless `../App`
which resolves correctly via moduleResolution: "bundler".

Co-Authored-By: Paperclip <noreply@paperclip.ing>

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>
---
 apps/web/src/App.tsx                | 5 ++++-
 apps/web/src/__tests__/App.test.tsx | 9 ++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index da93316..8840370 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -134,7 +134,10 @@ function AdminLayout() {
 export function App() {
   const location = useLocation();
   const [authDisabled, setAuthDisabled] = useState<boolean | null>(null);
-  const { data: session, isPending: sessionLoading } = useSession();
+  const { data: rawSession, isPending: rawSessionLoading } = useSession();
+  // In dev mode (authDisabled=true), session state is irrelevant - skip useSession result
+  const session = authDisabled ? null : rawSession;
+  const sessionLoading = authDisabled ? false : rawSessionLoading;
 
   useEffect(() => {
     fetch("/api/dev/config")
diff --git a/apps/web/src/__tests__/App.test.tsx b/apps/web/src/__tests__/App.test.tsx
index d677733..ea5aea8 100644
--- a/apps/web/src/__tests__/App.test.tsx
+++ b/apps/web/src/__tests__/App.test.tsx
@@ -1,7 +1,8 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, within, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
-import { App } from "../App.js";
+import { App } from "../App";
+
 
 // Mock fetch to return appropriate responses based on URL
 beforeEach(() => {
@@ -150,6 +151,12 @@ describe("Dev login selector", () => {
           }),
         } as Response);
       }
+      if (url === "/api/auth/get-session") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ user: null }),
+        } as Response);
+      }
       return Promise.resolve({ ok: true, json: async () => [] } as Response);
     }) as unknown as typeof fetch;