import { provideHttpClient } from '@angular/common/http';
import { TestBed } from '@angular/core/testing';
import { describe, expect, it } from 'vitest';
import { provideApiClient } from '@shared/infrastructure/api-client.provider';
import { IntakeWizardComponent } from './intake-wizard.component';
import { IntakeState } from '@herregistratie/domain/intake.machine';

// Regression: wizard steps must render their logical field groups as separate CIBG grey
// <fieldset> blocks (`.form-horizontal fieldset` ⇒ #f1f5f9, 1.25em gap). If the fieldset
// wrapping is dropped, the inputs revert to bare white. The buitenland step with
// buitenlandGewerkt='ja' has two groups (the question + the land/uren follow-up), so it
// must render ≥2 fieldsets, each holding a form-group.
const buitenlandJa: IntakeState = {
  tag: 'Answering',
  answers: { buitenlandGewerkt: 'ja' },
  cursor: 0,
  errors: {},
  scholingThreshold: 1000,
};

describe('IntakeWizardComponent', () => {
  it('renders each field group as its own grey <fieldset>', () => {
    TestBed.configureTestingModule({
      providers: [provideHttpClient(), provideApiClient()],
    });
    const fixture = TestBed.createComponent(IntakeWizardComponent);
    fixture.componentInstance.dispatch({ tag: 'Seed', state: buitenlandJa });
    fixture.detectChanges();

    const fieldsets: HTMLElement[] = Array.from(
      fixture.nativeElement.querySelectorAll('form.form-horizontal fieldset'),
    );
    expect(fieldsets.length).toBeGreaterThanOrEqual(2);
    fieldsets.forEach((fs) => expect(fs.querySelector('.form-group')).toBeTruthy());
  });
});