Skip to content

fix(date-range-filter): update datepicker date-range on preset selection #1206

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
spliffone wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(date-range-filter): update datepicker date-range on preset selection #1206

spliffone wants to merge 1 commit into from
+23 −12

Conversation

@spliffone
Copy link
Member

@spliffone spliffone commented Dec 16, 2025 •
edited by coderabbitai bot
Loading

Describe in detail what your merge request does and why. Add relevant
screenshots and reference related issues via Closes #XY or Related to #XY.

Summary: Fixes datepicker not updating its visible date-range when a preset is selected by switching the component to use a signal-backed dateRange and updating the template to read/write via the signal.

Key changes:

  1. Template: si-datepicker binding changed from two-way to one-way: [dateRange]="dateRange()" and (dateRangeChange)="updateFromDateRange($event)".
  2. State: dateRange converted from a mutable property to a WritableSignal (protected readonly dateRange = signal({...})); reads use dateRange() and writes use dateRange.set(...).
  3. API: updateFromDateRange signature changed to accept an optional DateRange parameter (updateFromDateRange(dateRange?: DateRange)); updateDateRange updated to operate with the signal.
  4. Tests: spec updated—imports By, adds fixture.detectChanges() around preset interactions, and asserts the calendar date cell appears for the selected preset.
  5. Public API: api-goldens updated to reflect dateRange as a WritableSignal and the updated updateFromDateRange signature.

Impact: Ensures the datepicker UI correctly reflects preset selections by syncing the reactive dateRange signal with the datepicker input.

@spliffone spliffone requested a review from a team as a code owner December 16, 2025 10:20
@coderabbitai
Copy link

coderabbitai bot commented Dec 16, 2025 •
edited
Loading

Walkthrough

The component’s mutable dateRange property was replaced by a readonly signal<DateRange>; template two-way binding [(dateRange)] was changed to a one-way [dateRange] bound to dateRange() with an explicit dateRangeChange handler. Methods now read the signal via dateRange() and write with dateRange.set(...); updateFromDateRange accepts an optional DateRange parameter. Computed focus logic and updateDateRange were updated to use the signal. Tests add By from @angular/platform-browser, extra fixture.detectChanges() calls, and a DOM assertion for a calendar date cell by aria-label.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and specifically describes the main change: updating the datepicker date-range when a preset is selected, which aligns with the file changes in the date-range-filter component.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/update-date-range-filter-range
📜 Recent review details

Configuration used: Path: .coderabbit.yml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5a62a65 and acdab56.

📒 Files selected for processing (4)
  • api-goldens/element-ng/date-range-filter/index.api.md (2 hunks)
  • projects/element-ng/date-range-filter/si-date-range-filter.component.html (1 hunks)
  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts (3 hunks)
  • projects/element-ng/date-range-filter/si-date-range-filter.component.ts (4 hunks)
🧰 Additional context used
🧠 Learnings (16)
📓 Common learnings 
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:511-516
Timestamp: 2025-12-08T11:25:51.584Z
Learning: In the select component overflow tests (projects/element-ng/select/si-select.component.spec.ts), jasmine.clock() cannot be used to control the timing for overflow item detection. Real setTimeout waits must be used instead, likely due to ResizeObserver or debounced layout calculations that jasmine.clock() cannot control in zoneless mode.

Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:204-205
Timestamp: 2025-12-08T11:25:20.861Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), calling fixture.changeDetectorRef.markForCheck() before fixture.detectChanges() is required even for components using the default change detection strategy (not OnPush). This differs from zone.js-based testing where markForCheck is primarily needed only for OnPush components.

