import { By } from '@angular/platform-browser';
import { Spectator, createComponentFactory } from '@ngneat/spectator';
import { UiCircleProgressComponent } from '@ui/progress';
import { MockComponent } from 'ng-mocks';
import { KpiCardComponent } from './kpi-card.component';

describe('KpiCardComponent', () => {
  let spectator: Spectator<KpiCardComponent>;

  const createComponent = createComponentFactory({
    component: KpiCardComponent,
    declarations: [MockComponent(UiCircleProgressComponent)],
  });

  beforeEach(() => {
    spectator = createComponent();
  });

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

  describe('percentage()', () => {
    it('should return the percentage of the current value over the target value', () => {
      const current = 10;
      const target = 20;

      expect(spectator.component.percentage(current, target)).toBe(50);
    });
  });

  it('should display the title, actual and targets', () => {
    spectator.setInput('feed', {
      label: 'title',
      type: 'kpi',
      items: [
        {
          actual: 10,
          target: 20,
          label: 'label',
        },
      ],
    });

    spectator.detectChanges();

    expect(spectator.query('.title')).toHaveText('title');
    expect(spectator.query('.actual-numbers')).toHaveText('10');
    expect(spectator.query('.target-numbers')).toHaveText('20');
  });

  describe('ui-circle-progress element', () => {
    it('should set the [progress] input', () => {
      spectator.setInput('feed', {
        label: 'title',
        type: 'kpi',
        items: [
          {
            actual: 10,
            target: 20,
            label: 'label',
          },
        ],
      });

      spectator.detectChanges();

      expect(spectator.debugElement.query(By.css('ui-circle-progress')).componentInstance.progress).toBe(50);
    });
  });
});
