Merge pull request #3549 from NoelDeMartin/MOBILE-4254

MOBILE-4254: Behat snapshots

.github/workflows/acceptance.yml

@@ -42,6 +42,12 @@ jobs:
         git clone --branch master --depth 1 https://github.com/moodlehq/moodle-docker $GITHUB_WORKSPACE/moodle-docker
     - name: Install npm packages
       run: npm ci --no-audit
+    - name: Create Behat faildumps folder
+      run: |
+        mkdir moodle/behatfaildumps
+        chmod 777 moodle/behatfaildumps
+    - name: Install Behat Snapshots plugin
+      run: git clone --branch main --depth 1 https://github.com/NoelDeMartin/moodle-local_behatsnapshots $GITHUB_WORKSPACE/moodle/local/behatsnapshots
     - name: Generate Behat tests plugin
       run: |
         export MOODLE_DOCKER_WWWROOT=$GITHUB_WORKSPACE/moodle
@@ -50,12 +56,21 @@ jobs:
       run: |
         export MOODLE_DOCKER_WWWROOT=$GITHUB_WORKSPACE/moodle
         cp $GITHUB_WORKSPACE/moodle-docker/config.docker-template.php $GITHUB_WORKSPACE/moodle/config.php
+        sed -i "61c\$CFG->behat_faildump_path = '/var/www/html/behatfaildumps';" $GITHUB_WORKSPACE/moodle/config.php
         sed -i "61i\$CFG->behat_increasetimeout = 2;" $GITHUB_WORKSPACE/moodle/config.php
         sed -i "61i\$CFG->behat_ionic_wwwroot = 'http://moodleapp';" $GITHUB_WORKSPACE/moodle/config.php
+        sed -i "61i\$CFG->behat_snapshots_path = '/var/www/html/local/moodleappbehat/tests/behat/snapshots';" $GITHUB_WORKSPACE/moodle/config.php
         echo "define('TEST_MOD_BIGBLUEBUTTONBN_MOCK_SERVER', 'http://bbbmockserver/hash' . sha1(\$CFG->behat_wwwroot));" >> $GITHUB_WORKSPACE/moodle/config.php
         $GITHUB_WORKSPACE/moodle-docker/bin/moodle-docker-compose pull
         $GITHUB_WORKSPACE/moodle-docker/bin/moodle-docker-compose up -d
         $GITHUB_WORKSPACE/moodle-docker/bin/moodle-docker-wait-for-db
+    - name: Install Imagick PHP extension
+      run: |
+        export MOODLE_DOCKER_WWWROOT=$GITHUB_WORKSPACE/moodle
+        ./moodle-docker/bin/moodle-docker-compose exec webserver apt-get update
+        ./moodle-docker/bin/moodle-docker-compose exec webserver apt-get install -y libmagickwand-dev --no-install-recommends
+        ./moodle-docker/bin/moodle-docker-compose exec webserver pecl install imagick
+        ./moodle-docker/bin/moodle-docker-compose exec webserver docker-php-ext-enable imagick
     - name: Compile & launch app with Docker
       run: |
         docker build --build-arg build_command="npm run build:test" -t moodlehq/moodleapp:behat .
@@ -65,8 +80,20 @@ jobs:
     - name: Init Behat
       run: |
         export MOODLE_DOCKER_WWWROOT=$GITHUB_WORKSPACE/moodle
-         $GITHUB_WORKSPACE/moodle-docker/bin/moodle-docker-compose exec -T webserver sh -c "php admin/tool/behat/cli/init.php --parallel=8 --optimize-runs='@app&&$BEHAT_TAGS'"
+         $GITHUB_WORKSPACE/moodle-docker/bin/moodle-docker-compose exec -T webserver sh -c "php admin/tool/behat/cli/init.php --parallel=8 --optimize-runs='@app&&~@local&&$BEHAT_TAGS'"
     - name: Run Behat tests
       run: |
         export MOODLE_DOCKER_WWWROOT=$GITHUB_WORKSPACE/moodle
