test: update calendar year planning tests for user interaction and state management

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<HTMLButtonElement>('button[data-date="2024-01-02"]')!.click();
+		fixture.detectChanges();
 		const contextDate = root.querySelector<HTMLButtonElement>(
 			'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<HTMLDetailsElement>('.plan-details')!;
 		const traceDetails = root.querySelector<HTMLDetailsElement>('.trace-explorer')!;
-		expect(planDetails.open).toBe(true);
+		expect(planDetails.open).toBe(false);
 		expect(traceDetails.open).toBe(false);
+		activateWithKeyboard(planDetails.querySelector<HTMLElement>('summary')!);
+		await new Promise<void>((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<HTMLDetailsElement>('.plan-details')!;
+		expect(details.open).toBe(false);
+		expect(root.querySelector('button.current')).toBeNull();
+		details.querySelector<HTMLElement>('summary')!.click();
+		await new Promise<void>((resolve) => setTimeout(resolve, 0));
+		fixture.detectChanges();
 		expect(details.open).toBe(true);
 		expect(root.querySelector<HTMLButtonElement>('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<HTMLButtonElement>('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<HTMLButtonElement>('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<void>((resolve) => setTimeout(resolve, 0));
+		fixture.detectChanges();
+		expect(root.querySelector<HTMLDetailsElement>('.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 () => {

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(),