From a19ec2cd8d3ab1b255385eaf2900b285ff8c9867 Mon Sep 17 00:00:00 2001
From: artem <artem.frolov@valor-softvare.com>
Date: Mon, 26 Jun 2017 13:29:04 +0300
Subject: [PATCH] feat(timepicker): added test plan

---
 .../timepicker/timepicker.component.spec.ts   | 969 +++++++++++++++---
 1 file changed, 844 insertions(+), 125 deletions(-)

diff --git a/src/spec/timepicker/timepicker.component.spec.ts b/src/spec/timepicker/timepicker.component.spec.ts
index d48f44be8a..4ac4eb83d4 100644
--- a/src/spec/timepicker/timepicker.component.spec.ts
+++ b/src/spec/timepicker/timepicker.component.spec.ts
@@ -1,175 +1,894 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { fireEvent } from '../../../scripts/helpers';
 
-import { TimepickerComponent } from '../../timepicker/timepicker.component';
 import { TimepickerConfig } from '../../timepicker/timepicker.config';
 import { TimepickerActions } from '../../timepicker/reducer/timepicker.actions';
-import { Data } from '@angular/router';
+import { TimepickerModule } from '../../timepicker/timepicker.module';
+import { TimepickerComponent } from '../../timepicker/timepicker.component';
+import { By } from '@angular/platform-browser';
+
+function getInputElements(fixtureNativeElement: any) {
+  return fixtureNativeElement.querySelectorAll('input') as HTMLInputElement;
+}
+
+function getElements(fixtureNativeElement: any, selector: string) {
+  return fixtureNativeElement.querySelectorAll(selector) as HTMLElement;
+}
+
+function getDebugElements(fixture: any, selector: string) {
+  return fixture.debugElement.queryAll(By.css(selector));
+}
+
+function testTime(hours: number, minutes: number, seconds: number) {
+  let time: Date = new Date();
+  time.setHours(hours);
+  time.setMinutes(minutes);
+  time.setSeconds(seconds);
+  return time;
+}
 
 describe('Component: timepicker', () => {
   let fixture: ComponentFixture<TimepickerComponent>;
-  let context: TimepickerComponent;
-  let nativeEl: any;
+  let component: TimepickerComponent;
+  let inputHours: HTMLInputElement;
+  let inputMinutes: HTMLInputElement;
+  let inputSeconds: HTMLInputElement;
+  let inputDebugHours: any;
+  let inputDebugMinutes: any;
+  let inputDebugSeconds: any;
+  let buttonMeridian: HTMLElement;
+  let buttonChanges: HTMLElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TimepickerComponent],
+      imports: [
+        TimepickerModule.forRoot(),
+        FormsModule,
+        ReactiveFormsModule
+      ],
       providers: [
         TimepickerConfig,
         TimepickerActions
       ]
     });
-
-    fixture = TestBed.createComponent(TimepickerComponent);
-    context = fixture.componentInstance;
-    nativeEl = fixture.nativeElement;
-    fixture.detectChanges();
   });
 
-  it('should prevDef', () => {
-    context.prevDef(new Event('customWheel'));
-  });
+  // default configuration
+  xdescribe('default configuration', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TimepickerComponent);
+      fixture.detectChanges();
 
-  it('should wheelSign', () => {
-    context.wheelSign(new Event('customWheel'));
-  });
+      component = fixture.componentInstance;
+      inputHours = getInputElements(fixture.nativeElement)[0];
+      inputMinutes = getInputElements(fixture.nativeElement)[1];
+      buttonChanges = getElements(fixture.nativeElement, 'a.btn');
+    });
 
