Skip to content

Commit

Permalink
feat(timepicker): Added support for keyboard and mouse events
Browse files Browse the repository at this point in the history 
fix ng-bootstrap#459
based on ng-bootstrap#468
  • Loading branch information
@sendilkumarn
sendilkumarn authored and troy committed Mar 28, 2017
1 parent 0883635 commit 8c0ade5
Show file tree
Hide file tree
Showing 2 changed files with 321 additions and 11 deletions.
261 changes: 261 additions & 0 deletions src/timepicker/timepicker.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,19 @@ import {NgbTimepicker} from './timepicker';
const createTestComponent = (html: string) =>
createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;

function createKeyDownEvent(key: 'ArrowUp' | 'ArrowDown') {
const event = {key: key, preventDefault: () => {}};
spyOn(event, 'preventDefault');
return event;
}

function createMouseWheelEvent(detail: number) {
const event = {detail: detail, preventDefault: () => {}};
spyOn(event, 'preventDefault');
return event;
}


function getTimepicker(el: HTMLElement) {
return el.querySelector('ngb-timepicker');
}
Expand Down Expand Up @@ -234,6 +247,72 @@ describe('ngb-timepicker', () => {
});
}));


it('should increment / decrement hours on key up/down', async(() => {
const html = `<ngb-timepicker [(ngModel)]="model"></ngb-timepicker>`;

const fixture = createTestComponent(html);
fixture.componentInstance.model = {hour: 10, minute: 30, second: 0};
fixture.detectChanges();
fixture.whenStable()
.then(() => {
fixture.detectChanges();
return fixture.whenStable();
})
.then(() => {

const inputs = fixture.debugElement.queryAll(By.css('input'));

expectToDisplayTime(fixture.nativeElement, '10:30');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});

const upEvent = createKeyDownEvent('ArrowUp');
inputs[0].triggerEventHandler('keydown.ArrowUp', upEvent); // H+
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '11:30');
expect(fixture.componentInstance.model).toEqual({hour: 11, minute: 30, second: 0});

const downEvent = createKeyDownEvent('ArrowDown');
inputs[0].triggerEventHandler('keydown.ArrowDown', downEvent); // H-
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '10:30');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});
});
}));


it('should increment / decrement hours on mouse wheel up/down', async(() => {
const html = `<ngb-timepicker [(ngModel)]="model"></ngb-timepicker>`;

const fixture = createTestComponent(html);
fixture.componentInstance.model = {hour: 10, minute: 30, second: 0};
fixture.detectChanges();
fixture.whenStable()
.then(() => {
fixture.detectChanges();
return fixture.whenStable();
})
.then(() => {

const inputs = fixture.debugElement.queryAll(By.css('input'));

expectToDisplayTime(fixture.nativeElement, '10:30');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});

const upScroll = createMouseWheelEvent(50);
inputs[0].triggerEventHandler('mousewheel', upScroll); // H+
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '11:30');
expect(fixture.componentInstance.model).toEqual({hour: 11, minute: 30, second: 0});

const downScroll = createMouseWheelEvent(-50);
inputs[0].triggerEventHandler('mousewheel', downScroll); // H-
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '10:30');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});
});
}));

it('should wrap hours', async(() => {
const html = `<ngb-timepicker [(ngModel)]="model"></ngb-timepicker>`;

Expand Down Expand Up @@ -294,6 +373,70 @@ describe('ngb-timepicker', () => {
});
}));

it('should increment / decrement minutes on key up/down', async(() => {
const html = `<ngb-timepicker [(ngModel)]="model"></ngb-timepicker>`;

const fixture = createTestComponent(html);
fixture.componentInstance.model = {hour: 10, minute: 30, second: 0};
fixture.detectChanges();
fixture.whenStable()
.then(() => {
fixture.detectChanges();
return fixture.whenStable();
})
.then(() => {

const inputs = fixture.debugElement.queryAll(By.css('input'));

expectToDisplayTime(fixture.nativeElement, '10:30');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});

const upEvent = createKeyDownEvent('ArrowUp');
inputs[1].triggerEventHandler('keydown.ArrowUp', upEvent); // M+
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '10:31');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 31, second: 0});

const downEvent = createKeyDownEvent('ArrowDown');
inputs[1].triggerEventHandler('keydown.ArrowDown', downEvent); // M-
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '10:30');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});
});
}));

