Merge pull request #2859 from NoelDeMartin/MOBILE-3320

MOBILE-3320: Implement behat gulp command + UI Tweaks

gulp/task-build-behat-plugin.js

@@ -0,0 +1,47 @@
+// (C) Copyright 2021 Moodle Pty 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.
+
+const { exec } = require('child_process');
+const { resolve } = require('path');
+
+/**
+ * Task to build a Moodle plugin to run Behat tests.
+ */
+class BuildBehatPluginTask {
+
+    /**
+     * Check whether Behat is configured to run app tests.
+     *
+     * @returns Whether Behat is configured.
+     */
+    static isBehatConfigured() {
+        if (process.env.MOODLE_APP_BEHAT_PLUGIN_PATH) {
+            return !['0', 'false'].includes(process.env.MOODLE_APP_BEHAT_PLUGIN_PATH);
+        }
+
+        return !!process.env.MOODLE_DOCKER_WWWROOT;
+    }
+
+    /**
+     * Run the task.
+     *
+     * @param done Function to call when done.
+     */
+    run(done) {
+        exec(resolve(__dirname, '../scripts/build-behat-plugin.js'), done);
+    }
+
+}
+
+module.exports = BuildBehatPluginTask;

gulpfile.js

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 const BuildLangTask = require('./gulp/task-build-lang');
+const BuildBehatPluginTask = require('./gulp/task-build-behat-plugin');
 const BuildEnvTask = require('./gulp/task-build-env');
 const PushTask = require('./gulp/task-push');
 const Utils = require('./gulp/utils');
@@ -40,13 +41,31 @@ gulp.task('env', (done) => {
     new BuildEnvTask().run(done);
 });
 
+// Build a Moodle plugin to run Behat tests.
+if (BuildBehatPluginTask.isBehatConfigured()) {
+    gulp.task('behat', (done) => {
+        new BuildBehatPluginTask().run(done);
+    });
+}
+
 gulp.task('push', (done) => {
     new PushTask().run(args, done);
 });
 
-gulp.task('default', gulp.parallel(['lang', 'env']));
+gulp.task(
+    'default',
+    gulp.parallel([
+        'lang',
+        'env',
+        ...(BuildBehatPluginTask.isBehatConfigured() ? ['behat'] : [])
+    ]),
+);
 
 gulp.task('watch', () => {
     gulp.watch(paths.lang, { interval: 500 }, gulp.parallel('lang'));
     gulp.watch(['./moodle.config.json', './moodle.config.*.json'], { interval: 500 }, gulp.parallel('env'));
+
+    if (BuildBehatPluginTask.isBehatConfigured()) {
+        gulp.watch(['./tests/behat'], { interval: 500 }, gulp.parallel('behat'));
+    }
 });

scripts/build-behat-plugin.js

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+
+// (C) Copyright 2021 Moodle Pty 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.
+
+const { existsSync, readFileSync, writeFileSync } = require('fs');
+const { readdir } = require('fs').promises;
+const { mkdirSync, copySync } = require('fs-extra');
+const { resolve } = require('path');
+
+async function main() {
+    const pluginPath = process.argv[2] || guessPluginPath() || fail('Folder argument missing!');
+
+    if (!existsSync(pluginPath)) {
+        mkdirSync(pluginPath);
+    }
+
+    // Copy plugin template.
+    const { version: appVersion } = require(projectPath('package.json'));
+    const templatePath = projectPath('scripts/templates/behat-plugin');
+    const replacements = {
+        appVersion,
+        pluginVersion: getMoodlePluginVersion(),
+    };
+
+    copySync(templatePath, pluginPath);
+
+    for await (const templateFilePath of getDirectoryFiles(templatePath)) {
+        const pluginFilePath = pluginPath + templateFilePath.substr(templatePath.length);
+        const fileContents = readFileSync(pluginFilePath).toString();
+
+        writeFileSync(pluginFilePath, replaceArguments(fileContents, replacements));
+    }
+
+    // Copy features.
+    copySync(projectPath('tests/behat'), `${pluginPath}/tests/behat`);
+}
+
+function fail(message) {
+    console.error(message);
+    process.exit(1);
+}
+
+function guessPluginPath() {
+    if (process.env.MOODLE_APP_BEHAT_PLUGIN_PATH) {
+        return process.env.MOODLE_APP_BEHAT_PLUGIN_PATH;
+    }
+
+    if (process.env.MOODLE_DOCKER_WWWROOT) {
+        return `${process.env.MOODLE_DOCKER_WWWROOT}/local/moodleappbehat`;
+    }
+
+    return null;
+}
+
+function projectPath(path) {
+    return resolve(__dirname, '../', path);
+}
+
+async function* getDirectoryFiles(dir) {
+    const files = await readdir(dir, { withFileTypes: true });
+
+    for (const file of files) {
+        const path = resolve(dir, file.name);
+        if (file.isDirectory()) {
+            yield* getDirectoryFiles(path);
+        } else {
+            yield path;
+        }
+    }
+}
+
+function replaceArguments(text, args) {
+    for (const [arg, value] of Object.entries(args)) {
+        const regexp = new RegExp(`\\{\\{\\s+${arg}\\s+\\}\\}`, 'gm');
+
+        text = text.replace(regexp, value);
+    }
+
+    return text;
+}
+
+function getMoodlePluginVersion() {
+    const now = new Date();
+    const padded = (number, length = 2) => number.toString().padStart(length, '0');
+    const year = padded(now.getFullYear(), 4);
+    const month = padded(now.getMonth() + 1);
+    const day = padded(now.getDate());
+
+    return `${year}${month}${day}00`;
+}
+
+main();

