import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {Router} from '@angular/router';
import {RouterTestingModule} from '@angular/router/testing';
import {dispatchEvent} from '@angular/platform-browser/testing/browser_util';
import {FormGroup, FormBuilder} from '@angular/forms';
import {By} from '@angular/platform-browser'
import {DebugElement, Component} from '@angular/core';

import {ToastsManager} from 'ng2-toastr/ng2-toastr';

import {TestModule, ToastsManagerMock} from '../../../test-helpers/index';
import {LoginComponent} from './login.component';
import {AuthService, SessionService} from '../../services/index';

@Component({
    template: ''
})
class MockComponent {
}

describe('Component: Login', () => {
    let fixture: ComponentFixture<LoginComponent>,
        component: LoginComponent,
        de: DebugElement,
        el: HTMLElement,
        authService,
        sessionService,
        router, toastr,
        spy;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                TestModule,
                RouterTestingModule
            ],
            declarations: [
                LoginComponent, MockComponent
            ]
        }).overrideComponent(LoginComponent, {
            set: {
                providers: [
                    {provide: ToastsManager, useClass: ToastsManagerMock}
                ]
            }
        })
            .compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(LoginComponent);
        component = fixture.debugElement.componentInstance;

        // query for the welcome <h1> by CSS element selector
        de = fixture.debugElement.query(By.css('div.container'));
        el = de.nativeElement;

        // get an instance of the userService injected into the component
        sessionService = fixture.debugElement.injector.get(SessionService);
        authService = fixture.debugElement.injector.get(AuthService);
        router = fixture.debugElement.injector.get(Router);
        toastr = fixture.debugElement.injector.get(ToastsManager);
    });

    describe('unit tests:', () => {
        it('should create the component', async(() => {
            // arrange
            // act
            fixture.detectChanges();

            // assert
            expect(component).toBeTruthy();
        }));

        it('should call session.destroy on init', async(() => {
            // arrange
            spyOn(sessionService, 'destroy');

            // act
            component.ngOnInit();
            fixture.detectChanges();

            // assert
            expect(sessionService.destroy).toHaveBeenCalled();
        }));

        it('form should be invalid on init', async(() => {
            // arrange
            // act
            component.ngOnInit();
            fixture.detectChanges();

            // assert
            expect(component.loginForm.valid).toBe(false, 'form should not be valid');
        }));

        describe('auth.login', ()=> {
            it('should show toastr error message when form is not valid', async(() => {
                // arrange
                component.ngOnInit();
                fixture.detectChanges();

                // setup spy for toastr error
                spy = spyOn(toastr, 'error');

                // act
                component.login();
                fixture.detectChanges();

                // assert
                expect(toastr.error).toHaveBeenCalledWith('invalidForm');
            }));

            it('should navigate to dashboard on successful login', async(() => {
                // arrange
                let fb = new FormBuilder();

                component.ngOnInit();
                fixture.detectChanges();

                // create login form model
                component.loginForm = fb.group({
                    username: ['bob@nextplanesolutions.com'],
                    password: ['welcome!']
                });

                spy = spyOn(router, 'navigate');

                // act
                component.login();
                fixture.detectChanges();

                // assert
                expect(router.navigate).toHaveBeenCalledWith(['/dashboard']);
            }));

            it('should show toaster and destroy session when auth call fails', async(() => {
                // arrange
                let fb = new FormBuilder();

                component.ngOnInit();
                fixture.detectChanges();

                // create login form model
                component.loginForm = fb.group({
                    username: ['bob@nextplanesolutions.com'],
                    password: ['welcome!']
                });

                // setup spys
                spy = spyOn(toastr, 'error');
                spy = spyOn(sessionService, 'destroy');

                // set auth service to fail
                authService.login = authService.fail;

                // act
                component.login();
                fixture.detectChanges();

                // assert
                expect(toastr.error).toHaveBeenCalledWith('loginError');
                expect(sessionService.destroy).toHaveBeenCalled();
            }));
        });
    });

    describe('integration tests:', () => {
        it('form should be valid with proper values', async(() => {
            // arrange
            let usernameEl = fixture.debugElement.query(By.css('#username')).nativeElement,
                passwordEl = fixture.debugElement.query(By.css('#password')).nativeElement,
                loginButtonEl = fixture.debugElement.query(By.css('.btn-primary'));

            spy = spyOn(router, 'navigate');

            // act
            component.ngOnInit();

            fixture.detectChanges();
            fixture.whenStable().then(() => {
                usernameEl.value = 'bob@briebug.com';
                dispatchEvent(usernameEl, 'input');

                passwordEl.value = 'welcome!';
                dispatchEvent(passwordEl, 'input');

                fixture.detectChanges();

                let loginForm: FormGroup = component.loginForm;
                let usernameFormControl = loginForm.controls['username'];
                let passwordFormControl = loginForm.controls['password'];

                expect(usernameFormControl.hasError('required')).toBe(false);
                expect(usernameFormControl.valid).toBe(true);

                expect(passwordFormControl.hasError('required')).toBe(false);
                expect(passwordFormControl.valid).toBe(true);

                expect(loginForm.valid).toEqual(true);

                loginButtonEl.triggerEventHandler('click', null);
                fixture.detectChanges();

                expect(spy.calls.any()).toBe(true, 'router.navigate called');
                expect(router.navigate).toHaveBeenCalledWith(['/dashboard']);
            });
        }));

        it('form should be invalid when nothing is set', async(() => {
            // arrange

            // act
            component.ngOnInit();

            fixture.detectChanges();
            fixture.whenStable().then(() => {
                let loginForm: FormGroup = component.loginForm;
                let usernameFormControl = loginForm.controls['username'];
                let passwordFormControl = loginForm.controls['password'];

                expect(usernameFormControl.hasError('required')).toBe(true);
                expect(usernameFormControl.valid).toBe(false);

                expect(passwordFormControl.hasError('required')).toBe(true);
                expect(passwordFormControl.valid).toBe(false);

                expect(loginForm.valid).toEqual(false);
            });
        }));

        it('form should show validators when invalid', async(() => {
            // arrange
            let loginButtonEl = fixture.debugElement.query(By.css('.btn-primary'));

            // act
            component.ngOnInit();

            fixture.detectChanges();
            fixture.whenStable().then(() => {
                let loginForm: FormGroup = component.loginForm;

                loginButtonEl.triggerEventHandler('click', null);
                fixture.detectChanges();

                expect(loginForm.valid).toEqual(false);

                let usernameError = fixture.debugElement.query(By.css('.username-error')).nativeElement,
                    passwordError = fixture.debugElement.query(By.css('.password-error')).nativeElement;

                expect(usernameError).toBeTruthy();
                expect(passwordError).toBeTruthy();
            });
        }));

        it('should show toaster and destroy session when auth call fails', async(() => {
            // arrange
            let usernameEl = fixture.debugElement.query(By.css('#username')).nativeElement,
                passwordEl = fixture.debugElement.query(By.css('#password')).nativeElement,
                loginButtonEl = fixture.debugElement.query(By.css('.btn-primary'));

            // setup spys
            spyOn(sessionService, 'destroy');
            spyOn(toastr, 'error');

            // set auth service to fail
            authService.login = authService.fail;

            // act
            component.ngOnInit();

            fixture.detectChanges();
            fixture.whenStable().then(() => {
                usernameEl.value = 'bob@briebug.com';
                dispatchEvent(usernameEl, 'input');

                passwordEl.value = 'welcome!';
                dispatchEvent(passwordEl, 'input');

                fixture.detectChanges();

                loginButtonEl.triggerEventHandler('click', null);
                fixture.detectChanges();

                expect(toastr.error).toHaveBeenCalled();
                expect(sessionService.destroy).toHaveBeenCalled();
            });
        }));
    });
});