chore: (frontend) initial frontend tests

Signed-off-by: Jacob Potter <pttr.jcb@gmail.com>

.github/workflows/build.yml

@@ -67,7 +67,7 @@ jobs:
         run: npm run build
 
       - name: Test
-        run: npm run test:browser
+        run: npm run test
 
 
 

.gitignore

@@ -1,3 +1,5 @@
 
 .DS_Store
-api/.idea/dataSources.xml
+api/.idea/
+/frontend/coverage/
+/.vite/vitest/results.json

frontend/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test:browser": "vitest --workspace=vitest.workspace.ts --passWithNoTests"
+    "test": "vitest --workspace=vitest.workspace.ts --passWithNoTests"
   },
   "dependencies": {
     "@fontsource/roboto": "^5.0.14",
@@ -40,6 +40,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.0",
     "@vitest/browser": "^2.1.4",
+    "@vitest/coverage-v8": "^2.1.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",

frontend/src/components/pokemon/PokemonList.spec.tsx

@@ -0,0 +1,19 @@
+import {describe, expect, it, vi} from "vitest";
+import {PokemonList} from "./PokemonList.tsx";
+import {render} from "vitest-browser-react";
+import pokemon_page_1 from '../../fixtures/pokemon_page_1.json'
+
+
+describe("PokemonList", () => {
+    it("renders correctly", () => {
+        const mockPokemonSelect = vi.fn();
+        const {getByRole} = render(<PokemonList pokemon={pokemon_page_1.pokemon} pokemonId={"3"}
+                                                onPokemonSelect={mockPokemonSelect}/>);
+
+        const buttons = getByRole("button");
+
+        expect(buttons.all()).toHaveLength(12)
+
+    })
+
+})

frontend/src/components/pokemon/PokemonListItem.spec.tsx

@@ -0,0 +1,37 @@
+import {describe, expect, it, vi} from "vitest";
+import {render} from "vitest-browser-react";
+import {PokemonListItem} from "./PokemonListItem.tsx";
+import pokemon_page_1 from '../../fixtures/pokemon_page_1.json'
+
+
+describe("PokemonListItem", () => {
+
+    const mockPokemonSelect = vi.fn()
+
+    it("should render correctly", () => {
+        const {getByText, getByRole} = render(<PokemonListItem pokemonSpecies={pokemon_page_1.pokemon[0]}
+                                                               onPokemonSelect={mockPokemonSelect}/>)
+
+
+        expect(getByText("Bulbasaur")).toBeTruthy()
+        expect(getByRole("img")).toBeTruthy
+    })
+
+    it("should change style with active prop", () => {
+        const {getByRole} = render(<PokemonListItem pokemonSpecies={pokemon_page_1.pokemon[0]}
+                                                    onPokemonSelect={mockPokemonSelect}/>)
+
+        expect(getByRole("button").element().className.includes("active"))
+    })
+
+    it("should pass id when clicked", async () => {
+        const {getByRole} = render(<PokemonListItem pokemonSpecies={pokemon_page_1.pokemon[0]}
+                                                    onPokemonSelect={mockPokemonSelect}/>)
+
+        const button = getByRole("button");
+
+        await button.click()
+
+        expect(mockPokemonSelect).toHaveBeenCalledWith(1)
+    })
+})

frontend/src/components/pokemon/PokemonSummary.spec.tsx

@@ -0,0 +1,12 @@
+import {describe, expect, it} from "vitest";
+import {render} from "vitest-browser-react";
+import {PokemonSummary} from "./PokemonSummary.tsx";
+import pokemon_page_1 from '../../fixtures/pokemon_page_1.json'
+
+describe("PokemonSummary", () => {
+    it("Should render correctly", () => {
+        const {getByText} = render(<PokemonSummary pokemonSpecies={pokemon_page_1.pokemon[0]}/>);
+
+        expect(getByText('Bulbasaur')).toBeTruthy
+    })
+})

frontend/src/components/pokemon/PokemonSummary.tsx

@@ -44,11 +44,11 @@ export const PokemonSummary = ({pokemonSpecies}: PokemonSummaryProps) => {
             audioRef.current.addEventListener("timeupdate", handleTimeUpdate);
         }
 
-        const to = setTimeout(handlePlay, 400);
+        // const to = setTimeout(handlePlay, 400);
 
         return () => {
             audioRef.current && audioRef.current.removeEventListener("timeupdate", handleTimeUpdate);
-            clearTimeout(to)
+            // clearTimeout(to)
         }
 
     }, [selectedPokemonVariety?.cry]);

frontend/src/components/ui/pokedex/KeyboardButton.spec.tsx

@@ -0,0 +1,16 @@
+import {describe, expect, it, vi} from "vitest";
+import {KeyboardButton} from "./KeyboardButton.tsx";
+import {render} from "vitest-browser-react";
+
+describe("KeyboardButton", () => {
+
+    const mockOnClick = vi.fn()
+
+    it("should render correctly", async () => {
+        const {getByRole} = render(<KeyboardButton onClick={mockOnClick}/>);
+
+        await getByRole("button").click()
+
+        expect(mockOnClick).toHaveBeenCalled()
+    })
+})