From bb04669e2f4b87dbee4bcdd484849700cacad3de Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Wed, 16 Apr 2025 08:34:28 +0200
Subject: [PATCH] Fix console error
"ExpressionChangedAfterItHasBeenCheckedError"
---
.../button-toggle.component.spec.ts | 18 +++++++++++++-----
.../button-toggle/button-toggle.component.ts | 18 +++++++++++++-----
2 files changed, 26 insertions(+), 10 deletions(-)
diff --git a/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.spec.ts b/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.spec.ts
index b628713544..6fb9cc0281 100644
--- a/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.spec.ts
@@ -68,22 +68,30 @@ describe('ButtonToggleComponent', () => {
});
});
- describe('isChecked', () => {
+ describe('ngDoCheck', () => {
it('should call isSelected', () => {
component.isSelected = jest.fn();
component.value = 'test';
- component.isChecked;
+ component.ngDoCheck();
expect(component.isSelected).toHaveBeenCalledWith('test');
});
- it('should return result of isSelected', () => {
+ it('should set isChecked', () => {
component.isSelected = jest.fn().mockReturnValue(true);
- const result: boolean = component.isChecked;
+ component.ngDoCheck();
- expect(result).toBe(true);
+ expect(component.isChecked).toBe(true);
+ });
+ });
+
+ describe('isToggleChecked', () => {
+ it('should return isChecked', () => {
+ component.isChecked = true;
+
+ expect(component.isToggleChecked).toBe(true);
});
});
});
diff --git a/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.ts b/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.ts
index 682b688db3..33755af2e7 100644
--- a/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.ts
+++ b/alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.ts
@@ -22,7 +22,7 @@
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
import { CommonModule } from '@angular/common';
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, DoCheck, HostBinding, Input } from '@angular/core';
import { CheckIconComponent } from '../../icons/check-icon/check-icon.component';
@Component({
@@ -41,18 +41,26 @@ import { CheckIconComponent } from '../../icons/check-icon/check-icon.component'
(blur)="isFocused = false"
data-test-id="button-toggle"
>
- <ods-check-icon size="small" *ngIf="isChecked" data-test-id="toggle-check-icon" />
+ @if (isChecked) {
+ <ods-check-icon size="small" data-test-id="toggle-check-icon" />
+ }
<p class="text-sm">{{ label }}</p>
</button>`,
})
-export class ButtonToggleComponent {
+export class ButtonToggleComponent implements DoCheck {
@Input({ required: true }) label!: string;
@Input({ required: true }) value!: string;
@Input() onClick: () => void;
@Input() isSelected: (value: string) => boolean = () => false;
+ isChecked: boolean = false;
+
@HostBinding('class.ods-focused') isFocused: boolean = false;
- @HostBinding('class.ods-button-toggle-checked') get isChecked() {
- return this.isSelected(this.value);
+ @HostBinding('class.ods-button-toggle-checked') get isToggleChecked() {
+ return this.isChecked;
+ }
+
+ ngDoCheck(): void {
+ this.isChecked = this.isSelected(this.value);
}
}
--
GitLab