Skip to content
Snippets Groups Projects
Commit c79deb1e authored by Alexander Reifschneider's avatar Alexander Reifschneider
Browse files

Merge branch 'fix-button-toggle-bug' into 'main'

Fix console error "ExpressionChangedAfterItHasBeenCheckedError"

See merge request !119
parents f2b13b5d bb04669e
Branches
Tags
1 merge request!119Fix console error "ExpressionChangedAfterItHasBeenCheckedError"
......@@ -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);
});
});
});
......
......@@ -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);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment