Merge pull request #3961 from dpalou/MOBILE-3947

MOBILE-3947 ui: Display Cancel/Done buttons in datetime

local_moodleappbehat/tests/behat/behat_app.php

@@ -1211,4 +1211,13 @@ public function i_change_viewport_size_in_the_app(int $width, int $height) {
         $this->resize_app_window($width, $height);
     }
 
+    /**
+     * Wait until Toast disappears.
+     *
+     * @When I wait toast to dismiss in the app
+     */
+    public function i_wait_toast_to_dismiss_in_the_app() {
+        $this->runtime_js('waitToastDismiss()');
+    }
+
 }

src/addons/calendar/pages/edit-event/edit-event.html

@@ -27,12 +27,13 @@ <h1>{{ title | translate }}</h1>
             <!-- Date. -->
             <ion-item class="ion-text-wrap">
                 <ion-label position="stacked">
-                    <p class="item-heading" [core-mark-required]="true">{{ 'core.date' | translate }}</p>
+                    <label class="item-heading" [core-mark-required]="true" for="timestart-button">{{ 'core.date' | translate }}</label>
                 </ion-label>
-                <ion-datetime-button datetime="timestart" />
+                <ion-datetime-button datetime="timestart" id="timestart-button" />
                 <ion-modal [keepContentsMounted]="true">
                     <ng-template>
-                        <ion-datetime id="timestart" formControlName="timestart" presentation="date-time" [max]="maxDate" [min]="minDate">
+                        <ion-datetime id="timestart" formControlName="timestart" presentation="date-time" [max]="maxDate" [min]="minDate"
+                            [showDefaultButtons]="true">
                             <span slot="title">{{'core.date' | translate}}</span>
                         </ion-datetime>
                     </ng-template>
@@ -146,28 +147,28 @@ <h1>{{ title | translate }}</h1>
                     </ion-item>
                     <ion-item>
                         <ion-radio [value]="1">
-                            <p>{{ 'addon.calendar.durationuntil' | translate }}</p>
+                            <p><label for="timedurationuntil-button">{{ 'addon.calendar.durationuntil' | translate }}</label></p>
                         </ion-radio>
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 1">
                         <ion-label position="stacked" />
-                        <ion-datetime-button datetime="timedurationuntil" />
+                        <ion-datetime-button datetime="timedurationuntil" id="timedurationuntil-button" />
                         <ion-modal [keepContentsMounted]="true">
                             <ng-template>
                                 <ion-datetime id="timedurationuntil" formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
-                                    presentation="date-time">
+                                    presentation="date-time" [showDefaultButtons]="true">
                                     <span slot="title">{{'addon.calendar.durationuntil' | translate}}</span>
                                 </ion-datetime>
                             </ng-template>
                         </ion-modal>
                     </ion-item>
                     <ion-item>
                         <ion-radio [value]="2">
-                            <p id="durationinminutes">{{ 'addon.calendar.durationminutes' | translate }}</p>
+                            <p><label for="timedurationminutes">{{ 'addon.calendar.durationminutes' | translate }}</label></p>
                         </ion-radio>
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 2">
-                        <ion-input type="number" name="timedurationminutes" labelPlacement="start" aria-labelledby="durationinminutes"
+                        <ion-input type="number" name="timedurationminutes" labelPlacement="start" id="timedurationminutes"
                             [placeholder]="'addon.calendar.durationminutes' | translate" formControlName="timedurationminutes" />
                     </ion-item>
                 </ion-radio-group>

src/addons/calendar/tests/behat/create_events.feature

@@ -26,8 +26,9 @@ Feature: Test creation of calendar events in app
     When I press "More" in the app
     And I press "Calendar" in the app
     And I press "New event" in the app
+    Then I should find "## now ##%b %e, %Y##" in the app
     # Flaky step, sometimes it fails due to minute change when checking.
-    Then the field "Date" matches value "## now ##%Y-%m-%dT%H:%M##" in the app
+    And I should find "## now ##%l:%M %p##" in the app
     And I should not be able to press "Save" in the app
 
     # Check that student can only create User events.

