Skip to content

Commit 4601b91

Browse files
vlio20vlio20
authored
Demo page refactoring (#479)
1 parent faa2d99 commit 4601b91

136 files changed

Lines changed: 3084 additions & 1844 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎e2e/app.po.ts‎

Lines changed: 30 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,40 @@
1-
import {$, $$, browser, by, element, ElementFinder, ExpectedConditions} from 'protractor';
2-
1+
import {$, $$, browser, by, element, ElementFinder, ExpectedConditions, protractor} from 'protractor';
32

43
export class DemoPage {
54
private popupSelector = '.dp-popup.dp-main';
65
emptyElem = $('.dp-place-holder');
7-
dayPickerInput = $('#datePicker input');
8-
timePickerInput = $('#timePicker input');
9-
daytimePickerInput = $('#daytimePicker input');
10-
daytimeDirectiveInput = $('#daytimeDirective input');
11-
dayDirectiveInput = $('#dayDirective input');
12-
dayDirectiveReactiveInput = $('#datePickerDirDayReactive input');
13-
monthDirectiveInput = $('#datePickerDirMonth input');
14-
timeSelectDirectiveInput = $('#timePickerDirDay input');
6+
dayPickerInput = $('#picker input');
7+
timePickerInput = $('#picker input');
8+
daytimePickerInput = $('#picker input');
9+
daytimeDirectiveInput = $('input#picker');
10+
dayDirectiveInput = $('input#picker');
11+
monthDirectiveInput = $('input#picker');
12+
timeSelectDirectiveInput = $('input#picker');
1513
datePickerPopup = $(this.popupSelector);
16-
dayCalendar = $(`${this.popupSelector} dp-day-calendar`);
1714
dayCalendarContainer = $(`${this.popupSelector} dp-day-calendar .dp-day-calendar-container`);
18-
monthPickerInput = $('#monthPicker input');
15+
monthPickerInput = $('#picker input');
1916
monthCalendar = $(`${this.popupSelector} dp-month-calendar`);
2017
monthWeeks = $$(`${this.popupSelector} .dp-calendar-week`);
21-
calendarDays = $$(`${this.popupSelector} .dp-calendar-day`);
2218
selectedDays = $$(`${this.popupSelector} .dp-calendar-day.dp-selected`);
2319
selectedDay = $(`.dp-calendar-day.dp-selected`);
2420
selectedMonth = $(`.dp-calendar-month.dp-selected`);
2521
dayCalendarLeftNavBtn = $(`${this.popupSelector} .dp-calendar-nav-left`);
2622
dayCalendarLeftSecondaryNavBtn = $(`${this.popupSelector} .dp-calendar-secondary-nav-left`);
27-
dayCalendarRightNavBtn = $(`${this.popupSelector} .dp-calendar-nav-right`);
2823
dayCalendarRightSecondaryNavBtn = $(`${this.popupSelector} .dp-calendar-secondary-nav-right`);
2924
monthCalendarLeftNavBtn = $(`${this.popupSelector} dp-month-calendar .dp-calendar-nav-left`);
3025
monthCalendarRightNavBtn = $(`${this.popupSelector} dp-month-calendar .dp-calendar-nav-right`);
3126
weekDayNames = $$(`${this.popupSelector} .dp-weekdays`);
32-
weekDayInline = $$(`.dp-demo-container .dp-weekdays`);
33-
calendarContainer = $$(`${this.popupSelector} .dp-calendar-container `);
27+
weekDayInline = $$(`.dp-inline .dp-weekdays`);
3428
currentLocationBtn = $(`${this.popupSelector} .dp-current-location-btn`);
3529
themeOnRadio = $('#themeOn');
3630
themeOffRadio = $('#themeOff');
37-
openOnFocusRadioOn = $('#yesOpenOnFocus');
3831
openOnFocusRadioOff = $('#noOpenOnFocus');
3932
openOnClickRadioOn = $('#yesOpenOnClick');
4033
openOnClickRadioOff = $('#noOpenOnClick');
4134
onOpenDelayInput = $('#onOpenDelay');
4235
showNearMonthDaysRadio = $('#showNearMonthDaysRadio');
4336
hideNearMonthDaysRadio = $('#hideNearMonthDaysRadio');
4437
showWeekNumbersRadio = $('#showWeekNumbersRadio');
45-
hideWeekNumbersRadio = $('#hideWeekNumbersRadio');
4638
weekNumbers = $$(`${this.popupSelector} .dp-week-number`);
4739
dayCalendarNavHeaderBtn = $(`${this.popupSelector} .dp-nav-header-btn`);
4840
deyCalendarMonthNavHeader = $(`${this.popupSelector} dp-month-calendar .dp-nav-header`);
@@ -54,12 +46,11 @@ export class DemoPage {
5446
calendarDisabledDays = $$(`${this.popupSelector} .dp-calendar-day[disabled]`);
5547
calendarFirstDayOfMonth = $$(`${this.popupSelector} .dp-current-month`).get(0);
5648
calendarFirstMonthOfYear = $$(`${this.popupSelector} dp-month-calendar .dp-calendar-month`).get(0);
57-
calendarFirstMonthOfYearInline = $$(`.dp-demo-container dp-month-calendar .dp-calendar-month`).get(0);
49+
calendarFirstMonthOfYearInline = $$(`.dp-inline dp-month-calendar .dp-calendar-month`).get(0);
5850

5951
currentMonthCalendarBtn = $(`${this.popupSelector} dp-month-calendar .dp-current-month`);
6052
disableMonthSelector = $('#disableMonthSelector');
6153
yearFormat = $('#yearFormat');
62-
localeOptions = $('#locale');
6354
hideGoToCurrentRadio = $('#hideGoToCurrent');
6455
showGoToCurrentRadio = $('#showGoToCurrent');
6556
enableUnselectSelected = $('#enableUnSelect');
@@ -70,32 +61,23 @@ export class DemoPage {
7061
disableRequiredValidationRadio = $('#disableRequiredRadio');
7162
requiredValidationMsg = $('#requiredValidation');
7263
formatValidationMsg = $('#formatValidation');
73-
reactiveRequiredValidationMsg = $('#reactiveRequiredValidation');
74-
reactiveMinDateValidationMsg = $('#reactiveMinDateValidation');
75-
reactiveMaxDateValidationMsg = $('#reactiveMaxDateValidation');
76-
timePickerMinTimeValidationMsg = $('#timePickerMinTimeValidation');
77-
timePickerMaxTimeValidationMsg = $('#timePickerMaxTimeValidation');
7864
minDateValidationPickerInput = $('#minDatePicker input');
7965
minDateValidationMsg = $('#minDateValidation');
8066
maxDateValidationPickerInput = $('#maxDatePicker input');
8167
maxDateValidationMsg = $('#maxDateValidation');
8268
minTimeValidationPickerInput = $('#minTimeValidation input');
83-
minTimeValidationMsg = $('#minTimeValidation');
8469
maxTimeValidationPickerInput = $('#maxTimeValidation input');
85-
maxTimeValidationMsg = $('#maxTimeValidation');
8670
placeholderInput = $('#placeholderInput');
8771
firstDayOfWeekMonday = element(by.cssContainingText('#firstDayOfWeekSelect option', 'mo'));
8872
hebrewLocale = element(by.cssContainingText('#locale option', 'he'));
8973
monthFormatInput = $('#monthFormatInput');
9074
minSelectableInput = $('#minSelectable input');
9175
maxSelectableInput = $('#maxSelectable input');
92-
closeOnSelect = $('#closeOnSelect');
9376
noCloseOnSelect = $('#noCloseOnSelect');
9477
closeDelayInput = $('#closeDelay');
9578
weekDaysFormatInput = $('#weekDaysFormat');
9679
dateFormatInput = $('#dateFormat');
9780
enableMultiselect = $('#enableMultiselect');
98-
disableMultiselect = $('#disableMultiselect');
9981
dayBtnFormatInput = $('#dayBtnFormat');
10082
monthBtnFormatInput = $('#monthBtnFormat');
10183

@@ -109,14 +91,10 @@ export class DemoPage {
10991
secondsFormatInput = $('#secondsFormat');
11092
secondsIntervalInput = $('#secondsInterval');
11193
showSeconds = $('#showSeconds');
112-
hideSeconds = $('#hideSeconds');
11394
showTwentyFourHours = $('#showTwentyFourHours');
114-
hideTwentyFourHours = $('#hideTwentyFourHours');
11595
timeSeparatorInput = $('#timeSeparator');
11696
showMultipleYearsNavigation = $('#showMultipleYearsNavigation');
117-
hideMultipleYearsNavigation = $('#hideMultipleYearsNavigation');
11897
multipleYearsNavigateBy = $('#multipleYearsNavigateBy');
119-
showInputRadio = $('#showInputRadio');
12098
hideInputRadio = $('#hideInputRadio');
12199

122100
showOnOutsideClick = $('#showOnOutsideClick');
@@ -134,7 +112,7 @@ export class DemoPage {
134112
meridiemUpBtn = $(`${this.popupSelector} .dp-time-select-control-meridiem > .dp-time-select-control-up`);
135113
meridiemDownBtn = $(`${this.popupSelector} .dp-time-select-control-meridiem > .dp-time-select-control-down`);
136114
meridiemDisplay = $(`${this.popupSelector} .dp-time-select-display-meridiem`);
137-
meridiemDisplayInline = $(`.dp-demo-container .dp-time-select-display-meridiem`);
115+
meridiemDisplayInline = $(`.dp-inline .dp-time-select-display-meridiem`);
138116
timeSeparatorDisplay = $(`${this.popupSelector} .dp-time-select-separator:nth-child(2)`);
139117

140118
daytimePickerMenu = $('#daytimePickerMenu');
@@ -143,7 +121,6 @@ export class DemoPage {
143121
dayPickerMenu = $('#dayPickerMenu');
144122
dayInlineMenu = $('#dayInlineMenu');
145123
dayDirectiveMenu = $('#dayDirectiveMenu');
146-
dayDirectiveReactiveMenu = $('#dayDirectiveReactiveMenu');
147124
monthPickerMenu = $('#monthPickerMenu');
148125
monthInlineMenu = $('#monthInlineMenu');
149126
monthDirectiveMenu = $('#monthDirectiveMenu');
@@ -171,23 +148,38 @@ export class DemoPage {
171148
}
172149

173150
clickOnDayButtonInline(text: string) {
174-
return element(by.cssContainingText(`.dp-inline-day .dp-calendar-day`, text)).click();
151+
return element(by.cssContainingText(`.dp-calendar-day`, text)).click();
175152
}
176153

177154
clickOnMonthButton(text: string) {
178155
return element(by.cssContainingText(`${this.popupSelector} .dp-calendar-month`, text)).click();
179156
}
180157

181158
clickOnMonthButtonInline(text: string) {
182-
return element(by.cssContainingText(`.dp-inline-month .dp-calendar-month`, text)).click();
159+
return element(by.cssContainingText(`.dp-calendar-month`, text)).click();
183160
}
184161

185162
waitUntilPresent(elem: ElementFinder) {
186163
return browser.wait(ExpectedConditions.presenceOf(elem), 5000, 'Element taking too long to appear in the DOM');
187164
}
188165

166+
async clearInput(elem: ElementFinder): Promise<void> {
167+
await elem.click();
168+
const keys = (await elem.getAttribute('value')).length;
169+
const tmpArr = [...Array(keys)].map(() => 0);
170+
await elem.click();
171+
172+
for (const _ of tmpArr) {
173+
await elem.sendKeys(protractor.Key.ARROW_RIGHT);
174+
}
175+
176+
for (const _ of tmpArr) {
177+
await elem.sendKeys(protractor.Key.BACK_SPACE);
178+
}
179+
}
180+
189181
async setInputValue(input: ElementFinder, val: string): Promise<void> {
190-
await input.clear();
182+
await this.clearInput(input);
191183
await input.sendKeys(val);
192184
}
193185
}

‎e2e/bugs/format-change-e2e.spec.ts‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {DemoPage} from '../app.po';
2-
import {browser} from 'protractor';
32

43
describe('format changed validation', () => {
54
let page: DemoPage;
@@ -14,26 +13,13 @@ describe('format changed validation', () => {
1413
await page.setInputValue(page.dateFormatInput, 'DD-MM-YYYY');
1514
await page.setInputValue(page.daytimePickerInput, '10-04-2017 09:08:07');
1615
await page.clickOnBody();
17-
browser.sleep(50000);
1816
expect(await page.formatValidationMsg.isPresent()).toBeTruthy();
1917
await page.setInputValue(page.dateFormatInput, 'DD-MM-YYYY HH:mm:ss');
2018
await page.setInputValue(page.daytimePickerInput, '10-04-2017 09:08:07');
2119
await page.clickOnBody();
2220
expect(await page.formatValidationMsg.isPresent()).toBeFalsy();
2321
});
2422

25-
it('should hide validation on date time directive picker', async () => {
26-
await page.dayDirectiveReactiveMenu.click();
27-
await page.setInputValue(page.dateFormatInput, 'DD-MM');
28-
await page.setInputValue(page.dayDirectiveReactiveInput, '10-04-2017');
29-
await page.clickOnBody();
30-
expect(await page.formatValidationMsg.isPresent()).toBeTruthy();
31-
await page.setInputValue(page.dateFormatInput, 'DD-MM-YYYY');
32-
await page.setInputValue(page.dayDirectiveReactiveInput, '10-04-2017');
33-
await page.clickOnBody();
34-
expect(await page.formatValidationMsg.isPresent()).toBeFalsy();
35-
});
36-
3723
it('should hide validation on day picker', async () => {
3824
await page.dayPickerMenu.click();
3925
await page.setInputValue(page.dateFormatInput, 'DD-MM');

‎e2e/configuration-e2e.spec.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@ import {DemoPage} from './app.po';
33
describe('dpDayPicker configuration', () => {
44
let page: DemoPage;
55

6-
beforeEach(() => {
6+
beforeEach(async () => {
77
page = new DemoPage();
88
page.navigateTo();
99

10-
page.daytimePickerMenu.click();
10+
await page.daytimePickerMenu.click();
1111
});
1212

1313
it('openOnClick = false, should not open picker when clicked', async () => {
14-
page.openOnClickRadioOff.click();
15-
page.openOnFocusRadioOff.click();
16-
page.daytimePickerInput.click();
14+
await page.openOnClickRadioOff.click();
15+
await page.openOnFocusRadioOff.click();
16+
await page.daytimePickerInput.click();
1717
expect(await page.datePickerPopup.isDisplayed()).toBe(false);
1818
});
1919

2020
it('openOnClick = true, should open picker when clicked', async () => {
21-
page.openOnClickRadioOn.click();
22-
page.openOnFocusRadioOff.click();
23-
page.daytimePickerInput.click();
21+
await page.openOnClickRadioOn.click();
22+
await page.openOnFocusRadioOff.click();
23+
await page.daytimePickerInput.click();
2424
expect(await page.datePickerPopup.isDisplayed()).toBe(true);
2525
});
2626
});

‎e2e/current-btn-e2e.spec.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ describe('dpDayPicker dayPicker', () => {
6464

6565
await commonDayCalendar(page.dayPickerMenu, page.dayPickerInput);
6666
await commonDayCalendar(page.dayDirectiveMenu, page.dayDirectiveInput);
67-
await commonDayCalendar(page.dayDirectiveReactiveMenu, page.dayDirectiveReactiveInput);
6867

6968
await commonMonth(page.monthPickerMenu, page.monthPickerInput);
7069
await commonMonth(page.monthDirectiveMenu, page.monthDirectiveInput);

0 commit comments

Comments
 (0)