inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-2487] Fix Checkbox Widget bug (#5657)

Browse Source
This commit is contained in:
davidcanonieto
2020-04-30 13:19:33 +01:00
committed by GitHub
parent 5da20c10cb
commit 7627b01bb1
3 changed files with 77 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/core/form/components/widgets/checkbox/checkbox.widget.html
View File

@@ -5,8 +5,8 @@
color="primary"
[required]="field.required"
[disabled]="field.readOnly || readOnly"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)">
[(ngModel)]="checkboxValue"
(ngModelChange)="onCheckboxToggled()">
{{field.name | translate }}
<span *ngIf="field.required">*</span>
</mat-checkbox>

61
lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts
View File

@@ -25,6 +25,7 @@ import { FormBaseModule } from 'core/form/form-base.module';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateService, TranslateStore, TranslateLoader } from '@ngx-translate/core';
import { TranslateLoaderService } from 'core/services';
import { MatCheckboxModule } from '@angular/material';
describe('CheckboxWidgetComponent', () => {
@@ -35,7 +36,8 @@ describe('CheckboxWidgetComponent', () => {
setupTestBed({
imports: [
NoopAnimationsModule,
FormBaseModule
FormBaseModule,
MatCheckboxModule
],
providers: [
TranslateStore,
@@ -62,13 +64,68 @@ describe('CheckboxWidgetComponent', () => {
readOnly: false,
required: true
});
fixture.detectChanges();
});
it('should be marked as invalid when required', async(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(element.querySelector('.adf-invalid')).not.toBeNull();
});
}));
it('should be checked if boolean true is passed', async(() => {
widget.field.value = true;
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input');
expect(checkbox.getAttribute('aria-checked')).toBe('true');
expect(widget.checkboxValue).toBe(true);
});
}));
it('should be checked if string "true" is passed', async(() => {
widget.field.value = 'true';
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input');
expect(checkbox.getAttribute('aria-checked')).toBe('true');
expect(widget.checkboxValue).toBe(true);
});
}));
it('should not be checked if boolean false is passed', async(() => {
widget.field.value = false;
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input');
expect(checkbox.getAttribute('aria-checked')).toBe('false');
expect(widget.checkboxValue).toBe(false);
});
}));
it('should not be checked if string "false" is passed', async(() => {
widget.field.value = 'false';
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input');
expect(checkbox.getAttribute('aria-checked')).toBe('false');
expect(widget.checkboxValue).toBe(false);
});
}));
it('should not be checked if null is passed', async(() => {
widget.field.value = null;
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input');
expect(checkbox.getAttribute('aria-checked')).toBe('false');
expect(widget.checkboxValue).toBe(false);
});
}));
});
});

19
lib/core/form/components/widgets/checkbox/checkbox.widget.ts
View File

@@ -17,9 +17,9 @@
/* tslint:disable:component-selector no-input-rename */
import { Component, ViewEncapsulation } from '@angular/core';
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { FormService } from './../../../services/form.service';
import { baseHost , WidgetComponent } from './../widget.component';
import { baseHost, WidgetComponent } from './../widget.component';
@Component({
selector: 'checkbox-widget',
@@ -27,10 +27,23 @@ import { baseHost , WidgetComponent } from './../widget.component';
host: baseHost,
encapsulation: ViewEncapsulation.None
})
export class CheckboxWidgetComponent extends WidgetComponent {
export class CheckboxWidgetComponent extends WidgetComponent implements OnInit {
checkboxValue: boolean;
constructor(public formService: FormService) {
super(formService);
}
ngOnInit() {
this.checkboxValue = this.parseValue(this.field.value);
}
parseValue(value: any) {
return value === true || value === 'true';
}
onCheckboxToggled() {
this.field.value = this.checkboxValue;
this.onFieldChanged(this.field);
}
}