-  // it('should canBeChanged wheel', () => {
-  //   context.mousewheel = false;
-  //   context.canBeChanged('wheel');
-  // });
-  //
-  // it('should canBeChanged key', () => {
-  //   context.arrowkeys = false;
-  //   context.canBeChanged('key');
-  // });
-  //
-  // it('should canBeChanged true', () => {
-  //   context.readonlyInput = true;
-  //   context.canBeChanged();
-  // });
-
-  it('should changeHours', () => {
-    context.changeHours(3);
-  });
+    // поле должно быть пустым
+    it('should be empty input fields', () => {
+      expect(inputHours.value).toBeFalsy();
+      expect(inputMinutes.value).toBeFalsy();
+    });
+    // установить время путем нажатия на кнопку изменения времени
+    it('should set time in a input field after click on input change button', () => {
+      expect(inputHours.value).toBeFalsy();
+      expect(inputMinutes.value).toBeFalsy();
 
-  it('should changeHours canIncrementHours', () => {
-    context.canIncrementHours = false;
-    context.changeHours(3);
-  });
+      fireEvent(buttonChanges[0], 'click');
 
-  it('should changeHours canDecrementHours', () => {
-    context.canDecrementHours = false;
-    context.changeHours(-3);
-  });
+      fixture.detectChanges();
 
-  it('should changeHours wheel', () => {
-    context.mousewheel = false;
-    context.changeHours(3, 'wheel');
+      expect(inputHours.value).toBe('01');
+      expect(inputMinutes.value).toBe('00');
+    });
   });
 
-  it('should changeMinutes', () => {
-    context.changeMinutes(3);
-  });
+  // validate input fields with default state
+  describe('validate input fields with default state', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TimepickerComponent);
+      fixture.detectChanges();
 
-  it('should changeMinutes canIncrementHours', () => {
-    context.canIncrementMinutes = false;
-    context.changeMinutes(3);
-  });
+      component = fixture.componentInstance;
+      inputMinutes = getInputElements(fixture.nativeElement)[1];
+      inputDebugMinutes = getDebugElements(fixture, 'input')[1];
+    });
 
-  it('should changeMinutes canDecrementHours', () => {
-    context.canDecrementMinutes = false;
-    context.changeMinutes(-3);
-  });
+    // проверить данные в поле минуты корректные данные
+    fit('should validate the data in the minutes input with valid data', () => {
+      component.writeValue(testTime(6,2,3));
+      fixture.detectChanges();
 
-  it('should changeMinutes wheel', () => {
-    context.mousewheel = false;
-    context.changeMinutes(3, 'wheel');
+      expect(inputMinutes.value).toEqual('02');
+    });
+    /*
+        // проверить данные в поле минуты корректные данные с неполным значением
+        it('should validate the data in the minutes input with valid data with half value', () => {
+        component.myTime = new Date();
+        component.myTime.setMinutes(1);
+
+        fireEvent(inputMinutes, 'change');
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(inputMinutes.value).toBe('01');
+          });
+        });
+        // проверить данные в поле минуты не корректные данные
+        it('should validate the data in the minutes input with invalid data', () => {
+          //  issue
+        });
+        // изменить активный инпут после нажатия Enter
+        it('should change the active input field after enter click', () => {
+          //  issue
+        });
+        // автоматическая очистить поля при вводе не корректного значения
+        it('should auto clean input field after enter invalid value', () => {
+          //  issue
+        });
+        // отобразить ошибки на поеле, после ввода не корректного значения
+        it('should display error input field after enter invalid value', () => {
+          //  issue
+        });*/
   });
 