Learnt from: chintankavathia
Repo: siemens/element PR: 1193
File: projects/element-ng/search-bar/si-search-bar.component.spec.ts:21-28
Timestamp: 2025-12-15T10:05:59.100Z
Learning: In zoneless Angular tests, jasmine.clock() can control RxJS debounceTime timing when both jasmine.clock().install() and jasmine.clock().mockDate() are used together. Without mockDate(), jasmine.clock() cannot control RxJS scheduler-based operators like debounceTime.

Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:92-105
Timestamp: 2025-12-15T07:16:53.762Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits must be used instead of fixture.whenStable() to avoid injector destroyed errors during mount/unmount operations in zoneless mode. The GridStack timing-dependent operations require actual async delays.

Learnt from: chintankavathia
Repo: siemens/element PR: 1173
File: src/app/examples/si-charts/interactive/interactive.ts:5-5
Timestamp: 2025-12-17T04:34:55.597Z
Learning: In zoneless Angular with OnPush change detection, explicit `markForCheck()` calls are only required for asynchronous operations (like setTimeout, setInterval, Promises, Observables). Event handlers triggered by Angular event bindings (click, input, etc.) automatically trigger change detection and do not require explicit `markForCheck()` calls.

Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts:67-85
Timestamp: 2025-12-08T11:24:45.272Z
Learning: In select lazy options tests (projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts), jasmine.clock() cannot control RxJS debounceTime in zoneless mode. Real setTimeout waits must be used instead for tests involving search debouncing.

Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:69-80
Timestamp: 2025-12-15T07:16:32.082Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing grid item rendering and initialization. This is likely due to gridstack library's initialization timing or lifecycle behavior that fixture.whenStable() cannot properly wait for in zoneless mode.

Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts:83-104
Timestamp: 2025-12-11T10:09:01.564Z
Learning: In the auto-collapsable-list directive tests (projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts), jasmine.clock() successfully controls the directive's setTimeout-based layout logic in zoneless mode. Mock timers work fine here, unlike in select component overflow tests where real setTimeout waits are required.
📚 Learning: 2025-12-17T04:34:55.597Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1173
File: src/app/examples/si-charts/interactive/interactive.ts:5-5
Timestamp: 2025-12-17T04:34:55.597Z
Learning: Guideline: In Angular projects using OnPush change detection (zoneless mode), you only need to call ChangeDetectorRef.markForCheck() for asynchronous operations (e.g., setTimeout, setInterval, Promises, Observables) where a change is not automatically detected. Event handlers triggered by Angular template bindings (click, input, etc.) will trigger change detection automatically and do not require explicit markForCheck() calls. Apply this broadly to TS files within Angular components/services that use OnPush; use markForCheck() selectively for async work where change detection wouldn’t run otherwise.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.ts
  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-11T10:09:01.564Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts:83-104