it('should increment / decrement minutes on mouse wheel up/down', async(() => {
const html = `<ngb-timepicker [(ngModel)]="model"></ngb-timepicker>`;

const fixture = createTestComponent(html);
fixture.componentInstance.model = {hour: 10, minute: 30, second: 0};
fixture.detectChanges();
fixture.whenStable()
.then(() => {
fixture.detectChanges();
return fixture.whenStable();
})
.then(() => {

const inputs = fixture.debugElement.queryAll(By.css('input'));

expectToDisplayTime(fixture.nativeElement, '10:30');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});

const upScroll = createMouseWheelEvent(50);
inputs[1].triggerEventHandler('mousewheel', upScroll); // M+
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '10:31');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 31, second: 0});

const downScroll = createMouseWheelEvent(-50);
inputs[1].triggerEventHandler('mousewheel', downScroll); // M-
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '10:30');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});
});
}));

it('should wrap minutes', async(() => {
const html = `<ngb-timepicker [(ngModel)]="model"></ngb-timepicker>`;

Expand Down Expand Up @@ -351,6 +494,69 @@ describe('ngb-timepicker', () => {
});
}));

it('should increment / decrement seconds on key up/down', async(() => {
const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true"></ngb-timepicker>`;

const fixture = createTestComponent(html);
fixture.componentInstance.model = {hour: 10, minute: 30, second: 0};
fixture.detectChanges();
fixture.whenStable()
.then(() => {
fixture.detectChanges();
return fixture.whenStable();
})
.then(() => {
const inputs = fixture.debugElement.queryAll(By.css('input'));

expectToDisplayTime(fixture.nativeElement, '10:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});

const upEvent = createKeyDownEvent('ArrowUp');
inputs[2].triggerEventHandler('keydown.ArrowUp', upEvent); // S+
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '10:30:01');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 1});

const downEvent = createKeyDownEvent('ArrowDown');
inputs[2].triggerEventHandler('keydown.ArrowDown', downEvent); // S-
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '10:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});
});
}));

it('should increment / decrement minutes on mouse wheel up/down', async(() => {
const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true"></ngb-timepicker>`;

const fixture = createTestComponent(html);
fixture.componentInstance.model = {hour: 10, minute: 30, second: 0};
fixture.detectChanges();
fixture.whenStable()
.then(() => {
fixture.detectChanges();
return fixture.whenStable();
})
.then(() => {

const inputs = fixture.debugElement.queryAll(By.css('input'));

expectToDisplayTime(fixture.nativeElement, '10:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});

const upScroll = createMouseWheelEvent(50);
inputs[2].triggerEventHandler('mousewheel', upScroll); // S+
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '10:30:01');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 1});

const downScroll = createMouseWheelEvent(-50);
inputs[2].triggerEventHandler('mousewheel', downScroll); // H-
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '10:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 10, minute: 30, second: 0});
});
}));

it('should wrap seconds', async(() => {
const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true"></ngb-timepicker>`;

Expand Down Expand Up @@ -746,6 +952,61 @@ describe('ngb-timepicker', () => {
});
}));

it('should not change the value on mousewheel up/down, when it is disabled', async(() => {
const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true" [disabled]="disabled"></ngb-timepicker>`;

const fixture = createTestComponent(html);
fixture.componentInstance.model = {hour: 13, minute: 30, second: 0};
fixture.detectChanges();
fixture.whenStable()
.then(() => {
fixture.detectChanges();
return fixture.whenStable();
})
.then(() => {
const inputs = fixture.debugElement.queryAll(By.css('input'));

expectToDisplayTime(fixture.nativeElement, '13:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 13, minute: 30, second: 0});

const upScroll = createMouseWheelEvent(50);
const downScroll = createMouseWheelEvent(-50);

expectToDisplayTime(fixture.nativeElement, '13:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 13, minute: 30, second: 0});

inputs[0].triggerEventHandler('mousewheel', upScroll); // H+
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '13:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 13, minute: 30, second: 0});

inputs[0].triggerEventHandler('mousewheel', downScroll); // H-
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '13:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 13, minute: 30, second: 0});

inputs[1].triggerEventHandler('mousewheel', upScroll); // M+
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '13:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 13, minute: 30, second: 0});

inputs[1].triggerEventHandler('mousewheel', downScroll); // M-
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '13:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 13, minute: 30, second: 0});

inputs[2].triggerEventHandler('mousewheel', upScroll); // S+
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '13:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 13, minute: 30, second: 0});

inputs[2].triggerEventHandler('mousewheel', downScroll); // S-
fixture.detectChanges();
expectToDisplayTime(fixture.nativeElement, '13:30:00');
expect(fixture.componentInstance.model).toEqual({hour: 13, minute: 30, second: 0});
});
}));

it('should have disabled class, when it is disabled', () => {
const html = `<ngb-timepicker [(ngModel)]="model" [seconds]="true" [disabled]="disabled"></ngb-timepicker>`;

Expand Down
Loading

0 comments on commit 8c0ade5

Please sign in to comment.