Contrib > Timepicker visual tests (#1895)

* changes moved from #1888 by @Remulus2006

* minor style fixes

* fixed up issues from PR comments

* removed unnecessary headers

* fixed timepicker visual test file name

* fixed targets of timepicker visual tests

* switched to focus on popover

* Fixed fdescribe

skyux-spa-visual-tests/src/app/timepicker/index.html

@@ -0,0 +1,2 @@
+<timepicker-visual></timepicker-visual>
+

skyux-spa-visual-tests/src/app/timepicker/timepicker-visual.component.html

@@ -0,0 +1,42 @@
+<div
+  id="screenshot-timepicker12hr"
+  style="width: 400px; height: 400px;">
+  <sky-timepicker #timePickerExample1>
+    <input
+      timeFormat="hh"
+      type="text"
+      [ngModel]="'8:30 PM'"
+      [skyTimepickerInput]="timePickerExample1"
+      #time="ngModel">
+  </sky-timepicker>
+
+  <div
+    *ngIf="time.errors && time.errors.skyTime && (time.dirty || time.touched)"
+    class="sky-error-label">
+    <span
+      [hidden]="!time.errors.skyTime.invalid">
+      Please enter a valid time.
+    </span>
+  </div>
+</div>
+
+<div
+  id="screenshot-timepicker24hr"
+  style="max-width: 400px; height: 500px;">
+  <sky-timepicker #timePickerExample2>
+    <input
+    timeFormat="HH"
+    type="text"
+    [ngModel]="'20:30'"
+    [skyTimepickerInput]="timePickerExample2"
+    #time2="ngModel">
+  </sky-timepicker>
+  <div
+    *ngIf="time2.errors && time2.errors.skyTime && (time2.dirty || time2.touched)"
+    class="sky-error-label">
+    <span
+      [hidden]="!time2.errors.skyTime.invalid">
+      Please enter a valid time.
+    </span>
+  </div>
+</div>

skyux-spa-visual-tests/src/app/timepicker/timepicker-visual.component.ts

@@ -0,0 +1,9 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'timepicker-visual',
+  templateUrl: './timepicker-visual.component.html'
+})
+export class TimepickerVisualComponent { }

skyux-spa-visual-tests/src/app/timepicker/timepicker.visual-spec.ts

@@ -0,0 +1,60 @@
+import {
+  by,
+  element
+} from 'protractor';
+
+import {
+  SkyVisualTest
+} from '../../../config/utils/visual-test-commands';
+
+describe('timepicker', () => {
+  it('should show the timepicker correctly for 12hr', () => {
+    return SkyVisualTest
+      .setupTest('timepicker')
+      .then(() => {
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'timepicker12hr',
+          selector: '#screenshot-timepicker12hr'
+        });
+      });
+  });
+
+  it('should show the timpicker correctly for 24hr', () => {
+    return SkyVisualTest
+      .setupTest('timepicker')
+      .then(() => {
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'timepicker24hr',
+          selector: '#screenshot-timepicker24hr'
+        });
+      });
+  });
+
+  it('should show the timepicker correctly after clicking on the icon for 12 hr', () => {
+    return SkyVisualTest
+      .setupTest('timepicker')
+      .then(() => {
+        element(by.css('#screenshot-timepicker12hr .sky-dropdown-button')).click();
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'timepicker12hr-open',
+          selector: '#screenshot-timepicker12hr .sky-popover-body'
+        });
+      });
+  });
+
+  it('should show the timepicker correctly after clicking on the icon for 24 hr', () => {
+    return SkyVisualTest
+      .setupTest('timepicker')
+      .then(() => {
+        element(by.css('#screenshot-timepicker24hr .sky-dropdown-button')).click();
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'timepicker24hr-open',
+          selector: '#screenshot-timepicker24hr .sky-popover-body'
+        });
+      });
+  });
+});