Skip to content

Commit db5b073

Browse files
valadzhovvaladzhov
committed
fix(time-picker): Refactoring the tests. #3978 
1 parent 5f70905 commit db5b073

File tree

4 files changed

+44
-64
lines changed

4 files changed

+44
-64
lines changed

‎projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ import { InteractionMode } from '../core/enums';
44
/** @hidden */
55
export const IGX_TIME_PICKER_COMPONENT = 'IgxTimePickerComponentToken';
66

7+
/** @hidden */
8+
export enum TimeParts {
9+
Hour = 'hour',
10+
Minute = 'minute',
11+
Seconds = 'seconds',
12+
amPM = 'ampm'
13+
}
14+
715
/** @hidden */
816
export interface IgxTimePickerBase {
917
hourList: ElementRef;
@@ -40,11 +48,3 @@ export interface IgxTimePickerBase {
4048
parseMask(preserveAmPm?: boolean): string;
4149
}
4250

43-
/** @hidden */
44-
export enum TimeParts {
45-
Hour = 'hour',
46-
Minute = 'minute',
47-
Seconds = 'seconds',
48-
amPM = 'ampm'
49-
}
50-

‎projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -62,22 +62,22 @@ <h2 class="igx-time-picker__header-hour">
6262
<div class="igx-time-picker__body">
6363
<div *ngIf="showHoursList" #hourList [igxItemList]="'hourList'">
6464
<span [igxHourItem]="hour"
65-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(TimeParts.Hour, hour)}"
65+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Hour, hour)}"
6666
*ngFor="let hour of hourView">{{ hour }}</span>
6767
</div>
6868
<div *ngIf="showMinutesList" #minuteList [igxItemList]="'minuteList'">
6969
<span [igxMinuteItem]="minute"
70-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(TimeParts.Minute, minute)}"
70+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Minute, minute)}"
7171
*ngFor="let minute of minuteView" >{{ minute }}</span>
7272
</div>
7373
<div *ngIf="showSecondsList" #secondsList [igxItemList]="'secondsList'">
7474
<span [igxSecondsItem]="seconds"
75-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(TimeParts.Seconds, seconds)}"
75+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Seconds, seconds)}"
7676
*ngFor="let seconds of secondsView">{{ seconds }}</span>
7777
</div>
7878
<div *ngIf="showAmPmList" #ampmList [igxItemList]="'ampmList'">
7979
<span [igxAmPmItem]="ampm"
80-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(TimeParts.amPM, ampm)}"
80+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.amPM, ampm)}"
8181
*ngFor="let ampm of ampmView">{{ ampm }}</span>
8282
</div>
8383
</div>

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

+27-49
Original file line numberDiff line numberDiff line change
@@ -1669,73 +1669,51 @@ describe('IgxTimePicker', () => {
16691669
expect(dummyInput).toEqual(document.activeElement);
16701670
}));
16711671

