Merge pull request #32 from 2308-Bread/feat/testing

Cypress testing & Error page component

cypress.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from "cypress";
 export default defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
-      // implement node event listeners here
     },
+    baseUrl: "http://localhost:3000/"
   },
 });

cypress/e2e/detail_page_spec.cy.ts

@@ -0,0 +1,31 @@
+describe("BreadDetail Page", () => {
+  beforeEach(() => {
+    cy.intercept(
+      'GET',
+      'https://rails-bread-face5cd9a02c.herokuapp.com/api/v1/breads/Brazil/Pão%20de%20Queijo',
+      {
+        statusCode: 200,
+        fixture: "/mock-country.json",
+      }
+    );
+    cy.visit(encodeURI('/breads/Brazil/Pão de Queijo'));
+  });
+
+  it("should display the bread name and description", () => {
+    cy.get('h2').contains('Pão de Queijo');
+    cy.get('h3').contains('Pão de queijo is a famous Brazilian cheese bread made with cassava flour and cheese, resulting in a chewy and cheesy delight.');
+  });
+
+  it("should display the bread recipe", () => {
+    cy.get('.recipeDetail').contains('Ingredients:');
+    cy.get('.recipeDetail').contains('500g tapioca flour');
+    cy.get('.recipeDetail').contains('bake at 375°F (190°C) for 15-20 minutes.');
+  });
+
+  it("should navigate back to the bread list page using browser back action", () => {
+    cy.visit('/breads/Brazil');
+    cy.url().should('include', '/breads/Brazil');
+    cy.get('h2').contains('Breads from Brazil').should('be.visible');
+  });
+
+});

cypress/e2e/homepage_spec.cy.ts

@@ -0,0 +1,33 @@
+describe("Boulangerie Main Page", () => {
+  beforeEach(() => {
+    cy.intercept(
+      'GET',
+      'https://rails-bread-face5cd9a02c.herokuapp.com/api/v1/countries/Brazil',
+      { 
+        statusCode: 200,
+        fixture: "/mock-country.json",
+      }
+    )
+    cy.visit('/');
+  });
+
+  it("should display the title of the application", () => {
+    cy.get('h1').contains("Belongea's Boulangerie");
+  });
+
+  it("should display the intro to our application", () => {
+    cy.get('h2').contains("Select a country from our world bakery");
+  });
+
+  it("should have a working home button that navigates to '/'", () => {
+    cy.get('.nav-links a').contains('Home').click();
+    cy.visit('/');
+    cy.url().should('eq', Cypress.config('baseUrl'));
+    cy.location("pathname").should("eq", "/");
+  });
+
+  it("should display a map container", () => {
+    cy.get('.map-container').should('be.visible');
+  });
+
+});

cypress/e2e/list_page_spec.cy.ts

@@ -0,0 +1,26 @@
+describe("BreadList Page", () => {
+  beforeEach(() => {
+    cy.intercept(
+      'GET',
+      'https://rails-bread-face5cd9a02c.herokuapp.com/api/v1/breads/Brazil',
+      {
+        statusCode: 200,
+        fixture: "/mock-country.json",
+      }
+    );
+    cy.visit('/breads/Brazil');
+  });
+
+  it("should display the country name and description", () => {
+    cy.get('h2').contains('Breads from Brazil');
+    cy.get('p').contains('Pão de queijo is a famous Brazilian cheese bread');
+  });
+
+  it("should list the breads for that country", () => {
+    const breads = ["Pão de Queijo", "Beiju", "Bolo de Milho", "Broa"];
+    breads.forEach(bread => {
+      cy.get('ul').contains(bread);
+    });
+  });
+
+});

cypress/fixtures/mock-country.json

@@ -0,0 +1,106 @@
+{
+  "country": {
+      "data": {
+          "id": "3",
+          "type": "country",
+          "attributes": {
+              "name": "Brazil",
+              "description": "Pão de queijo is a famous Brazilian cheese bread made with cassava flour and cheese, resulting in a chewy and cheesy delight."
+          },
+          "relationships": {
+              "breads": {
+                  "data": [
+                      {
+                          "id": "13",
+                          "type": "bread"
+                      },
+                      {
+                          "id": "14",
+                          "type": "bread"
+                      },
+                      {
+                          "id": "15",
+                          "type": "bread"
+                      },
+                      {
+                          "id": "16",
+                          "type": "bread"
+                      }
+                  ]
+              }
+          }
+      }
+  },
+  "breads": {
+      "data": [
+          {
+              "id": "13",
+              "type": "bread",
+              "attributes": {
+                  "name": "Pão de Queijo",
+                  "description": "Pão de queijo is a famous Brazilian cheese bread made with cassava flour and cheese, resulting in a chewy and cheesy delight.",
+                  "recipe": "Ingredients: 500g tapioca flour 250ml milk 125g butter 10g salt 2 eggs 200g grated cheese Instructions: Boil milk with butter and salt. Pour over tapioca flour and mix. Let it cool, then add eggs and cheese. Form small balls and bake at 375°F (190°C) for 15-20 minutes."
+              },
+              "relationships": {
+                  "country": {
+                      "data": {
+                          "id": "3",
+                          "type": "country"
+                      }
+                  }
+              }
+          },
+          {
+              "id": "14",
+              "type": "bread",
+              "attributes": {
+                  "name": "Beiju",
+                  "description": "Beiju is a traditional Brazilian flatbread made from tapioca flour. It's thin, crispy, and versatile, often served with sweet or savory toppings.",
+                  "recipe": "Ingredients: Tapioca flour Water Salt Toppings of choice Instructions: Mix tapioca flour with water and a pinch of salt. Cook the mixture on a hot griddle until it forms a thin, crispy layer. Add your favorite toppings and enjoy!"
+              },
+              "relationships": {
+                  "country": {
+                      "data": {
+                          "id": "3",
+                          "type": "country"
+                      }
+                  }
+              }
+          },
+          {
+              "id": "15",
+              "type": "bread",
+              "attributes": {
+                  "name": "Bolo de Milho",
+                  "description": "Bolo de milho, or cornbread, is a popular Brazilian treat. It's sweet, moist, and often enjoyed with a cup of coffee or as a dessert.",
+                  "recipe": "Ingredients: 250g cornmeal 250ml milk 2 eggs 100g sugar 50g butter 1 tsp baking powder Instructions: Mix cornmeal, sugar, and baking powder. Add eggs, milk, and melted butter. Bake in a greased pan at 350°F (180°C) for 30-35 minutes."
+              },
+              "relationships": {
+                  "country": {
+                      "data": {
+                          "id": "3",
+                          "type": "country"
+                      }
+                  }
+              }
+          },
+          {
+              "id": "16",
+              "type": "bread",
+              "attributes": {
+                  "name": "Broa",
+                  "description": "Broa is a traditional Brazilian cornbread made with a mix of cornmeal and wheat flour. It has a dense texture and is commonly served with savory dishes.",
+                  "recipe": "Ingredients: 300g cornmeal 200g wheat flour 250ml milk 100g sugar 50g butter 1 tsp baking powder Instructions: Mix cornmeal, wheat flour, sugar, and baking powder. Add melted butter and milk. Bake in a greased pan at 350°F (180°C) for 25-30 minutes."
+              },
+              "relationships": {
+                  "country": {
+                      "data": {
+                          "id": "3",
+                          "type": "country"
+                      }
+                  }
+              }
+          }
+      ]
+  }
+}