Timestamp: 2025-12-11T10:09:01.564Z
Learning: In the auto-collapsable-list directive tests (projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts), jasmine.clock() successfully controls the directive's setTimeout-based layout logic in zoneless mode. Mock timers work fine here, unlike in select component overflow tests where real setTimeout waits are required.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-15T07:16:53.762Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:92-105
Timestamp: 2025-12-15T07:16:53.762Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits must be used instead of fixture.whenStable() to avoid injector destroyed errors during mount/unmount operations in zoneless mode. The GridStack timing-dependent operations require actual async delays.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-08T11:25:51.584Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:511-516
Timestamp: 2025-12-08T11:25:51.584Z
Learning: In the select component overflow tests (projects/element-ng/select/si-select.component.spec.ts), jasmine.clock() cannot be used to control the timing for overflow item detection. Real setTimeout waits must be used instead, likely due to ResizeObserver or debounced layout calculations that jasmine.clock() cannot control in zoneless mode.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-08T11:24:45.272Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts:67-85
Timestamp: 2025-12-08T11:24:45.272Z
Learning: In select lazy options tests (projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts), jasmine.clock() cannot control RxJS debounceTime in zoneless mode. Real setTimeout waits must be used instead for tests involving search debouncing.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-05T08:00:38.407Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/typeahead/si-typeahead.directive.spec.ts:114-121
Timestamp: 2025-12-05T08:00:38.407Z
Learning: In the typeahead test suite (projects/element-ng/typeahead/si-typeahead.directive.spec.ts), jasmine.clock() must be installed in beforeAll and uninstalled in afterAll (not beforeEach/afterEach) because using per-test clock installation causes schedulerFunction-related issues in these specific tests.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-08T11:25:20.861Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:204-205
Timestamp: 2025-12-08T11:25:20.861Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), calling fixture.changeDetectorRef.markForCheck() before fixture.detectChanges() is required even for components using the default change detection strategy (not OnPush). This differs from zone.js-based testing where markForCheck is primarily needed only for OnPush components.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-15T07:16:32.082Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:69-80
Timestamp: 2025-12-15T07:16:32.082Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing grid item rendering and initialization. This is likely due to gridstack library's initialization timing or lifecycle behavior that fixture.whenStable() cannot properly wait for in zoneless mode.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-15T07:17:06.981Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts:37-49
Timestamp: 2025-12-15T07:17:06.981Z
Learning: In widget-instance-editor-dialog component tests (projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing component initialization. This is likely due to the component's lifecycle behavior or modal initialization timing that fixture.whenStable() cannot properly wait for in zoneless mode.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-04T05:50:17.637Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:953-964
Timestamp: 2025-12-04T05:50:17.637Z
Learning: In the siemens/element repository, when making tree-view tests zoneless-ready, jasmine.clock() should be used to mimic setTimeouts even in zoneless mode, as the component implementation relies on setTimeout calls that need to be controlled in tests.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-02T06:50:25.778Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1104
File: projects/element-ng/datepicker/components/si-day-selection.component.spec.ts:19-19
Timestamp: 2025-12-02T06:50:25.778Z
Learning: The `runOnPushChangeDetection` helper is located at `projects/element-ng/test-helpers/change-detection.helper.ts` and is shared across the element-ng project, not scoped under individual feature modules like datepicker.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-01T14:12:11.111Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1104
File: projects/element-ng/datepicker/components/si-day-selection.component.spec.ts:198-202
Timestamp: 2025-12-01T14:12:11.111Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), prefer `await fixture.whenStable()` over `fixture.detectChanges()` after dispatching events or triggering async operations, as `whenStable()` waits for all asynchronous operations to complete and better mimics the production environment.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-15T10:05:59.100Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1193
File: projects/element-ng/search-bar/si-search-bar.component.spec.ts:21-28
Timestamp: 2025-12-15T10:05:59.100Z
Learning: In tests that rely on Jasmine's fake clock to control time-based RxJS operators (e.g., debounceTime), use jasmine.clock().install() together with jasmine.clock().mockDate() to enable precise timing control. Without mockDate, scheduler-based operators may not respond to the fake clock. Apply this guidance to spec files (e.g., any file named *.spec.ts or *.spec.js) that test time-sensitive behavior, ensuring you install and mockDate before advancing time in tests.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-01T04:01:27.365Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1099
File: projects/element-ng/accordion/si-accordion.component.spec.ts:39-43
Timestamp: 2025-12-01T04:01:27.365Z
Learning: With Angular 20 and esbuild, synchronous `TestBed.configureTestingModule(...).compileComponents()` calls work correctly even when components use external templates (templateUrl), because esbuild pre-compiles templates at build time. The async/await pattern is not required in this scenario.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-04T05:50:38.735Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:1244-1245
Timestamp: 2025-12-04T05:50:38.735Z
Learning: In zoneless Angular tests with OnPush components, calling `await runOnPushChangeDetection(fixture)` followed by `await fixture.whenStable()` is NOT redundant. The `runOnPushChangeDetection` helper forces change detection to run for OnPush components, while `whenStable()` waits for all async operations to complete. Both are necessary and serve different purposes.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
🧬 Code graph analysis (1)
projects/element-ng/date-range-filter/si-date-range-filter.component.ts (2)
projects/element-ng/datepicker/si-datepicker.model.ts (1)
  • DateRange (170-173)
projects/element-ng/datepicker/si-datepicker.component.ts (2)
  • startDate (202-204)
  • endDate (206-208)
🔇 Additional comments (8)
projects/element-ng/date-range-filter/si-date-range-filter.component.html (1)

67-68: LGTM! Signal-based binding pattern is correct.

The template correctly migrates from two-way binding to one-way binding with an explicit event handler, which is the appropriate pattern for signal-based state management. The dateRange() getter reads the signal value, and updateFromDateRange($event) handles updates.

projects/element-ng/date-range-filter/si-date-range-filter.component.ts (4)

305-305: LGTM! Signal declaration is correct.

The signal is properly declared as readonly with an appropriate initial value matching the DateRange type.

343-347: LGTM! Computed properly reads from signal.

The focusedDate computed correctly reads from the dateRange() signal and will automatically re-evaluate when the signal changes.

417-420: LGTM! Signal update is correct.

The method correctly uses dateRange.set() to update the signal with a new object, maintaining immutability.

462-478: LGTM! Dual-purpose method handles both internal and external updates.

The method correctly handles two use cases:

  1. When called from the template with an event payload (line 68 in HTML), it updates the signal and derives the range
  2. When called internally without arguments (line 458), it reads the current signal value

The signal update (lines 463-465) happens before reading (line 466), ensuring consistency.

projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts (2)

14-14: LGTM! Import is necessary for DOM query.

The By import from @angular/platform-browser is correctly added to support the new DOM assertion at lines 293-297.

279-279: The detectChanges() calls at lines 279 and 283 are appropriate for zoneless tests. For existing test suites, using fixture.detectChanges() is a common pattern and it is likely not worth the effort of converting these to await fixture.whenStable(). The test correctly syncs view changes after programmatic state updates and user interactions (preset selection), and the pattern of calling detectChanges() followed by whenStable() aligns with Angular testing best practices for zoneless components. No markForCheck() calls are required in the test code itself.

api-goldens/element-ng/date-range-filter/index.api.md (1)

107-107: API changes correctly reflect signal migration.

The API surface updates correctly document:

  1. dateRange changed from DateRange to WritableSignal<DateRange> (line 107)
  2. updateFromDateRange now accepts an optional DateRange parameter (line 166)

Note: These are breaking changes to the public API. Components consuming this API will need to update their code to read from the signal using component.dateRange() instead of direct property access.

Also applies to: 166-166

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot]
coderabbitai bot reviewed Dec 16, 2025
View reviewed changes
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
projects/element-ng/date-range-filter/si-date-range-filter.component.ts (1)

462-475: Critical: Signal not updated when datepicker emits date changes.