1672-
it('should apply disabled style for time outside the min and max values', fakeAsync(() => {
1672+
fit('should apply disabled style for time outside the min and max values', fakeAsync(() => {
1673+
timePicker = new IgxTimePickerComponent(null, null);
16731674
fixture.detectChanges();
16741675
timePicker.format = 'hh:mm:ss tt';
16751676
const date = new Date(2018, 10, 27, 9, 50, 58);
1677+
timePicker.value = date;
16761678

16771679
timePicker.minValue = '09:15:10 AM';
16781680
timePicker.maxValue = '11:15:10 AM';
16791681

1680-
fixture.detectChanges();
1681-
timePicker.value = date;
1682+
timePicker.selectedHour = '06';
1683+
timePicker.selectedMinute = '25';
1684+
timePicker.selectedSeconds = '00';
1685+
timePicker.selectedAmPm = 'AM';
16821686

1683-
timePicker.openDialog();
16841687
fixture.detectChanges();
1685-
const hoursList = fixture.debugElement.queryAll(By.directive(IgxHourItemDirective));
1686-
const minutesList = fixture.debugElement.queryAll(By.directive(IgxMinuteItemDirective));
1687-
const secondsList = fixture.debugElement.queryAll(By.directive(IgxSecondsItemDirective));
1688-
const ampmList = fixture.debugElement.queryAll(By.directive(IgxAmPmItemDirective));
16891688

1690-
let hoursListItem = (hoursList.find(t => t.nativeElement.innerHTML === '09')).injector.get(IgxHourItemDirective);
1691-
let minutesListItem = (minutesList.find(t => t.nativeElement.innerHTML === '55')).injector.get(IgxMinuteItemDirective);
1692-
let secondsListItem = (secondsList.find(t => t.nativeElement.innerHTML === '58')).injector.get(IgxSecondsItemDirective);
1693-
let ampmListItem = (ampmList.find(t => t.nativeElement.innerHTML === 'AM')).injector.get(IgxAmPmItemDirective);
1689+
// The selected time is 06:25:00 AM
1690+
// Testing 09:25:00 AM
1691+
expect(timePicker.applyDisabledStyleForItem('hour', '9')).toBe(false);
16941692

1695-
expect(hoursListItem.applyDisabledStyleForHours).toBe(false);
1696-
expect(minutesListItem.applyDisabledStyleForMinutes).toBe(false);
1697-
expect(secondsListItem.applyDisabledStyleForSeconds).toBe(false);
1698-
expect(ampmListItem.applyDisabledStyleForAmPm).toBe(false);
1699-
1700-
timePicker.scrollAmPmIntoView('PM');
1701-
fixture.detectChanges();
1702-
ampmListItem = (ampmList.find(t => t.nativeElement.innerHTML === 'PM')).injector.get(IgxAmPmItemDirective);
1693+
timePicker.selectedHour = '9'; // The selected time is 09:25:00 AM
17031694

1704-
expect(hoursListItem.applyDisabledStyleForHours).toBe(true);
1705-
expect(minutesListItem.applyDisabledStyleForMinutes).toBe(true);
1706-
expect(secondsListItem.applyDisabledStyleForSeconds).toBe(true);
1707-
expect(ampmListItem.applyDisabledStyleForAmPm).toBe(true);
1695+
// Testing 10:25:00 AM
1696+
expect(timePicker.applyDisabledStyleForItem('hour', '10')).toBe(false);
17081697

1709-
hoursListItem = (hoursList.find(t => t.nativeElement.innerHTML === '06')).injector.get(IgxHourItemDirective);
1710-
minutesListItem = (minutesList.find(t => t.nativeElement.innerHTML === '35')).injector.get(IgxMinuteItemDirective);
1711-
secondsListItem = (secondsList.find(t => t.nativeElement.innerHTML === '55')).injector.get(IgxSecondsItemDirective);
1698+
timePicker.selectedHour = '10';
1699+
timePicker.selectedMinute = '10'; // The selected time is 10:10:00 AM
17121700

1713-
expect(hoursListItem.applyDisabledStyleForHours).toBe(true);
1714-
expect(minutesListItem.applyDisabledStyleForMinutes).toBe(true);
1715-
expect(secondsListItem.applyDisabledStyleForSeconds).toBe(true);
1716-
expect(ampmListItem.applyDisabledStyleForAmPm).toBe(true);
1701+
// Testing 11:10:00 AM
1702+
expect(timePicker.applyDisabledStyleForItem('hour', '11')).toBe(false);
17171703

1718-
timePicker.minValue = '06:45:57 AM';
1719-
timePicker.maxValue = '06:55:59 AM';
1704+
timePicker.selectedHour = '11'; // The selected time is 11:10:00 AM
17201705

1721-
hoursListItem = (hoursList.find(t => t.nativeElement.innerHTML === '06')).injector.get(IgxHourItemDirective);
1722-
minutesListItem = (minutesList.find(t => t.nativeElement.innerHTML === '50')).injector.get(IgxMinuteItemDirective);
1723-
secondsListItem = (secondsList.find(t => t.nativeElement.innerHTML === '58')).injector.get(IgxSecondsItemDirective);
1724-
ampmListItem = (ampmList.find(t => t.nativeElement.innerHTML === 'AM')).injector.get(IgxAmPmItemDirective);
1706+
// Testing 12:11:00 AM
1707+
expect(timePicker.applyDisabledStyleForItem('hour', '12')).toBe(true);
1708+
// Testing 11:28:00 AM
1709+
expect(timePicker.applyDisabledStyleForItem('minute', '28')).toBe(true);
1710+
// Testing 11:10:28 AM
1711+
expect(timePicker.applyDisabledStyleForItem('seconds', '28')).toBe(false);
17251712

1726-
timePicker.scrollHourIntoView('06');
1727-
fixture.detectChanges();
1728-
timePicker.scrollMinuteIntoView('50');
1729-
fixture.detectChanges();
1730-
timePicker.scrollSecondsIntoView('58');
1731-
fixture.detectChanges();
1732-
timePicker.scrollAmPmIntoView('AM');
1733-
fixture.detectChanges();
1713+
timePicker.selectedAmPm = 'PM'; // The selected time is 11:10:00 PM
17341714

1735-
expect(hoursListItem.applyDisabledStyleForHours).toBe(false);
1736-
expect(minutesListItem.applyDisabledStyleForMinutes).toBe(false);
1737-
expect(secondsListItem.applyDisabledStyleForSeconds).toBe(false);
1738-
expect(ampmListItem.applyDisabledStyleForAmPm).toBe(false);
1715+
// Testing 11:10:00 AM
1716+
expect(timePicker.applyDisabledStyleForItem('ampm', 'AM')).toBe(false);
17391717
}));
17401718
});
17411719

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import {
3737
} from './time-picker.directives';
3838
import { Subject, fromEvent, interval, animationFrameScheduler, Subscription } from 'rxjs';
3939
import { EditorProvider } from '../core/edit-provider';
40-
import { IgxTimePickerBase, IGX_TIME_PICKER_COMPONENT } from './time-picker.common';
40+
import { IgxTimePickerBase, IGX_TIME_PICKER_COMPONENT, TimeParts } from './time-picker.common';
4141
import { AbsoluteScrollStrategy } from '../services/overlay/scroll';
4242
import { AutoPositionStrategy } from '../services/overlay/position';
4343
import { OverlaySettings } from '../services/overlay/utilities';
@@ -50,7 +50,6 @@ import { ITimePickerResourceStrings } from '../core/i18n/time-picker-resources';
5050
import { CurrentResourceStrings } from '../core/i18n/resources';
5151
import { KEYS, CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
5252
import { InteractionMode } from '../core/enums';
53-
import { TimeParts } from './time-picker.common';
5453

5554
let NEXT_ID = 0;
5655
const ITEMS_COUNT = 7;
@@ -154,7 +153,10 @@ export class IgxTimePickerComponent implements
154153
this.onValidationFailed.emit(args);
155154
}
156155
}
157-
TimeParts: any = Object.assign({}, TimeParts);
156+
/**
157+
* @hidden @internal
158+
*/
159+
timeParts: any = Object.assign({}, TimeParts);
158160

159161
/**
160162
* An accessor that returns the value of `igx-time-picker` component.

0 commit comments

Comments
 (0)