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

* Refactor date-time-picker and date-picker

* no message

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'));
-    nextMonthButton: ElementFinder = element(by.css('button[class*="mat-calendar-next-button"]'));
-    previousMonthButton: ElementFinder = element(by.css('button[class*="mat-calendar-previous-button"]'));
+    datePicker: ElementFinder = element.all(by.css('.mat-datepicker-toggle')).first();
+    dateTime = new DatePickerCalendarPage();
 
-    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();
-        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);
+    async setTodayDateValue(): Promise<void> {
+        await BrowserActions.click(this.datePicker);
+        await this.dateTime.selectTodayDate();
     }
 }

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';