import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ActivatedRoute, Router } from '@angular/router';
import { By } from '@angular/platform-browser';
import { Component, Input } from '@angular/core';

import { LoginMenuComponent } from './login-menu.component';

// rxjs
import { Observable, of } from 'rxjs';

import { AuthService } from '@app/shared/services/auth.service';

import { Store } from '@ngrx/store';
import { FirebaseApp } from 'angularfire2';
class MockAuthService {
  public isLoggedIn = false;
}

@Component({
  selector: 'mat-menu',
  template: '',
  exportAs: 'matMenu'
})
class MockMatMenuComponent {}
@Component({
  selector: '[mat-icon-button]',
  template: '<ng-content></ng-content>'
})
class MockMatButtonComponent {
  @Input() matMenuTriggerFor;
}
describe('LoginMenuComponent', () => {
  let component: LoginMenuComponent;
  let fixture: ComponentFixture<LoginMenuComponent>;
  let element, de;
  let mockAuth;
  let mockStore;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        MockMatMenuComponent,
        LoginMenuComponent,
        MockMatButtonComponent
      ],
      providers: [
        {
          provide: FirebaseApp,
          useValue: {
            storage: () => ({
              ref: () => ({
                child: () => ({ getDownloadURL: () => new Promise(() => {}) })
              })
            })
          }
        },
        {
          provide: Router,
          useValue: { events: { subscribe: jasmine.createSpy('subscribe') } }
        },
        { provide: AuthService, useClass: MockAuthService },
        {
          provide: Store,
          useValue: {
            dispatch: () => {},
            select: () => of({ displayName: 'koko' })
          }
        }
      ]
    }).compileComponents();
  }));

  beforeEach(async(() => {
    fixture = TestBed.createComponent(LoginMenuComponent);
    component = fixture.componentInstance;
    element = fixture.nativeElement; // to access DOM element
    de = fixture.debugElement;
  }));

  it('should create with "login" link', () => {
    mockAuth = de.injector.get(AuthService) as MockAuthService;
    mockAuth.isLoggedIn = false;
    fixture.detectChanges();

    expect(de.query(By.css('a')).nativeElement.innerText).toBe('login');
    expect(de.query(By.css('span.user-login-name'))).toBeNull();
  });
  it('should display dropdown with user menus when loggedin', () => {
    mockAuth = de.injector.get(AuthService) as MockAuthService;
    mockAuth.isLoggedIn = true;

    mockStore = de.injector.get(Store);
    mockStore.select = (p: any) => of({ displayName: 'shoko' });

    fixture.detectChanges();

    expect(
      de.query(By.css('button[mat-icon-button]')).nativeElement.outerHTML
    ).toContain('img');
    expect(
      de.query(By.css('span.user-login-name')).nativeElement.textContent
    ).toBe('shoko');
    expect(component.user.displayName).toBe('shoko');
  });
});