scripts/templates/behat-plugin/lang/en/local_moodleappbehat.php

@@ -0,0 +1,3 @@
+<?php
+
+$string['pluginname'] = 'Moodle App Behat (auto-generated)';

scripts/templates/behat-plugin/version.php

@@ -0,0 +1,13 @@
+<?php
+
+/**
+ * This plugin has been auto-generated, please don't modify it.
+ */
+
+defined('MOODLE_INTERNAL') || die;
+
+$plugin->version = {{ pluginVersion }};
+$plugin->requires = 2016052300;
+$plugin->maturity = MATURITY_STABLE;
+$plugin->release = '{{ appVersion }}';
+$plugin->component = 'local_moodleappbehat';

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

@@ -155,13 +155,13 @@
                             <ion-label>
                                 <p>{{ 'addon.calendar.durationnone' | translate }}</p>
                             </ion-label>
-                            <ion-radio slot="end" value="0"></ion-radio>
+                            <ion-radio slot="end" [value]="0"></ion-radio>
                         </ion-item>
                         <ion-item lines="none">
                             <ion-label>
                                 <p>{{ 'addon.calendar.durationuntil' | translate }}</p>
                             </ion-label>
-                            <ion-radio slot="end" value="1"></ion-radio>
+                            <ion-radio slot="end" [value]="1"></ion-radio>
                         </ion-item>
                         <ion-item>
                             <ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
@@ -174,7 +174,7 @@
                             <ion-label>
                                 <p>{{ 'addon.calendar.durationminutes' | translate }}</p>
                             </ion-label>
-                            <ion-radio slot="end" value="2"></ion-radio>
+                            <ion-radio slot="end" [value]="2"></ion-radio>
                         </ion-item>
                         <ion-item>
                             <ion-label class="sr-only">{{ 'addon.calendar.durationminutes' | translate }}</ion-label>

src/core/features/course/pages/preview/preview.scss

@@ -7,17 +7,22 @@
     perspective-origin: center top;
     transform-style: preserve-3d;
 
-    .core-course-thumb-parallax-content {
-        transform: translateZ(0);
-        -webkit-filter: drop-shadow(0px -3px 3px rgba(var(--drop-shadow)));
-        filter: drop-shadow(0px -3px 3px rgba(var(--drop-shadow)));
-    }
-    .core-course-thumb-parallax {
-        height: 40vw;
-        max-height: 35vh;
-        z-index: -1;
-        overflow: hidden;
-    }
+    // @todo This parallax effect caused the image to be scaled during page transitions,
+    // and in some devices it seems like the problem persisted even after the transition.
+    // We should decide whether we want to keep this parallax or not, and if we do fix
+    // the problem or find an alternative implementation. For now, it's disabled.
+
+    // .core-course-thumb-parallax-content {
+    //     transform: translateZ(0);
+    //     -webkit-filter: drop-shadow(0px -3px 3px rgba(var(--drop-shadow)));
+    //     filter: drop-shadow(0px -3px 3px rgba(var(--drop-shadow)));
+    // }
+    // .core-course-thumb-parallax {
+    //     height: 40vw;
+    //     max-height: 35vh;
+    //     z-index: -1;
+    //     overflow: hidden;
+    // }
     .core-course-thumb {
         overflow: hidden;
         text-align: center;
@@ -30,7 +35,7 @@
          * translate-z: -2 * $scroll-factor px;
          * scale: 1 + $scroll-factor * 2;
          */
-        transform: translateZ(-1px) scale(2);
+        // transform: translateZ(-1px) scale(2);
     }