This repository has been archived by the owner on Dec 8, 2022. It is now read-only.
Contrib > Timepicker visual tests #1895
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| <timepicker-visual></timepicker-visual> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| 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: '#timepicker12hr' | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should show the timpicker correctly for 24hr', () => { | ||
| return SkyVisualTest | ||
| .setupTest('timepicker') | ||
| .then(() => { | ||
| SkyVisualTest.moveCursorOffScreen(); | ||
| return SkyVisualTest.compareScreenshot({ | ||
| screenshotName: 'timepicker24hr', | ||
| selector: '#timepicker24hr' | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should show the timepicker correctly after clicking on the icon for 12 hr', () => { | ||
| return SkyVisualTest | ||
| .setupTest('timepicker') | ||
| .then(() => { | ||
| element(by.css('.sky-dropdown-button')).click(); | ||
| SkyVisualTest.moveCursorOffScreen(); | ||
| return SkyVisualTest.compareScreenshot({ | ||
| screenshotName: 'timepicker12hr-open', | ||
| selector: '#timepicker12hr' | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should show the timepicker correctly after clicking on the icon for 24 hr', () => { | ||
| return SkyVisualTest | ||
| .setupTest('timepicker') | ||
| .then(() => { | ||
| element(by.css('.sky-dropdown-button')).click(); | ||
|
There was a problem hiding this comment. I believe we will be opening the first dropdown here just like the first test as both dropdowns are on the same page and we aren't specifying which instance to grab. There was a problem hiding this comment. Yup, this is definitely not targeting specific dropdowns. I'll switch it |
||
| SkyVisualTest.moveCursorOffScreen(); | ||
| return SkyVisualTest.compareScreenshot({ | ||
| screenshotName: 'timepicker24hr-open', | ||
| selector: '#timepicker24hr' | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <div | ||
| id="screenshot-timepicker"> | ||
| <h3> | ||
| 12-hour timepicker | ||
| </h3> | ||
| <div | ||
| id="timepicker12hr" | ||
| style="max-width: 400px"> | ||
| <sky-timepicker #timePickerExample1> | ||
| <input | ||
| type="text" | ||
| [skyTimepickerInput]="timePickerExample1" | ||
| [timeFormat]="format12" | ||
| [(ngModel)]="selectedTime1" | ||
|
There was a problem hiding this comment. When I try to run this locally I'm getting "Property 'selectedTime1' does not exist on type 'TimpickerVisualComponent'" errors. It does not appear that it exists so the error makes sense. There was a problem hiding this comment. Perhaps this wasn't run locally, the template seems to be a copy of the demo with the ids added. I'll clean it up and remove the non-existent references |
||
| #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> | ||
| Selected time is {{selectedTime1?.local}} | ||
| </div> | ||
|
|
||
| <br/> | ||
|
|
||
| <h3> | ||
| 24-hour timepicker. | ||
| </h3> | ||
|
|
||
| <div | ||
| id="timepicker24hr" | ||
| style="max-width: 400px"> | ||
| <sky-timepicker #timePickerExample2> | ||
| <input | ||
| type="text" | ||
| [skyTimepickerInput]="timePickerExample2" | ||
| [timeFormat]="format24" | ||
| [(ngModel)]="selectedTime2" | ||
| #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> | ||
|
|
||
| <div> | ||
| Selected time is {{selectedTime2?.hour}}:{{selectedTime2?.minute}} | ||
| </div> | ||
|
|
||
| <br/> | ||
|
|
||
| <h3> | ||
|
There was a problem hiding this comment. I don't see any actual tests testing this third state. There was a problem hiding this comment. Yeah, I think this was copied from the demo template. The only visual difference seems to be that the input field is a type=hidden making it invisible. This doesn't really influence the visual state of the timepicker itself, so I don't think this is a case where we need visual test coverage. I'll remove it from the template. |
||
| Custom timepicker | ||
| </h3> | ||
|
|
||
| <div | ||
| style="max-width: 400px"> | ||
| <sky-timepicker #timePickerExample3> | ||
| <input | ||
| type="hidden" | ||
| [skyTimepickerInput]="timePickerExample3" | ||
| [returnFormat]="returnFormat" | ||
| [(ngModel)]="selectedTime3" | ||
| #time3="ngModel"> | ||
| </sky-timepicker> | ||
| <div | ||
| *ngIf="time3.errors && time3.errors.skyTime && (time3.dirty || time3.touched)" | ||
| class="sky-error-label"> | ||
| <span | ||
| [hidden]="!time.errors.skyTime.invalid"> | ||
| Please enter a valid time. | ||
| </span> | ||
| </div> | ||
| Selected time is {{selectedTime3?.local}} | ||
| </div> | ||
| </div> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { | ||
| Component | ||
| } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'timepicker-visual', | ||
| templateUrl: './timepicker-visual.component.html' | ||
| }) | ||
| export class TimepickerVisualComponent { } | ||
|
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This file needs renamed to
timepicker.visual-spec.ts(notice the period instead of the dash after "timepicker"). Otherwise these tests will not run.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh haha nice catch, I was wondering why it wasn't running for me 😛