src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html

@@ -5,7 +5,7 @@
     <ion-modal [keepContentsMounted]="true">
         <ng-template>
             <ion-datetime id="datetime" [formControlName]="'f_'+field.id" [max]="maxDate" [min]="minDate"
-                [disabled]="searchMode && !searchFields['f_'+field.id+'_z']" presentation="date" />
+                [disabled]="searchMode && !searchFields['f_'+field.id+'_z']" presentation="date" [showDefaultButtons]="true" />
         </ng-template>
     </ion-modal>
     <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />

src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html

@@ -13,16 +13,22 @@
 <!-- Edit. -->
 <ion-item *ngIf="edit && field && field.shortname && form" class="ion-text-wrap" [formGroup]="form">
     <ion-label position="stacked">
-        <span [core-mark-required]="required">
+        <label [core-mark-required]="required" for="profile-field-datetime-{{field.shortname}}-button">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
                 [courseId]="courseId" [wsNotFiltered]="true" />
-        </span>
+        </label>
     </ion-label>
 
-    <ion-datetime-button datetime="datetime" />
+    <ion-datetime-button datetime="profile-field-datetime-{{field.shortname}}" id="profile-field-datetime-{{field.shortname}}-button">
+        <ng-container *ngIf="control?.value === undefined">
+            <span slot="date-target">{{ 'core.choosedots' | translate }}</span>
+            <span slot="time-target">{{ 'core.choosedots' | translate }}</span>
+        </ng-container>
+    </ion-datetime-button>
     <ion-modal [keepContentsMounted]="true">
         <ng-template>
-            <ion-datetime id="datetime" [formControlName]="modelName" [presentation]="ionDateTimePresentation" [max]="max" [min]="min">
+            <ion-datetime id="profile-field-datetime-{{field.shortname}}" [formControlName]="modelName"
+                [presentation]="ionDateTimePresentation" [max]="max" [min]="min" [showDefaultButtons]="true">
                 <span slot="title">
                     <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
                         [courseId]="courseId" [wsNotFiltered]="true" />

src/addons/userprofilefield/datetime/component/datetime.ts

