fix(timepicker): no placeholder for default timeformat (#164161) (#67)

* fix: No placeholder for default timeFormat * add: Tests for placeholder
positive-js · Nov 7, 2018 · 02803ba · 02803ba
1 parent 6701b24
commit 02803ba
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 24 deletions.
diff --git a/src/lib/timepicker/timepicker.constants.ts b/src/lib/timepicker/timepicker.constants.ts
@@ -10,8 +10,8 @@ export enum TimeFormats {
 }
 
 export const TIMEFORMAT_PLACEHOLDERS: { [timeFormat: string]: string } = {
-    'hh:mm:ss': '  :  :  ',
-    'hh:mm': '  :  '
+    [TimeFormats.HHmmss]: '  :  :  ',
+    [TimeFormats.HHmm]: '  :  '
 };
 
 export const DEFAULT_TIME_FORMAT: TimeFormats = TimeFormats.HHmm;

diff --git a/src/lib/timepicker/timepicker.spec.ts b/src/lib/timepicker/timepicker.spec.ts
@@ -60,27 +60,53 @@ describe('McTimepicker', () => {
     let testComponent: TestApp;
     let inputElementDebug;
 
-    it('Timepicker disabled state switching on/off', () => {
-        fixture = TestBed.createComponent(TestApp);
-        testComponent = fixture.debugElement.componentInstance;
-        inputElementDebug = fixture.debugElement.query(By.directive(McTimepicker));
-
-        testComponent.isDisabled = true;
-        fixture.detectChanges();
-
-        return fixture.whenStable()
-            .then(() => {
-                fixture.detectChanges();
-                expect(inputElementDebug.nativeElement.disabled).toBe(true, 'input not disabled');
-                testComponent.isDisabled = false;
-                fixture.detectChanges();
-
-                return fixture.whenStable();
-            })
-            .then(() => {
-                fixture.detectChanges();
-                expect(inputElementDebug.nativeElement.disabled).toBe(false, 'input not disabled');
-            });
+    describe('Core attributes support', () => {
+        beforeEach(() => {
+            fixture = TestBed.createComponent(TestApp);
+            testComponent = fixture.debugElement.componentInstance;
+            inputElementDebug = fixture.debugElement.query(By.directive(McTimepicker));
+
+            testComponent.timeValue = new Date('1970-01-01 12:18:28');
+            fixture.detectChanges();
+        });
+
+        it('Timepicker disabled state switching on/off', () => {
+            testComponent.isDisabled = true;
+            fixture.detectChanges();
+
+            return fixture.whenStable()
+                .then(() => {
+                    fixture.detectChanges();
+                    expect(inputElementDebug.nativeElement.disabled).toBe(true, 'input not disabled');
+                    testComponent.isDisabled = false;
+                    fixture.detectChanges();
+
+                    return fixture.whenStable();
+                })
+                .then(() => {
+                    fixture.detectChanges();
+                    expect(inputElementDebug.nativeElement.disabled).toBe(false, 'input not disabled');
+                });
+        });
+
+        it('Placeholder set on default timeFormat', () => {
+            return fixture.whenStable()
+                .then(() => {
+                    fixture.detectChanges();
+                    expect(inputElementDebug.nativeElement.placeholder).toBe('  :  ');
+                });
+        });
+
+        it('Correct placeholder set for non-default time format', () => {
+            testComponent.timeFormat = 'HH:mm:ss';
+            fixture.detectChanges();
+
+            return fixture.whenStable()
+                .then(() => {
+                    fixture.detectChanges();
+                    expect(inputElementDebug.nativeElement.placeholder).toBe('  :  :  ');
+                });
+        });
     });
 
     describe('Timerange validation', () => {

diff --git a/src/lib/timepicker/timepicker.ts b/src/lib/timepicker/timepicker.ts
@@ -205,7 +205,7 @@ export class McTimepicker extends McTimepickerMixinBase
             .indexOf(formatValue) > -1 ? formatValue : DEFAULT_TIME_FORMAT;
 
         validatorOnChange();
-        this.placeholder = TIMEFORMAT_PLACEHOLDERS[this._timeFormat.toLowerCase()];
+        this.placeholder = TIMEFORMAT_PLACEHOLDERS[this._timeFormat];
     }
 
     @Input('min-time')
@@ -260,6 +260,8 @@ export class McTimepicker extends McTimepickerMixinBase
         // Force setter to be called in case id was not specified.
         this.id = this.id;
 
+        this.placeholder = TIMEFORMAT_PLACEHOLDERS[DEFAULT_TIME_FORMAT];
+
         // Instead of NG_VALUE_ACCESSOR (https://github.com/angular/material2/issues/8158#issuecomment-344618103)
         if (this.ngControl) { this.ngControl.valueAccessor = this; }