When updateFromDateRange is called with a parameter (from the datepicker's dateRangeChange event in the template), the method updates the range model but does NOT update the dateRange signal. This creates inconsistency:

  1. User manually selects dates in the datepicker
  2. Datepicker emits dateRangeChange event with new DateRange
  3. updateFromDateRange($event) updates the model (Line 468-472) but not the signal
  4. Next render cycle: template passes stale signal value via [dateRange]="dateRange()"
  5. The focusedDate computed (Lines 344-346) also reads the stale signal value

Since range is a model signal, updating it doesn't trigger ngOnChanges in the same component, so the signal won't be updated through that lifecycle hook.

Apply this diff to ensure the signal is updated when a new range is provided:

 protected updateFromDateRange(dateRange?: DateRange): void {
   const range = dateRange ?? this.dateRange();
   const startDate = range.start ?? this.getDateNow();
   const endDate = range.end ?? this.getDateNow();
+  // Update signal to maintain consistency when called from datepicker event
+  this.dateRange.set({ start: startDate, end: endDate });
   this.point1date = startDate;
   this.point2date = startDate;
   this.range.set({
     point1: startDate,
     point2: endDate,
     range: undefined
   });
   this.point2Mode = 'date';
   this.point2offset = 0;
 }
📜 Review details

Configuration used: Path: .coderabbit.yml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e8cb66a and 773bebf.

📒 Files selected for processing (3)
  • projects/element-ng/date-range-filter/si-date-range-filter.component.html (1 hunks)
  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts (3 hunks)
  • projects/element-ng/date-range-filter/si-date-range-filter.component.ts (4 hunks)
🧰 Additional context used
🧠 Learnings (15)
📓 Common learnings 
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:511-516
Timestamp: 2025-12-08T11:25:51.584Z
Learning: In the select component overflow tests (projects/element-ng/select/si-select.component.spec.ts), jasmine.clock() cannot be used to control the timing for overflow item detection. Real setTimeout waits must be used instead, likely due to ResizeObserver or debounced layout calculations that jasmine.clock() cannot control in zoneless mode.

Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:204-205
Timestamp: 2025-12-08T11:25:20.861Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), calling fixture.changeDetectorRef.markForCheck() before fixture.detectChanges() is required even for components using the default change detection strategy (not OnPush). This differs from zone.js-based testing where markForCheck is primarily needed only for OnPush components.

