import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {HttpClientModule} from '@angular/common/http';

import {CrdsContentBlockComponent} from './crds-content-block.component';
import {SafeHtmlPipe} from './pipes/safe-html.pipe';
import {of} from 'rxjs';
import {CrdsContentBlockService} from './crds-content-block.service';
import {By} from '@angular/platform-browser';

const crdsContentBlockServiceStub: any = {
  getContent: () => of({title: 'test', content: 'not the title'})
};

let content;

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [CrdsContentBlockComponent, SafeHtmlPipe],
      imports: [HttpClientModule],
      providers: [
        {
          provide: CrdsContentBlockService,
          useValue: crdsContentBlockServiceStub
        }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CrdsContentBlockComponent);
    content = TestBed.get(CrdsContentBlockService);
    component = fixture.componentInstance;
    spyOn(component.contentLoaded, 'emit');
    fixture.detectChanges();
  });

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

  it('should show content block', () => {
    component.id = 'test';
    fixture.detectChanges();
    const element = fixture.debugElement.query(By.css('span'));
    expect(element.nativeElement.textContent).toEqual('not the title');
  });

  it('should emit an event when content is loaded', () => {
    expect(component.contentLoaded.emit).toHaveBeenCalled();
  });
});