diff --git a/src/app/components/calendar-year/calendar-year-planning.spec.ts b/src/app/components/calendar-year/calendar-year-planning.spec.ts index 5fa992d..9392371 100644 --- a/src/app/components/calendar-year/calendar-year-planning.spec.ts +++ b/src/app/components/calendar-year/calendar-year-planning.spec.ts @@ -493,6 +493,8 @@ describe('CalendarYear planning outcome boundary', () => { const root = fixture.nativeElement as HTMLElement; expect(root.querySelector('[aria-label="December 2023"]')).not.toBeNull(); + root.querySelector('button[data-date="2024-01-02"]')!.click(); + fixture.detectChanges(); const contextDate = root.querySelector( 'button[data-date="2023-12-30"]', )!; @@ -604,8 +606,12 @@ describe('CalendarYear planning outcome boundary', () => { const root = fixture.nativeElement as HTMLElement; const planDetails = root.querySelector('.plan-details')!; const traceDetails = root.querySelector('.trace-explorer')!; - expect(planDetails.open).toBe(true); + expect(planDetails.open).toBe(false); expect(traceDetails.open).toBe(false); + activateWithKeyboard(planDetails.querySelector('summary')!); + await new Promise((resolve) => setTimeout(resolve, 0)); + fixture.detectChanges(); + expect(planDetails.open).toBe(true); expect(root.querySelector('.plan-insights')!.firstElementChild).toBe(planDetails); expect(root.querySelector('.leave-story')?.textContent).toContain('Spring rule'); expect(root.querySelector('.leave-story')?.textContent).toContain('Protects leave at risk'); @@ -712,7 +718,7 @@ describe('CalendarYear planning outcome boundary', () => { expect(fixture.nativeElement.querySelectorAll('button.selected')).toHaveLength(2); }); - it('keeps explanation selection quiet and analyzes alternatives only from Compare dates', async () => { + it('opens explanations only on user interaction and analyzes alternatives from Compare dates', async () => { const { calendar, calculation } = calendarFor(plan, explanation); await TestBed.configureTestingModule({ imports: [CalendarYear], @@ -729,6 +735,11 @@ describe('CalendarYear planning outcome boundary', () => { const root = fixture.nativeElement as HTMLElement; const details = root.querySelector('.plan-details')!; + expect(details.open).toBe(false); + expect(root.querySelector('button.current')).toBeNull(); + details.querySelector('summary')!.click(); + await new Promise((resolve) => setTimeout(resolve, 0)); + fixture.detectChanges(); expect(details.open).toBe(true); expect(root.querySelector('button.current')?.dataset['date']).toBe( '2024-05-03', @@ -737,13 +748,11 @@ describe('CalendarYear planning outcome boundary', () => { details.dispatchEvent(new Event('toggle')); fixture.detectChanges(); expect(root.querySelector('button.current')).toBeNull(); - details.open = true; - details.dispatchEvent(new Event('toggle')); - fixture.detectChanges(); root.querySelector('button[data-date="2024-05-06"]')!.click(); fixture.detectChanges(); await fixture.whenStable(); fixture.detectChanges(); + expect(details.open).toBe(true); expect(calculation.analyzeCounterfactual).not.toHaveBeenCalled(); expect(root.querySelector('button.current')?.dataset['date']).toBe( '2024-05-06', @@ -786,6 +795,14 @@ describe('CalendarYear planning outcome boundary', () => { '2024-05-03', ); expect(calculation.analyzeCounterfactual).toHaveBeenCalledTimes(1); + + TestBed.inject(UserInputService).requestComputation(); + fixture.detectChanges(); + await fixture.whenStable(); + await new Promise((resolve) => setTimeout(resolve, 0)); + fixture.detectChanges(); + expect(root.querySelector('.plan-details')?.open).toBe(false); + expect(root.querySelector('button.current')).toBeNull(); }); it('explains a whole break and compares another date against the current plan', async () => { diff --git a/src/app/components/calendar-year/calendar-year.ts b/src/app/components/calendar-year/calendar-year.ts index f9f52da..0ed78e1 100644 --- a/src/app/components/calendar-year/calendar-year.ts +++ b/src/app/components/calendar-year/calendar-year.ts @@ -552,7 +552,6 @@ export class CalendarYear { if (version !== this.calculationVersion) return; this.planningExplanation.set(explanation ?? null); if (explanation?.kind === 'PlanExplanation') { - this.planDetailsOpen.set(true); this.selectPlacement(0, false); this.liveMessage.set( `${this.planningOutcome() ? this.outcomeLabel(this.planningOutcome()!) : ''} ${this.placementAnnouncement()}`.trim(),