import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {ClinicalExamsLineChartComponent} from './clinical-exams-line-chart.component';
import {By} from '@angular/platform-browser';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ClinicalExamsLineChartComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ClinicalExamsLineChartComponent);
    component = fixture.componentInstance;
    component.data = [
      { value: 6, week: 6 },
      { value: 7, week: 7 },
      { value: 8, week: 8 },
      { value: 9, week: 9 },
      { value: 11, week: 11 },
      { value: 15, week: 15 },
      { value: 20, week: 20 },
      { value: 30, week: 30 }
    ];
    fixture.detectChanges();
  });

  it('should create a chart', () => {
    component.createChart();
    expect(component.svg?.attr('width')).toBeGreaterThanOrEqual(component.PRESET_WIDTH);
  });

  it('draws a chart', fakeAsync(() => {
    component.ngAfterViewInit();
    fixture.detectChanges();
    tick();
    const points = fixture.debugElement.queryAll(By.css('svg circle'));
    expect(points.length).toBe(8);
    expect(points[0].nativeNode.attributes.getNamedItem('cx').value).toEqual('-388.4615384615385');
    expect(points[0].nativeNode.attributes.getNamedItem('cy').value).toEqual('312');

    expect(points[7].nativeNode.attributes.getNamedItem('cx').value).toEqual('543.8461538461538');
    expect(points[7].nativeNode.attributes.getNamedItem('cy').value).toEqual('120.00000000000001');
  }));
});