Avances test e2e, merge necesario para desarrollo de la app

docs/06_runtime_view.adoc

@@ -52,16 +52,21 @@ Alice <-- Bob: another authentication Response
 actor Usuario
 database BaseDeDatos as "Base de datos" #blue
 database Pod as "Pod del usuario" #yellow
+database GeoCoder as "GeoCoder" #yellow
 Usuario -> DeDe: Abre el carrito
-DeDe <-- BaseDeDatos: Devuelve contenido del carrito del usuario
-Usuario <-- DeDe: Muestra lista de juguetes del carrito
-Usuario -> DeDe: Presiona botón realizar pedido
+DeDe <-- DeDe: Devuelve contenido del carrito del usuario
+Usuario <-- DeDe: Muestra pantalla de pago
+Usuario -> DeDe: Presiona botón de obtención de dirección POD
 DeDe -> Pod: Se solicita la dirección del usuario
 Usuario -> Pod: Inicia sesión en Pod y añade su dirección en la sección "notes" del mismo
 DeDe <-- Pod: Devuelve la dirección del usuario
-DeDe -> DeDe: Muestra la dirección y se calculan gastos de envío (API GeoCode)
-Usuario <-- DeDe: Muestra el precio y la dirección.
-Usuario -> DeDe: Recorre pantallas de pago hasta confirmar el pedido.
+Usuario -> DeDe: Continua con el proceso de compra
+DeDe -> GeoCoder: Solicita el calculo de los gastos de envío
+DeDe <-- GeoCoder: Se devuelven los gastos de envío.
+DeDe -> DeDe: Muestra la dirección y los gastos de envío
+Usuario -> DeDe: Continua con la revisión de compra
+DeDe -> DeDe: Muestra el resumen del pedido
+Usuario -> DeDe: Finaliza el pedido
 ----
 
 === Añadir productos

webapp/e2e/features/orders-history.feature

@@ -0,0 +1,5 @@
+Feature: Seeing my orders history
+Scenario: The orders history has orders
+  Given A user with some orders 
+  When I click the orders history button
+  Then Orders must be seen

webapp/e2e/steps/add-to-cart.steps.ts

