feat: add tests

app/components/Select.tsx

@@ -30,17 +30,17 @@ export default function Select({ options, onChange }: SelectProps) {
 
   return (
     <div className="relative h-10 w-96 rounded bg-white border border-gray-300">
-      <div
+      <button
         className="flex items-center px-4 w-full h-full"
         onClick={toggleSelect}
+        aria-expanded={isOpen}
+        aria-controls="listbox"
+        role="combobox"
       >
         {hasOption ? selectedOption.label : "Selecione"}
-      </div>
+      </button>
       {isOpen && (
-        <ul
-          className="absolute mt-1 py-4 top-full left-0 right-0 bg-white z-50 shadow rounded"
-          role="listbox"
-        >
+        <ul className="absolute mt-1 py-4 top-full left-0 right-0 bg-white z-50 shadow rounded">
           {options.map((option) => (
             <li
               key={option.value}

app/page.tsx

@@ -19,6 +19,10 @@ interface Pokemon {
   }[];
 }
 
+if (process.env.NEXT_PUBLIC_API_MOCKING) {
+  import("@/lib/mocks");
+}
+
 export default function Home() {
   const [pokemonName, setPokemonName] = useState("");
   const [pokemonInfo, setPokemonInfo] = useState({} as Pokemon);

lib/mocks/handlers/index.ts

@@ -1 +1,3 @@
-export const handlers = [];
+import { pokemonHandlers } from "./pokemon";
+
+export const handlers = [...pokemonHandlers];

lib/mocks/handlers/pokemons/bulbasaur.ts

@@ -60,7 +60,7 @@ export const bulbasaur = {
   order: 1,
   past_types: [],
   species: {
-    name: "bulbasaur",
+    name: "pikachu",
     url: "https://pokeapi.co/api/v2/pokemon-species/1/",
   },
   sprites: {

test/page.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen, act, waitFor } from "@testing-library/react";
+import user from "@testing-library/user-event";
+import RootLayout from "@/app/layout";
+import Page from "@/app/page";
+
+describe("Index page", () => {
+  it("render", () => {
+    render(
+      <RootLayout>
+        <Page />
+      </RootLayout>
+    );
+
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+  });
+
+  it("displays Bulbasaur pokemon when selecting grass type", async () => {
+    render(<Page />);
+
+    user.click(screen.getByRole("combobox"));
+
+    await waitFor(async () => {
+      user.click(screen.getByRole("option", { name: /grama/i }));
+    });
+
+    await waitFor(async () => {
+      expect(screen.getByText(/pikachu/i)).toBeInTheDocument();
+    });
+  });
+});

test/setup.ts

@@ -1,6 +1,17 @@
 import "@testing-library/jest-dom/extend-expect";
 import { cleanup } from "@testing-library/react";
 import { server } from "../lib/mocks/server";
+import { vi } from "vitest";
+
+vi.mock("next/font/google", () => {
+  return {
+    Inter: vi.fn().mockReturnValue({
+      className: "className",
+      variable: "variable",
+      style: { fontFamily: "fontFamily" },
+    }),
+  };
+});
 
 beforeAll(() => {
   cleanup();