-  it('should changeSeconds', () => {
-    context.changeSeconds(3);
-  });
+  /*
+    //validate input fields with property of 'showMeridian' true
+    xdescribe('validate input fields with property of showMeridian switch on', () => {
+      beforeEach(() => {
+        html = `<timepicker [(ngModel)]="myTime"></timepicker>`;
+
+        fixture = createTestComponent(html);
+        fixture.detectChanges();
+
+        component = fixture.componentInstance;
+        inputHours = getInputElements(fixture.nativeElement)[0];
+        buttonMeridian = getElements(fixture.nativeElement, 'button')[0];
+      });
+
+      // отобразить кнопку AM/PM при состоянии showMeridian по умолчанию
+      it('should default state showMeridian display AM/PM button', () => {
+        expect(buttonMeridian).toBeTruthy();
+      });
+      // проверить данные в поле ввода Часы при вормате времени 12h
+      it('should validate the data in the hours input at time format 12h', () => {
+        component.myTime = new Date();
+        component.myTime.setHours(22);
+
+        fireEvent(inputHours, 'change');
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(inputHours.value).toBe('10');
+          });
+      });
+      // изменить временной период после клика на кнопку AM/PM
+      it('should change time period after click on AM/PM button', () => {
+        expect(buttonMeridian.textContent.trim()).toBe(component.meridians[0]);
+
+        fireEvent(buttonMeridian, 'click');
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(buttonMeridian.textContent.trim()).toBe(component.meridians[1]);
+          });
+      });
+    });
 
-  it('should changeSeconds canIncrementHours', () => {
-    context.canIncrementSeconds = false;
-    context.changeSeconds(3);
-  });
+    //validate input fields with property of 'showMeridian' false
+    xdescribe('validate input fields with property of showMeridian switch off', () => {
+      beforeEach(() => {
+        html = `<timepicker [(ngModel)]="myTime" [showMeridian]="showMeridian" ></timepicker>`;
+
+        fixture = createTestComponent(html);
+        fixture.detectChanges();
+
+        component = fixture.componentInstance;
+        buttonMeridian = getElements(fixture.nativeElement, 'button')[0];
+        inputHours = getInputElements(fixture.nativeElement)[0];
+      });
+
+      // не отобразить кнопку AM/PM если showMeridian выключен
+      it('should not display AM/PM button if showMeridian switch off', () => {
+        expect(buttonMeridian).toBeTruthy();
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            component.showMeridian = false;
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            buttonMeridian = getElements(fixture.nativeElement, 'button')[0];
+            expect(buttonMeridian).toBeFalsy();
+          });
+      });
+      // проверить данные в поле часы при формате времени 24h
+      it('should validate the data in the hours input at time format 24h', () => {
+        component.showMeridian = false;
+
+        component.myTime = new Date();
+        component.myTime.setHours(22);
+
+        fireEvent(inputHours, 'change');
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(inputHours.value).toBe('22');
+          });
+      });
+    });
 
-  it('should changeSeconds canDecrementHours', () => {
-    context.canDecrementSeconds = false;
-    context.changeSeconds(-3);
-  });
+    //validate input fields with property of 'max'
+    xdescribe('validate input fields with property of max', () => {
+      beforeEach(() => {
+        html = `<timepicker [(ngModel)]="myTime" [max]="maxTime"></timepicker>`;
+
+        fixture = createTestComponent(html);
+        fixture.detectChanges();
+
+        component = fixture.componentInstance;
+        inputHours = getInputElements(fixture.nativeElement)[0];
+        inputMinutes = getInputElements(fixture.nativeElement)[1];
+      });
+
+      // изменить значение поля ввода на указанное максимальное значение,
+      // если оно приывшает указанное максимальное значение, в фотмате времени 12h
+      it('should change the input field to specified value if it exceed the specified value', () => {
+        let maxTime: Date = new Date();
+        maxTime.setHours(17);
+        maxTime.setMinutes(30);
+
+        component.maxTime = maxTime;
+
+        component.myTime = new Date();
+        component.myTime.setHours(18);
+        component.myTime.setMinutes(31);
+
+        fireEvent(inputHours, 'change');
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(inputHours.value).toBe('05');
+            expect(inputMinutes.value).toBe('30');
+          });
+      });
+      // изменить значение поля ввода на указанное максимальное значение,
+      // если оно приывшает указанное максимальное значение, в фотмате времени 24h
+      it('should change the input field to specified value if it exceed the specified value', () => {
+        const maxTime: Date = new Date();
+        maxTime.setHours(17);
+        maxTime.setMinutes(30);
+
+        component.maxTime = maxTime;
+
+        component.myTime = new Date();
+        component.myTime.setHours(18);
+        component.myTime.setMinutes(31);
+
+        fireEvent(inputHours, 'change');
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            component.showMeridian = false;
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            inputHours = getInputElements(fixture.nativeElement)[0];
+            inputMinutes = getInputElements(fixture.nativeElement)[1];
+
+            expect(inputHours.value).toBe('17');
+            expect(inputMinutes.value).toBe('30');
+          });
+      });
+    });
 
-  it('should changeSeconds wheel', () => {
-    context.mousewheel = false;
-    context.changeSeconds(3, 'wheel');
-  });
+    //validate input fields with property of 'min'
+    xdescribe('validate input fields with property of min', () => {
+      beforeEach(() => {
+        html = `<timepicker [(ngModel)]="myTime" [max]="maxTime"></timepicker>`;
+
+        fixture = createTestComponent(html);
+        fixture.detectChanges();
+
+        component = fixture.componentInstance;
+        inputHours = getInputElements(fixture.nativeElement)[0];
+        inputMinutes = getInputElements(fixture.nativeElement)[1];
+      });
+
+      // изменить значение поля ввода на указанное минимальное значение,
+      // если оно приывшает указанное минимальное значение, в фотмате времени 12h
+      it('should not value of the input field less the specified value', () => {
+        let minTime: Date = new Date();
+        minTime.setHours(17);
+        minTime.setMinutes(30);
+
+        component.minTime = minTime;
+
+        component.myTime = new Date();
+        component.myTime.setHours(18);
+        component.myTime.setMinutes(31);
+
+        fireEvent(inputHours, 'change');
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(inputHours.value).toBe('05');
+            expect(inputMinutes.value).toBe('30');
+          });
+      });
+      // изменить значение поля ввода на указанное минимальное значение,
+      // если оно приывшает указанное минимальное значение, в фотмате времени 24h
+      it('should change the input field to specified value if it less the specified value', () => {
+        const minTime: Date = new Date();
+        minTime.setHours(17);
+        minTime.setMinutes(30);
+
+        component.minTime = minTime;
+
+        component.myTime = new Date();
+        component.myTime.setHours(18);
+        component.myTime.setMinutes(31);
+
+        fireEvent(inputHours, 'change');
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            component.showMeridian = false;
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            inputHours = getInputElements(fixture.nativeElement)[0];
+            inputMinutes = getInputElements(fixture.nativeElement)[1];
+
+            expect(inputHours.value).toBe('17');
+            expect(inputMinutes.value).toBe('30');
+          });
+      });
+    });
 
-  it('should updateHours', () => {
-    context.readonlyInput = true;
-    context.updateHours('0');
-  });
+    //display seconds fields with property of 'showSeconds'
+    xdescribe('display seconds fields with property of showSeconds', () => {
+      beforeEach(() => {
+        html = `<timepicker [(ngModel)]="myTime" [showSeconds]="showSeconds"></timepicker>`;
+
+        fixture = createTestComponent(html);
+        fixture.detectChanges();
+
+        component = fixture.componentInstance;
+        inputSeconds = getInputElements(fixture.nativeElement)[2];
+      });
+
+      // отображать поле секунды если showSeconds выключен
+      it('should display seconds field if showMeridian switch off', () => {
+        expect(inputSeconds).toBeFalsy();
+      });
+
+      // отображать поле секунды если showSeconds включен
+      it('should display seconds field if showMeridian switch on', () => {
+        expect(inputSeconds).toBeFalsy();
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            component.showSeconds = true;
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            inputSeconds = getInputElements(fixture.nativeElement)[2];
+
+            expect(inputSeconds).toBeTruthy();
+          });
+      });
+      // проверить данные в поле секунды
+      it('should validate the data in the seconds input', () => {
+        component.myTime = new Date();
+        component.myTime.setSeconds(10);
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            component.showSeconds = true;
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            inputSeconds = getInputElements(fixture.nativeElement)[2];
+
+            fireEvent(inputSeconds, 'change');
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(inputSeconds.value).toBe('10');
+          });
+      });
+    });
 
-  it('should updateHours', () => {
-    context.updateHours('');
-    context.updateHours('-1');
-    context.updateHours('1');
-  });
+    //input fields with property of 'readonlyInput'
+    xdescribe('input fields with property of readonlyInput', () => {
+      beforeEach(() => {
+        html = `<timepicker
+                  [(ngModel)]="myTime"
+                  [readonlyInput]="readonlyInput"
+                  [showSeconds]="showSeconds">
+                </timepicker>
+        `;
+
+        fixture = createTestComponent(html);
+        fixture.detectChanges();
+
+        component = fixture.componentInstance;
+        inputHours = getInputElements(fixture.nativeElement)[0];
+        inputMinutes = getInputElements(fixture.nativeElement)[1];
+        inputSeconds = getInputElements(fixture.nativeElement)[2];
+        buttonChanges = getElements(fixture.nativeElement, 'a.btn');
+      });
+      // должна быть возможность ввода значений
+      it('should be possible to enter values', () => {
+        expect(inputHours.getAttribute('readonly')).toBeFalsy();
+        expect(inputMinutes.getAttribute('readonly')).toBeFalsy();
+
+        component.showSeconds = true;
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            inputSeconds = getInputElements(fixture.nativeElement)[2];
+
+            expect(inputSeconds.getAttribute('readonly')).toBeFalsy();
+          });
+      });
+      // должна отображать кнопки изменения времени
+      it('should be display is time change buttons', () => {
+        expect(buttonChanges).toBeTruthy();
+      });
+      // не должно быть возможности ввода значений
+      it('should be impossible to enter values', () => {
+        component.readonlyInput = true;
+        component.showSeconds = true;
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            inputSeconds = getInputElements(fixture.nativeElement)[2];
+
+            expect(inputHours.getAttribute('readonly')).toBe('');
+            expect(inputMinutes.getAttribute('readonly')).toBe('');
+            expect(inputSeconds.getAttribute('readonly')).toBe('');
+          });
+      });
+      // не должны отображаться кнопки изменения времени
+      it('should be not display is time change buttons', () => {
+
+        // какое то тут issue с buttonChanges
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            component.readonlyInput = true;
+            component.showSeconds = true;
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            buttonChanges = getElements(fixture.nativeElement, 'a.btn');
+            console.log('buttonChanges', buttonChanges);
+
+            expect(buttonChanges).toBeFalsy();
+          });
+      });
+    });
 
-  it('should updateMinutes', () => {
-    context.readonlyInput = true;
-    context.updateMinutes('0');
-  });
+    //input fields time with properties  of 'hourStep, minuteStep secondsStep'
+    xdescribe('input fields hour with property of hourStep', () => {
+      beforeEach(() => {
+        html = `<timepicker
+                  [(ngModel)]="myTime"
+                  [showSeconds]="showSeconds"
+                  [hourStep]="hourStep"
+                  [minuteStep]="minuteStep"
+                  [secondsStep]="secondsStep">
+                </timepicker>
+        `;
+
+        fixture = createTestComponent(html);
+        fixture.detectChanges();
+
+        component = fixture.componentInstance;
+        inputHours = getInputElements(fixture.nativeElement)[0];
+        inputMinutes = getInputElements(fixture.nativeElement)[1];
+        inputSeconds = getInputElements(fixture.nativeElement)[2];
+        buttonChanges = getElements(fixture.nativeElement, 'a.btn');
+      });
+      // добавить в поле ввода часы значение с учетом hourStep инкримент
+      it('should add to the hour input field value, hourStep value', () => {
+        component.hourStep = 2;
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            component.myTime = new Date();
+            component.myTime.setHours(10);
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            fireEvent(inputHours, 'change');
+            fireEvent(buttonChanges[0], 'click');
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(inputHours.value).toBe('12');
+          });
+      });
+      // добавить в поле ввода часы значение с учетом hourStep декримент
+      it('should add to the hour input field value, hourStep value', () => {
+        component.hourStep = 3;
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            component.myTime = new Date();
+            component.myTime.setHours(10);
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            fireEvent(inputHours, 'change');
+            fireEvent(buttonChanges[2], 'click');
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(inputHours.value).toBe('07');
+          });
+      });
+      // вычесть в поле ввода часы значение с учетом minuteStep инкримент
+      it('should subtract to the hour input field value, minuteStep value', () => {
+        component.minuteStep = 12;
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            component.myTime = new Date();
+            component.myTime.setMinutes(10);
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            fireEvent(inputMinutes, 'change');
+            fireEvent(buttonChanges[1], 'click');
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(inputMinutes.value).toBe('22');
+          });
+      });
+      // вычесть в поле ввода часы значение с учетом minuteStep декримент
+      it('should subtract to the hour input field value, minuteStep value', () => {
+        component.minuteStep = 5;
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            component.myTime = new Date();
+            component.myTime.setMinutes(10);
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            fireEvent(inputMinutes, 'change');
+            fireEvent(buttonChanges[3], 'click');
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            expect(inputMinutes.value).toBe('05');
+          });
+      });
+      // вычесть в поле ввода часы значение с учетом secondsStep инкримент
+      it('should subtract to the hour input field value, secondsStep value', () => {
+        component.showSeconds = true;
+        component.secondsStep = 10;
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            component.myTime = new Date();
+            component.myTime.setSeconds(35);
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            inputSeconds = getInputElements(fixture.nativeElement)[2];
+            buttonChanges = getElements(fixture.nativeElement, 'a.btn');
+
+            fireEvent(inputSeconds, 'change');
+            fireEvent(buttonChanges[3], 'click');
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            console.log('inputSeconds.value', inputSeconds.value);
+            //expect(inputSeconds.value).toBe('15');
+          });
+      });
+      // вычесть в поле ввода часы значение с учетом secondsStep декримент
+      it('should subtract to the hour input field value, secondsStep value', () => {
+        component.showSeconds = true;
+        component.secondsStep = 10;
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            component.myTime = new Date();
+            component.myTime.setSeconds(35);
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            inputSeconds = getInputElements(fixture.nativeElement)[2];
+            buttonChanges = getElements(fixture.nativeElement, 'a.btn');
+
+            fireEvent(inputSeconds, 'change');
+            fireEvent(buttonChanges[5], 'click');
+
+            fixture.detectChanges();
+            return fixture.whenStable();
+          })
+          .then(() => {
+            console.log('inputSeconds.value', inputSeconds.value);
+            //expect(inputSeconds.value).toBe('15');
+          });
+      });
+    });
 
-  it('should updateMinutes', () => {
-    context.updateMinutes('');
-    context.updateMinutes('-1');
-    context.updateMinutes('1');
-  });
+    //hide change button
+    xdescribe('hide change button', () => {
+      beforeEach(() => {
+        html = `<timepicker
+                  [(ngModel)]="myTime"
+                  [showSpinners]="showSpinners"
+                  [readonlyInput]="readonlyInput">
+                </timepicker>
+        `;
+
+        fixture = createTestComponent(html);
+        fixture.detectChanges();
+
+        component = fixture.componentInstance;
+        buttonChanges = getElements(fixture.nativeElement, 'a.btn');
+      });
+
+      // кнопки изменения времени по умолчанию отоброжаются
+      it('should display change button in default state', () => {
+        expect(buttonChanges).toBeTruthy();
+      });
+      // скрыть кнопки изменения времени
+      it('should hide change button', async(() => {
+        expect(buttonChanges).toBeTruthy();
+
+        component.showSpinners = false;
+        component.readonlyInput = true;
+
+        fixture.detectChanges();
+        fixture.whenStable()
+          .then(() => {
+            buttonChanges = getElements(fixture.nativeElement, 'a.btn');
+            console.log('buttonChanges', buttonChanges);
+            expect(buttonChanges).toBeFalsy();
+          });
+      }));
+    });
+  */
+  //validate 'mousewheel'
+  describe('validate mousewheel', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TimepickerComponent);
+      fixture.detectChanges();
+
+      component = fixture.componentInstance;
+      inputHours = getInputElements(fixture.nativeElement)[0];
+    });
 
