Añadidos iconos y reaparacion de errores menores

karma.conf.js

@@ -3,14 +3,14 @@
 
 module.exports = function (config) {
   config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
     plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage"),
+      require("@angular-devkit/build-angular/plugins/karma"),
     ],
     client: {
       jasmine: {
@@ -19,26 +19,26 @@ module.exports = function (config) {
         // for example, you can disable the random execution with `random: false`
         // or set a specific seed with `seed: 4321`
       },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
+      suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/tienda-chocolates-veganos'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
+      dir: require("path").join(
+        __dirname,
+        "./coverage/tienda-chocolates-veganos"
+      ),
+      subdir: ".",
+      reporters: [{ type: "html" }, { type: "text-summary" }],
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ["progress", "kjhtml"],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ["Chrome"],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };

package.json

@@ -23,7 +23,6 @@
     "@ng-bootstrap/ng-bootstrap": "^12.0.2",
     "@popperjs/core": "^2.11.5",
     "bootstrap": "^5.1.3",
-    "bootstrap-icons": "^1.8.3",
     "firebase": "^9.6.11",
     "jquery": "^3.6.0",
     "primeflex": "^3.1.3",

src/app/app.component.spec.ts

 import { TestBed } from '@angular/core/testing';
+import { AngularFireDatabase } from '@angular/fire/compat/database';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { AuthService } from './shared/services/auth.service';
+import { CestaCompraService } from './shared/services/cesta-compra.service';
+import { DatabaseService } from './shared/services/database.service';
 
+class MockTestService {
+  constructor() {}
+  autoLogin() {}
+  recuperarCestaFromLocalStorage() {}
+}
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
+      providers: [
+        { provide: AuthService, useClass: MockTestService },
+        { provide: DatabaseService, useClass: MockTestService },
+        { provide: CestaCompraService, useClass: MockTestService },
+        { provide: AngularFireDatabase, useClass: MockTestService },
       ],
     }).compileComponents();
   });
@@ -25,11 +36,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app.title).toEqual('tiendaChocolatesVeganos');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('tiendaChocolatesVeganos app is running!');
-  });
 });

src/app/app.component.ts

@@ -20,9 +20,7 @@ export class AppComponent implements OnInit {
 
   ngOnInit() {
     this.primengConfig.ripple = true;
-    console.log('autologin pre');
     this.authService.autoLogin();
-    console.log('autologin post');
     this.cestaService.recuperarCestaFromLocalStorage();
   }
 }

src/app/cesta-compra/cesta/item-cesta/item-cesta.component.html

@@ -2,13 +2,13 @@
   <div class="container">
     <div class="col-12">
       <div class="pt-3 pb-3 border d-flex">
-        <div class="col-4 d-flex flex-column align-items-center">
+        <div class="col-4 d-flex flex-column align-items-center h-100">
           <a
             [routerLink]="[
               '/tienda/producto',
               entradaCesta.producto.productoID
             ]"
-            ><img [src]="imagen | async" class="imgAux ms-3"
+            ><img [src]="imagen | async" class="imgAux ms-3 h-100"
           /></a>
         </div>
         <div class="col-8 d-flex flex-column">
@@ -21,15 +21,16 @@
             ><h6>{{ entradaCesta.producto.nombre }}</h6></a
           >
 
-          <h6 class="">
+          <h6 class="mt-2">
             <label for="" class="verde-tienda"
               >{{ entradaCesta.producto.precio }} €</label
             >
             <label for="" class="ms-2">/ Unidad</label>
           </h6>
-          <div class="row">
-            <div class="col d-flex flex-column">
-              <label for="unidades">Unidades en la cesta</label>
+
+          <label for="unidades"
+            >Unidades en la cesta <i class="pi pi-shopping-bag ms-2"></i
+          ></label>
           <input
             type="number"
             [name]="entradaCesta.producto.productoID"
@@ -44,13 +45,11 @@
             *ngIf="botonCambiarUnidades"
             (click)="modificarCantidad()"
           >
-                Modificar cantidad
+            Modificar cantidad <i class="pi pi-check-circle ms-2"></i>
           </button>
-              <a class="text-dark fs-6" (click)="eliminarProducto()"
-                >Eliminar producto</a
-              >
-            </div>
-          </div>
+          <a class="mt-1 text-dark fs-6" (click)="eliminarProducto()"
+            >Eliminar producto <i class="pi pi-trash ms-2"></i
+          ></a>
         </div>
       </div>
     </div>

src/app/header/header.component.html

