feat. add new UI element for picking date time simultaneously

demo-angular/e2e/tests.e2e.ts

@@ -65,6 +65,12 @@ describe("DateTimePicker", () => {
         expect(title).to.exist;
     });
 
+    it("Should expand date picker field examples", async () => {
+        const dateFieldTitle = await driver.findElementByText("DatePickerField", SearchOptions.contains);
+        expect(dateFieldTitle).to.exist;
+        await dateFieldTitle.click();
+    });
+
     it("Should select date and verify value of picker field", async () => {
         const selectDateField = await driver.findElementByText("select date", SearchOptions.contains);
         await selectDateField.click();
@@ -74,15 +80,6 @@ describe("DateTimePicker", () => {
         expect(dateSelected).to.exist;
     });
 
-    it("Should select time and verify value of picker field", async () => {
-        const selectTimeField = await driver.findElementByText("select time", SearchOptions.contains);
-        await selectTimeField.click();
-        const timeString = await getPickerTime(driver, 12);
-        await clickOkBtn(driver);
-        const timeSelected = await driver.findElementByText(timeString, SearchOptions.contains);
-        expect(timeSelected).to.exist;
-    });
-
     it("Should select date from min/max limited field", async () => {
         const minMaxDatePicker = await driver.findElementByText("tap to select", SearchOptions.contains);
         await minMaxDatePicker.click();
@@ -93,22 +90,6 @@ describe("DateTimePicker", () => {
         expect(dateSelected).to.exist;
     });
 
-    it("Should open 12h time format and verify wheelers values", async () => {
-        const twelveHourFormat = await driver.findElementByText("4:00 PM", SearchOptions.contains);
-        await twelveHourFormat.click();
-        const timeString = await getPickerTime(driver, 12);
-        await clickOkBtn(driver);
-        expect(timeString).to.equal("4:00 PM");
-    });
-
-    it("Should open 24h format and verify wheeler value", async () => {
-        const twentyFourFormat = await scrollToElement(driver, "16:00", Direction.down);
-        await twentyFourFormat.click();
-        const timeString = await getPickerTime(driver, 24);
-        await clickOkBtn(driver);
-        expect(timeString).to.equal("16:00");
-    });
-
     it("Should verify modified texts field for date picker", async () => {
         await scrollToElement(driver, "preferred locale: en_US", Direction.down);
         const pickers = await driver.findElementsByText("tap to choose");
@@ -126,23 +107,8 @@ describe("DateTimePicker", () => {
         expect(dateString).to.exist;
     });
 
-    it("Should verify modified texts field for time picker", async () => {
-        const datePicker = await driver.findElementByText("tap to choose");
-        await datePicker.click();
-        const time = await getPickerTime(driver, 12);
-        const approveBtn = await driver.findElementByText("Approve", SearchOptions.contains);
-        const rejectBtn = await driver.findElementByText("Reject", SearchOptions.contains);
-        const title = await driver.findElementByText("Confirm predefined time selection", SearchOptions.contains);
-        expect(approveBtn).to.exist;
-        expect(rejectBtn).to.exist;
-        expect(title).to.exist;
-        await approveBtn.click();
-        const dateString = await driver.findElementByText(time);
-        expect(dateString).to.exist;
-    });
-
     it("Should select date from de_De locale picker and verify format", async () => {
-        await scrollToElement(driver, "zeit wählen", Direction.down);
+        await scrollToElement(driver, "datum auswählen", Direction.down);
         const deLocale = await driver.findElementByText("preferred locale: de_DE");
         expect(deLocale).to.exist;
         const datePicker = await driver.findElementByText("datum auswählen", SearchOptions.contains);
@@ -181,56 +147,35 @@ describe("DateTimePicker", () => {
         expect(dateString).to.exist;
     });
 
-    it("Should select time from de_DE locale picker and verify format", async () => {
-        const timePicker = await driver.findElementByText("zeit wählen", SearchOptions.contains);
-        await timePicker.click();
-        const time = await getPickerTime(driver, 24);
-        let acceptBtn;
-        let rejectBtn;
-        if(driver.isAndroid){
-            let buttons = await driver.findElementsByClassName("android.widget.Button");
-            acceptBtn = buttons[5];
-            rejectBtn = buttons[4];
-        }
-        else{
-            acceptBtn = await driver.findElementByText("Bestätigen", SearchOptions.exact);
-            rejectBtn = await driver.findElementByText("Stornieren", SearchOptions.exact);
-        }
-        const title = await driver.findElementByText("Zeit wählen", SearchOptions.exact);
-        expect(acceptBtn).to.exist;
-        expect(rejectBtn).to.exist;
-        expect(title).to.exist;
-        await acceptBtn.click();
-        const dateField = await driver.findElementByText(time);
-        expect(time).to.exist;
-    });
-
     it("Should scroll to custom format and verify values", async () => {
         await scrollToElement(driver, "binding", Direction.down);
         const customFromatLabel = await driver.findElementByText("custom format");
         expect(customFromatLabel).to.exist;
         const customFormatDate = await driver.findElementByText("date: 24 February 2019", SearchOptions.exact);
         expect(customFormatDate).to.exist;
-        const customFormatTime = await driver.findElementByText("time: 01:00", SearchOptions.exact);
-        expect(customFormatTime).to.exist;
+    });
+
+    it("Should scroll to css styled DatePicker and verify picker style", async () => {
+        let cssPickers = await driver.findElementsByText("Feb 24, 2019", SearchOptions.exact);
+        await cssPickers[cssPickers.length - 1].click();
+        await getPickerDate(driver);
+        await driver.compareScreen("cssDatePicker");
+        await clickOkBtn(driver);
     });
 
     it("Should scroll to binding example and verify picker and label values", async () => {
-        await scrollToElement(driver, "css applied", Direction.down);
+        await scrollToElement(driver, "TimePickerField", Direction.down);
         const bindingLabel = await driver.findElementByText("binding", SearchOptions.exact);
         expect(bindingLabel).to.exist;
         let selector = driver.isAndroid ? "android.widget.EditText" : "XCUIElementTypeTextField"
         let fields = await driver.findElementsByClassName(selector);
-        let timeField;
         let dateField;
         if(driver.isAndroid){
-            timeField = fields[2];
-            dateField = fields[1];
+            dateField = fields[3];
         } 
         else{
-            let index = fields.length - 3;
+            let index = fields.length;
             console.log("index: " + index);
-            timeField = fields[index];
             dateField = fields[index - 1];
         }
         await dateField.click();
@@ -243,13 +188,84 @@ describe("DateTimePicker", () => {
         let bindingDate = await driver.findElementByText(dateLabel, SearchOptions.contains);
     });
 
-    it("Should scroll to css styled DatePicker and verify picker style", async () => {
-        await scrollToElement(driver, "tap to select time", Direction.down);
-        let cssPickers = await driver.findElementsByText("Feb 24, 2019", SearchOptions.exact);
-        await cssPickers[cssPickers.length - 1].click();
-        await getPickerDate(driver);
-        await driver.compareScreen("cssDatePicker");
+    it("Should expand time picker field examples", async () => {
+        const timeFieldTitle = await driver.findElementByText("TimePickerField", SearchOptions.contains);
+        expect(timeFieldTitle).to.exist;
+        await timeFieldTitle.click();
+    });
+
+    it("Should select time and verify value of picker field", async () => {
+        const selectTimeField = await driver.findElementByText("select time", SearchOptions.contains);
+        await selectTimeField.click();
+        const timeString = await getPickerTime(driver, 12);
         await clickOkBtn(driver);
+        const timeSelected = await driver.findElementByText(timeString, SearchOptions.contains);
+        expect(timeSelected).to.exist;
+    });
+
+    it("Should open 12h time format and verify wheelers values", async () => {
+        const twelveHourFormat = await driver.findElementByText("4:00 PM", SearchOptions.contains);
+        await twelveHourFormat.click();
+        const timeString = await getPickerTime(driver, 12);
+        await clickOkBtn(driver);
+        expect(timeString).to.equal("4:00 PM");
+    });
+
+    it("Should open 24h format and verify wheeler value", async () => {
+        const twentyFourFormat = await scrollToElement(driver, "16:00", Direction.down);
+        await twentyFourFormat.click();
+        const timeString = await getPickerTime(driver, 24);
+        await clickOkBtn(driver);
+        expect(timeString).to.equal("16:00");
+    });
+
+    it("Should verify modified texts field for time picker", async () => {
+        await scrollToElement(driver, "tap to choose", Direction.down);
+        const datePicker = await driver.findElementByText("tap to choose");
+        await datePicker.click();
+        const time = await getPickerTime(driver, 12);
+        const approveBtn = await driver.findElementByText("Approve", SearchOptions.contains);
+        const rejectBtn = await driver.findElementByText("Reject", SearchOptions.contains);
+        const title = await driver.findElementByText("Confirm predefined time selection", SearchOptions.contains);
+        expect(approveBtn).to.exist;
+        expect(rejectBtn).to.exist;
+        expect(title).to.exist;
+        await approveBtn.click();
+        const dateString = await driver.findElementByText(time);
+        expect(dateString).to.exist;
+    });
+
+    it("Should select time from de_DE locale picker and verify format", async () => {
+        await scrollToElement(driver, "zeit wählen", Direction.down);
+        const timePicker = await driver.findElementByText("zeit wählen", SearchOptions.contains);
+        await timePicker.click();
+        const time = await getPickerTime(driver, 24);
+        let acceptBtn;
+        let rejectBtn;
+        if(driver.isAndroid){
+            let buttons = await driver.findElementsByClassName("android.widget.Button");
+            acceptBtn = buttons[5];
+            rejectBtn = buttons[4];
+        }
+        else{
+            acceptBtn = await driver.findElementByText("Bestätigen", SearchOptions.exact);
+            rejectBtn = await driver.findElementByText("Stornieren", SearchOptions.exact);
+        }
+        const title = await driver.findElementByText("Zeit wählen", SearchOptions.exact);
+        expect(acceptBtn).to.exist;
+        expect(rejectBtn).to.exist;
+        expect(title).to.exist;
+        await acceptBtn.click();
+        const dateField = await driver.findElementByText(time);
+        expect(time).to.exist;
+    });
+
+    it("Should scroll to custom format and verify values", async () => {
+        await scrollToElement(driver, "binding", Direction.down);
+        const customFromatLabel = await driver.findElementByText("custom format");
+        expect(customFromatLabel).to.exist;
+        const customFormatTime = await driver.findElementByText("time: 01:00", SearchOptions.exact);
+        expect(customFormatTime).to.exist;
     });
 
     it("Should scroll to css styled TimePicker and verify picker style", async () => {
@@ -260,7 +276,15 @@ describe("DateTimePicker", () => {
         await clickOkBtn(driver);
     });
 
+    it("Should expand custom buttons examples", async () => {
+        await scrollToElement(driver, "Custom Buttons", Direction.down);
+        const customButtonsTitle = await driver.findElementByText("Custom Buttons", SearchOptions.contains);
+        expect(customButtonsTitle).to.exist;
+        await customButtonsTitle.click();
+    });
+
     it("Should tap button to select date and verify button text", async () => {
+        await scrollToElement(driver, "tap to select date and time", Direction.down);
         let dateButton = await driver.findElementByText("tap to select date", SearchOptions.contains);
         await dateButton.click();
         const date = await getPickerDate(driver);

demo-angular/src/app/home/home.component.css

@@ -6,6 +6,15 @@
     color: #303F9F;
 }
 
+.header {
+    font-size: 16;
+    margin-top: 12;
+    margin-bottom: 6;
+    color: white;
+    background-color: #2196F3;
+    text-align: center;
+}
+
 label {
     padding: 6 4;
 }