|
| 1 | +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; |
| 2 | +import { Router } from '@angular/router'; |
| 3 | +import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; |
| 4 | +import { ReactiveFormsModule } from '@angular/forms'; |
| 5 | +import { RouterTestingModule } from '@angular/router/testing'; |
| 6 | +import { of } from 'rxjs'; |
| 7 | +import { |
| 8 | + createMockPipe, |
| 9 | + MockAuthenticationService, |
| 10 | + MockAuthenticationServiceErrors, |
| 11 | + MockTranslateService |
| 12 | +} from '../_mocked'; |
| 13 | +import { NotificationType } from '../_models'; |
| 14 | +import { AuthenticationService } from '../_services'; |
| 15 | +import { TranslateService } from '../_translate'; |
| 16 | +import { LoginComponent } from '../login'; |
| 17 | +import { RegisterComponent } from '.'; |
| 18 | + |
| 19 | +describe('RegisterComponent', () => { |
| 20 | + let component: RegisterComponent; |
| 21 | + let fixture: ComponentFixture<RegisterComponent>; |
| 22 | + let submitBtn: HTMLInputElement; |
| 23 | + let authentication: AuthenticationService; |
| 24 | + let router: Router; |
| 25 | + |
| 26 | + const configureTestingModule = (errorMode = false): void => { |
| 27 | + TestBed.configureTestingModule({ |
| 28 | + imports: [ |
| 29 | + RouterTestingModule.withRoutes([{ path: './signin', component: LoginComponent }]), |
| 30 | + ReactiveFormsModule |
| 31 | + ], |
| 32 | + declarations: [RegisterComponent, createMockPipe('translate')], |
| 33 | + providers: [ |
| 34 | + { |
| 35 | + provide: AuthenticationService, |
| 36 | + useClass: errorMode ? MockAuthenticationServiceErrors : MockAuthenticationService |
| 37 | + }, |
| 38 | + { provide: TranslateService, useClass: MockTranslateService } |
| 39 | + ], |
| 40 | + schemas: [CUSTOM_ELEMENTS_SCHEMA] |
| 41 | + }).compileComponents(); |
| 42 | + router = TestBed.inject(Router); |
| 43 | + authentication = TestBed.inject(AuthenticationService); |
| 44 | + }; |
| 45 | + |
| 46 | + const b4Each = (): void => { |
| 47 | + fixture = TestBed.createComponent(RegisterComponent); |
| 48 | + component = fixture.componentInstance; |
| 49 | + fixture.detectChanges(); |
| 50 | + }; |
| 51 | + |
| 52 | + const fillValidForm = (): void => { |
| 53 | + component.registerForm.controls.email.setValue('[email protected]'); |
| 54 | + component.registerForm.controls.passwords.controls.password.setValue('!Passw0rd123'); |
| 55 | + component.registerForm.controls.passwords.controls.confirm.setValue('!Passw0rd123'); |
| 56 | + }; |
| 57 | + |
| 58 | + describe('Normal operations', () => { |
| 59 | + beforeEach(async(() => { |
| 60 | + configureTestingModule(); |
| 61 | + })); |
| 62 | + |
| 63 | + beforeEach(b4Each); |
| 64 | + |
| 65 | + it('should create', () => { |
| 66 | + expect(component).toBeTruthy(); |
| 67 | + }); |
| 68 | + |
| 69 | + it('updates the password on key-up', () => { |
| 70 | + expect(component.password).toBeFalsy(); |
| 71 | + component.registerForm.controls.passwords.controls.password.setValue('password'); |
| 72 | + expect(component.password).toBeFalsy(); |
| 73 | + component.onKeyupPassword(); |
| 74 | + expect(component.password).toBeTruthy(); |
| 75 | + }); |
| 76 | + |
| 77 | + it('should contain a form', () => { |
| 78 | + expect(fixture.nativeElement.querySelector('.metis-register-form') === null).toBe(false); |
| 79 | + }); |
| 80 | + |
| 81 | + it('should contain a disabled button at first', () => { |
| 82 | + submitBtn = fixture.nativeElement.querySelector('app-loading-button'); |
| 83 | + expect(submitBtn.disabled).toBe(true); |
| 84 | + }); |
| 85 | + |
| 86 | + it('should not register if submit fails', fakeAsync(() => { |
| 87 | + spyOn(router, 'navigate'); |
| 88 | + spyOn(authentication, 'register').and.callFake(() => { |
| 89 | + return of(false); |
| 90 | + }); |
| 91 | + fillValidForm(); |
| 92 | + component.onSubmit(); |
| 93 | + tick(3000); |
| 94 | + tick(1); |
| 95 | + fixture.detectChanges(); |
| 96 | + expect(router.navigate).not.toHaveBeenCalled(); |
| 97 | + })); |
| 98 | + |
| 99 | + it('should submit the form and redirect', fakeAsync(() => { |
| 100 | + spyOn(router, 'navigate'); |
| 101 | + submitBtn = fixture.nativeElement.querySelector('app-loading-button'); |
| 102 | + fillValidForm(); |
| 103 | + component.onSubmit(); |
| 104 | + tick(3000); |
| 105 | + tick(1); |
| 106 | + fixture.detectChanges(); |
| 107 | + expect(submitBtn.disabled).toBeFalsy(); |
| 108 | + expect(component.loading).toBeFalsy(); |
| 109 | + expect(router.navigate).toHaveBeenCalledWith(['/signin']); |
| 110 | + })); |
| 111 | + |
| 112 | + it('should reject weak password', () => { |
| 113 | + submitBtn = fixture.nativeElement.querySelector('app-loading-button'); |
| 114 | + component.registerForm.controls.email.setValue('[email protected]'); |
| 115 | + component.registerForm.controls.passwords.controls.password.setValue(''); |
| 116 | + component.registerForm.controls.passwords.controls.confirm.setValue(''); |
| 117 | + expect(submitBtn.disabled).toBeTruthy(); |
| 118 | + component.onSubmit(); |
| 119 | + fixture.detectChanges(); |
| 120 | + expect(component.notification).toBeTruthy(); |
| 121 | + if (component.notification) { |
| 122 | + expect(component.notification.type).toEqual(NotificationType.ERROR); |
| 123 | + } |
| 124 | + }); |
| 125 | + }); |
| 126 | + |
| 127 | + describe('Error handling', () => { |
| 128 | + beforeEach(async(() => { |
| 129 | + configureTestingModule(true); |
| 130 | + })); |
| 131 | + |
| 132 | + beforeEach(b4Each); |
| 133 | + |
| 134 | + it('should handle submit errors', fakeAsync(() => { |
| 135 | + fillValidForm(); |
| 136 | + component.onSubmit(); |
| 137 | + tick(1); |
| 138 | + fixture.detectChanges(); |
| 139 | + expect(component.notification).toBeTruthy(); |
| 140 | + if (component.notification) { |
| 141 | + expect(component.notification.type).toEqual(NotificationType.ERROR); |
| 142 | + } |
| 143 | + })); |
| 144 | + }); |
| 145 | +}); |
0 commit comments