Skip to content

Commit e22088b

Browse files
PlamenaMitevaLipata
PlamenaMiteva
authored and
Lipata
committed
feat(date-picker, time-picker, select): implement setDisableState #6025 (#6154)
1 parent d2cfd8c commit e22088b

File tree

6 files changed

+227
-68
lines changed

6 files changed

+227
-68
lines changed

‎projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

Lines changed: 62 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, ViewChild } from '@angular/core';
22
import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
3-
import { FormsModule } from '@angular/forms';
3+
import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule} from '@angular/forms';
44
import { By } from '@angular/platform-browser';
55
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
66
import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component';
@@ -30,9 +30,10 @@ describe('IgxDatePicker', () => {
3030
IgxDatePickerEditableComponent,
3131
IgxDatePickerCustomizedComponent,
3232
IgxDropDownDatePickerRetemplatedComponent,
33-
IgxDatePickerOpeningComponent
33+
IgxDatePickerOpeningComponent,
34+
IgxDatePickerReactiveFormComponent
3435
],
35-
imports: [IgxDatePickerModule, FormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxCalendarModule,
36+
imports: [IgxDatePickerModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxCalendarModule,
3637
IgxButtonModule, IgxTextSelectionModule]
3738
})
3839
.compileComponents();
@@ -1114,6 +1115,42 @@ describe('IgxDatePicker', () => {
11141115
expect(input.value.substring(input.selectionStart, input.selectionEnd)).toEqual(input.value);
11151116
}));
11161117
});
1118+
1119+
describe('Reactive form', () => {
1120+
let fixture: ComponentFixture<IgxDatePickerReactiveFormComponent>;
1121+
let datePicker: IgxDatePickerComponent;
1122+
1123+
beforeEach(() => {
1124+
fixture = TestBed.createComponent(IgxDatePickerReactiveFormComponent);
1125+
datePicker = fixture.componentInstance.datePicker;
1126+
fixture.detectChanges();
1127+
});
1128+
1129+
// Bug #6025 Date picker does not disable in reactive form
1130+
it('Should disable when form is disabled', fakeAsync(() => {
1131+
fixture.detectChanges();
1132+
const formGroup: FormGroup = fixture.componentInstance.reactiveForm;
1133+
const inputGroup = fixture.debugElement.query(By.css('.igx-input-group'));
1134+
1135+
inputGroup.nativeElement.click();
1136+
tick();
1137+
fixture.detectChanges();
1138+
expect(datePicker.collapsed).toBeFalsy();
1139+
1140+
datePicker.closeCalendar();
1141+
fixture.detectChanges();
1142+
1143+
formGroup.disable();
1144+
tick();
1145+
fixture.detectChanges();
1146+
1147+
inputGroup.nativeElement.click();
1148+
tick();
1149+
fixture.detectChanges();
1150+
const dateDropDown = document.getElementsByClassName('igx-date-picker--dropdown');
1151+
expect(dateDropDown.length).toEqual(0);
1152+
}));
1153+
});
11171154
});
11181155

11191156
@Component({
@@ -1259,3 +1296,25 @@ export class IgxDatePickerCustomizedComponent {
12591296
export class IgxDatePickerOpeningComponent {
12601297
@ViewChild(IgxDatePickerComponent, { static: true }) public datePicker: IgxDatePickerComponent;
12611298
}
1299+
1300+
@Component({
1301+
template: `
1302+
<form [formGroup]="reactiveForm">
1303+
<p>
1304+
<igx-date-picker formControlName="datePickerReactive" #datePickerReactive></igx-date-picker>
1305+
</p>
1306+
</form>
1307+
`
1308+
})
1309+
class IgxDatePickerReactiveFormComponent {
1310+
@ViewChild('datePickerReactive', { read: IgxDatePickerComponent, static: true })
1311+
public datePicker: IgxDatePickerComponent;
1312+
reactiveForm: FormGroup;
1313+
1314+
constructor(fb: FormBuilder) {
1315+
this.reactiveForm = fb.group({
1316+
datePickerReactive: new FormControl(''),
1317+
});
1318+
}
1319+
onSubmitReactive() { }
1320+
}

‎projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -831,6 +831,11 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
831831
*/
832832
public registerOnTouched(fn: () => void) { this._onTouchedCallback = fn; }
833833

834+
/**
835+
*@hidden
836+
*/
837+
public setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
838+
834839
/** @hidden */
835840
public getEditElement() {
836841
const inputElement = this.editableInput || this.readonlyInput || this.input;

‎projects/igniteui-angular/src/lib/select/select.component.spec.ts

Lines changed: 86 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
import { IgxInputState } from './../directives/input/input.directive';
2-
import { Component, ViewChild, DebugElement, OnInit } from '@angular/core';
2+
import { Component, ViewChild, DebugElement } from '@angular/core';
33
import { async, TestBed, tick, fakeAsync } from '@angular/core/testing';
44
import { FormsModule, FormGroup, FormBuilder, FormControl, Validators, ReactiveFormsModule, NgForm } from '@angular/forms';
55
import { By } from '@angular/platform-browser';
66
import { IgxDropDownModule } from '../drop-down/index';
77
import { IgxIconModule } from '../icon/index';
88
import { IgxInputGroupModule } from '../input-group/index';
99
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
10-
import { IgxSelectComponent} from './select.component';
10+
import { IgxSelectComponent } from './select.component';
1111
import { IgxSelectItemComponent } from './select-item.component';
1212
import { ISelectionEventArgs } from '../drop-down/drop-down.common';
13-
import { IgxToggleModule, IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
13+
import { IgxToggleModule } from '../directives/toggle/toggle.directive';
1414
import { configureTestSuite } from '../test-utils/configure-suite';
1515
import { HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy } from '../services';
1616
import { IgxSelectModule } from './select.module';
17-
import { wait } from '../test-utils/ui-interactions.spec';
1817

1918
const CSS_CLASS_INPUT_GROUP = 'igx-input-group';
2019
const CSS_CLASS_INPUT = 'igx-input-group__input';
@@ -604,6 +603,32 @@ describe('igxSelect', () => {
604603
inputGroupWithRequiredAsterisk = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
605604
expect(inputGroupWithRequiredAsterisk).toBeDefined();
606605
}));
606+
607+
// Bug #6025 Select does not disable in reactive form
608+
it('Should disable when form is disabled', fakeAsync(() => {
609+
const fix = TestBed.createComponent(IgxSelectReactiveFormComponent);
610+
fix.detectChanges();
611+
const formGroup: FormGroup = fix.componentInstance.reactiveForm;
612+
const selectComp = fix.componentInstance.select;
613+
const inputGroup = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP));
614+
615+
inputGroup.nativeElement.click();
616+
tick();
617+
fix.detectChanges();
618+
expect(selectComp.collapsed).toBeFalsy();
619+
620+
selectComp.close();
621+
fix.detectChanges();
622+
623+
formGroup.disable();
624+
tick();
625+
fix.detectChanges();
626+
627+
inputGroup.nativeElement.click();
628+
tick();
629+
fix.detectChanges();
630+
expect(selectComp.collapsed).toBeTruthy();
631+
}));
607632
});
608633
describe('Selection tests: ', () => {
609634
describe('Using simple select component', () => {
@@ -1181,70 +1206,70 @@ describe('igxSelect', () => {
11811206
}));
11821207

11831208
it('should populate the input with the specified selected item text @input, instead of the selected item element innerText',
1184-
fakeAsync(() => {
1185-
let selectedItemIndex = 1;
1186-
const groupIndex = 0;
1187-
const groupElement = selectList.children[groupIndex];
1188-
const itemElementToSelect = groupElement.children[selectedItemIndex].nativeElement;
1189-
1190-
const checkInputValue = function () {
1191-
expect(select.selectedItem.text).toEqual(select.input.value);
1192-
expect(inputElement.nativeElement.value.toString().trim()).toEqual(select.selectedItem.text);
1193-
};
1209+
fakeAsync(() => {
1210+
let selectedItemIndex = 1;
1211+
const groupIndex = 0;
1212+
const groupElement = selectList.children[groupIndex];
1213+
const itemElementToSelect = groupElement.children[selectedItemIndex].nativeElement;
1214+
1215+
const checkInputValue = function () {
1216+
expect(select.selectedItem.text).toEqual(select.input.value);
1217+
expect(inputElement.nativeElement.value.toString().trim()).toEqual(select.selectedItem.text);
1218+
};
11941219

1195-
// There is not a selected item initially
1196-
const selectedItems = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_SELECTED_ITEM));
1197-
expect(selectedItems.length).toEqual(0);
1198-
expect(select.value).toBeUndefined();
1199-
expect(select.input.value).toEqual('');
1200-
expect(inputElement.nativeElement.value).toEqual('');
1220+
// There is not a selected item initially
1221+
const selectedItems = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_SELECTED_ITEM));
1222+
expect(selectedItems.length).toEqual(0);
1223+
expect(select.value).toBeUndefined();
1224+
expect(select.input.value).toEqual('');
1225+
expect(inputElement.nativeElement.value).toEqual('');
12011226

1202-
// Select item - mouse click
1203-
select.toggle();
1204-
tick();
1205-
fixture.detectChanges();
1206-
itemElementToSelect.click();
1207-
fixture.detectChanges();
1208-
checkInputValue();
1227+
// Select item - mouse click
1228+
select.toggle();
1229+
tick();
1230+
fixture.detectChanges();
1231+
itemElementToSelect.click();
1232+
fixture.detectChanges();
1233+
checkInputValue();
12091234

1210-
// Select item - selectItem method
1211-
selectedItemIndex = 2;
1212-
select.selectItem(select.items[selectedItemIndex]);
1213-
tick();
1214-
fixture.detectChanges();
1215-
select.toggle();
1216-
tick();
1217-
fixture.detectChanges();
1218-
checkInputValue();
1235+
// Select item - selectItem method
1236+
selectedItemIndex = 2;
1237+
select.selectItem(select.items[selectedItemIndex]);
1238+
tick();
1239+
fixture.detectChanges();
1240+
select.toggle();
1241+
tick();
1242+
fixture.detectChanges();
1243+
checkInputValue();
12191244

1220-
// Select item - item selected property
1221-
selectedItemIndex = 3;
1222-
select.items[selectedItemIndex].selected = true;
1223-
fixture.detectChanges();
1224-
checkInputValue();
1225-
}));
1245+
// Select item - item selected property
1246+
selectedItemIndex = 3;
1247+
select.items[selectedItemIndex].selected = true;
1248+
fixture.detectChanges();
1249+
checkInputValue();
1250+
}));
12261251