@@ -86,7 +86,7 @@ export class AddonUserProfileFieldDatetimeComponent extends CoreUserProfileField
      */
     protected createFormControl(field: AuthEmailSignupProfileField): FormControl<string | undefined> {
         const formData = {
-            value: field.defaultdata != '0' ? field.defaultdata : undefined,
+            value: field.defaultdata && field.defaultdata !== '0' ? field.defaultdata : undefined,
             disabled: this.disabled,
         };
 

src/core/features/reminders/tests/behat/course_reminders.feature

@@ -23,19 +23,19 @@ Feature: Set a new reminder on course
     # Default set
     When I press "Set a reminder for \"Course 1\" (Course end date)" in the app
     Then I should find "Reminder set for " in the app
-    And I should find "Reminder set for" in the app
 
     # Set from list
-    When I press "Set a reminder for \"Course 1\" (Course end date)" in the app
+    When I wait toast to dismiss in the app
+    And I press "Set a reminder for \"Course 1\" (Course end date)" in the app
     Then I should find "Set a reminder" in the app
     And "At the time of the event" should be selected in the app
     But "12 hours before" should not be selected in the app
     When I press "12 hours before" in the app
     Then I should find "Reminder set for " in the app
-    And I should find "Reminder set for" in the app
 
     # Custom set
-    When I press "Set a reminder for \"Course 1\" (Course end date)" in the app
+    When I wait toast to dismiss in the app
+    And I press "Set a reminder for \"Course 1\" (Course end date)" in the app
     Then I should find "Set a reminder" in the app
     And "At the time of the event" should not be selected in the app
     But "12 hours before" should be selected in the app
@@ -46,10 +46,10 @@ Feature: Set a new reminder on course
        | Units | hours |
     And I press "Set reminder" in the app
     Then I should find "Reminder set for " in the app
-    And I should find "Reminder set for" in the app
 
     # Remove
-    When I press "Set a reminder for \"Course 1\" (Course end date)" in the app
+    When I wait toast to dismiss in the app
+    And I press "Set a reminder for \"Course 1\" (Course end date)" in the app
     Then "2 hours before" should be selected in the app
     When I press "Delete reminder" in the app
     Then I should find "Reminder deleted" in the app

src/testing/services/behat-dom.ts

@@ -376,6 +376,11 @@ export class TestingBehatDomUtilsService {
 
         containers = containers
             .filter(container => {
+                if (!this.isElementVisible(container)) {
+                    // Ignore containers not visible.
+                    return false;
+                }
+
                 if (container.tagName === 'ION-ALERT') {
                     // For some reason, in Behat sometimes alerts aren't removed from DOM, the close animation doesn't finish.
                     // Filter alerts with pointer-events none since that style is set before the close animation starts.
@@ -453,7 +458,16 @@ export class TestingBehatDomUtilsService {
             const inputId = label.getAttribute('for');
 
             if (inputId) {
-                return document.getElementById(inputId) || undefined;
+                const element = document.getElementById(inputId) || undefined;
+                if (element?.tagName !== 'ION-DATETIME-BUTTON') {
+                    return element;
+                }
+
+                // Search the ion-datetime associated with the button.
+                const datetimeId = (<HTMLIonDatetimeButtonElement> element).datetime;
+                const datetime = document.querySelector<HTMLElement>(`ion-datetime#${datetimeId}`);
+
+                return datetime || undefined;
             }
 
             input = this.getShadowDOMHost(label) || undefined;
@@ -477,6 +491,19 @@ export class TestingBehatDomUtilsService {
         locator: TestingBehatElementLocator,
         options: TestingBehatFindOptions = {},
     ): HTMLElement | undefined {
+        // Remove extra spaces.
+        const treatedText = locator.text.trim().replace(/\s\s+/g, ' ');
+        if (treatedText !== locator.text) {
+            const element = this.findElementsBasedOnText({
+                ...locator,
+                text: treatedText,
+            }, options)[0];
+
+            if (element) {
+                return element;
+            }
+        }
+
         return this.findElementsBasedOnText(locator, options)[0];
     }
 

src/testing/services/behat-runtime.ts

@@ -18,7 +18,7 @@ import { CoreCustomURLSchemes, CoreCustomURLSchemesProvider } from '@services/ur
 import { ONBOARDING_DONE } from '@features/login/constants';
 import { CoreConfig } from '@services/config';
 import { EnvironmentConfig } from '@/types/config';
-import { LocalNotifications, makeSingleton, NgZone } from '@singletons';
+import { LocalNotifications, makeSingleton, NgZone, ToastController } from '@singletons';
 import { CoreNetwork, CoreNetworkService } from '@services/network';
 import { CorePushNotifications, CorePushNotificationsProvider } from '@features/pushnotifications/services/pushnotifications';
 import { CoreCronDelegate, CoreCronDelegateService } from '@services/cron';
@@ -33,6 +33,7 @@ import { Swiper } from 'swiper';
 import { LocalNotificationsMock } from '@features/emulator/services/local-notifications';
 import { GetClosureArgs } from '@/core/utils/types';
 import { CoreIframeComponent } from '@components/iframe/iframe';
+import { CoreUtils } from '@services/utils/utils';
 
 /**
  * Behat runtime servive with public API.
@@ -745,6 +746,15 @@ export class TestingBehatRuntimeService {
         return 'OK';
     }
 
+    /**
+     * Wait for toast to be dismissed in the app.
+     *
+     * @returns Promise resolved when toast has been dismissed.
+     */
+    async waitToastDismiss(): Promise<void> {
+        await CoreUtils.ignoreErrors(ToastController.dismiss());
+    }
+
 }
 
 export const TestingBehatRuntime = makeSingleton(TestingBehatRuntimeService);

src/theme/theme.base.scss

@@ -2015,6 +2015,11 @@ ion-item.item-label-stacked ion-datetime-button {
     align-self: self-end;
 }
 
+ion-datetime-button p {
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
 // Table App styles
 table.core-table {
     border-collapse: collapse;