Fix test linting errors and complete implementation

Co-authored-by: oBusk <[email protected]>

Author: Copilot

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/app/[...parts]/_page/DiffIntro/SpecBox.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { forwardRef, type HTMLAttributes } from "react";
 import Pkg from "^/components/ui/Pkg";
 import PkgWithVersionSelector from "^/components/ui/PkgWithVersionSelector";

src/app/[...parts]/_page/DiffIntro/VersionSelector.test.tsx

@@ -1,6 +1,6 @@
 // @jest-environment jsdom
 
-import { render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { useRouter } from "next/navigation";
 import VersionSelector from "./VersionSelector";
 
@@ -79,7 +79,7 @@ describe("VersionSelector", () => {
             json: async () => mockVersions,
         } as Response);
 
-        const { container } = render(
+        render(
             <VersionSelector
                 currentSpec={{ name: "react", version: "18.0.0" }}
                 otherSpec={{ name: "react", version: "17.0.0" }}
@@ -91,11 +91,8 @@ describe("VersionSelector", () => {
             expect(screen.getByRole("combobox")).toBeInTheDocument();
         });
 
-        const select = container.querySelector("select");
-        if (select) {
-            select.value = "18.2.0";
-            select.dispatchEvent(new Event("change", { bubbles: true }));
-        }
+        const select = screen.getByRole("combobox") as HTMLSelectElement;
+        fireEvent.change(select, { target: { value: "18.2.0" } });
 
         await waitFor(() => {
             expect(mockPush).toHaveBeenCalledWith(
@@ -115,7 +112,7 @@ describe("VersionSelector", () => {
             json: async () => mockVersions,
         } as Response);
 
-        const { container } = render(
+        render(
             <VersionSelector
                 currentSpec={{ name: "react", version: "17.0.0" }}
                 otherSpec={{ name: "react", version: "18.0.0" }}
@@ -127,11 +124,8 @@ describe("VersionSelector", () => {
             expect(screen.getByRole("combobox")).toBeInTheDocument();
         });
 
-        const select = container.querySelector("select");
-        if (select) {
-            select.value = "18.2.0";
-            select.dispatchEvent(new Event("change", { bubbles: true }));
-        }
+        const select = screen.getByRole("combobox") as HTMLSelectElement;
+        fireEvent.change(select, { target: { value: "18.2.0" } });
 
         await waitFor(() => {
             expect(mockPush).toHaveBeenCalledWith(