Skip to content

Commit

Permalink
fix: Timepicker — am/pm clipboard insertion fails (#125)
Browse files Browse the repository at this point in the history 
* fix: Timepicker — am/pm clipboard insertion fails

* fix: Incorrect type for date adapter

* fix: Timepicker — Build fail

* Revert "fix: Timepicker — Build fail"

This reverts commit af9fdc5.

* fix: Timepicker — Redundant string conversion

* add: Timepicker — am/pm tests added

* fix: Timepicker — Bundle build failed

Incorrect dependencies of DateAdapter
  • Loading branch information
@lskramarov
RistiCore authored and lskramarov committed May 21, 2019
1 parent 43ac4ab commit 10eab4c
Show file tree
Hide file tree
Showing 3 changed files with 269 additions and 7 deletions.
4 changes: 3 additions & 1 deletion packages/mosaic-dev/timepicker/module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { McMomentDateModule } from '@ptsecurity/mosaic-moment-adapter/adapter';
import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
import { McTimepickerModule } from '@ptsecurity/mosaic/timepicker';

Expand Down Expand Up @@ -39,7 +40,8 @@ export class TimepickerDemoComponent {
McTimepickerModule,
McFormFieldModule,
McButtonModule,
McIconModule
McIconModule,
McMomentDateModule
],
bootstrap: [
TimepickerDemoComponent
Expand Down
246 changes: 244 additions & 2 deletions packages/mosaic/timepicker/timepicker.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';

import { McMomentDateModule } from '@ptsecurity/mosaic-moment-adapter/adapter';
import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
import { McIconModule } from '@ptsecurity/mosaic/icon';

Expand Down Expand Up @@ -50,7 +50,8 @@ describe('McTimepicker', () => {
FormsModule,
McFormFieldModule,
McTimepickerModule,
McIconModule],
McIconModule,
McMomentDateModule],
declarations: [TestApp]
});
TestBed.compileComponents();
Expand Down Expand Up @@ -293,6 +294,247 @@ describe('McTimepicker', () => {
expect(testComponent.timeValue.toString()).toContain('19:01:08');
});
});

it('Paste 12h value from clipboard', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '07:15 pm'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('19:15:00');
});
});
it('Paste am/pm from clipboard: 1:3 am', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '1:3 am'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('01:03:00');
});
});
it('Paste am/pm from clipboard: 01:3 am', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '01:3 am'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('01:03:00');
});
});
it('Paste am/pm from clipboard: 1:30 am', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '1:30 am'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('01:30:00');
});
});
it('Paste am/pm from clipboard: 01:30 am', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '01:30 am'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('01:30:00');
});
});
it('Paste am/pm from clipboard: 10:3 am', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '10:3 am'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('10:03:00');
});
});
it('Paste am/pm from clipboard: 10:30 am', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '10:30 am'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('10:30:00');
});
});
it('Paste am/pm from clipboard: 10:30 Pm', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '10:30 Pm'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('22:30:00');
});
});
it('Paste am/pm from clipboard: 12:3 aM', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '12:3 aM'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('00:03:00');
});
});
it('Paste am/pm from clipboard: 11:3 PM', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '11:3 PM'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('23:03:00');
});
});
it('Paste am/pm from clipboard: 11:3 a', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '11:3 a'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('11:03:00');
});
});
it('Paste am/pm from clipboard: 11:3 p', () => {
return fixture.whenStable()
.then(() => {
inputElementDebug.triggerEventHandler(
'paste',
{
preventDefault: () => null,
clipboardData: {
getData: () => '11:3 p'
}
});
fixture.detectChanges();

return fixture.whenStable();
})
.then(() => {
fixture.detectChanges();
expect(testComponent.timeValue.toString()).toContain('23:03:00');
});
});
});

describe('Keyboard value control', () => {
Expand Down
26 changes: 22 additions & 4 deletions packages/mosaic/timepicker/timepicker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
Validators
} from '@angular/forms';
import { coerceBooleanProperty } from '@ptsecurity/cdk/coercion';
import { DateAdapter } from '@ptsecurity/cdk/datetime';
import {
CanUpdateErrorState,
CanUpdateErrorStateCtor,
Expand Down Expand Up @@ -262,9 +263,15 @@ export class McTimepicker extends McTimepickerMixinBase
@Optional() parentFormGroup: FormGroupDirective,
defaultErrorStateMatcher: ErrorStateMatcher,
@Optional() @Self() @Inject(MC_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
private readonly renderer: Renderer2) {
private readonly renderer: Renderer2,
@Optional() private dateAdapter: DateAdapter<any>) {
super(defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl);

if (!this.dateAdapter) {
throw Error(`McTimepicker: No provider found for DateAdapter. You must import one of the existing ` +
`modules at your application root or provide a custom implementation or use exists ones.`);
}

// If no input value accessor was explicitly specified, use the element as the input value
// accessor.
this.inputValueAccessor = inputValueAccessor || this.elementRef.nativeElement;
Expand Down Expand Up @@ -645,9 +652,20 @@ export class McTimepicker extends McTimepickerMixinBase
hoursAndMinutes: any;
hoursAndMinutesAndSeconds: any;
} {
const hoursAndMinutesAndSeconds = timeString.match(HOURS_MINUTES_SECONDS_REGEXP);
const hoursAndMinutes = timeString.match(HOURS_MINUTES_REGEXP);
const hoursOnly = timeString.match(HOURS_ONLY_REGEXP);
const momentWrappedTime = this.dateAdapter.parse(timeString, [
'h:m a',
'h:m:s a',
'H:m',
'H:m:s'
]);

const convertedTimeString = momentWrappedTime !== null
? momentWrappedTime.format('HH:mm:ss')
: '';

const hoursAndMinutesAndSeconds = convertedTimeString.match(HOURS_MINUTES_SECONDS_REGEXP);
const hoursAndMinutes = convertedTimeString.match(HOURS_MINUTES_REGEXP);
const hoursOnly = convertedTimeString.match(HOURS_ONLY_REGEXP);

return {
hoursOnly,
Expand Down

0 comments on commit 10eab4c

Please sign in to comment.