From f4fc6cb220610f44efc3369b0aa90a1e034e3d0c Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Wed, 6 Nov 2024 00:29:46 +0000
Subject: [PATCH] Fix issue #4774: '[Bug]: "Import Project" button does not
 work as expected'

---
 frontend/__tests__/import-project.test.tsx | 74 ++++++++++++++++++++++
 frontend/src/routes/_oh._index/route.tsx   |  1 -
 2 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 frontend/__tests__/import-project.test.tsx

diff --git a/frontend/__tests__/import-project.test.tsx b/frontend/__tests__/import-project.test.tsx
new file mode 100644
index 000000000000..bf84101fbe27
--- /dev/null
+++ b/frontend/__tests__/import-project.test.tsx
@@ -0,0 +1,74 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Provider } from "react-redux";
+import store from "../src/store";
+import { describe, it, expect, vi } from "vitest";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
+
+const mockNavigate = vi.fn();
+
+// Mock the Remix components
+vi.mock("@remix-run/react", async () => {
+  const actual = await vi.importActual("@remix-run/react");
+  return {
+    ...actual,
+    useLoaderData: () => ({
+      repositories: null,
+      githubAuthUrl: null,
+    }),
+    useRouteLoaderData: () => null,
+    useNavigate: () => mockNavigate,
+    Await: ({ children }) => children(null),
+    Form: ({ children, onSubmit }: any) => (
+      <form onSubmit={(e) => { e.preventDefault(); onSubmit?.(e); }}>
+        {children}
+      </form>
+    ),
+  };
+});
+
+// Mock the SuggestionBox component
+vi.mock("../src/components/github-repositories-suggestion-box", () => ({
+  GitHubRepositoriesSuggestionBox: () => null,
+}));
+
+// Mock the SuggestionBubble component
+vi.mock("../src/components/suggestion-bubble", () => ({
+  SuggestionBubble: () => null,
+}));
+
+// Mock the ChatInput component
+vi.mock("../src/components/chat-input", () => ({
+  ChatInput: () => null,
+}));
+
+describe("Import Project", () => {
+  it("should not navigate immediately after selecting a zip file", async () => {
+    // Import the component after mocking
+    const { default: Home } = await import("../src/routes/_oh._index/route");
+
+    const router = createMemoryRouter([
+      {
+        path: "/",
+        element: (
+          <Provider store={store}>
+            <Home />
+          </Provider>
+        ),
+      },
+    ]);
+
+    render(<RouterProvider router={router} />);
+
+    // Find the file input
+    const fileInput = screen.getByLabelText("Upload a .zip");
+    
+    // Create a mock file
+    const file = new File(["dummy content"], "test.zip", { type: "application/zip" });
+    
+    // Simulate file selection
+    fireEvent.change(fileInput, { target: { files: [file] } });
+    
+    // Verify that navigate was not called
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/routes/_oh._index/route.tsx b/frontend/src/routes/_oh._index/route.tsx
index 5f1df1b6c0a1..42108eb87eb2 100644
--- a/frontend/src/routes/_oh._index/route.tsx
+++ b/frontend/src/routes/_oh._index/route.tsx
@@ -118,7 +118,6 @@ function Home() {
                       if (event.target.files) {
                         const zip = event.target.files[0];
                         setImportedFile(zip);
-                        navigate("/app");
                       } else {
                         // TODO: handle error
                       }