update metadata and refactor tests

.gitignore

@@ -35,5 +35,6 @@ yarn-error.log*
 next-env.d.ts
 
 cypress/videos
+cypress/screenshots
 
 /test-results

cypress/e2e/GenerationPage.cy.ts

@@ -1,44 +1,31 @@
 describe("Use cases of the Generation Page", () => {
   it("when initiated the generation page should display the page info", () => {
     cy.visit(`${Cypress.config().baseUrl}/generation/1`);
-    cy.contains("Region");
-    cy.contains("Pokemons: 151");
+    cy.contains("Region").should("exist");
+    cy.contains("Pokemons: 151").should("exist");
     cy.percySnapshot();
   });
 
   it("when clicked in a pokemon in the listing should redirect to pokemon page", () => {
     cy.visit(`${Cypress.config().baseUrl}/generation/1`);
     cy.get("[data-testid=pokemon-details-section]").should("not.exist");
-
-    cy.get("[data-testid=pokemon-listing]").within(() => {
-      cy.get("a").contains("bulbasaur").click();
-    });
-
+    cy.get("[data-testid=pokemon-listing] a").contains("bulbasaur").click();
     cy.get("[data-testid=pokemon-details-section]").should("exist");
-
-    cy.url().should("be.equal", `${Cypress.config().baseUrl}/generation/1/pokemon/bulbasaur`);
+    cy.url().should("eq", `${Cypress.config().baseUrl}/generation/1/pokemon/bulbasaur`);
   });
 
   it("when searching for a pokemon should display the correct one in the listing", () => {
     cy.visit(`${Cypress.config().baseUrl}/generation/1`);
-
-    cy.get("[data-testid=pokemon-listing]").within(() => {
-      cy.get("#search-input").type("but");
-
-      cy.get("a").should("have.length", 3);
-      cy.get("a").contains("kabuto");
-      cy.get("a").contains("butterfree");
-      cy.get("a").contains("kabutops");
-    });
+    cy.get("#search-input").type("but");
+    cy.get("[data-testid=pokemon-listing] a").should("have.length", 3);
+    cy.get("[data-testid=pokemon-listing] a").contains("kabuto").should("exist");
+    cy.get("[data-testid=pokemon-listing] a").contains("butterfree").should("exist");
+    cy.get("[data-testid=pokemon-listing] a").contains("kabutops").should("exist");
   });
 
   it("when searching for an unknown pokemon should display nothing in the listing", () => {
     cy.visit(`${Cypress.config().baseUrl}/generation/1`);
-
-    cy.get("[data-testid=pokemon-listing]").within(() => {
-      cy.get("#search-input").type("bbb");
-
-      cy.get("a").should("have.length", 0);
-    });
+    cy.get("#search-input").type("bbb");
+    cy.get("[data-testid=pokemon-listing] a").should("have.length", 0);
   });
 });

cypress/e2e/GenerationsPage.cy.ts

@@ -1,21 +1,18 @@
 describe("Use cases of the initial page (Generations Page)", () => {
   it("when initiated should render the generations page", () => {
     cy.visit(Cypress.config().baseUrl);
-    cy.get("a").contains("Generation I");
+    cy.get("a").contains("Generation I").should("exist");
     cy.percySnapshot();
   });
 
   it("when tried to access an invalid route should display an error message", () => {
     cy.visit(`${Cypress.config().baseUrl}/test`);
-
-    cy.contains("Page Not Found");
+    cy.contains("Page Not Found").should("exist");
   });
 
   it("when clicked in a generation link should redirect to generation page", () => {
     cy.visit(Cypress.config().baseUrl);
-
     cy.get("a").contains("Generation I").click();
-
-    cy.url().should("be.equal", `${Cypress.config().baseUrl}/generation/1`);
+    cy.url().should("eq", `${Cypress.config().baseUrl}/generation/1`);
   });
 });

cypress/e2e/Header.cy.ts

