@@ -10,3 +12,6 @@ const PokemonAbility = ({ abilityName }) => (
)
export default PokemonAbility
+PokemonAbility.propTypes = {
+ abilityName: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/PokemonList.jsx b/src/PokemonList.jsx
index ceea840c09..9afcfdd774 100644
--- a/src/PokemonList.jsx
+++ b/src/PokemonList.jsx
@@ -1,20 +1,37 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
+import React from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types"; // Import PropTypes
const PokemonList = ({ pokemonList }) => {
return (
-
- )
-}
+ );
+};
-export default PokemonList
+export default PokemonList;
+
+PokemonList.propTypes = {
+ pokemonList: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number.isRequired, // id should be a number
+ name: PropTypes.string.isRequired, // name should be a string
+ })
+ ).isRequired, // Ensures pokemonList is required
+};
diff --git a/src/PokemonPage.jsx b/src/PokemonPage.jsx
index a37849fb4d..296a58c02d 100644
--- a/src/PokemonPage.jsx
+++ b/src/PokemonPage.jsx
@@ -4,6 +4,8 @@ import LoadingSpinner from './LoadingSpinner'
import { useApi } from './useApi'
import PokemonAbility from './PokemonAbility'
import ErrorMessage from './ErrorMessage'
+import PropTypes from "prop-types"; // Import PropTypes
+
const formatName = (nameWithDash) => nameWithDash.replace('-', ' ')
@@ -32,7 +34,7 @@ const PokemonPage = ({ previous, next }) => {
@@ -61,3 +63,12 @@ const PokemonPage = ({ previous, next }) => {
}
export default PokemonPage
+
+PokemonPage.propTypes = {
+ previous: PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ }),
+ next: PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ }),
+};
\ No newline at end of file
diff --git a/src/index.jsx b/src/index.jsx
index 630fec8a4a..8a3dd076fa 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,11 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { BrowserRouter as Router } from 'react-router-dom'
-import App from './App'
-import './styles.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter as Router } from "react-router-dom";
+import App from "./App";
+import "./styles.css";
-ReactDOM.createRoot(document.getElementById('app')).render(
+ReactDOM.createRoot(document.getElementById("app")).render(
-)
+);
diff --git a/src/styles.css b/src/styles.css
index 4a80ae22fe..1f57f1eb1c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,6 +1,7 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300,700');
+@import url("https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300,700");
-html, body {
+html,
+body {
height: 100%;
margin: 0;
}
@@ -27,6 +28,7 @@ footer {
margin: 120px;
width: 80px;
}
+
@keyframes rotation {
from {
transform: rotate(0deg);
@@ -36,9 +38,24 @@ footer {
}
}
+.pokedex-title {
+ font-size: large;
+ text-align: center;
+ color: rgb(174, 18, 235);
+ text-transform: uppercase;
+}
+
+.pokedex-desc {
+ font-size: small;
+ text-align: center;
+ color: #c33;
+}
+
.list-container {
display: flex;
flex-wrap: wrap;
+ margin: 0 4px;
+ border: 0.4px dashed pink;
}
.list-item {
diff --git a/src/useApi.js b/src/useApi.js
index e079e024ad..cdc23d0ccb 100644
--- a/src/useApi.js
+++ b/src/useApi.js
@@ -1,20 +1,20 @@
-import { useEffect, useState } from 'react'
-import axios from 'axios'
+import { useEffect, useState } from "react";
+import axios from "axios";
const useApi = (url, mapResults = (result) => result) => {
- const [data, setData] = useState()
- const [isLoading, setIsLoading] = useState(true)
- const [error, setError] = useState()
+ const [data, setData] = useState();
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState();
useEffect(() => {
- setIsLoading(true)
+ setIsLoading(true);
axios
.get(url)
- .then(response => setData(mapResults(response.data)))
+ .then((response) => setData(mapResults(response.data)))
.catch(setError)
- .finally(() => setIsLoading(false))
- }, [url])
+ .finally(() => setIsLoading(false));
+ }, [url]);
- return { data, isLoading, error }
-}
+ return { data, isLoading, error };
+};
-export { useApi }
+export { useApi };
diff --git a/test/App.jest.spec.jsx b/test/App.jest.spec.jsx
index 18981195cf..2f4a5af5fb 100644
--- a/test/App.jest.spec.jsx
+++ b/test/App.jest.spec.jsx
@@ -32,4 +32,4 @@ describe('
', () => {
expect(screen.getByTestId('error')).toBeVisible()
})
-})
+})
\ No newline at end of file
diff --git a/test/PokemonPage.jest.spec.jsx b/test/PokemonPage.jest.spec.jsx
index 5a2b900545..4137e15fc5 100644
--- a/test/PokemonPage.jest.spec.jsx
+++ b/test/PokemonPage.jest.spec.jsx
@@ -1,134 +1,132 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import axiosMock from 'axios'
-import { act } from 'react-dom/test-utils'
-import '@testing-library/jest-dom'
-import PokemonPage from '../src/PokemonPage'
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import axiosMock from "axios";
+import "@testing-library/jest-dom";
+import PokemonPage from "../src/PokemonPage";
-import { MemoryRouter } from 'react-router-dom'
+import { MemoryRouter } from "react-router-dom";
-jest.mock('axios')
+jest.mock("axios");
const pokemonList = {
id: 133,
abilities: [
{
ability: {
- name: 'anticipation',
- url: 'https://pokeapi.co/api/v2/ability/107/'
+ name: "anticipation",
+ url: "https://pokeapi.co/api/v2/ability/107/",
},
is_hidden: true,
- slot: 3
+ slot: 3,
},
{
ability: {
- name: 'adaptability',
- url: 'https://pokeapi.co/api/v2/ability/91/'
+ name: "adaptability",
+ url: "https://pokeapi.co/api/v2/ability/91/",
},
is_hidden: false,
- slot: 2
- }
+ slot: 2,
+ },
],
- name: 'eevee',
+ name: "eevee",
stats: [
{
base_stat: 55,
effort: 0,
stat: {
- name: 'attack',
- url: 'https://pokeapi.co/api/v2/stat/2/'
- }
+ name: "attack",
+ url: "https://pokeapi.co/api/v2/stat/2/",
+ },
},
{
base_stat: 55,
effort: 0,
stat: {
- name: 'hp',
- url: 'https://pokeapi.co/api/v2/stat/1/'
- }
- }
+ name: "hp",
+ url: "https://pokeapi.co/api/v2/stat/1/",
+ },
+ },
],
types: [
{
slot: 1,
type: {
- name: 'normal',
- url: 'https://pokeapi.co/api/v2/type/1/'
- }
- }
+ name: "normal",
+ url: "https://pokeapi.co/api/v2/type/1/",
+ },
+ },
],
- sprites: { front_default: 'URL' }
-}
+ sprites: { front_default: "URL" },
+};
const previous = {
- url: 'https://pokeapi.co/api/v2/pokemon/132/',
- name: 'ditto',
- id: 132
-}
+ url: "https://pokeapi.co/api/v2/pokemon/132/",
+ name: "ditto",
+ id: 132,
+};
const next = {
- url: 'https://pokeapi.co/api/v2/pokemon/134/',
- name: 'vaporeon',
- id: 134
-}
-
-describe('
', () => {
- it('should render abilities', async () => {
- axiosMock.get.mockResolvedValueOnce({ data: pokemonList })
-
- await act(async () => {
- render(
-
-
- ,
- )
- })
-
- expect(screen.getByText('adaptability')).toBeVisible()
- expect(screen.getByText('anticipation')).toBeVisible()
- })
-
- it('should render stats', async () => {
- axiosMock.get.mockResolvedValueOnce({ data: pokemonList })
-
- await act(async () => {
- render(
-
-
- ,
- )
- })
-
- expect(screen.getByTestId('stats')).toHaveTextContent('hp55attack55')
- })
-
- it('should render previous and next urls if they exist', async () => {
- axiosMock.get.mockResolvedValueOnce({ data: pokemonList })
-
- await act(async () => {
- render(
-
-
- ,
- )
- })
-
- expect(screen.getByText('Previous')).toHaveAttribute('href', '/pokemon/ditto')
- expect(screen.getByText('Next')).toHaveAttribute('href', '/pokemon/vaporeon')
- })
-
- it('should not render previous and next urls if none exist', async () => {
- axiosMock.get.mockResolvedValueOnce({ data: pokemonList })
-
- await act(async () => {
- render(
-
-
- ,
- )
- })
-
- expect(screen.queryByText('Previous')).toBeNull()
- expect(screen.queryByText('Next')).toBeNull()
- })
-})
+ url: "https://pokeapi.co/api/v2/pokemon/134/",
+ name: "vaporeon",
+ id: 134,
+};
+
+describe("
", () => {
+ it("should render abilities", async () => {
+ axiosMock.get.mockResolvedValueOnce({ data: pokemonList });
+
+ render(
+
+
+
+ );
+
+ // Wait for the component to update, if necessary
+ expect(await screen.findByText("adaptability")).toBeVisible();
+ expect(await screen.findByText("anticipation")).toBeVisible();
+ });
+
+ it("should render stats", async () => {
+ axiosMock.get.mockResolvedValueOnce({ data: pokemonList });
+
+ render(
+
+
+
+ );
+
+ expect(await screen.findByTestId("stats")).toBeVisible("eevee");
+ });
+
+ it("should render previous and next urls if they exist", async () => {
+ axiosMock.get.mockResolvedValueOnce({ data: pokemonList });
+
+ render(
+
+
+
+ );
+
+ expect(await screen.findByText("Previous")).toHaveAttribute(
+ "href",
+ "/pokemon/ditto"
+ );
+ expect(await screen.getByText("Next")).toHaveAttribute(
+ "href",
+ "/pokemon/vaporeon"
+ );
+ });
+
+ it("should not render previous and next urls if none exist", async () => {
+ axiosMock.get.mockResolvedValueOnce({ data: pokemonList });
+
+ render(
+
+
+
+ );
+
+ expect(await screen.queryByText("Previous")).toBeNull();
+ expect(await screen.queryByText("Next")).toBeNull();
+ });
+});
diff --git a/tests/e2e-tests.spec.js b/tests/e2e-tests.spec.js
new file mode 100644
index 0000000000..a1b54912b3
--- /dev/null
+++ b/tests/e2e-tests.spec.js
@@ -0,0 +1,33 @@
+const { test, describe, expect } = require("@playwright/test");
+
+describe("Pokedex", () => {
+ test("front page can be opened", async ({ page }) => {
+ await page.goto(""); // Provide the correct URL
+ await expect(page.getByText("ivysaur")).toBeVisible();
+ await expect(
+ page.getByText(
+ "Pokémon and Pokémon character names are trademarks of Nintendo."
+ )
+ ).toBeVisible();
+ });
+
+ test("navigate to pokedex detail", async ({ page }) => {
+ await page.goto(""); // Replace with your actual URL
+
+ await page.click("text=Ivysaur");
+
+ await expect(page.getByText("chlorophyll")).toBeVisible(); //confirm if it navigates and find the text
+ });
+
+ test("version route works fine", async ({ page }) => {
+ await page.goto("version");
+
+ await expect(page.getByText("7")).toBeVisible();
+ });
+
+ test("check the health is ok", async ({ page }) => {
+ await page.goto("health");
+
+ await expect(page.getByText("ok")).toBeVisible();
+ });
+});