[ADF-1895]Refactor date-time-picker and date-picker (#5544)

* Refactor date-time-picker and date-picker

* no message

e2e/content-services/share-file/share-file.e2e.ts

@@ -129,7 +129,6 @@ describe('Share file', () => {
         it('[C286548] Should be possible to set expiry date for link', async () => {
             await contentServicesPage.clickShareButton();
             await shareDialog.checkDialogIsDisplayed();
-            await shareDialog.clickDateTimePickerButton();
             await shareDialog.setDefaultDay();
             await shareDialog.setDefaultHour();
             await shareDialog.setDefaultMinutes();
@@ -155,7 +154,6 @@ describe('Share file', () => {
             await LocalStorageUtil.setConfigField('sharedLinkDateTimePickerType', JSON.stringify('date'));
             await contentServicesPage.clickShareButton();
             await shareDialog.checkDialogIsDisplayed();
-            await shareDialog.clickDateTimePickerButton();
             await shareDialog.setDefaultDay();
             await shareDialog.dateTimePickerDialogIsClosed();
             const value = await shareDialog.getExpirationDate();

e2e/pages/adf/dialog/share-dialog.page.ts

@@ -16,12 +16,13 @@
  */
 
 import { element, by, ElementFinder } from 'protractor';
-import { BrowserVisibility, TogglePage, BrowserActions } from '@alfresco/adf-testing';
+import { BrowserVisibility, TogglePage, BrowserActions, DateTimePickerPage } from '@alfresco/adf-testing';
 import moment = require('moment');
 
 export class ShareDialogPage {
 
     togglePage = new TogglePage();
+    dateTimePickerPage = new DateTimePickerPage();
     shareDialog: ElementFinder = element(by.css('adf-share-dialog'));
     dialogTitle: ElementFinder = element(by.css('[data-automation-id="adf-share-dialog-title"]'));
     shareToggle: ElementFinder = element(by.css('[data-automation-id="adf-share-toggle"] label'));
@@ -29,11 +30,6 @@ export class ShareDialogPage {
     shareLink: ElementFinder = element(by.css('[data-automation-id="adf-share-link"]'));
     closeButton: ElementFinder = element(by.css('button[data-automation-id="adf-share-dialog-close"]'));
     copySharedLinkButton: ElementFinder = element(by.css('.adf-input-action'));
-    timeDatePickerButton: ElementFinder = element(by.css('mat-datetimepicker-toggle button'));
-    dayPicker: ElementFinder = element(by.css('mat-datetimepicker-month-view'));
-    clockPicker: ElementFinder = element(by.css('mat-datetimepicker-clock'));
-    hoursPicker: ElementFinder = element(by.css('.mat-datetimepicker-clock-hours'));
-    minutePicker: ElementFinder = element(by.css('.mat-datetimepicker-clock-minutes'));
     expirationDateInput: ElementFinder = element(by.css('input[formcontrolname="time"]'));
     confirmationDialog: ElementFinder = element(by.css('adf-confirm-dialog'));
     confirmationCancelButton: ElementFinder = element(by.id('adf-confirm-cancel'));
@@ -81,35 +77,28 @@ export class ShareDialogPage {
     }
 
     async clickDateTimePickerButton(): Promise<void> {
-        await BrowserActions.click(this.timeDatePickerButton);
+        await this.dateTimePickerPage.clickDateTimePicker();
     }
 
     async calendarTodayDayIsDisabled(): Promise<void> {
         const tomorrow = moment().add(1, 'days').format('D');
 
         if (tomorrow !== '1') {
-            const today = await BrowserActions.getText(this.dayPicker.element(by.css('.mat-datetimepicker-calendar-body-today')));
+            await this.dateTimePickerPage.checkCalendarTodayDayIsDisabled();
-            await BrowserVisibility.waitUntilElementIsPresent(element(by.cssContainingText('.mat-datetimepicker-calendar-body-disabled', today)));
         }
     }
 
     async setDefaultDay(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.dayPicker);
+        const tomorrow = moment().add(1, 'days').format('D');
-
+        await this.dateTimePickerPage.setDate(tomorrow);
-        const tomorrow = moment().add(1, 'days').format('LL');
-        await BrowserActions.click(this.dayPicker.element(by.css(`td[aria-label="${tomorrow}"]`)));
-
     }
 
     async setDefaultHour(): Promise<void> {
-        const selector = '.mat-datetimepicker-clock-cell:not(.mat-datetimepicker-clock-cell-disabled)';
+        await this.dateTimePickerPage.dateTime.setDefaultEnabledHour();
-        await BrowserVisibility.waitUntilElementIsVisible(this.clockPicker);
-        await BrowserActions.click(this.hoursPicker.all(by.css(selector)).first());
     }
 
     async setDefaultMinutes() {
-        const selector = '.mat-datetimepicker-clock-cell:not(.mat-datetimepicker-clock-cell-disabled)';
+        await this.dateTimePickerPage.dateTime.setDefaultEnabledMinutes();
-        await BrowserActions.click(this.minutePicker.all(by.css(selector)).first());
     }
 
     async dateTimePickerDialogIsClosed(): Promise<void> {

e2e/process-services/dynamic-table-date-picker.e2e.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { LoginPage, Widget, DatePickerPage, DateUtil } from '@alfresco/adf-testing';
+import { LoginPage, Widget, DatePickerCalendarPage, DateUtil } from '@alfresco/adf-testing';
 import { ProcessFiltersPage } from '../pages/adf/process-services/process-filters.page';
 import { ProcessServiceTabBarPage } from '../pages/adf/process-services/process-service-tab-bar.page';
 import { NavigationBarPage } from '../pages/adf/navigation-bar.page';
@@ -29,7 +29,7 @@ describe('Dynamic Table', () => {
     const loginPage = new LoginPage();
     const processFiltersPage = new ProcessFiltersPage();
     const processServiceTabBarPage = new ProcessServiceTabBarPage();
-    const datePicker = new DatePickerPage();
+    const datePicker = new DatePickerCalendarPage();
     const navigationBarPage = new NavigationBarPage();
     const widget = new Widget();
     let user, tenantId, appId, apps, users;

e2e/search/components/search-date-range.e2e.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { DataTableComponentPage, DatePickerPage, DateUtil, LocalStorageUtil, LoginPage } from '@alfresco/adf-testing';
+import { DataTableComponentPage, DatePickerCalendarPage, DateUtil, LocalStorageUtil, LoginPage } from '@alfresco/adf-testing';
 import { AlfrescoApiCompatibility as AlfrescoApi } from '@alfresco/js-api';
 import { browser } from 'protractor';
 import { SearchDialogPage } from '../../pages/adf/dialog/search-dialog.page';
@@ -31,7 +31,7 @@ describe('Search Date Range Filter', () => {
     const searchFilters = new SearchFiltersPage();
     const dateRangeFilter = searchFilters.createdDateRangeFilterPage();
     const searchResults = new SearchResultsPage();
-    const datePicker = new DatePickerPage();
+    const datePicker = new DatePickerCalendarPage();
     const navigationBar = new NavigationBarPage();
     const dataTable = new DataTableComponentPage();
 

lib/testing/src/lib/content-services/pages/search/date-range-filter.page.ts

@@ -16,7 +16,7 @@
  */
 
 import { by, protractor, ElementFinder, Locator, element } from 'protractor';
-import { DatePickerPage } from '../../../material/pages/date-picker.page';
+import { DatePickerCalendarPage } from '../../../material/pages/date-picker-calendar.page';
 import { BrowserVisibility } from '../../../core/utils/browser-visibility';
 import { BrowserActions } from '../../../core/utils/browser-actions';
 
@@ -53,17 +53,17 @@ export class DateRangeFilterPage {
         return selectedDate;
     }
 
-    async openFromDatePicker(): Promise<DatePickerPage> {
+    async openFromDatePicker(): Promise<DatePickerCalendarPage> {
         await BrowserActions.click(this.filter.element(this.fromDateToggle));
 
-        const datePicker = new DatePickerPage();
+        const datePicker = new DatePickerCalendarPage();
         await datePicker.checkDatePickerIsDisplayed();
         return datePicker;
     }
 
-    async openToDatePicker(): Promise<DatePickerPage> {
+    async openToDatePicker(): Promise<DatePickerCalendarPage> {
         await BrowserActions.click(this.filter.element(this.toDateToggle));
-        const datePicker = new DatePickerPage();
+        const datePicker = new DatePickerCalendarPage();
         await datePicker.checkDatePickerIsDisplayed();
         return datePicker;
     }

lib/testing/src/lib/core/pages/card-view/card-view-boolean-item.page.ts

@@ -24,7 +24,7 @@ export class CardBooleanItemPage {
     labelLocator: Locator = by.css('div[data-automation-id*="card-boolean-label"]');
     checkbox: Locator = by.css('mat-checkbox[data-automation-id*="card-boolean"]');
 
-    constructor(label: string = 'assignee') {
+    constructor(label: string = 'required') {
         this.rootElement = element(by.xpath(`//div[contains(@data-automation-id, "label-${label}")]/ancestor::adf-card-view-boolitem`));
     }
 

lib/testing/src/lib/core/pages/card-view/card-view-date-item.page.ts

@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { element, by, ElementFinder, Locator } from 'protractor';
+import { DateTimePickerPage } from '../../../material/pages/date-time-picker.page';
+import { DatePickerPage } from '../../../material/pages/date-picker.page';
+
+export class CardDateItemPage {
+
+    rootElement: ElementFinder;
+    dateTimePickerPage: DateTimePickerPage;
+    datePickerPage = new DatePickerPage();
+
+    labelLocator: Locator = by.css('div[data-automation-id*="card-date-label"]');
+    valueLocator: Locator = by.css('span[data-automation-id*="card-date"]');
+    dateTimePicker: ElementFinder = element.all(by.css('.mat-datetimepicker-toggle')).first();
+    saveButton: Locator = by.css('button[data-automation-id*="card-dateitem-update"]');
+
+    constructor(label: string = 'minDate') {
+        this.rootElement = element(by.xpath(`//div[contains(@data-automation-id, "label-${label}")]/ancestor::adf-card-view-dateitem`));
+        this.dateTimePickerPage = new DateTimePickerPage(this.rootElement);
+    }
+
+    async setTodayDateValue(): Promise<void> {
+        await this.dateTimePickerPage.setTodayDateValue();
+    }
+
+    async setDateValue(date: string): Promise<boolean> {
+        return this.dateTimePickerPage.setDate(date);
+    }
+
+    async getDateValue(): Promise<string> {
+        return this.rootElement.element(this.valueLocator).getText();
+    }
+}

lib/testing/src/lib/core/pages/card-view/public-api.ts

@@ -17,3 +17,4 @@
 
 export * from './card-view-text-item.page';
 export * from './card-view-boolean-item.page';
+export * from './card-view-date-item.page';

lib/testing/src/lib/material/pages/date-picker-calendar.page.ts

@@ -0,0 +1,74 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { element, by, ElementFinder } from 'protractor';
+import { DateUtil } from '../../core/utils/date-util';
+import { BrowserVisibility } from '../../core/utils/browser-visibility';
+import { BrowserActions } from '../../core/utils/browser-actions';
+
+export class DatePickerCalendarPage {
+
+    datePicker: ElementFinder = element(by.css('mat-calendar'));
+    nextMonthButton: ElementFinder = element(by.css('button[class*="mat-calendar-next-button"]'));
+    previousMonthButton: ElementFinder = element(by.css('button[class*="mat-calendar-previous-button"]'));
+    todayDate: ElementFinder = element(by.css('.mat-calendar-body-today'));
+
+    async getSelectedDate(): Promise<string> {
+        return element(by.css('td[class*="mat-calendar-body-active"]')).getAttribute('aria-label');
+    }
+
+    async checkDatesAfterDateAreDisabled(date): Promise<void> {
+        const afterDate = DateUtil.formatDate('DD-MM-YY', date, 1);
+        const afterCalendar = element(by.css(`td[class*="mat-calendar-body-cell"][aria-label="${afterDate}"]`));
+        if (await afterCalendar.isPresent()) {
+            const aria = await afterCalendar.getAttribute('aria-disabled');
+            await expect(aria).toBe('true');
+        }
+        const isEnabled = await this.nextMonthButton.isEnabled();
+        await expect(isEnabled).toBe(false);
+    }
+
+    async checkDatesBeforeDateAreDisabled(date): Promise<void> {
+        const beforeDate = DateUtil.formatDate('DD-MM-YY', date, -1);
+        const beforeCalendar = element(by.css(`td[class*="mat-calendar-body-cell"][aria-label="${beforeDate}"]`));
+        if (await beforeCalendar.isPresent()) {
+            const aria = await beforeCalendar.getAttribute('aria-disabled');
+            await expect(aria).toBe('true');
+        }
+        const isEnabled = await this.previousMonthButton.isEnabled();
+        await expect(isEnabled).toBe(false);
+    }
+
+    async selectTodayDate(): Promise<void> {
+        await this.checkDatePickerIsDisplayed();
+        await BrowserActions.click(this.todayDate);
+        await this.checkDatePickerIsNotDisplayed();
+    }
+
+    async closeDatePicker(): Promise<void> {
+        await BrowserActions.closeMenuAndDialogs();
+        await this.checkDatePickerIsNotDisplayed();
+    }
+
+    async checkDatePickerIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.datePicker);
+    }
+
+    async checkDatePickerIsNotDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsNotVisible(this.datePicker);
+    }
+}

lib/testing/src/lib/material/pages/date-picker.page.ts

@@ -16,58 +16,16 @@
  */
 
 import { element, by, ElementFinder } from 'protractor';
-import { DateUtil } from '../../core/utils/date-util';
-import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
+import { DatePickerCalendarPage } from './date-picker-calendar.page';
 
 export class DatePickerPage {
 
-    datePicker: ElementFinder = element(by.css('mat-calendar'));
+    datePicker: ElementFinder = element.all(by.css('.mat-datepicker-toggle')).first();
-    nextMonthButton: ElementFinder = element(by.css('button[class*="mat-calendar-next-button"]'));
+    dateTime = new DatePickerCalendarPage();
-    previousMonthButton: ElementFinder = element(by.css('button[class*="mat-calendar-previous-button"]'));
 
-    async getSelectedDate(): Promise<string> {
+    async setTodayDateValue(): Promise<void> {
-        return element(by.css('td[class*="mat-calendar-body-active"]')).getAttribute('aria-label');
+        await BrowserActions.click(this.datePicker);
-    }
+        await this.dateTime.selectTodayDate();
-
-    async checkDatesAfterDateAreDisabled(date): Promise<void> {
-        const afterDate = DateUtil.formatDate('DD-MM-YY', date, 1);
-        const afterCalendar = element(by.css(`td[class*="mat-calendar-body-cell"][aria-label="${afterDate}"]`));
-        if (await afterCalendar.isPresent()) {
-            const aria = await afterCalendar.getAttribute('aria-disabled');
-            await expect(aria).toBe('true');
-        }
-        const isEnabled = await this.nextMonthButton.isEnabled();
-        await expect(isEnabled).toBe(false);
-    }
-
-    async checkDatesBeforeDateAreDisabled(date): Promise<void> {
-        const beforeDate = DateUtil.formatDate('DD-MM-YY', date, -1);
-        const beforeCalendar = element(by.css(`td[class*="mat-calendar-body-cell"][aria-label="${beforeDate}"]`));
-        if (await beforeCalendar.isPresent()) {
-            const aria = await beforeCalendar.getAttribute('aria-disabled');
-            await expect(aria).toBe('true');
-        }
-        const isEnabled = await this.previousMonthButton.isEnabled();
-        await expect(isEnabled).toBe(false);
-    }
-
-    async selectTodayDate(): Promise<void> {
-        await this.checkDatePickerIsDisplayed();
-        const todayDate = element(by.css('.mat-calendar-body-today'));
-        await BrowserActions.click(todayDate);
-    }
-
-    async closeDatePicker(): Promise<void> {
-        await BrowserActions.closeMenuAndDialogs();
-        await this.checkDatePickerIsNotDisplayed();
-    }
-
-    async checkDatePickerIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.datePicker);
-    }
-
-    async checkDatePickerIsNotDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsNotVisible(this.datePicker);
     }
 }

lib/testing/src/lib/material/pages/date-time-picker-calendar.page.ts

@@ -0,0 +1,74 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { element, by, ElementFinder, Locator } from 'protractor';
+import { BrowserVisibility } from '../../core/utils/browser-visibility';
+import { BrowserActions } from '../../core/utils/browser-actions';
+
+export class DateTimePickerCalendarPage {
+
+    datePicker: ElementFinder = element(by.css(`.mat-datetimepicker-calendar`));
+    today: ElementFinder = element(by.css(`.mat-datetimepicker-calendar-body-today`));
+    timePicker: ElementFinder = element(by.css('.mat-datetimepicker-clock'));
+    hourTime: ElementFinder = element.all(by.css('.mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell')).first();
+    minutesTime: ElementFinder = element.all(by.css('.mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell')).first();
+    firstEnabledHourSelector: Locator = by.css('.mat-datetimepicker-clock-cell:not(.mat-datetimepicker-clock-cell-disabled)');
+    firstEnabledMinutesSelector: Locator = by.css('.mat-datetimepicker-clock-cell:not(.mat-datetimepicker-clock-cell-disabled)');
+    hoursPicker: ElementFinder = element(by.css('.mat-datetimepicker-clock-hours'));
+    minutePicker: ElementFinder = element(by.css('.mat-datetimepicker-clock-minutes'));
+
+    async waitTillDateDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.datePicker);
+    }
+
+    async setToday(): Promise<void> {
+        await BrowserActions.click(this.today);
+    }
+
+    async setTime(): Promise<void> {
+        await BrowserActions.click(this.hourTime);
+        await BrowserActions.click(this.minutesTime);
+    }
+
+    async setDate(date?: string): Promise<boolean> {
+        try {
+            if (date) {
+                await BrowserActions.click(element(by.cssContainingText(`.mat-datetimepicker-calendar-body-cell-content`, date)));
+            } else {
+                await this.setToday();
+            }
+            await this.setTime();
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
+    async checkCalendarTodayDayIsDisabled(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsPresent(element(by.cssContainingText('.mat-datetimepicker-calendar-body-disabled', await BrowserActions.getText(this.today))));
+    }
+
+    async setDefaultEnabledHour(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.hoursPicker);
+        await BrowserActions.click(this.hoursPicker.all(this.firstEnabledHourSelector).first());
+    }
+
+    async setDefaultEnabledMinutes() {
+        await BrowserVisibility.waitUntilElementIsVisible(this.minutePicker);
+        await BrowserActions.click(this.minutePicker.all(this.firstEnabledMinutesSelector).first());
+    }
+}

lib/testing/src/lib/material/pages/date-time-picker.page.ts

@@ -0,0 +1,60 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { element, by, ElementFinder } from 'protractor';
+import { BrowserActions } from '../../core/utils/browser-actions';
+import { DateTimePickerCalendarPage } from './date-time-picker-calendar.page';
+
+export class DateTimePickerPage {
+
+    rootElement: ElementFinder;
+    dateTimePicker: ElementFinder = element(by.css('.mat-datetimepicker-toggle'));
+    dateTime = new DateTimePickerCalendarPage();
+
+    constructor(rootElement?: ElementFinder) {
+        if (rootElement) {
+            this.rootElement = rootElement;
+            this.dateTimePicker  = this.rootElement.element(by.css('.mat-datetimepicker-toggle'));
+        }
+    }
+
+    async setTodayDateTimeValue(): Promise<void> {
+        await BrowserActions.click(this.dateTimePicker);
+        await this.dateTime.waitTillDateDisplayed();
+        await this.dateTime.setToday();
+        await this.dateTime.setTime();
+    }
+
+    async setTodayDateValue(): Promise<void> {
+        await BrowserActions.click(this.dateTimePicker);
+        await this.dateTime.waitTillDateDisplayed();
+        await this.dateTime.setToday();
+    }
+
+    async setDate(date?: string): Promise<boolean> {
+        await BrowserActions.click(this.dateTimePicker);
+        return this.dateTime.setDate(date);
+    }
+
+    async clickDateTimePicker(): Promise<void> {
+        await BrowserActions.click(this.dateTimePicker);
+    }
+
+    async checkCalendarTodayDayIsDisabled(): Promise<void> {
+        await this.dateTime.checkCalendarTodayDayIsDisabled();
+    }
+}

lib/testing/src/lib/material/pages/public-api.ts

@@ -16,6 +16,9 @@
  */
 
 export * from './tabs.page';
+export * from './date-picker-calendar.page';
+export * from './date-time-picker.page';
 export * from './date-picker.page';
+export * from './date-time-picker-calendar.page';
 export * from './dropdown.page';
 export * from './toggle.page';