import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';

import {FeedbackModalComponent} from './feedback-modal.component';
import {FeedbackService} from '../services/feedback.service';
import {of} from 'rxjs';
import {delay} from 'rxjs/operators';
import {FormsModule} from '@angular/forms';
import {AppModule} from '../app.module';
import {By} from '@angular/platform-browser';

describe('FeedbackModalComponent', () => {
  let component: FeedbackModalComponent;
  let fixture: ComponentFixture<FeedbackModalComponent>;
  let feedbackService: FeedbackService;

  beforeEach(async () => {
    feedbackService =  {sendFeedback: () => of()} as any;
    await TestBed.configureTestingModule({
      declarations: [ FeedbackModalComponent ],
      imports: [ FormsModule, AppModule ],
      providers: [
        {provide: FeedbackService, useValue: feedbackService}
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(FeedbackModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('clears form on close', () => {
    component.isOpen = true;
    component.ngOnChanges({isOpen: {}} as any);
    component.score = 5;
    component.feedback = 'What an awesome site!';
    component.handleClose();
    expect(component.score).toBeUndefined();
    expect(component.feedback).toBe('');
  });

  it('does not save when no comment has been added', () => {
    component.isOpen = true;
    component.ngOnChanges({isOpen: {}} as any);
    component.feedback = '';
    fixture.detectChanges();
    const spy = spyOn(feedbackService, 'sendFeedback');
    component.doSave();
    expect(spy).not.toHaveBeenCalled();
    expect(fixture.debugElement.query(By.css('app-text-area')).nativeElement.classList).toContain('ng-invalid');
  });

  it('does not save twice on double submit', fakeAsync(() => {
    component.isOpen = true;
    component.ngOnChanges({isOpen: {}} as any);
    component.feedback = 'total god musiksmag.. musiksmag .. musiksma..';
    fixture.detectChanges();
    const spy = spyOn(feedbackService, 'sendFeedback').and.callFake(() => of(undefined as any).pipe(delay(200)));
    component.doSave();
    component.doSave();
    component.doSave();
    expect(spy).toHaveBeenCalledTimes(1);
    tick(300);
  }));

  it('saves when a comment has been added', () => {
    component.isOpen = true;
    component.ngOnChanges({isOpen: {}} as any);
    component.feedback = 'we like the stock GME :rocket: :diamond: :hands:';
    fixture.detectChanges();
    const spy = spyOn(feedbackService, 'sendFeedback').and.callThrough();
    component.doSave();
    expect(spy).toHaveBeenCalled();
    expect(fixture.debugElement.query(By.css('app-text-area')).nativeElement.classList).not.toContain('ng-invalid');
  });

  it('disables save button when saving', fakeAsync(() => {
    spyOn(feedbackService, 'sendFeedback').and.callFake(() => of(undefined as any).pipe(delay(200)));
    component.isOpen = true;
    component.ngOnChanges({isOpen: {}} as any);
    component.feedback = 'Det ve jeg ikk noget om, men det lyder da sjov';
    fixture.detectChanges();
    component.doSave();
    fixture.detectChanges();
    const saveButtonAttrs = fixture.debugElement.query(By.css('#feedback-save-btn')).nativeElement.attributes;
    expect(saveButtonAttrs.getNamedItem('disabled')?.value).toBe('true');
    tick(300);
  }));
});