diff --git a/src/app/features/store/pages/register-page/register-page.component.spec.ts b/src/app/features/store/pages/register-page/register-page.component.spec.ts index b22af37..bf7e886 100644 --- a/src/app/features/store/pages/register-page/register-page.component.spec.ts +++ b/src/app/features/store/pages/register-page/register-page.component.spec.ts @@ -3,6 +3,8 @@ import { provideRouter, Router } from '@angular/router'; import { of, throwError } from 'rxjs'; import { AuthService } from '../../../../core/services/auth/auth.service'; +import { ModalService } from '../../../../core/services/modal.service'; +import { ToastService } from '../../../../core/services/toast.service'; import { RegisterPageComponent } from './register-page.component'; describe('RegisterPageComponent', () => { @@ -23,10 +25,21 @@ describe('RegisterPageComponent', () => { }) ) }; + const modalService = { + openSimple: vi.fn().mockReturnValue(of(undefined)) + }; + const toastService = { + danger: vi.fn() + }; await TestBed.configureTestingModule({ imports: [RegisterPageComponent], - providers: [provideRouter([]), { provide: AuthService, useValue: authService }] + providers: [ + provideRouter([]), + { provide: AuthService, useValue: authService }, + { provide: ModalService, useValue: modalService }, + { provide: ToastService, useValue: toastService } + ] }).compileComponents(); const fixture = TestBed.createComponent(RegisterPageComponent); @@ -49,6 +62,10 @@ describe('RegisterPageComponent', () => { password: 'secret123', password_confirmation: 'secret123' }); + expect(modalService.openSimple).toHaveBeenCalledWith({ + content: 'Tu cuenta fue creada correctamente', + buttonLabel: 'Cerrar' + }); expect(navigateSpy).toHaveBeenCalledWith(['/login']); }); @@ -56,10 +73,21 @@ describe('RegisterPageComponent', () => { const authService = { register: vi.fn() }; + const modalService = { + openSimple: vi.fn() + }; + const toastService = { + danger: vi.fn() + }; await TestBed.configureTestingModule({ imports: [RegisterPageComponent], - providers: [provideRouter([]), { provide: AuthService, useValue: authService }] + providers: [ + provideRouter([]), + { provide: AuthService, useValue: authService }, + { provide: ModalService, useValue: modalService }, + { provide: ToastService, useValue: toastService } + ] }).compileComponents(); const fixture = TestBed.createComponent(RegisterPageComponent); @@ -81,10 +109,21 @@ describe('RegisterPageComponent', () => { const authService = { register: vi.fn() }; + const modalService = { + openSimple: vi.fn() + }; + const toastService = { + danger: vi.fn() + }; await TestBed.configureTestingModule({ imports: [RegisterPageComponent], - providers: [provideRouter([]), { provide: AuthService, useValue: authService }] + providers: [ + provideRouter([]), + { provide: AuthService, useValue: authService }, + { provide: ModalService, useValue: modalService }, + { provide: ToastService, useValue: toastService } + ] }).compileComponents(); const fixture = TestBed.createComponent(RegisterPageComponent); @@ -116,10 +155,21 @@ describe('RegisterPageComponent', () => { })) ) }; + const modalService = { + openSimple: vi.fn() + }; + const toastService = { + danger: vi.fn() + }; await TestBed.configureTestingModule({ imports: [RegisterPageComponent], - providers: [provideRouter([]), { provide: AuthService, useValue: authService }] + providers: [ + provideRouter([]), + { provide: AuthService, useValue: authService }, + { provide: ModalService, useValue: modalService }, + { provide: ToastService, useValue: toastService } + ] }).compileComponents(); const fixture = TestBed.createComponent(RegisterPageComponent); @@ -134,5 +184,6 @@ describe('RegisterPageComponent', () => { component.onSubmit(); expect(component.serverError()).toBe('El email ya esta en uso.'); + expect(toastService.danger).toHaveBeenCalledWith('El email ya esta en uso.'); }); }); diff --git a/src/app/features/store/pages/register-page/register-page.component.ts b/src/app/features/store/pages/register-page/register-page.component.ts index 7e2b052..dbf7236 100644 --- a/src/app/features/store/pages/register-page/register-page.component.ts +++ b/src/app/features/store/pages/register-page/register-page.component.ts @@ -10,6 +10,8 @@ import { import { Router } from '@angular/router'; import { AuthService } from '../../../../core/services/auth/auth.service'; +import { ModalService } from '../../../../core/services/modal.service'; +import { ToastService } from '../../../../core/services/toast.service'; import { ButtonComponent } from '../../../../shared/components/button/button.component'; import { InputComponent } from '../../../../shared/components/input/input.component'; @@ -40,6 +42,8 @@ export class RegisterPageComponent { private readonly formBuilder = inject(FormBuilder); private readonly router = inject(Router); private readonly authService = inject(AuthService); + private readonly modalService = inject(ModalService); + private readonly toastService = inject(ToastService); private readonly submittedState = signal(false); private readonly serverErrorState = signal(null); @@ -78,11 +82,18 @@ export class RegisterPageComponent { this.authService.register(this.form.getRawValue()).subscribe({ next: () => { this.isSubmittingState.set(false); - void this.router.navigate(['/login']); + this.modalService.openSimple({ + content: 'Tu cuenta fue creada correctamente', + buttonLabel: 'Cerrar' + }).subscribe(() => { + void this.router.navigate(['/login']); + }); }, error: (error: unknown) => { this.isSubmittingState.set(false); - this.serverErrorState.set(this.resolveErrorMessage(error)); + const errorMessage = this.resolveErrorMessage(error); + this.serverErrorState.set(errorMessage); + this.toastService.danger(errorMessage); } }); } diff --git a/src/app/shared/components/modal-shell/modal-shell.component.scss b/src/app/shared/components/modal-shell/modal-shell.component.scss index ce00709..1da346e 100644 --- a/src/app/shared/components/modal-shell/modal-shell.component.scss +++ b/src/app/shared/components/modal-shell/modal-shell.component.scss @@ -37,6 +37,7 @@ } .modal-shell__content { + min-height: 180px; max-height: calc(100dvh - 2rem); border-radius: 1.25rem; background: @@ -72,6 +73,10 @@ } .modal-shell__body { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; padding: 0 1.25rem 1.25rem; color: #303030; }