Skip to content

fix: Timepicker — am/pm clipboard insertion fails #125

Merged
merged 7 commits into from
May 21, 2019
Merged

fix: Timepicker — am/pm clipboard insertion fails #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bdafce4
fix: Timepicker — am/pm clipboard insertion fails
May 17, 2019
f697b24
fix: Incorrect type for date adapter
May 17, 2019
af9fdc5
fix: Timepicker — Build fail
May 20, 2019
67eac98
Revert "fix: Timepicker — Build fail"
May 20, 2019
d025177
fix: Timepicker — Redundant string conversion
May 20, 2019
e2d8e5b
add: Timepicker — am/pm tests added
May 20, 2019
17d1e22
fix: Timepicker — Bundle build failed
May 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/mosaic-dev/timepicker/module.ts
View file
Open in desktop
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
Open in desktop
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', () => {
lskramarov marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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',
lskramarov marked this conversation as resolved.
Show resolved Hide resolved
'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