[feat] Add E2E testing

cypress.config.ts

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

cypress/e2e/eduardo.cy.ts

+// I will E2E test the article page.
+// User visits home -> User clicks on "laws or advice" -> List renders with 200

cypress/e2e/eliam.cy.ts

+// I will E2E test the article page.
+// User visits home -> User clicks on "laws or advice" -> Article page contains the title

cypress/e2e/sergio.cy.ts

+describe("Our app", () => {
+  beforeEach(() => {
+    cy.intercept("GET", "http://localhost:3000/api/getTopicList/*", {
+      fixture: "topics",
+    }).as("getTopicList");
+
+    cy.intercept("GET", "http://localhost:3000/api/getTopic/*", {
+      fixture: "article",
+    }).as("getTopic");
+
+    cy.viewport("iphone-x");
+    cy.visit("/");
+  });
+
+  it("shows the home page", () => {
+    cy.visit("/");
+    cy.contains("Bienvenidos");
+  });
+
+  it("shows a video in the home page", () => {
+    cy.visit("/");
+    cy.get("iframe").should("be.visible");
+  });
+
+  it("shows the about page", () => {
+    cy.visit("/about");
+    cy.contains("Renacer Social");
+  });
+
+  it("shows the individual service pages", () => {
+    cy.visit("/about");
+    cy.get(".item").first().click();
+    cy.contains("Casita de Paz");
+  });
+
+  it("shows the advice pages", () => {
+    cy.visit("/advice");
+    // Wait until the request to the intercept is completed.
+    cy.wait("@getTopicList");
+    cy.get(".item").first().click();
+    cy.wait("@getTopic");
+  });
+
+  it("allows exiting the individual service pages", () => {
+    cy.visit("/about");
+    cy.get(".item").first().click();
+    cy.get(".back-button-has-icon-only").first().click();
+    cy.contains("Servicios");
+  });
+});

cypress/fixtures/topics.json

+[
+  {
+    "blockId": "07ffbf26-babe-4c6a-b046-c7eb6d5c1a7f",
+    "name": "Pasa tiempo con tus hijos"
+  },
+  {
+    "blockId": "754d8ef3-14ae-4af6-a8c3-4ac4ede4d49d",
+    "name": "10 consejos para un matrimonio feliz"
+  },
+  {
+    "blockId": "d9fbaf7c-8f89-43b3-945c-927ed90e098b",
+    "name": "Busca ayuda si eres abusado/abusada"
+  }
+]

cypress/support/commands.ts

+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

     "workbox-streams": "^5.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3001 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
     "eject": "react-scripts eject",
     "@capacitor/cli": "4.4.0",
     "@ionic/lab": "3.2.15",
     "@types/lodash": "^4.14.191",
+    "cypress": "^12.1.0",
     "husky": "^8.0.0",
     "pretty-quick": "^3.1.3"
   },