@@ -13,7 +13,7 @@ defineFeature(feature, test => {
 
     browser = process.env.GITHUB_ACTIONS
       ? await puppeteer.launch()
-      : await puppeteer.launch({ headless: true });
+      : await puppeteer.launch({ headless: false, slowMo:100 });
       //: await puppeteer.launch({ headless: true });
     page = await browser.newPage();
 
@@ -42,14 +42,23 @@ defineFeature(feature, test => {
 
       //Clickamos el boton que despliega el carrito
       const addToCart =await page.$('button#botonAnadirAlCarrito');
-      await addToCart!.click();
-      await addToCart!.click();
+      await addToCart!.evaluate(a =>  {
+        if(a instanceof HTMLElement) {
+          a.click();
+        }
+      });
+
 
 
       //Clickamos el boton que despliega el carrito
-      const botonCarrito2 =await page.$('button#botonCarritoDesplegar');
-      await botonCarrito2!.click();
-    });
+      const botonCarrito =await page.$('button#botonCarritoDesplegar');
+      await botonCarrito!.evaluate(a =>  {
+        if(a instanceof HTMLElement) {
+          a.click();
+        }
+      });
+    }
+  );
 
     then('The cart should have an item', async () => {
       //En consecuencia, debería aparecer la palabra precio.

webapp/e2e/steps/orders-history.steps.ts

@@ -0,0 +1,90 @@
+import { defineFeature, loadFeature } from 'jest-cucumber';
+import puppeteer from "puppeteer";
+
+const feature = loadFeature('./features/orders-history.feature');
+
+let page: puppeteer.Page;
+let browser: puppeteer.Browser;
+
+defineFeature(feature, test => {
+
+    beforeAll(async () => {
+
+      browser = process.env.GITHUB_ACTIONS
+        ? await puppeteer.launch()
+        : await puppeteer.launch({ headless: false, slowMo:100 });
+        //: await puppeteer.launch({ headless: true });
+      page = await browser.newPage();
+
+      await page
+        .goto("http://localhost:3000/productos", {
+          waitUntil: "networkidle0",
+        })
+        .catch(() => {});
+    });
+    test('The orders history has orders', ({given,when,then} )=> {
+      let email:string;
+      let password:string;
+
+        given('A user with some orders',async () => {
+          email = "[email protected]";
+          password = "Prueba1!";
+        //Iniciamos en sesión auth0
+        const registerButton =await page.$('button#registerButton');
+        await registerButton!.evaluate(a =>  {
+          if(a instanceof HTMLElement) {
+            a.click();
+          }
+        });
+        await page.waitForNavigation();
+
+        //await expect(page).toClick("a");
+
+        await expect(page).toFill("input[name='email']", email);
+        await expect(page).toFill("input[name='password']", password);
+        await expect(page).toClick("button[name='submit']");
+        await page.waitForNavigation();
+        });
+
+        when('I click the orders history button', async () => {
+
+          //Clickamos el primer boton añadir al carrito que encontremos
+    /*
+          const addToCart = await page.$('button#botonAnadirAlCarrito');
+          const espera1=await addToCart!.click();
+          console.log(espera1);
+     */
+
+          //Clickamos el boton que despliega el carrito
+          const addToCart =await page.$('button#botonAnadirAlCarrito');
+          await addToCart!.evaluate(a =>  {
+            if(a instanceof HTMLElement) {
+              a.click();
+            }
+          });
+
+
+
+          //Clickamos el boton que despliega el carrito
+          const botonCarrito =await page.$('button#botonCarritoDesplegar');
+          await botonCarrito!.evaluate(a =>  {
+            if(a instanceof HTMLElement) {
+              a.click();
+            }
+          });
+        }
+      );
+
+        then('Orders must be seen', async () => {
+          //En consecuencia, debería aparecer la palabra precio.
+          await expect(page).toMatch('Precio')
+        });
+      })
+
+      afterAll(async ()=>{
+        browser.close()
+      })
+
+
+    });
+

webapp/e2e/steps/pay-process.steps.ts

@@ -11,7 +11,7 @@ defineFeature(feature, test => {
   beforeAll(async () => {
     browser = process.env.GITHUB_ACTIONS
       ? await puppeteer.launch()
-      : await puppeteer.launch({ headless: true, slowMo: 50 });
+      : await puppeteer.launch({ headless: false, slowMo: 100 });
      // : await puppeteer.launch({ headless: true });
     page = await browser.newPage();
 
@@ -31,10 +31,14 @@ defineFeature(feature, test => {
       password = "Prueba1!";
     //Iniciamos en sesión auth0
     const registerButton =await page.$('button#registerButton');
-    await registerButton!.click();
+    await registerButton!.evaluate(a =>  {
+      if(a instanceof HTMLElement) {
+        a.click();
+      }
+    });
     await page.waitForNavigation();
 
-    await expect(page).toClick("a");
+    //await expect(page).toClick("a");
 
     await expect(page).toFill("input[name='email']", email);
     await expect(page).toFill("input[name='password']", password);
@@ -46,11 +50,18 @@ defineFeature(feature, test => {
 
     //Clickamos el primer boton añadir al carrito que encontremos
       const addToCart =await page.$('button#botonAnadirAlCarrito');
-      await addToCart!.click();
-      await addToCart!.click();
+      await addToCart!.evaluate(a =>  {
+        if(a instanceof HTMLElement) {
+          a.click();
+        }
+      });
       //Clickamos el boton que despliega el carrito
       const botonCarrito2 =await page.$('button#botonCarritoDesplegar');
-      await botonCarrito2!.click();
+      await botonCarrito2!.evaluate(a =>  {
+        if(a instanceof HTMLElement) {
+          a.click();
+        }
+      });
     });
 
     when('We press the order button', async () => {

webapp/src/App.styles.ts

@@ -7,9 +7,10 @@ export const Wrapper = styled.div`
 export const StyledButton = styled(IconButton)`
     position: fixed;
     z-index: 100;
-    left: 87vw;
-    top: -83px;
+    left: 94.2vw;
+    top: -8.3vw;
     margin-top: 0;
     margin-right: 0em;
+
 `
 

webapp/src/App.tsx

@@ -187,7 +187,7 @@ const App = () => {
                         </Drawer>
                         <StyledButton id="botonCarritoDesplegar" onClick={() => setCartOpen(true)}>
                           <Badge badgeContent={getTotalItems(cartItems)} color='error'>
-                            <AddShoppingCartIcon fontSize="large" htmlColor='#000000' />
+                            <AddShoppingCartIcon fontSize="large" htmlColor='#ffffff' />
                           </Badge>
                         </StyledButton>
                       </div>
@@ -225,7 +225,7 @@ const App = () => {
                         </Drawer>
                         <StyledButton id="botonCarritoDesplegar" onClick={() => setCartOpen(true)}>
                           <Badge badgeContent={getTotalItems(cartItems)} color='error'>
-                            <AddShoppingCartIcon fontSize="large" htmlColor='#000000' />
+                            <AddShoppingCartIcon fontSize="large" htmlColor='#ffffff' />
                           </Badge>
                         </StyledButton>
                       </div>
@@ -262,7 +262,7 @@ const App = () => {
                         </Drawer>
                         <StyledButton id="botonCarritoDesplegar" onClick={() => setCartOpen(true)}>
                           <Badge badgeContent={getTotalItems(cartItems)} color='error'>
-                            <AddShoppingCartIcon fontSize="large" htmlColor='#000000' />
+                            <AddShoppingCartIcon fontSize="large" htmlColor="#ffffff"  />
                           </Badge>
                         </StyledButton>
                       </div>
@@ -299,7 +299,7 @@ const App = () => {
                         </Drawer>
                         <StyledButton id="botonCarritoDesplegar" onClick={() => setCartOpen(true)}>
                           <Badge badgeContent={getTotalItems(cartItems)} color='error'>
-                            <AddShoppingCartIcon fontSize="large" htmlColor='#000000' />
+                            <AddShoppingCartIcon fontSize="large" htmlColor='#ffffff' />
                           </Badge>
                         </StyledButton>
                       </div>
@@ -336,7 +336,7 @@ const App = () => {
                         </Drawer>
                         <StyledButton id="botonCarritoDesplegar" onClick={() => setCartOpen(true)}>
                           <Badge badgeContent={getTotalItems(cartItems)} color='error'>
-                            <AddShoppingCartIcon fontSize="large" htmlColor='#000000' />
+                            <AddShoppingCartIcon fontSize="large" htmlColor='#ffffff' />
                           </Badge>
                         </StyledButton>
                       </div>
@@ -373,7 +373,7 @@ const App = () => {
                         </Drawer>
                         <StyledButton id="botonCarritoDesplegar" onClick={() => setCartOpen(true)}>
                           <Badge badgeContent={getTotalItems(cartItems)} color='error'>
-                            <AddShoppingCartIcon fontSize="large" htmlColor='#000000' />
+                            <AddShoppingCartIcon fontSize="large"htmlColor='#ffffff' />
                           </Badge>
                         </StyledButton>
                       </div>
@@ -411,7 +411,7 @@ const App = () => {
                         </Drawer>
                         <StyledButton id="botonCarritoDesplegar" onClick={() => setCartOpen(true)}>
                           <Badge badgeContent={getTotalItems(cartItems)} color='error'>
-                            <AddShoppingCartIcon fontSize="large" htmlColor='#000000' />
+                            <AddShoppingCartIcon fontSize="large" htmlColor='#ffffff' />
                           </Badge>
                         </StyledButton>
                       </div>
@@ -443,7 +443,7 @@ const App = () => {
                         </Drawer>
                         <StyledButton id="botonCarritoDesplegar" onClick={() => setCartOpen(true)}>
                           <Badge badgeContent={getTotalItems(cartItems)} color='error'>
-                            <AddShoppingCartIcon fontSize="large" htmlColor='#000000' />
+                            <AddShoppingCartIcon fontSize="large" htmlColor='#ffffff' />
                           </Badge>
                         </StyledButton>
                       </div>

webapp/src/Cart/Cart.tsx

@@ -24,7 +24,7 @@ const Cart:React.FC<Props> = ({cartItems, addToCart, removeFromCart})=> {
     console.log(isAuthenticated)
     return (
         <Wrapper>
-            <Typography variant="h2" component="h2">Tu carrito</Typography>
+            <Typography color="textPrimary" variant="h2" component="h2">Tu carrito</Typography>
             {cartItems.length===0 ? <p>No hay juguetes en el carrito</p>: null}
             {cartItems.map(item=>(
                 <CartItem 

webapp/src/Item/Item.tsx

@@ -62,7 +62,7 @@ const Item: React.FC<Props> = ({ item, handleAddToCart }) => {
                         <h3>{item.nombre}</h3>
                         <p>{item.descripcion}</p>
                         <h3>{item.precio}€</h3>
-                        <Button id='botonAnadirAlCarrito' data-testid="botonAnadirAlCarrito" onClick={() => handleAddToCart(item)}>Añadir al carrito</Button>
+                        <Button id='botonAnadirAlCarrito'  onClick={() => handleAddToCart(item)}>Añadir al carrito</Button>
                     </div>
 
             }

webapp/src/PayForm/CategoriesBar.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@material-ui/core';
 import styled from 'styled-components';
 import './categories.css';
 //import { Juguete } from '../shared/sharedJuguete';
@@ -21,6 +22,8 @@ const Separator = styled.div`
  background-color: #d3707c;
 `
 
+
+
 const CategoriesBar = ()=> {
     //let juguetes:Juguete[];
 

webapp/src/PayForm/Delivery.tsx

@@ -35,7 +35,7 @@ const Delivery:React.FC<Props> = ({cartItems, setDeliveryCost, deliveryCost, sig
             <Typography variant="h4" component="h2">Entrega</Typography>
             <p >Dirección de entrega: <b>{localStorage.getItem("direccion")}</b></p>
             </Paper>
-            <Card sx={{ maxWidth: 600 }} elevation={4}>
+            <Card sx={{ my: { xs: 2, md: 4 }, p: { xs: 2, md: 3 } }} elevation={4}>
           <CardContent>
             <Typography variant="h2" component="h2">Resumen</Typography>
               <p>Total productos(Imp. incluidos): <b>{price.toFixed(2)}€</b></p>