|
| 1 | +import {by, ElementArrayFinder, ElementFinder} from 'protractor'; |
| 2 | + |
| 3 | +/** |
| 4 | + * This file is an example of how you can implement automated end-to-end tests for the |
| 5 | + * date/time picker component. |
| 6 | + * |
| 7 | + * The overall strategy here is to use the `dl-abdtp-value` attributes, which contain numeric date values, |
| 8 | + * to determine which buttons to click on the picker in order to select a target dates. |
| 9 | + */ |
| 10 | + |
| 11 | +/** |
| 12 | + * Clicks the nearest date button with a value less than or equal to the specified time. |
| 13 | + * @param dateButtons |
| 14 | + * the possible date buttons. |
| 15 | + * @param time |
| 16 | + * the desired selected time. |
| 17 | + */ |
| 18 | + |
| 19 | +export function clickNearestDateButton(dateButtons: ElementArrayFinder, time: number) { |
| 20 | + return dateButtons |
| 21 | + .filter(button => button.getAttribute('dl-abdtp-value').then(buttonValue => Number(buttonValue) <= time)) |
| 22 | + .last().click(); |
| 23 | +} |
| 24 | + |
| 25 | +/** |
| 26 | + * Have the dateTimePicker select the best possible value that is less than or equal to the specified time. |
| 27 | + * based on the current configuration of the dateTimePicker. |
| 28 | + * |
| 29 | + * This function will `not` select a time value `greater than` the specified time value. |
| 30 | + * |
| 31 | + * Additionally, this function depends on `ng-reflect-*` attributes which will never exist in a production build. |
| 32 | + * |
| 33 | + * @param dateTimePicker |
| 34 | + * the target dateTimePicker |
| 35 | + * |
| 36 | + * @param time |
| 37 | + * the desired selected time. |
| 38 | + */ |
| 39 | +async function pickTime(dateTimePicker: ElementFinder, time: number) { |
| 40 | + const dateButtons = dateTimePicker.all(by.className('dl-abdtp-date-button')); |
| 41 | + const leftButton = dateTimePicker.element(by.className('dl-abdtp-left-button')); |
| 42 | + const rightButton = dateTimePicker.element(by.className('dl-abdtp-right-button')); |
| 43 | + const upButton = dateTimePicker.element(by.className('dl-abdtp-up-button')); |
| 44 | + const viewAttributeName = 'data-dl-abdtp-view'; |
| 45 | + const viewElement = dateTimePicker.element(by.css(`[${viewAttributeName}]`)); |
| 46 | + |
| 47 | + const maxView = await dateTimePicker.getAttribute('ng-reflect-max-view'); |
| 48 | + const minView = await dateTimePicker.getAttribute('ng-reflect-min-view'); |
| 49 | + |
| 50 | + let currentView = await viewElement.getAttribute(viewAttributeName); |
| 51 | + |
| 52 | + // Go up to the max view in order to drill down by selecting the nearest button value. |
| 53 | + while (maxView !== currentView) { |
| 54 | + await upButton.click(); |
| 55 | + currentView = await viewElement.getAttribute(viewAttributeName); |
| 56 | + } |
| 57 | + |
| 58 | + let firstButtonValue = await dateButtons.first().getAttribute('dl-abdtp-value'); |
| 59 | + |
| 60 | + // This left and right navigation to find the target date range assumes that earlier times are to the left. |
| 61 | + // This is true for the default implementation but may not be true for all implementations. |
| 62 | + |
| 63 | + while (Number(firstButtonValue) > time) { |
| 64 | + await leftButton.click(); |
| 65 | + firstButtonValue = await dateButtons.first().getAttribute('dl-abdtp-value'); |
| 66 | + } |
| 67 | + |
| 68 | + let lastButtonValue = await dateButtons.last().getAttribute('dl-abdtp-value'); |
| 69 | + |
| 70 | + while (Number(lastButtonValue) <= time) { |
| 71 | + await rightButton.click(); |
| 72 | + lastButtonValue = await dateButtons.last().getAttribute('dl-abdtp-value'); |
| 73 | + } |
| 74 | + |
| 75 | + while (minView !== currentView) { |
| 76 | + await clickNearestDateButton(dateButtons, time); |
| 77 | + currentView = await viewElement.getAttribute(viewAttributeName); |
| 78 | + } |
| 79 | + |
| 80 | + return clickNearestDateButton(dateButtons, time); |
| 81 | +} |
| 82 | + |
| 83 | +export default pickTime; |
0 commit comments