import { StepperSelectionEvent } from '@angular/cdk/stepper';
import { EventEmitter, QueryList } from '@angular/core';
import { MatStep, MatStepper } from '@angular/material/stepper';
import { HorizontalStepperDirective } from './horizontal-stepper.directive';

describe('StepperDirective', () => {
  it('should create an instance', () => {
    const stepperMock = {
      steps: new QueryList(),
      selectionChange: new EventEmitter<StepperSelectionEvent>(),
      animationDone: new EventEmitter<void>(),
    } as MatStepper;
    const directive = new HorizontalStepperDirective(stepperMock);
    directive.ngAfterContentInit();

    expect(directive).toBeTruthy();

    directive.ngOnDestroy();
  });

  it('should update bindings based on steps and set others to false', async () => {
    const stepperMock = {
      steps: new QueryList(),
      selectionChange: new EventEmitter<StepperSelectionEvent>(),
      animationDone: new EventEmitter<void>(),
    } as MatStepper;
    const directive = new HorizontalStepperDirective(stepperMock);
    directive.ngAfterContentInit();

    stepperMock.steps.reset([{ completed: true } as MatStep, { completed: false } as MatStep]);
    stepperMock.steps.notifyOnChanges();
    expect(directive.step0Active).toBeFalsy();
    expect(directive.step1Active).toBeFalsy();
    expect(directive.step2Active).toBeFalsy();

    stepperMock.steps.reset([{ completed: true } as MatStep, { completed: true } as MatStep]);
    stepperMock.steps.notifyOnChanges();
    expect(directive.step0Active).toBeFalsy();
    expect(directive.step1Active).toBeFalsy();
    expect(directive.step2Active).toBeFalsy();

    stepperMock.steps.reset([{ completed: true } as MatStep]);
    stepperMock.steps.notifyOnChanges();
    expect(directive.step0Active).toBeFalsy();
    expect(directive.step1Active).toBeFalsy();
    expect(directive.step2Active).toBeFalsy();

    directive.ngOnDestroy();
  });
});
