import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RemissionListCardComponent } from './remission-list-card.component';
import { remissionProducts } from '../../mocks';
import { By } from '@angular/platform-browser';
import { RemissionClientModule } from '../../remission-client.module';
import { CommonModule } from '@angular/common';
import { RemissionService, RemissionProduct } from '@isa/remission';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { DebugElement } from '@angular/core';

describe('RemissionListCardComponent', () => {
  let component: RemissionListCardComponent;
  let fixture: ComponentFixture<RemissionListCardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [CommonModule, HttpClientTestingModule, RemissionClientModule],
      providers: [RemissionService],
    }).compileComponents();
  }));

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

  it('should show a button to remove a product if it has been added manually which emits an event if clicked', () => {
    spyOn(component.deleteProduct, 'emit').and.callThrough();
    spyOnProperty(component, 'product').and.returnValue({ ...remissionProducts[0], isManuallyAdded: true } as RemissionProduct);

    fixture.detectChanges();
    const buttonContainer = fixture.debugElement.query(By.css('.delete-product'));
    expect(buttonContainer).toBeTruthy();

    const removeButton = fixture.debugElement.query(By.css('app-button'));
    removeButton.triggerEventHandler('action', null);

    fixture.detectChanges();
    expect(component.deleteProduct.emit).toHaveBeenCalled();
  });

  it('should show not show button to remove a product it a the product has not been added manually', () => {
    component.product = remissionProducts[0];

    fixture.detectChanges();

    const removeButton = fixture.debugElement.query(By.css('.delete-product'));

    expect(removeButton).toBeFalsy();
  });
});