-  it('should updateSeconds', () => {
-    context.readonlyInput = true;
-    context.updateSeconds('0');
-  });
+    // измененить время колесом мыши инкремент
+    it('should can change input value with the mouse wheel', () => {
+      component.hourStep = 2;
 
-  it('should updateSeconds', () => {
-    context.updateSeconds('');
-    context.updateSeconds('-1');
-    context.updateSeconds('1');
-  });
+      const wheelEvent = new WheelEvent(fixture.nativeElement.querySelector('input'), {deltaY: -1});
 
-  it('should toggleMeridian true', () => {
-    context.showMeridian = true;
-    context.toggleMeridian();
-  });
+      component.changeHours(component.hourStep * component.wheelSign(wheelEvent), 'wheel');
 
-  it('should toggleMeridian false', () => {
-    context.showMeridian = false;
-    context.toggleMeridian();
-  });
+      fixture.detectChanges();
+      fixture.whenStable()
+        .then(() => {
+          expect(inputHours.value).toBe('02');
+        });
+    });
 
-  it('should writeValue', () => {
-    context.writeValue('1');
-  });
+    // измененить время колесом мыши декремент
+    it('should can change input value with the mouse wheel', () => {
+      component.hourStep = 2;
 
-  it('should writeValue', () => {
-    context.writeValue('');
-  });
+      const wheelEvent = new WheelEvent(fixture.nativeElement.querySelector('input'), {deltaY: 1});
 
-  it('should registerOnChange', () => {
-    context.registerOnChange((val: any) => val);
-  });
+      component.changeHours(component.hourStep * component.wheelSign(wheelEvent), 'wheel');
 
-  it('should registerOnTouched', () => {
-    context.registerOnTouched(() => true);
+      fixture.detectChanges();
+      fixture.whenStable()
+        .then(() => {
+          expect(inputHours.value).toBe('10');
+        });
+    });
+    // отключить изменение времени колесом мыши
+    xit('should can not change input value with the mouse wheel', () => {
+      component.hourStep = 2;
+      component.mousewheel = false;
+
+      fixture.detectChanges();
+      fixture.whenStable()
+        .then(() => {
+          const wheelEvent = new WheelEvent(fixture.nativeElement.querySelector('input'), {deltaY: -1});
+
+          component.changeHours(component.hourStep * component.wheelSign(wheelEvent), 'wheel');
+
+          fixture.detectChanges();
+          return fixture.whenStable();
+        })
+        .then(() => {
+          expect(inputHours.value).toBe('02');
+        });
+    });
   });
 