-        $GITHUB_WORKSPACE/moodle-docker/bin/moodle-docker-compose exec -T webserver sh -c "php admin/tool/behat/cli/run.php --verbose --tags='@app&&$BEHAT_TAGS' --auto-rerun=3"
+        $GITHUB_WORKSPACE/moodle-docker/bin/moodle-docker-compose exec -T webserver sh -c "php admin/tool/behat/cli/run.php --verbose --tags='@app&&~@local&&$BEHAT_TAGS' --auto-rerun=3"
+    - name: Upload Snapshot failures
+      uses: actions/upload-artifact@v3
+      if: ${{ failure() }}
+      with:
+        name: snapshot_failures
+        path: moodle/local/moodleappbehat/tests/behat/snapshots/failures/*
+    - name: Upload Behat failures
+      uses: actions/upload-artifact@v3
+      if: ${{ failure() }}
+      with:
+        name: behat_failures
+        path: moodle/behatfaildumps

gulpfile.js

@@ -71,5 +71,5 @@ gulp.task('watch', () => {
 });
 
 gulp.task('watch-behat', () => {
-    gulp.watch(['./src/**/*.feature', './local_moodleappbehat'], { interval: 500 }, gulp.parallel('behat'));
+    gulp.watch(['./src/**/*.feature', './src/**/*.png', './local_moodleappbehat'], { interval: 500 }, gulp.parallel('behat'));
 });

scripts/build-behat-plugin.js

@@ -76,37 +76,46 @@ async function main() {
     };
     writeFileSync(pluginFilePath, replaceArguments(fileContents, replacements));
 
-    // Copy feature files.
+    // Copy feature and snapshot files.
     if (!excludeFeatures) {
         const behatTempFeaturesPath = `${pluginPath}/behat-tmp`;
-        copySync(projectPath('src'), behatTempFeaturesPath, { filter: isFeatureFileOrDirectory });
+        copySync(projectPath('src'), behatTempFeaturesPath, { filter: shouldCopyFileOrDirectory });
 
         const behatFeaturesPath = `${pluginPath}/tests/behat`;
         if (!existsSync(behatFeaturesPath)) {
             mkdirSync(behatFeaturesPath, {recursive: true});
         }
 
-        for await (const featureFile of getDirectoryFiles(behatTempFeaturesPath)) {
-            const featurePath = dirname(featureFile);
-            if (!featurePath.endsWith('/tests/behat')) {
+        for await (const file of getDirectoryFiles(behatTempFeaturesPath)) {
+            const filePath = dirname(file);
+
+            if (filePath.endsWith('/tests/behat/snapshots')) {
+                renameSync(file, behatFeaturesPath + '/snapshots/' + basename(file));
+
                 continue;
             }
 
-            const newPath = featurePath.substring(0, featurePath.length - ('/tests/behat'.length));
+            if (!filePath.endsWith('/tests/behat')) {
+                continue;
+            }
+
+            const newPath = filePath.substring(0, filePath.length - ('/tests/behat'.length));
             const searchRegExp = /\//g;
             const prefix = relative(behatTempFeaturesPath, newPath).replace(searchRegExp,'-') || 'core';
-            const featureFilename = prefix + '-' + basename(featureFile);
-            renameSync(featureFile, behatFeaturesPath + '/' + featureFilename);
+            const featureFilename = prefix + '-' + basename(file);
+            renameSync(file, behatFeaturesPath + '/' + featureFilename);
         }
 
         rmSync(behatTempFeaturesPath, {recursive: true});
     }
 }
 
-function isFeatureFileOrDirectory(src) {
-    const stats = statSync(src);
+function shouldCopyFileOrDirectory(path) {
+    const stats = statSync(path);
 
-    return stats.isDirectory() || extname(src) === '.feature';
+    return stats.isDirectory()
+        || extname(path) === '.feature'
+        || extname(path) === '.png';
 }
 
 function isExcluded(file, exclusions) {

src/core/features/course/tests/behat/basic_usage.feature

@@ -89,6 +89,10 @@ Feature: Test basic usage of one course in app
     And I should find "Test scorm name" in the app
     And I should find "Test workshop name" in the app
 
+    When I set "page-core-course-index .core-course-thumb" styles to "--course-color" "lightblue"
+    And I set "page-core-course-index .core-course-thumb" styles to "--course-color-tint" "white"
+    Then the UI should match the snapshot
+
     When I press "Choice course 1" in the app
     Then the header should be "Choice course 1" in the app
 

src/core/features/login/tests/behat/basic_usage.feature

@@ -30,12 +30,15 @@ Feature: Test basic usage of login in app
     And I set the field "Your site" to "$WWWROOT" in the app
     And I press "Connect to your site" in the app
     Then I should find "Acceptance test site" in the app
+    And I replace "/.*/" within ".core-siteurl" with "https://campus.example.edu"
+    And the UI should match the snapshot
 
     When I set the following fields to these values in the app:
       | Username | student1 |
       | Password | student1 |
     And I press "Log in" near "Forgotten your username or password?" in the app
     Then I should find "Acceptance test site" in the app
+    And the UI should match the snapshot
     But I should not find "Log in" in the app
 
   Scenario: Add a non existing account