12271252
it('Should populate the input with the selected item element innerText, when text @Input is undefined(not set)',
1228-
fakeAsync(() => {
1229-
const selectedItemIndex = 2;
1230-
// const groupIndex = 0;
1231-
// const groupElement = selectList.children[groupIndex];
1232-
// const itemElementToSelect = groupElement.children[selectedItemIndex].nativeElement;
1233-
const expectedInputText = 'Paris star';
1234-
1235-
const checkInputValue = function () {
1236-
expect(select.selectedItem.itemText).toEqual(expectedInputText);
1237-
expect(select.selectedItem.itemText).toEqual(select.input.value);
1238-
expect(inputElement.nativeElement.value.toString().trim()).toEqual(select.selectedItem.itemText);
1239-
};
1253+
fakeAsync(() => {
1254+
const selectedItemIndex = 2;
1255+
// const groupIndex = 0;
1256+
// const groupElement = selectList.children[groupIndex];
1257+
// const itemElementToSelect = groupElement.children[selectedItemIndex].nativeElement;
1258+
const expectedInputText = 'Paris star';
1259+
1260+
const checkInputValue = function () {
1261+
expect(select.selectedItem.itemText).toEqual(expectedInputText);
1262+
expect(select.selectedItem.itemText).toEqual(select.input.value);
1263+
expect(inputElement.nativeElement.value.toString().trim()).toEqual(select.selectedItem.itemText);
1264+
};
12401265

1241-
// Select item - no select-item text. Should set item;s element innerText as input value.
1242-
(select.items[selectedItemIndex] as IgxSelectItemComponent).text = undefined;
1243-
select.items[selectedItemIndex].selected = true;
1244-
fixture.detectChanges();
1245-
tick();
1246-
checkInputValue();
1247-
}));
1266+
// Select item - no select-item text. Should set item;s element innerText as input value.
1267+
(select.items[selectedItemIndex] as IgxSelectItemComponent).text = undefined;
1268+
select.items[selectedItemIndex].selected = true;
1269+
fixture.detectChanges();
1270+
tick();
1271+
checkInputValue();
1272+
}));
12481273
});
12491274
});
12501275
describe('Grouped items tests: ', () => {

‎projects/igniteui-angular/src/lib/select/select.component.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,11 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
218218
/** @hidden @internal */
219219
public registerOnTouched(fn: any): void { }
220220

221+
/** @hidden @internal */
222+
public setDisabledState(isDisabled: boolean): void {
223+
this.disabled = isDisabled;
224+
}
225+
221226
/** @hidden @internal */
222227
public getEditElement(): HTMLElement {
223228
return this.input.nativeElement;

0 commit comments

Comments
 (0)