diff --git a/src/app/shared/log-in/log-in.component.html b/src/app/shared/log-in/log-in.component.html index 8488486d2b..8648681ada 100644 --- a/src/app/shared/log-in/log-in.component.html +++ b/src/app/shared/log-in/log-in.component.html @@ -1,7 +1,13 @@
- - - + +
+ {{"login.form.or-divider" | translate}} +
+ +
+ + + {{"login.form.new-user" | translate}} + {{"login.form.forgot-password" | translate}}
diff --git a/src/app/shared/log-in/log-in.component.ts b/src/app/shared/log-in/log-in.component.ts index e7e5faa824..f203d6ca4a 100644 --- a/src/app/shared/log-in/log-in.component.ts +++ b/src/app/shared/log-in/log-in.component.ts @@ -17,7 +17,7 @@ export class LogInComponent implements OnInit, OnDestroy { * The authentication methods data * @type {AuthMethodModel[]} */ - @Input() authMethodData: Observable; + @Input() authMethodModels: Observable; @Input() isStandalonePage: boolean; @@ -47,7 +47,7 @@ export class LogInComponent implements OnInit, OnDestroy { // this.store.dispatch(new SetIsStandalonePageInAuthMethodsAction(this.isStandalonePage)); - this.authMethodData = this.store.pipe( + this.authMethodModels = this.store.pipe( select(getAuthenticationMethods), ); diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.html b/src/app/shared/log-in/methods/password/log-in-password.component.html index f49ceff575..ddd5083d44 100644 --- a/src/app/shared/log-in/methods/password/log-in-password.component.html +++ b/src/app/shared/log-in/methods/password/log-in-password.component.html @@ -24,9 +24,4 @@ - - - - {{"login.form.new-user" | translate}} - {{"login.form.forgot-password" | translate}} diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.spec.ts b/src/app/shared/log-in/methods/password/log-in-password.component.spec.ts new file mode 100644 index 0000000000..2ec27346fc --- /dev/null +++ b/src/app/shared/log-in/methods/password/log-in-password.component.spec.ts @@ -0,0 +1,130 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing'; +import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; + +import { By } from '@angular/platform-browser'; +import { Store, StoreModule } from '@ngrx/store'; +import { LogInPasswordComponent } from './log-in-password.component'; +import { EPerson } from '../../../../core/eperson/models/eperson.model'; +import { EPersonMock } from '../../../testing/eperson-mock'; +import { authReducer } from '../../../../core/auth/auth.reducer'; +import { TranslateModule } from '@ngx-translate/core'; +import { AuthService } from '../../../../core/auth/auth.service'; +import { AuthServiceStub } from '../../../testing/auth-service-stub'; +import { AppState } from '../../../../app.reducer'; +import { AuthMethodModel } from '../../../../core/auth/models/auth-method.model'; +import { AuthMethodType } from '../authMethods-type'; + +describe('LogInPasswordComponent', () => { + + let component: LogInPasswordComponent; + let fixture: ComponentFixture; + let page: Page; + let user: EPerson; + + const authState = { + authenticated: false, + loaded: false, + loading: false, + }; + + beforeEach(() => { + user = EPersonMock; + }); + + beforeEach(async(() => { + // refine the test module by declaring the test component + TestBed.configureTestingModule({ + imports: [ + FormsModule, + ReactiveFormsModule, + StoreModule.forRoot(authReducer), + TranslateModule.forRoot() + ], + declarations: [ + LogInPasswordComponent + ], + providers: [ + { provide: AuthService, useClass: AuthServiceStub }, + { provide: 'authMethodModelProvider', useValue: new AuthMethodModel(AuthMethodType.Password) } + ], + schemas: [ + CUSTOM_ELEMENTS_SCHEMA + ] + }) + .compileComponents(); + + })); + + beforeEach(inject([Store], (store: Store) => { + store + .subscribe((state) => { + (state as any).core = Object.create({}); + (state as any).core.auth = authState; + }); + + // create component and test fixture + fixture = TestBed.createComponent(LogInPasswordComponent); + + // get test component from the fixture + component = fixture.componentInstance; + + // create page + page = new Page(component, fixture); + + // verify the fixture is stable (no pending tasks) + fixture.whenStable().then(() => { + page.addPageElements(); + }); + + })); + + it('should create a FormGroup comprised of FormControls', () => { + fixture.detectChanges(); + expect(component.form instanceof FormGroup).toBe(true); + }); + + it('should authenticate', () => { + fixture.detectChanges(); + + // set FormControl values + component.form.controls.email.setValue('user'); + component.form.controls.password.setValue('password'); + + // submit form + component.submit(); + + // verify Store.dispatch() is invoked + expect(page.navigateSpy.calls.any()).toBe(true, 'Store.dispatch not invoked'); + }); + +}); + +/** + * I represent the DOM elements and attach spies. + * + * @class Page + */ +class Page { + + public emailInput: HTMLInputElement; + public navigateSpy: jasmine.Spy; + public passwordInput: HTMLInputElement; + + constructor(private component: LogInPasswordComponent, private fixture: ComponentFixture) { + // use injector to get services + const injector = fixture.debugElement.injector; + const store = injector.get(Store); + + // add spies + this.navigateSpy = spyOn(store, 'dispatch'); + } + + public addPageElements() { + const emailInputSelector = 'input[formcontrolname=\'email\']'; + this.emailInput = this.fixture.debugElement.query(By.css(emailInputSelector)).nativeElement; + + const passwordInputSelector = 'input[formcontrolname=\'password\']'; + this.passwordInput = this.fixture.debugElement.query(By.css(passwordInputSelector)).nativeElement; + } +} diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.ts b/src/app/shared/log-in/methods/password/log-in-password.component.ts index ec42ef9a51..114fd23309 100644 --- a/src/app/shared/log-in/methods/password/log-in-password.component.ts +++ b/src/app/shared/log-in/methods/password/log-in-password.component.ts @@ -1,28 +1,20 @@ -import { filter, map, takeWhile } from 'rxjs/operators'; -import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core'; +import { map } from 'rxjs/operators'; +import { Component, Inject, Input, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { select, Store } from '@ngrx/store'; import { Observable } from 'rxjs'; -import { - AuthenticateAction, - ResetAuthenticationMessagesAction -} from '../../../../core/auth/auth.actions'; +import { AuthenticateAction, ResetAuthenticationMessagesAction } from '../../../../core/auth/auth.actions'; -import { - getAuthenticationError, - getAuthenticationInfo, -} from '../../../../core/auth/selectors'; +import { getAuthenticationError, getAuthenticationInfo, } from '../../../../core/auth/selectors'; import { CoreState } from '../../../../core/core.reducers'; import { isNotEmpty } from '../../../empty.util'; import { fadeOut } from '../../../animations/fade'; -import { AuthService } from '../../../../core/auth/auth.service'; import { AuthMethodType } from '../authMethods-type'; import { renderAuthMethodFor } from '../authMethods-decorator'; import { AuthMethodModel } from '../../../../core/auth/models/auth-method.model'; - /** * /users/sign-in * @class LogInPasswordComponent @@ -70,13 +62,13 @@ export class LogInPasswordComponent implements OnInit { /** * @constructor - * @param {AuthService} authService + * @param {AuthMethodModel} injectedAuthMethodModel * @param {FormBuilder} formBuilder * @param {Store} store */ constructor( @Inject('authMethodModelProvider') public injectedAuthMethodModel: AuthMethodModel, - /* private authService: AuthService,*/ + /* private authService: AuthService,*/ private formBuilder: FormBuilder, private store: Store ) {