src/components/TopicList.tsx

   topics: Topic[];
   loading?: boolean;
 }> = ({ title, topics, loading }) => {
+  console.log(topics);
   return (
     <IonList>
       {title ? (
       {loading && <ListSkeleton />}
 
       {!loading &&
+        topics &&
         topics.map((topic: Topic) => {
           return (
             <IonItem

src/pages/AboutListPage.tsx

 import {
   IonContent,
   IonHeader,
+  IonImg,
   IonItem,
+  IonLabel,
   IonList,
+  IonListHeader,
   IonPage,
   IonTitle,
   IonToolbar,
             <IonTitle size="large">About</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <div className="ion-padding">
+        <IonContent className="ion-padding">
+          <div className="video">
+            <iframe
+              src="https://www.youtube.com/embed/MRo8FR2l6VM"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            ></iframe>
+          </div>
           <h5>Bienvenidos</h5>
           <p>
-            Aqui tenemos una lista de las cosas que Renacer Social ofrece a la
-            sociedad.
+            Renacer Social ha iniciado una campaña de orientación a la comunidad
+            para que los niños y niñas puedan denunciar su situación de
+            maltrato. Con una seña discreta que consta de una “X” formada frente
+            al torso con los dedos índice, el menor puede dar alerta de su
+            situación de maltrato. Es responsabilidad de todos denunciar la
+            posible situación de maltrato si vemos a un menor realizar dicha
+            seña.
           </p>
-        </div>
+          <IonList>
+            <IonListHeader>
+              <IonLabel>Servicios</IonLabel>
+            </IonListHeader>
+            <IonItem routerLink={`/services/casita`}>
+              <p className="ListItemText">Casita de Paz</p>
+            </IonItem>
+            <IonItem routerLink={`/services/Crecemos`}>
+              <p className="ListItemText">Crecemos</p>
+            </IonItem>
+            <IonItem routerLink={`/services/Lazos`}>
+              <p className="ListItemText">Proyecto Lazos</p>
+            </IonItem>
+            <IonItem routerLink={`/services/Supervisadas`}>
+              <p className="ListItemText">Visitas Supervisadas</p>
+            </IonItem>
+          </IonList>
+        </IonContent>
       </IonContent>
-      <IonList>
-        <IonItem routerLink={`/services/casita`}>
-          <p className="ListItemText">Casita de Paz</p>
-        </IonItem>
-      </IonList>
-
-      <IonList>
-        <IonItem routerLink={`/services/Crecemos`}>
-          <p className="ListItemText">Crecemos</p>
-        </IonItem>
-      </IonList>
-
-      <IonList>
-        <IonItem routerLink={`/services/Lazos`}>
-          <p className="ListItemText">Proyecto Lazos</p>
-        </IonItem>
-      </IonList>
-
-      <IonList>
-        <IonItem routerLink={`/services/Supervisadas`}>
-          <p className="ListItemText">Visitas Supervisadas</p>
-        </IonItem>
-      </IonList>
     </IonPage>
   );
 };

src/pages/AdviceListPage.tsx

 
 const AdviceListPage: React.FC = () => {
   const { data: paternidad, error: paternidadError } = useSWR<Topic[]>(
-    "/api/getTopicList?type=advice&category=Paternidad",
+    "/api/getTopicList/?type=advice&category=Paternidad",
     fetcher
   );
   const { data: matrimonio, error: matrimonioError } = useSWR<Topic[]>(
-    "/api/getTopicList?type=advice&category=Matrimonio",
+    "/api/getTopicList/?type=advice&category=Matrimonio",
     fetcher
   );
   const { data: abuso, error: abusoError } = useSWR<Topic[]>(
-    "/api/getTopicList?type=advice&category=Abuso%20Sexual",
+    "/api/getTopicList/?type=advice&category=Abuso%20Sexual",
     fetcher
   );
   const error = paternidadError || matrimonioError || abusoError;

src/pages/ArticlePage.tsx

   match,
 }) => {
   const { data, error } = useSWR<any>(
-    `/api/getTopic?id=${match.params.articleId}`,
+    `/api/getTopic/?id=${match.params.articleId}`,
     fetcher
   );
   const isLoading = !data && !error;

src/pages/Home.tsx

           </IonToolbar>
         </IonHeader>
         <div className="ion-padding">
-          <h5>Bienvenidos</h5>
+          <div className="video">
+            <iframe
+              src="https://www.youtube.com/embed/xCtgekNpxI4"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            ></iframe>
+          </div>
+          <h2>Bienvenidos</h2>
           <p>
             Somos una organización Lorem Ipsum is simply dummy text of the
             printing and typesetting industry. Lorem Ipsum.
           </p>
+
+          <h3>Si se encuentra en peligro llame al 9-1-1 o al 787-343-2020</h3>
+          <p>
+            Si usted se encuentra en peligro inminente, llame a la Policía de
+            Puerto Rico al 9-1-1 o al 787-343-2020. Debe buscar protección para
+            usted y los suyos de manera inmediata. NO ESPERE.
+          </p>
         </div>
       </IonContent>
     </IonPage>

src/pages/LawListPage.tsx

 import {
   IonContent,
   IonHeader,
-  IonLoading,
   IonPage,
   IonTitle,
   IonToast,

src/theme/global.css

 .notion-blank {
   display: none !important;
 }
+
+.video {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+}
+
+/* Then style the iframe to fit in the container div with full height and width */
+.video iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}