diff --git a/src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component.ts b/src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component.ts index 5ad99fe..f2cc4ad 100644 --- a/src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component.ts +++ b/src/app/herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component.ts @@ -64,59 +64,63 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload. > @switch (step()) { @case (1) { - - - - - - +
+ + + + + + +
} @case (2) { - - - +
+ + + +
} @case (3) { 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
', () => { + 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()); + }); +}); diff --git a/src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts b/src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts index 744ee52..007a4c3 100644 --- a/src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts +++ b/src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts @@ -71,105 +71,115 @@ import { IntakePolicyStore } from '@herregistratie/application/intake-policy.sto > @switch (step()) { @case ('buitenland') { - - - +
+ + + +
@if (answers().buitenlandGewerkt === 'ja') { - - - - - - +
+ + + + + + +
} } @case ('werk') { - - - - @if (scholingZichtbaar()) { +
- - - } - @if (answers().scholingGevolgd === 'ja') { - +
+ @if (scholingZichtbaar()) { +
+ + + +
+ } + @if (answers().scholingGevolgd === 'ja') { +
+ + + +
} } @case ('review') { diff --git a/src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts b/src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts index 72f1d92..714b298 100644 --- a/src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts +++ b/src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts @@ -130,40 +130,44 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid'; }" (fieldChange)="set($event.key, $event.value)" /> - - - - @if (draft().correspondentie === 'email') { +
- +
+ @if (draft().correspondentie === 'email') { +
+ + + +
} } } @@ -171,21 +175,23 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid'; @if (duoData(); as data) { - - - +
+ + + +
@if (handmatigActief()) { - - - +
+ + + +
} @else if (draft().beroep) {
} - @for (q of actieveVragen(data); track q.id) { - - @if (q.type === 'ja-nee') { - - } @else { - + @if (actieveVragen(data).length) { +
+ @for (q of actieveVragen(data); track q.id) { + + @if (q.type === 'ja-nee') { + + } @else { + + } + } - +
} } diff --git a/src/app/shared/layout/wizard-shell/wizard-shell.component.ts b/src/app/shared/layout/wizard-shell/wizard-shell.component.ts index a129169..f7577fd 100644 --- a/src/app/shared/layout/wizard-shell/wizard-shell.component.ts +++ b/src/app/shared/layout/wizard-shell/wizard-shell.component.ts @@ -90,6 +90,10 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed'; * verplichte velden
+