-  it('should setDisabledState', () => {
-    context.setDisabledState(true);
+  //validate 'arrowkeys'
+  xdescribe('validate arrowkeys', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TimepickerComponent);
+      fixture.detectChanges();
+
+      component = fixture.componentInstance;
+      inputHours = getInputElements(fixture.nativeElement)[0];
+      inputDebugHours = getDebugElements(fixture, 'input')[0];
+    });
+
+    // изменить времени кнопками вверх
+    it('should can change input value with the arrow keys', () => {
+      const hourSpy = spyOn(component, 'changeHours').and.callThrough();
+      component.hourStep = 3;
+
+      component.writeValue(testTime(6,2,3));
+      fixture.detectChanges();
+
+      inputDebugHours.triggerEventHandler('keydown.ArrowUp', null);
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        expect(inputHours.value).toEqual('09');
+        expect(hourSpy).toHaveBeenCalledWith(component.hourStep, 'key');
+      });
+    });
+    // изменить времени кнопками вниз
+    it('should can not change input value with the arrow keys', () => {
+      const hourSpy = spyOn(component, 'changeHours').and.callThrough();
+      component.hourStep = 3;
+
+      component.writeValue(testTime(6,2,3));
+      fixture.detectChanges();
+
+      inputDebugHours.triggerEventHandler('keydown.ArrowDown', null);
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        expect(inputHours.value).toEqual('03');
+        expect(hourSpy).toHaveBeenCalledWith(-component.hourStep, 'key');
+      });
+    });
+    // отключить измение времени кнопками
+    it('should can not change input value with the arrow keys', () => {
+      const hourSpy = spyOn(component, 'changeHours').and.callThrough();
+      component.hourStep = 3;
+      component.arrowkeys = false;
+
+      component.writeValue(testTime(6,2,3));
+      fixture.detectChanges();
+
+      inputDebugHours.triggerEventHandler('keydown.ArrowUp', null);
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        expect(inputHours.value).toEqual('06');
+        expect(hourSpy).toHaveBeenCalledWith(component.hourStep, 'key');
+      });
+    });
   });
 
-  it('should showMeridian change', () => {
-    context.showMeridian = false;
-    (context as any)._renderTime('-1');
+  //custom validate
+  describe('custom validate', () => {
+    // отставить поля не заполненными
+    it('should leave the input fields not specified', () => {
+    });
+    // не верное значение поля
+    it('should invalid value in input fields', () => {
+    });
+    // верное значение поля
+    it('should valid value in input fields', () => {
+    });
   });
 });