import {TweetsComponent} from './tweets.component';
import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {HttpClient} from '@angular/common/http';
import {MatSnackBar} from '@angular/material/snack-bar';
import {NGXLogger} from 'ngx-logger';
import {MatDialog} from '@angular/material/dialog';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {FeedService} from '../../services/feed.service';
import {Observable} from 'rxjs';
import {IFeed} from '../../interfaces/feed.interface';
import {Tweet} from '../../interfaces/interface';
import {By} from '@angular/platform-browser';


class MockSnackBar {
}

class MockMatDialog {
}

class MockNGXLogger {
}

// Fake Feed Service
export class MockFeedService {
  getFeeds(): Observable<IFeed[]> {
    return new Observable<IFeed[]>();
  }
}

export function mockFillTweets() {
  for (let i = 0; i < 6; i++) {
    const tweet: Tweet = {tweet_id: i, created_date: null, text: 'Mock', url: 'Mock', icon: null};
    this.tweets.push(tweet);
  }
}

describe('Component: Tweets', () => {
  let fixture: ComponentFixture<TweetsComponent>;
  let component: TweetsComponent;

  beforeEach(async(() => {

    // Cancelling initial load and mock http calls
    TweetsComponent.prototype.ngOnInit = () => {
    };
    TweetsComponent.prototype.fillTweets = mockFillTweets;
    TweetsComponent.prototype.loadMore = mockFillTweets;

    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        {provide: HttpClient, useClass: HttpClientTestingModule},
        {provide: FeedService, useClass: MockFeedService},
        {provide: MatSnackBar, useClass: MockSnackBar},
        {provide: MatDialog, useClass: MockMatDialog},
        {provide: NGXLogger, useClass: MockNGXLogger}
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(TweetsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('is TweetsComponent to be defined', () => {
    expect(component).toBeDefined();
  });

  it('Show text if feeds are empty', () => {
    expect(fixture.debugElement.query(By.css('.feeds'))).toBeDefined();
  });

  it('Do not show text if feeds are filled', () => {
    const feed: IFeed = {active: true, icon: null, id: 1, keywords: null, match_all_keywords: 'false', url: ''};
    component.feeds.push(feed);
    expect(fixture.debugElement.query(By.css('.feeds'))).toBeNull();
  });

  it('initial Tweets empty', () => {
    expect(component.tweets.length).toEqual(0);
  });

  it('Show text if tweets are empty', () => {
    expect(fixture.debugElement.query(By.css('.tweets'))).toBeDefined();
  });

  it('Do not show text if tweets are filled', () => {
    component.fillTweets();
    expect(fixture.debugElement.query(By.css('.tweets'))).toBeNull();
  });

  it('load initial six Tweets works', () => {
    component.fillTweets();
    expect(component.tweets.length).toEqual(6);
  });

  it('load more Tweets works', () => {
    component.fillTweets();
    component.loadMore();
    expect(component.tweets.length).toEqual(12);
  });

  it('load more Tweets twice works', () => {
    component.fillTweets();
    component.loadMore();
    component.loadMore();
    expect(component.tweets.length).toEqual(18);
  });

  it('load more button visible', () => {
    expect(expect(fixture.debugElement.query(By.css('.more'))).toBeDefined());
  });

  it('load more being called after button press', () => {
    fakeAsync(() => {
      spyOn(component, 'loadMore');

      const button = fixture.debugElement.nativeElement.querySelector('button');
      button.click();
      tick();
      expect(component.loadMore).toHaveBeenCalled();
    });
  });

});