@@ -5,103 +5,6 @@
   rel="stylesheet"
 />
 
-<!-- <nav
-  class="navbar navbar-expand-lg navbar-light bg-verde-tienda fuente-ArDa fs-5 text-dark fw-bold"
->
-  <div
-    class="justify-content-center align-content-center mx-auto d-sm-flex d-block flex-sm-nowrap d-md-flex flex-md-nowrap"
-  >
-    <button
-      class="navbar-toggler"
-      type="button"
-      data-toggle="collapse"
-      data-target="#navbarNavDropdown"
-      aria-controls="navbarNavDropdown"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <a class="navbar-brand pe-5" routerLink="/homepage">
-      <img
-        src="../../assets/chocolate_icon.png"
-        width="30"
-        height="30"
-        class="d-inline-block"
-        alt=""
-      />
-      Nombre Tienda Vegana
-    </a>
-
-    <div class="collapse navbar-collapse" id="navbarNavDropdown">
-      <ul class="navbar-nav">
-        <li class="nav-item ps-5">
-          <a
-            class="nav-link"
-            routerLink="/tienda/tienda"
-            routerLinkActive="active"
-            >Tienda</a
-          >
-        </li>
-        <li class="nav-item">
-          <a
-            class="nav-link"
-            routerLink="/sobreNosotros"
-            routerLinkActive="active"
-            >Sobre Nosotros</a
-          >
-        </li>
-        <li class="nav-item">
-          <a
-            class="nav-link"
-            routerLink="/condiciones"
-            routerLinkActive="active"
-            >Condiciones del Servicio</a
-          >
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/contacto" routerLinkActive="active"
-            >Contacto</a
-          >
-        </li>
-        <li class="nav-item pe-5" *ngIf="user">
-          <a class="nav-link" routerLink="/perfil" routerLinkActive="active"
-            >Mi cuenta</a
-          >
-        </li>
-        <li class="nav-item pe-5" *ngIf="!user">
-          <a class="nav-link" routerLink="/auth" routerLinkActive="active"
-            >Mi cuenta</a
-          >
-        </li>
-
-        <li class="nav-item position-relative ps-5">
-          <div class="ml-auto mr-2">
-            <a
-              class="nav-link"
-              routerLink="/cesta"
-              routerLinkActive="cesta-active"
-            >
-              Cesta
-              <img
-                src="../../assets/shoping-bag-icon.png"
-                width="30"
-                height="30"
-                class="d-inline-block align-mid"
-                alt=""
-              />
-              <span
-                class="badge rounded-pill bg-fucsia position-absolute top-50 start-70p-1.5"
-                >{{ cesta.productosTotales }}</span
-              >
-            </a>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav> -->
-
 <nav
   class="navbar navbar-expand-xl navbar-light bg-verde-tienda fuente-ArDa fs-5 text-dark fw-bold"
 >
@@ -169,28 +72,19 @@
             >Mi cuenta</a
           >
         </li>
-        <!-- <li class="nav-item pe-5" *ngIf="!isUserAuthenticated">
-          <a class="nav-link" routerLink="/auth" routerLinkActive="active"
-            >Mi cuenta</a
-          >
-        </li> -->
       </ul>
       <ul class="navbar-nav mb-2 mb-lg-0 me-lg-5">
         <li class="nav-item position-relative ps-5 me-lg-5">
+          <div class="d-flex">
             <a class="nav-link" routerLink="/cesta" routerLinkActive="active">
               Cesta
-            <img
-              src="../../assets/shoping-bag-icon.png"
-              width="30"
-              height="30"
-              class="d-inline-block align-mid"
-              alt=""
-            />
-            <span
-              class="badge rounded-pill bg-fucsia position-absolute top-50 start-70 p-1.5"
-              >{{ cesta.productos.length }}</span
-            >
+
+              <i class="pi pi-shopping-bag fs-4 ms-3"></i>
+              <span class="badge rounded-pill bg-fucsia p-1.5 ms-1">{{
+                cesta.productos.length
+              }}</span>
             </a>
+          </div>
         </li>
       </ul>
     </div>

src/app/mi-cuenta/completar-registro/completar-registro.component.html

@@ -348,12 +348,7 @@
               "
             >
               Finalizar registro
-              <div *ngIf="loading" class="lds-ring">
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
-              </div>
+              <i *ngIf="loading" class="pi pi-spin pi-spinner"> </i>
               <i *ngIf="!loading" class="ps-2 pi pi-angle-double-right"></i>
             </button>
           </div>

src/app/mi-cuenta/inicio-sesion-registro/inicio-sesion-registro.component.html

@@ -52,9 +52,7 @@
                 type="submit"
               >
                 Iniciar Sesion
-                <div *ngIf="loading">
-                  <app-ring-spinner></app-ring-spinner>
-                </div>
+                <i *ngIf="loading" class="pi pi-spinner pi-spin"> </i>
                 <i *ngIf="!loading" class="ps-2 pi pi-angle-double-right"></i>
               </button>
             </div>

src/app/mi-cuenta/perfil-cuenta/datos-pago/datos-pago.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AuthService } from 'src/app/shared/services/auth.service';
+
+import { DatosPagoComponent } from './datos-pago.component';
+class MockAuthService {
+  constructor() {}
+
+  recuperarCestaFromLocalStorage() {}
+}
+describe('DatosPagoComponent', () => {
+  let component: DatosPagoComponent;
+  let fixture: ComponentFixture<DatosPagoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DatosPagoComponent],
+      providers: [{ provide: AuthService, useClass: MockAuthService }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatosPagoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/mi-cuenta/perfil-cuenta/datos-personales/datos-personales.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BehaviorSubject } from 'rxjs';
+import { Usuario } from 'src/app/shared/interfaces/usuario';
+import { AuthService } from 'src/app/shared/services/auth.service';
+import { DatabaseService } from 'src/app/shared/services/database.service';
+
+import { DatosPersonalesComponent } from './datos-personales.component';
+class MockAuthService {
+  constructor() {}
+  userBS = new BehaviorSubject<any>(new Usuario());
+  recuperarCestaFromLocalStorage() {}
+}
+describe('DatosPersonalesComponent', () => {
+  let component: DatosPersonalesComponent;
+  let fixture: ComponentFixture<DatosPersonalesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DatosPersonalesComponent],
+      providers: [
+        { provide: AuthService, useClass: MockAuthService },
+        { provide: DatabaseService, useClass: MockAuthService },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatosPersonalesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/mi-cuenta/perfil-cuenta/direcciones/direcciones.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BehaviorSubject } from 'rxjs';
+import { Usuario } from 'src/app/shared/interfaces/usuario';
+import { AuthService } from 'src/app/shared/services/auth.service';
+
+import { DireccionesComponent } from './direcciones.component';
+class MockAuthService {
+  constructor() {}
+  userBS = new BehaviorSubject<any>(new Usuario());
+  recuperarCestaFromLocalStorage() {}
+}
+describe('DireccionesComponent', () => {
+  let component: DireccionesComponent;
+  let fixture: ComponentFixture<DireccionesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DireccionesComponent],
+      providers: [{ provide: AuthService, useClass: MockAuthService }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DireccionesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/mi-cuenta/perfil-cuenta/pedidos/pedido-perfil/pedido-perfil-item/pedido-perfil-item.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AngularFireStorage } from '@angular/fire/compat/storage';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { Usuario } from 'src/app/shared/interfaces/usuario';
+import { AuthService } from 'src/app/shared/services/auth.service';
+import { DatabaseService } from 'src/app/shared/services/database.service';
+
+import { PedidoPerfilItemComponent } from './pedido-perfil-item.component';
+class MockAuthService {
+  constructor() {}
+  userBS = new BehaviorSubject<any>(new Usuario());
+  recuperarCestaFromLocalStorage() {}
+  getProductoFromDatabase(): Observable<any> {
+    return new Observable<any>();
+  }
+}
+describe('PedidoPerfilItemComponent', () => {
+  let component: PedidoPerfilItemComponent;
+  let fixture: ComponentFixture<PedidoPerfilItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PedidoPerfilItemComponent],
+      providers: [
+        { provide: AuthService, useClass: MockAuthService },
+        { provide: DatabaseService, useClass: MockAuthService },
+        { provide: AngularFireStorage, useClass: MockAuthService },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PedidoPerfilItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/mi-cuenta/perfil-cuenta/pedidos/pedido-perfil/pedido-perfil-item/pedido-perfil-item.component.ts

@@ -3,6 +3,7 @@ import { AngularFireStorage } from '@angular/fire/compat/storage';
 import { Observable, take } from 'rxjs';
 import { Producto } from 'src/app/shared/interfaces/producto.model';
 import { DatabaseService } from 'src/app/shared/services/database.service';
+import { ProductoComponent } from 'src/app/tienda/modulo-productos/producto/producto.component';
 
 @Component({
   selector: 'app-pedido-perfil-item',
@@ -13,6 +14,9 @@ export class PedidoPerfilItemComponent implements OnInit {
   @Input('productoUnidades') productoUnidades: {
     productoID: string;
     unidades: number;
+  } = {
+    productoID: '',
+    unidades: 0,
   };
   public producto: Producto;
 

src/app/mi-cuenta/perfil-cuenta/perfil-cuenta.component.html

@@ -6,35 +6,40 @@
         class="border border-dark border-bottom-0 p-2"
       >
         <a routerLink="datosPersonales" class="ps-4 p-2 text-dark"
-          >Mis datos personales</a
-        >
+          >Mis datos personales<i class="pi pi-user ms-3"></i
+        ></a>
       </div>
       <div
         routerLinkActive="bg-verde-tienda"
         class="border border-dark border-bottom-0 p-2"
       >
-        <a routerLink="pedidos" class="ps-4 p-2 text-dark">Mis pedidos</a>
+        <a routerLink="pedidos" class="ps-4 p-2 text-dark"
+          >Mis pedidos<i class="pi pi-box ms-3"></i
+        ></a>
       </div>
       <div
         routerLinkActive="bg-verde-tienda"
         class="border border-dark border-bottom-0 p-2"
       >
         <a routerLink="direcciones" href="" class="ps-4 p-2 text-dark"
-          >Mis direcciones</a
-        >
+          >Mis direcciones<i class="pi pi-building ms-3"></i
+        ></a>
       </div>
       <div
         routerLinkActive="bg-verde-tienda"
         class="border border-dark border-bottom-0 p-2"
       >
         <a routerLink="datosPago" class="ps-4 p-2 text-dark"
-          >Mis datos de pago</a
-        >
+          >Mis datos de pago<i class="pi pi-credit-card ms-3"></i
+        ></a>
       </div>
-      <div class="border border-dark p-2" routerLinkActive="bg-verde-tienda">
-        <a routerLink="cerrarSesion" class="ps-4 p-2 text-dark"
-          >Cerrar Sesión</a
+      <div
+        class="border border-dark p-2 d-flex align-items-center"
+        routerLinkActive="bg-verde-tienda"
       >
+        <a routerLink="cerrarSesion" class="ps-4 p-2 text-dark"
+          >Cerrar Sesión <i class="pi pi-power-off ms-3"></i
+        ></a>
       </div>
     </div>
     <div class="col-md-8 col-sm-12">

src/app/shared/interfaces/pedido.model.ts

-import { stringify } from 'querystring';
-
 export class Pedido {
   uid: string /* numero identificador del usuario del pedido */;
   fechaPedido: number /* Fecha en la que se realizó el pedido */;

src/app/shared/services/auth.service.ts

@@ -31,26 +31,20 @@ export class AuthService {
     if (userLogged) {
       this.userBS.next(new Usuario());
     }
-    console.log(userLogged);
 
     const userCredential: UserCredential = JSON.parse(
       localStorage.getItem('userCredential')
     );
-    console.log(userCredential);
 
     if (!userLogged) {
       return;
     }
     this.auth.onAuthStateChanged((user) => {
-      console.log(user);
-
       if (user) {
         this.databaseService
           .getUserFromDatabase(user.uid)
           .pipe(take(1))
           .subscribe((userDB: Usuario) => {
-            console.log(userDB);
-
             this.userBS.next(userDB);
             localStorage.setItem('userLogged', 'true');
             userCredential.user = user;
@@ -61,7 +55,6 @@ export class AuthService {
             );
           });
       } else {
-        console.log('logout');
         this.logOut();
       }
     });
@@ -84,7 +77,7 @@ export class AuthService {
           localStorage.setItem('userCredential', JSON.stringify(userAuth));
           this.credential = userAuth;
           this.password = '';
-          this.router.navigate(['/perfil']);
+          this.router.navigate(['/tienda/tienda']);
         });
 
       /* to do - recuperar los productos en la cesta del usuario */

src/app/shared/services/cesta-compra.service.ts

@@ -26,8 +26,6 @@ export class CestaCompraService implements OnDestroy {
   ) {
     this.userSubscription = this.authService.userBS.subscribe(
       (user: Usuario) => {
-        console.log(user);
-
         if (user === null) {
           return;
         }
@@ -64,8 +62,6 @@ export class CestaCompraService implements OnDestroy {
   recuperarCestaFromLocalStorage() {
     this.cesta = new Cesta();
     let cesta: Cesta = JSON.parse(localStorage.getItem('cesta'));
-    console.log(cesta);
-    console.log(this.cesta);
     if (cesta) {
       this.cesta = cesta;
     }