@@ -1,33 +1,16 @@
-/* eslint-disable */
-// Disable ESLint to prevent failing linting inside the Next.js repo.
-// If you're using ESLint on your project, we recommend installing the ESLint Cypress plugin instead:
-// https://github.com/cypress-io/eslint-plugin-cypress
-
-// Cypress E2E Test
 describe("Use cases of the Header", () => {
   it("when back button is clicked should return to the previous page", () => {
-    // Start from the index page
     cy.visit(Cypress.config().baseUrl);
-
-    cy.get("h1").contains("PokeSearch");
-
+    cy.get("h1").contains("PokeSearch").should("exist");
     cy.get("a").contains("Generation I").click();
-
-    cy.url().should("be.equal", `${Cypress.config().baseUrl}/generation/1`);
-
+    cy.url().should("eq", `${Cypress.config().baseUrl}/generation/1`);
     cy.get("button").contains("Back").click();
-
-    cy.url().should("be.equal", `${Cypress.config().baseUrl}/`);
+    cy.url().should("eq", `${Cypress.config().baseUrl}/`);
   });
 
   it("when changed the lang selector should change the language of the page", () => {
     cy.visit(Cypress.config().baseUrl);
-
     cy.get("[data-testid=lang-select]").select("fr");
-
-    cy.contains("Créé par Claudivan");
+    cy.contains("Créé par Claudivan").should("exist");
   });
 });
-
-// Prevent TypeScript from reading file as legacy script
-export {};

cypress/e2e/PokemonPage.cy.ts

@@ -1,35 +1,22 @@
 describe("Use cases of the Pokemon Page", () => {
   it("when initiated the Pokemon Page should display the pokemon info", () => {
     cy.visit(`${Cypress.config().baseUrl}/generation/1/pokemon/bulbasaur`);
-
-    cy.get("[data-testid=pokemon-header]").within(() => {
-      cy.get("[alt=bulbasaur]").should("exist");
-    });
-
-    cy.get("[data-testid=pokemon-details-section]").within(() => {
-      cy.get("[data-testid=pokemon-evolution-stages]").should("exist");
-      cy.get("[data-testid=pokemon-stats]").should("exist");
-      cy.get("[data-testid=pokemon-header]").should("exist");
-    });
-
+    cy.get("[data-testid=pokemon-header] [alt=bulbasaur]").should("exist");
+    cy.get("[data-testid=pokemon-evolution-stages]").should("exist");
+    cy.get("[data-testid=pokemon-stats]").should("exist");
+    cy.get("[data-testid=pokemon-header]").should("exist");
     cy.percySnapshot();
   });
 
   it("when initiated the Pokemon Page with error should display the error message", () => {
     cy.visit(`${Cypress.config().baseUrl}/generation/1/pokemon/bulbasaur2`);
-
-    cy.contains("Pokemon Not Found");
+    cy.contains("Pokemon Not Found").should("exist");
   });
 
   it("when clicked in the pokemon evolution should change the page to the clicked pokemon", () => {
     cy.visit(`${Cypress.config().baseUrl}/generation/1/pokemon/bulbasaur`);
-
-    cy.get("[data-testid=pokemon-evolution-stages]").within(() => {
-      cy.get("a").should("have.length", 3);
-
-      cy.get("a").eq(1).click();
-
-      cy.url().should("be.equal", `${Cypress.config().baseUrl}/generation/1/pokemon/ivysaur`);
-    });
+    cy.get("[data-testid=pokemon-evolution-stages] a").should("have.length", 3);
+    cy.get("[data-testid=pokemon-evolution-stages] a").eq(1).click();
+    cy.url().should("eq", `${Cypress.config().baseUrl}/generation/1/pokemon/ivysaur`);
   });
 });

src/app/[locale]/generation/[generationId]/page.tsx

@@ -1,7 +1,22 @@
+import { Metadata } from "next";
+
 import App from "@/components/App";
 import ErrorPage from "@/components/ErrorPage";
 import { fetchGeneration, fetchGenerations } from "@/services/api.service";
 
+export async function generateMetadata({
+  params: { generationId },
+}: {
+  params: { generationId: string };
+}): Promise<Metadata> {
+  const generation = await fetchGeneration(generationId);
+
+  return {
+    title: `Pokesearch - ${generation.nameTranslated}`,
+    description: `Here you can find all the pokemons from ${generation.main_region.name} region`,
+  };
+}
+
 export default async function page({
   params: { generationId, locale },
 }: {

src/app/[locale]/generation/[generationId]/pokemon/[pokemonName]/page.tsx

@@ -1,7 +1,22 @@
+import { Metadata } from "next";
+
 import App from "@/components/App";
 import ErrorPage from "@/components/ErrorPage";
 import { fetchGeneration, fetchGenerations, fetchPokemon } from "@/services/api.service";
 
+export async function generateMetadata({
+  params: { pokemonName },
+}: {
+  params: { pokemonName: string };
+}): Promise<Metadata> {
+  const pokemon = await fetchPokemon(pokemonName);
+
+  return {
+    title: `Pokesearch - ${pokemon.nameTranslated}`,
+    description: pokemon.descriptionTranslated,
+  };
+}
+
 export default async function page({
   params: { generationId, pokemonName, locale },
 }: {