Learnt from: chintankavathia
Repo: siemens/element PR: 1193
File: projects/element-ng/search-bar/si-search-bar.component.spec.ts:21-28
Timestamp: 2025-12-15T10:05:59.100Z
Learning: In zoneless Angular tests, jasmine.clock() can control RxJS debounceTime timing when both jasmine.clock().install() and jasmine.clock().mockDate() are used together. Without mockDate(), jasmine.clock() cannot control RxJS scheduler-based operators like debounceTime.

Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts:67-85
Timestamp: 2025-12-08T11:24:45.272Z
Learning: In select lazy options tests (projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts), jasmine.clock() cannot control RxJS debounceTime in zoneless mode. Real setTimeout waits must be used instead for tests involving search debouncing.

Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:92-105
Timestamp: 2025-12-15T07:16:53.762Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits must be used instead of fixture.whenStable() to avoid injector destroyed errors during mount/unmount operations in zoneless mode. The GridStack timing-dependent operations require actual async delays.

Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:69-80
Timestamp: 2025-12-15T07:16:32.082Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing grid item rendering and initialization. This is likely due to gridstack library's initialization timing or lifecycle behavior that fixture.whenStable() cannot properly wait for in zoneless mode.

Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts:83-104
Timestamp: 2025-12-11T10:09:01.564Z
Learning: In the auto-collapsable-list directive tests (projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts), jasmine.clock() successfully controls the directive's setTimeout-based layout logic in zoneless mode. Mock timers work fine here, unlike in select component overflow tests where real setTimeout waits are required.
📚 Learning: 2025-12-11T10:09:01.564Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts:83-104
Timestamp: 2025-12-11T10:09:01.564Z
Learning: In the auto-collapsable-list directive tests (projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts), jasmine.clock() successfully controls the directive's setTimeout-based layout logic in zoneless mode. Mock timers work fine here, unlike in select component overflow tests where real setTimeout waits are required.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-08T11:25:51.584Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:511-516
Timestamp: 2025-12-08T11:25:51.584Z
Learning: In the select component overflow tests (projects/element-ng/select/si-select.component.spec.ts), jasmine.clock() cannot be used to control the timing for overflow item detection. Real setTimeout waits must be used instead, likely due to ResizeObserver or debounced layout calculations that jasmine.clock() cannot control in zoneless mode.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-08T11:24:45.272Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts:67-85
Timestamp: 2025-12-08T11:24:45.272Z
Learning: In select lazy options tests (projects/element-ng/select/options/si-select-lazy-options.directive.spec.ts), jasmine.clock() cannot control RxJS debounceTime in zoneless mode. Real setTimeout waits must be used instead for tests involving search debouncing.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-15T07:16:53.762Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:92-105
Timestamp: 2025-12-15T07:16:53.762Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits must be used instead of fixture.whenStable() to avoid injector destroyed errors during mount/unmount operations in zoneless mode. The GridStack timing-dependent operations require actual async delays.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-15T07:16:32.082Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts:69-80
Timestamp: 2025-12-15T07:16:32.082Z
Learning: In gridstack-wrapper component tests (projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing grid item rendering and initialization. This is likely due to gridstack library's initialization timing or lifecycle behavior that fixture.whenStable() cannot properly wait for in zoneless mode.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-05T08:00:38.407Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1151
File: projects/element-ng/typeahead/si-typeahead.directive.spec.ts:114-121
Timestamp: 2025-12-05T08:00:38.407Z
Learning: In the typeahead test suite (projects/element-ng/typeahead/si-typeahead.directive.spec.ts), jasmine.clock() must be installed in beforeAll and uninstalled in afterAll (not beforeEach/afterEach) because using per-test clock installation causes schedulerFunction-related issues in these specific tests.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-08T11:25:20.861Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1163
File: projects/element-ng/select/si-select.component.spec.ts:204-205
Timestamp: 2025-12-08T11:25:20.861Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), calling fixture.changeDetectorRef.markForCheck() before fixture.detectChanges() is required even for components using the default change detection strategy (not OnPush). This differs from zone.js-based testing where markForCheck is primarily needed only for OnPush components.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-15T07:17:06.981Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1191
File: projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts:37-49
Timestamp: 2025-12-15T07:17:06.981Z
Learning: In widget-instance-editor-dialog component tests (projects/dashboards-ng/src/components/widget-instance-editor-dialog/si-widget-instance-editor-dialog.component.spec.ts), real setTimeout waits (e.g., `await new Promise(resolve => setTimeout(resolve, 0))`) must be used instead of `fixture.whenStable()` when testing component initialization. This is likely due to the component's lifecycle behavior or modal initialization timing that fixture.whenStable() cannot properly wait for in zoneless mode.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-04T05:50:17.637Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:953-964
Timestamp: 2025-12-04T05:50:17.637Z
Learning: In the siemens/element repository, when making tree-view tests zoneless-ready, jasmine.clock() should be used to mimic setTimeouts even in zoneless mode, as the component implementation relies on setTimeout calls that need to be controlled in tests.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-02T06:50:25.778Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1104
File: projects/element-ng/datepicker/components/si-day-selection.component.spec.ts:19-19
Timestamp: 2025-12-02T06:50:25.778Z
Learning: The `runOnPushChangeDetection` helper is located at `projects/element-ng/test-helpers/change-detection.helper.ts` and is shared across the element-ng project, not scoped under individual feature modules like datepicker.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-15T10:05:59.100Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1193
File: projects/element-ng/search-bar/si-search-bar.component.spec.ts:21-28
Timestamp: 2025-12-15T10:05:59.100Z
Learning: In tests that rely on Jasmine's fake clock to control time-based RxJS operators (e.g., debounceTime), use jasmine.clock().install() together with jasmine.clock().mockDate() to enable precise timing control. Without mockDate, scheduler-based operators may not respond to the fake clock. Apply this guidance to spec files (e.g., any file named *.spec.ts or *.spec.js) that test time-sensitive behavior, ensuring you install and mockDate before advancing time in tests.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-01T04:01:27.365Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1099
File: projects/element-ng/accordion/si-accordion.component.spec.ts:39-43
Timestamp: 2025-12-01T04:01:27.365Z
Learning: With Angular 20 and esbuild, synchronous `TestBed.configureTestingModule(...).compileComponents()` calls work correctly even when components use external templates (templateUrl), because esbuild pre-compiles templates at build time. The async/await pattern is not required in this scenario.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-01T14:12:11.111Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1104
File: projects/element-ng/datepicker/components/si-day-selection.component.spec.ts:198-202
Timestamp: 2025-12-01T14:12:11.111Z
Learning: In zoneless Angular tests (using provideZonelessChangeDetection), prefer `await fixture.whenStable()` over `fixture.detectChanges()` after dispatching events or triggering async operations, as `whenStable()` waits for all asynchronous operations to complete and better mimics the production environment.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
📚 Learning: 2025-12-04T05:50:38.735Z 
Learnt from: chintankavathia
Repo: siemens/element PR: 1135
File: projects/element-ng/tree-view/si-tree-view.component.spec.ts:1244-1245
Timestamp: 2025-12-04T05:50:38.735Z
Learning: In zoneless Angular tests with OnPush components, calling `await runOnPushChangeDetection(fixture)` followed by `await fixture.whenStable()` is NOT redundant. The `runOnPushChangeDetection` helper forces change detection to run for OnPush components, while `whenStable()` waits for all async operations to complete. Both are necessary and serve different purposes.

