Add pre-configuration for Nightwatch VRT (#351)

Lullabot · Aug 20, 2024 · 51ccab4 · 51ccab4
1 parent 4ca055c
commit 51ccab4
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 3 deletions.
diff --git a/.github/workflows/TestFunctional.yml b/.github/workflows/TestFunctional.yml
@@ -316,7 +316,10 @@ jobs:
           echo '  "nightwatch@*":' >> .yarnrc.yml
           echo '    dependencies:' >> .yarnrc.yml
           echo '      ws: "*"' >> .yarnrc.yml
-          ddev yarn add nightwatch nightwatch-axe-verbose @lullabot/nightwatch-drupal-commands --dev
+          echo '  "@nightwatch/vrt@*":' >> .yarnrc.yml
+          echo '    dependencies:' >> .yarnrc.yml
+          echo '      open: "^8"' >> .yarnrc.yml
+          ddev yarn add nightwatch nightwatch-axe-verbose @nightwatch/vrt @lullabot/nightwatch-drupal-commands --dev
 
       - name: Install Drupal
         run: |
@@ -370,8 +373,11 @@ jobs:
           echo '  "nightwatch@*":' >> .yarnrc.yml
           echo '    dependencies:' >> .yarnrc.yml
           echo '      ws: "*"' >> .yarnrc.yml
+          echo '  "@nightwatch/vrt@*":' >> .yarnrc.yml
+          echo '    dependencies:' >> .yarnrc.yml
+          echo '      open: "^8"' >> .yarnrc.yml
           ddev yarn cache clear
-          ddev yarn add nightwatch nightwatch-axe-verbose @lullabot/nightwatch-drupal-commands --dev
+          ddev yarn add nightwatch nightwatch-axe-verbose @nightwatch/vrt @nightwatch/vrt @lullabot/nightwatch-drupal-commands --dev
 
       - name: Install Drupal
         run: |

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -41,6 +41,7 @@ build:
     - ddev composer require lullabot/drainpipe --with-all-dependencies
     - ddev restart
     - test -f .gitlab/drainpipe/DDEV.gitlab-ci.yml
+    - test -f .gitlab/drainpipe/Nightwatch.gitlab-ci.yml
     - ddev drush site:install minimal -y
     - echo "\$settings['config_sync_directory'] = '../config';" >> web/sites/default/settings.php
     - ddev drush config:export -y

diff --git a/drainpipe-dev/config/nightwatch.conf.js b/drainpipe-dev/config/nightwatch.conf.js
@@ -4,6 +4,13 @@ const drupalCommandsPath = path.dirname(require.resolve('@lullabot/nightwatch-dr
 const firefoxLaunchUrl = process.env.NIGHTWATCH_DRUPAL_URL_FIREFOX && process.env.NIGHTWATCH_DRUPAL_URL_FIREFOX.length ? process.env.NIGHTWATCH_DRUPAL_URL_FIREFOX.replace(/\/$/, '') : process.env.NIGHTWATCH_DRUPAL_URL;
 const chromeLaunchUrl = process.env.NIGHTWATCH_DRUPAL_URL_CHROME && process.env.NIGHTWATCH_DRUPAL_URL_CHROME.length ? process.env.NIGHTWATCH_DRUPAL_URL_CHROME.replace(/\/$/, '') : process.env.NIGHTWATCH_DRUPAL_URL;
 
+let nightwatchVRT = true;
+try {
+  require.resolve('@nightwatch/vrt');
+} catch(e) {
+  nightwatchVRT = false;
+}
+
 module.exports = {
   // An array of folders (excluding subfolders) where your tests are located;
   // if this is not specified, the test source must be passed as the second argument to the test runner.
@@ -23,6 +30,17 @@ module.exports = {
   // See https://nightwatchjs.org/guide/#external-globals
   globals_path : '',
 
+  plugins: nightwatchVRT ? ['@nightwatch/vrt'] : [],
+
+  '@nightwatch/vrt': {
+    latest_screenshots_path: 'test/nightwatch/vrt/latest',
+    baseline_screenshots_path: 'test/nightwatch/vrt/baseline',
+    diff_screenshots_path: 'test/nightwatch/vrt/diff',
+    threshold: 0.00,
+    prompt: false,
+    updateScreenshots: false
+  },
+
   webdriver: {},
 
   test_workers: {

diff --git a/drainpipe-dev/scaffold/nightwatch/example.nightwatch.js b/drainpipe-dev/scaffold/nightwatch/example.nightwatch.js
@@ -10,6 +10,8 @@ module.exports = {
           .url(url)
           .assert.titleContains('admin');
       })
+      // @see https://nightwatchjs.org/guide/writing-tests/visual-regression-testing.html
+      //.assert.screenshotIdenticalToBaseline('body')
       .end();
   }
 };
diff --git a/scaffold/gitignore/common.gitignore b/scaffold/gitignore/common.gitignore
@@ -59,3 +59,6 @@ node_modules
 #########
 test_result
 .prettiercache
+vrt-report
+test/nightwatch/vrt/latest
+test/nightwatch/vrt/diff
diff --git a/scaffold/gitlab/Nightwatch.gitlab-ci.yml b/scaffold/gitlab/Nightwatch.gitlab-ci.yml
@@ -0,0 +1,33 @@
+report-nightwatch:
+  stage: report
+  when: always
+  needs:
+    - job: functional
+      artifacts: true
+  script:
+    - echo "Nothing to do"
+  artifacts:
+    expose_as: 'Nightwatch Test Report'
+    paths:
+      - test_result/nightwatch-html-report/index.html
+      - test/nightwatch/vrt
+      - test_result
+
+report-nightwatch-vrt:
+  stage: report
+  when: always
+  script:
+    - |
+      if [ -f "vrt-report/index.html" ] && [ $GITLAB_CI = "true" ]; then
+        cp vrt-report/index.html vrt-report/index-gitlab.html
+        sed -i "s|\"/test/nightwatch/vrt/|\"../test/nightwatch/vrt/|g" vrt-report/index-gitlab.html
+      fi
+  needs:
+    - job: functional
+      artifacts: true
+  artifacts:
+    expose_as: 'VRT Test Report'
+    paths:
+      - vrt-report/index-gitlab.html
+      - test/nightwatch/vrt
+      - test_result
diff --git a/src/ScaffoldInstallerPlugin.php b/src/ScaffoldInstallerPlugin.php
@@ -260,6 +260,10 @@ private function installGitlabCI(string $scaffoldPath): void {
             $fs->copy("$scaffoldPath/gitlab/Common.gitlab-ci.yml", ".drainpipe/gitlab/Common.gitlab-ci.yml");
             $this->io->write("🪠 [Drainpipe] .drainpipe/gitlab/Common.gitlab-ci.yml installed");
         }
+
+        $fs->copy("$scaffoldPath/gitlab/Nightwatch.gitlab-ci.yml", ".drainpipe/gitlab/Nightwatch.gitlab-ci.yml");
+        $this->io->write("🪠 [Drainpipe] .drainpipe/gitlab/Nightwatch.gitlab-ci.yml installed");
+
         foreach ($this->extra['drainpipe']['gitlab'] as $gitlab) {
             $file = "gitlab/$gitlab.gitlab-ci.yml";
             if (file_exists("$scaffoldPath/$file")) {$fs->ensureDirectoryExists('./.drainpipe/gitlab');

diff --git a/tasks/test.yml b/tasks/test.yml
@@ -217,7 +217,7 @@ tasks:
     interactive: true
     cmds:
       - |
-        PACKAGES="nightwatch nightwatch-axe-verbose @lullabot/nightwatch-drupal-commands"
+        PACKAGES="nightwatch nightwatch-axe-verbose @nightwatch/vrt @lullabot/nightwatch-drupal-commands"
         if [ ! -f "package.json" ]; then
           echo -n "No package.json exists, would you like to use yarn1, npm, yarn3 (node <= 20), or yarn (node >= 21)? "
           read -r PACKAGE_MANAGER
@@ -239,6 +239,9 @@ tasks:
             echo '  "nightwatch@*":' >> .yarnrc.yml
             echo '    dependencies:' >> .yarnrc.yml
             echo '      ws: "*"' >> .yarnrc.yml
+            echo '  "@nightwatch/vrt@*":' >> .yarnrc.yml
+            echo '    dependencies:' >> .yarnrc.yml
+            echo '      open: "^8"' >> .yarnrc.yml
             yarn add $PACKAGES --dev
           elif [ "$PACKAGE_MANAGER" == "yarn" ]; then
             yarn set version berry
@@ -247,6 +250,9 @@ tasks:
             echo '  "nightwatch@*":' >> .yarnrc.yml
             echo '    dependencies:' >> .yarnrc.yml
             echo '      ws: "*"' >> .yarnrc.yml
+            echo '  "@nightwatch/vrt@*":' >> .yarnrc.yml
+            echo '    dependencies:' >> .yarnrc.yml
+            echo '      open: "^8"' >> .yarnrc.yml
             yarn cache clear
             yarn add $PACKAGES --dev
           else