Bump Remix and add Registration e2e test

app/components/search/search-input.tsx

@@ -1,4 +1,4 @@
-import { Form, Link, useFetcher } from "@remix-run/react";
+import { Form, Link, useFetcher, useNavigation } from "@remix-run/react";
 import { useCombobox } from "downshift";
 import { SearchIcon } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -13,6 +13,8 @@ import { Separator } from "../common/ui/separator";
 
 export function SearchInput() {
   const fetcher = useFetcher<typeof loader>();
+  const [showResults, setShowResults] = useState(false);
+  const navigation = useNavigation();
   const [query, setQuery] = useState("");
   let [debouncedQuery] = useDebounce(query, 300);
 
@@ -22,8 +24,13 @@ export function SearchInput() {
       { query: debouncedQuery },
       { method: "GET", action: "/api/realtime-search" }
     );
+    setShowResults(true);
   }, [debouncedQuery]);
 
+  useEffect(() => {
+    setShowResults(false);
+  }, [navigation.location?.pathname]);
+
   const { getInputProps, getMenuProps } = useCombobox({
     items: fetcher.data || [],
   });
@@ -55,23 +62,23 @@ export function SearchInput() {
         />
       </Form>
       <Card
-        id="search-list"
         className="absolute z-50 max-h-72 w-full overflow-scroll"
         {...getMenuProps()}
       >
-        <ul className="space-y-2">
-          {fetcher?.data?.map(({ slug, thumbnail, title }) => (
-            <li key={slug} className="flex items-center space-x-2">
-              <Link className="flex gap-4 p-2" to={`/listings/${slug}`}>
-                <img
-                  src={thumbnail}
-                  alt={title}
-                  className="h-12 w-12 rounded-md object-cover"
-                />
-                <h4>{title}</h4>
-              </Link>
-            </li>
-          ))}
+        <ul id="search-list" className="space-y-2">
+          {showResults &&
+            fetcher?.data?.map(({ slug, thumbnail, title }) => (
+              <li key={slug} className="flex items-center space-x-2">
+                <Link className="flex gap-4 p-2" to={`/listings/${slug}`}>
+                  <img
+                    src={thumbnail}
+                    alt={title}
+                    className="h-12 w-12 rounded-md object-cover"
+                  />
+                  <h4>{title}</h4>
+                </Link>
+              </li>
+            ))}
         </ul>
         {shouldShowAllResultsButton && (
           <>

package.json

@@ -37,9 +37,9 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
-    "@remix-run/node": "^2.1.0",
-    "@remix-run/react": "^2.1.0",
-    "@remix-run/serve": "^2.1.0",
+    "@remix-run/node": "^2.8.1",
+    "@remix-run/react": "^2.8.1",
+    "@remix-run/serve": "^2.8.1",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",
@@ -75,9 +75,9 @@
     "@faker-js/faker": "^8.3.1",
     "@jest/globals": "^29.3.1",
     "@playwright/test": "^1.41.2",
-    "@remix-run/dev": "^2.1.0",
-    "@remix-run/eslint-config": "^2.1.0",
-    "@remix-run/testing": "^2.3.0",
+    "@remix-run/dev": "^2.8.1",
+    "@remix-run/eslint-config": "^2.8.1",
+    "@remix-run/testing": "^2.8.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.5.1",

playwright/features/auth/login.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from "@playwright/test";
+import { userData } from "prisma/fixtures";
+
+test("can log in successfully", async ({ page }) => {
+  await page.goto("/");
+
+  await page.getByRole("link", { name: "Log in" }).click();
+  await page.getByRole("main").getByRole("link", { name: "Log in" }).click();
+  await page.locator("#login-identifier-form-emailOrUsername").click();
+
+  await page
+    .locator("#login-identifier-form-emailOrUsername")
+    .fill(userData.email);
+  await page.getByRole("button", { name: "Next" }).click();
+
+  expect(page.getByText("Welcome back " + userData.username)).toBeVisible();
+
+  await page.locator("#login-challenge-form-password").click();
+
+  await page.locator("#login-challenge-form-password").fill(userData.password);
+
+  await page.getByRole("button", { name: "Log in" }).click();
+
+  await page.waitForURL("/");
+
+  expect(await page.getByRole("button", { name: "User avatar" })).toBeVisible();
+});
+
+test("shows an error if no username or email is input", async ({ page }) => {
+  await page.goto("/");
+
+  await page.getByRole("link", { name: "Log in" }).click();
+  await page.getByRole("main").getByRole("link", { name: "Log in" }).click();
+
+  await page.locator("#login-identifier-form-emailOrUsername").click();
+  await page.getByRole("button", { name: "Next" }).click();
+
+  expect(page.getByText("Email or username is required")).toBeVisible();
+});

playwright/features/auth/registration.spec.ts

@@ -1,5 +1,6 @@
 import { faker } from "@faker-js/faker";
 import { test, expect } from "@playwright/test";
+import { userData } from "prisma/fixtures";
 
 test("can successfully register", async ({ page }) => {
   await page.goto("/");
@@ -28,11 +29,11 @@ test("cannot register if the username or email are taken", async ({ page }) => {
   await page.getByRole("link", { name: "Log in" }).click();
 
   await page.getByLabel("Username").click();
-  await page.getByLabel("Username").fill("TestUser");
+  await page.getByLabel("Username").fill(userData.username);
   await page.getByLabel("Username").press("Tab");
-  await page.getByLabel("Email").fill("[email protected]");
+  await page.getByLabel("Email").fill(userData.email);
   await page.getByLabel("Email").press("Tab");
-  await page.getByLabel("Password").fill("password");
+  await page.getByLabel("Password").fill(userData.password);
 
   await page.getByRole("button", { name: "Sign up" }).click();
 
@@ -50,11 +51,11 @@ test("can recover from an error state", async ({ page }) => {
   await page.getByRole("link", { name: "Log in" }).click();
 
   await page.getByLabel("Username").click();
-  await page.getByLabel("Username").fill("TestUser");
+  await page.getByLabel("Username").fill(userData.username);
   await page.getByLabel("Username").press("Tab");
-  await page.getByLabel("Email").fill("[email protected]");
+  await page.getByLabel("Email").fill(userData.email);
   await page.getByLabel("Email").press("Tab");
-  await page.getByLabel("Password").fill("password");
+  await page.getByLabel("Password").fill(userData.password);
 
   await page.getByRole("button", { name: "Sign up" }).click();