Applied to files:

  • projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts
🧬 Code graph analysis (1)
projects/element-ng/date-range-filter/si-date-range-filter.component.ts (2)
projects/element-ng/datepicker/si-datepicker.model.ts (1)
  • DateRange (170-173)
projects/element-ng/datepicker/si-datepicker.component.ts (2)
  • startDate (202-204)
  • endDate (206-208)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: build
🔇 Additional comments (5)
projects/element-ng/date-range-filter/si-date-range-filter.component.html (1)

67-68: LGTM! Signal-based binding pattern is correct.

The template correctly adapts to the signal-based refactor by using one-way binding [dateRange]="dateRange()" to pass the current signal value and an explicit event handler (dateRangeChange)="updateFromDateRange($event)" to receive updates from the datepicker.

projects/element-ng/date-range-filter/si-date-range-filter.component.spec.ts (1)

279-279: LGTM! Explicit change detection calls ensure proper synchronization.

The added fixture.detectChanges() calls after setting the range and clicking the preset ensure that view updates are synchronized in zoneless mode, which aligns with established testing patterns.

Based on learnings: In zoneless Angular tests, explicit change detection calls are often necessary to synchronize view updates with state changes.

Also applies to: 283-283

projects/element-ng/date-range-filter/si-date-range-filter.component.ts (3)

305-305: LGTM! Signal-based reactive state management.

Converting the dateRange property to a signal enables reactive state management and aligns with modern Angular patterns. The readonly modifier correctly prevents reassignment of the signal itself.

344-346: LGTM! Computed properly derives from signal.

The focusedDate computed correctly reads from the dateRange signal to derive the focused date for the datepicker.

417-420: LGTM! Signal update pattern is correct.

The method correctly updates the signal using .set() after resolving the date range filter.

@spliffone spliffone force-pushed the fix/update-date-range-filter-range branch from 773bebf to 857a74a Compare December 16, 2025 10:29
@github-actions
Copy link

github-actions bot commented Dec 16, 2025

Documentation.
Examples.
Playwright report.

Coverage Reports:

@spliffone spliffone force-pushed the fix/update-date-range-filter-range branch from 857a74a to 5a62a65 Compare December 16, 2025 10:51
@spike-rabbit spike-rabbit requested a review from dr-itz December 17, 2025 10:19
@spike-rabbit spike-rabbit force-pushed the fix/update-date-range-filter-range branch from 5a62a65 to acdab56 Compare December 17, 2025 12:13
@spike-rabbit spike-rabbit enabled auto-merge (rebase) December 17, 2025 12:13
@github-actions
Copy link

github-actions bot commented Dec 17, 2025

Code Coverage

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

@dr-itz dr-itz dr-itz approved these changes

@spike-rabbit spike-rabbit spike-rabbit approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@spliffone @dr-itz @spike-rabbit