[#532] Added support for Functional JS tests.

Author: AlexSkrypnyk

.ahoy.yml

@@ -274,6 +274,11 @@ commands:
   test-functional:
     usage: Run PHPUnit functional tests.
     cmd: ahoy cli vendor/bin/phpunit --testsuite=functional "$@"
+
+  test-functional-javascript:
+    aliases: [test-js]
+    usage: Run PHPUnit functional JavaScript tests.
+    cmd: ahoy cli vendor/bin/phpunit --testsuite=functional-javascript "$@"
   #;> TOOL_PHPUNIT
 
   #;< TOOL_BEHAT

.docker/cli.dockerfile

@@ -39,10 +39,7 @@ ARG VORTEX_FRONTEND_BUILD_SKIP="0"
 ENV VORTEX_FRONTEND_BUILD_SKIP=${VORTEX_FRONTEND_BUILD_SKIP}
 
 ENV COMPOSER_ALLOW_SUPERUSER=1 \
-    COMPOSER_CACHE_DIR=/tmp/.composer/cache \
-    SIMPLETEST_DB=mysql://drupal:drupal@database/drupal \
-    SIMPLETEST_BASE_URL=http://nginx:8080 \
-    SYMFONY_DEPRECATIONS_HELPER=disabled
+    COMPOSER_CACHE_DIR=/tmp/.composer/cache
 
 # Allow custom PHP runtime configuration for Drush CLI commands.
 # The leading colon appends to the default scan directories.

.vortex/.ahoy.yml

@@ -117,12 +117,14 @@ commands:
 
   # If there are changes to the snapshots - this command will re-run twice reporting error the first time.
   update-snapshots:
+    aliases: [us]
     cmd: |
       export XDEBUG_MODE=off
       composer --working-dir=tests update-snapshots
       composer --working-dir=installer update-snapshots
 
   update-snapshots-install:
+    aliases: [usi]
     cmd: |
       ahoy install
       ahoy update-snapshots

.vortex/installer/tests/Fixtures/handler_process/_baseline/.ahoy.yml

@@ -235,6 +235,11 @@ commands:
     usage: Run PHPUnit functional tests.
     cmd: ahoy cli vendor/bin/phpunit --testsuite=functional "$@"
 
+  test-functional-javascript:
+    aliases: [test-js]
+    usage: Run PHPUnit functional JavaScript tests.
+    cmd: ahoy cli vendor/bin/phpunit --testsuite=functional-javascript "$@"
+
   test-bdd:
     usage: Run BDD tests.
     aliases: [test-behat]

.vortex/installer/tests/Fixtures/handler_process/_baseline/.docker/cli.dockerfile

@@ -39,10 +39,7 @@ ARG VORTEX_FRONTEND_BUILD_SKIP="0"
 ENV VORTEX_FRONTEND_BUILD_SKIP=${VORTEX_FRONTEND_BUILD_SKIP}
 
 ENV COMPOSER_ALLOW_SUPERUSER=1 \
-    COMPOSER_CACHE_DIR=/tmp/.composer/cache \
-    SIMPLETEST_DB=mysql://drupal:drupal@database/drupal \
-    SIMPLETEST_BASE_URL=http://nginx:8080 \
-    SYMFONY_DEPRECATIONS_HELPER=disabled
+    COMPOSER_CACHE_DIR=/tmp/.composer/cache
 
 # Allow custom PHP runtime configuration for Drush CLI commands.
 # The leading colon appends to the default scan directories.

.vortex/installer/tests/Fixtures/handler_process/_baseline/docs/testing.md

@@ -51,6 +51,7 @@ class MyClassTest extends UnitTestCase {
 - **Unit** - `Drupal\Tests\UnitTestCase` - Testing isolated PHP classes
 - **Kernel** - `Drupal\KernelTests\KernelTestBase` - Testing with database/services
 - **Functional** - `Drupal\Tests\BrowserTestBase` - Testing with full browser
+- **FunctionalJavascript** - `Drupal\FunctionalJavascriptTests\WebDriverTestBase` - Testing browser interaction with JavaScript
 
 ### Test data conventions
 

.vortex/installer/tests/Fixtures/handler_process/_baseline/phpunit.xml

@@ -9,7 +9,7 @@
          beStrictAboutChangesToGlobalState="true"
          beStrictAboutOutputDuringTests="true"
          beStrictAboutTestsThatDoNotTestAnything="true"
-         bootstrap="web/core/tests/bootstrap.php"
+         bootstrap="tests/phpunit/bootstrap.php"
          cacheResult="false"
          colors="true"
          displayDetailsOnPhpunitDeprecations="true"
@@ -31,38 +31,37 @@
         <ini name="error_reporting" value="32767"/>
         <!-- Do not limit the amount of memory tests take to run. -->
         <ini name="memory_limit" value="-1"/>
-        <!-- Example SIMPLETEST_BASE_URL value: http://localhost -->
-        <env name="SIMPLETEST_BASE_URL" value=""/>
-        <!-- Example SIMPLETEST_DB value: mysql://username:password@localhost/database_name#table_prefix -->
-        <env name="SIMPLETEST_DB" value=""/>
+        <env name="SIMPLETEST_BASE_URL" value="http://nginx:8080"/>
+        <env name="SIMPLETEST_DB" value="mysql://drupal:drupal@database/drupal"/>
         <!-- By default, browser tests will output links that use the base URL set
          in SIMPLETEST_BASE_URL. However, if your SIMPLETEST_BASE_URL is an internal
          path (such as may be the case in a virtual or Docker-based environment),
          you can set the base URL used in the browser test output links to something
          reachable from your host machine here. This will allow you to follow them
          directly and view the output. -->
-        <env name="BROWSERTEST_OUTPUT_BASE_URL" value=""/>
+        <!-- This is populated dynamically in tests/phpunit/bootstrap.php -->
+        <!-- <env name="BROWSERTEST_OUTPUT_BASE_URL" value=""/> -->
         <!-- The environment variable SYMFONY_DEPRECATIONS_HELPER is used to configure
-          the behavior of the deprecation tests.
-          Drupal core's testing framework is setting this variable to its defaults.
-          Projects with their own requirements need to manage this variable
-          explicitly.
+         the behavior of the deprecation tests.
+         Drupal core's testing framework is setting this variable to its defaults.
+         Projects with their own requirements need to manage this variable
+         explicitly.
         -->
         <!-- To disable deprecation testing completely uncomment the next line. -->
         <!-- <env name="SYMFONY_DEPRECATIONS_HELPER" value="disabled"/> -->
         <!-- Deprecation errors can be selectively ignored by specifying a file of
-          regular expression patterns for exclusion.
-          Uncomment the line below to specify a custom deprecations ignore file.
-          NOTE: it may be required to specify the full path to the file to run tests
-          correctly.
+         regular expression patterns for exclusion.
+         Uncomment the line below to specify a custom deprecations ignore file.
+         NOTE: it may be required to specify the full path to the file to run tests
+         correctly.
         -->
         <!-- <env name="SYMFONY_DEPRECATIONS_HELPER" value="ignoreFile=.deprecation-ignore.txt"/> -->
         <!-- Example for changing the driver class for mink tests MINK_DRIVER_CLASS value: 'Drupal\FunctionalJavascriptTests\DrupalSelenium2Driver' -->
         <env name="MINK_DRIVER_CLASS" value=""/>
         <!-- Example for changing the driver args to mink tests MINK_DRIVER_ARGS value: '["http://127.0.0.1:8510"]' -->
         <env name="MINK_DRIVER_ARGS" value=""/>
-        <!-- Example for changing the driver args to webdriver tests MINK_DRIVER_ARGS_WEBDRIVER value: '["chrome", { "goog:chromeOptions": { "w3c": false } }, "http://localhost:4444/wd/hub"]' For using the Firefox browser, replace "chrome" with "firefox" -->
-        <env name="MINK_DRIVER_ARGS_WEBDRIVER" value=""/>
+        <!-- Driver args for webdriver tests. -->
+        <env name="MINK_DRIVER_ARGS_WEBDRIVER" value='["chrome", {"goog:chromeOptions": {"w3c": true, "args": ["--disable-extensions", "--disable-gpu", "--disable-infobars", "--disable-popup-blocking", "--disable-translate", "--force-prefers-reduced-motion", "--no-first-run", "--test-type"]}}, "http://chrome:4444/wd/hub"]'/>
     </php>
     <testsuites>
         <testsuite name="unit">
@@ -79,13 +78,10 @@
             <directory>web/themes/custom/**/tests/src/Functional</directory>
         </testsuite>
 
-        <!-- Not implemented. -->
-        <!-- See https://github.com/drevops/vortex/issues/820 -->
-        <!--
         <testsuite name="functional-javascript">
-          <file>./tests/TestSuites/FunctionalJavascriptTestSuite.php</file>
+            <directory>web/modules/custom/**/tests/src/FunctionalJavascript</directory>
+            <directory>web/themes/custom/**/tests/src/FunctionalJavascript</directory>
         </testsuite>
-        -->
     </testsuites>
 
     <logging>
@@ -124,4 +120,14 @@
             <group>skipped</group>
         </exclude>
     </groups>
+    <extensions>
+        <!-- Functional tests HTML output logging.
+             Output directory is hardcoded in Drupal core's BrowserHtmlDebugTrait
+             to DRUPAL_ROOT/sites/simpletest/browser_output.
+             @see https://www.drupal.org/project/drupal/issues/2992069 -->
+        <bootstrap class="Drupal\TestTools\Extension\HtmlLogging\HtmlOutputLogger">
+            <parameter name="outputDirectory" value="web/sites/simpletest/browser_output"/>
+            <parameter name="verbose" value="true"/>
+        </bootstrap>
+    </extensions>
 </phpunit>

.vortex/installer/tests/Fixtures/handler_process/_baseline/tests/phpunit/bootstrap.php

@@ -0,0 +1,28 @@
+<?php
+
+/**
+ * @file
+ * PHPUnit bootstrap file.
+ *
+ * Prepares the environment for running PHPUnit tests.
+ */
+
+declare(strict_types=1);
+
+// Set the browser test output base URL from the local development URL.
+$localdev_url = getenv('VORTEX_LOCALDEV_URL');
+if ($localdev_url) {
+  $base_url = str_starts_with($localdev_url, 'http') ? $localdev_url : 'http://' . $localdev_url;
+  putenv('BROWSERTEST_OUTPUT_BASE_URL=' . $base_url);
+  $_SERVER['BROWSERTEST_OUTPUT_BASE_URL'] = $base_url;
+  $_ENV['BROWSERTEST_OUTPUT_BASE_URL'] = $base_url;
+}
+
+// @see https://www.drupal.org/project/drupal/issues/2992069
+$browser_output_dir = dirname(__DIR__, 2) . '/web/sites/simpletest/browser_output';
+if (!is_dir($browser_output_dir)) {
+  mkdir($browser_output_dir, 0775, TRUE);
+}
+
+// Load the Drupal core test bootstrap.
+require dirname(__DIR__, 2) . '/web/core/tests/bootstrap.php';

.vortex/installer/tests/Fixtures/handler_process/_baseline/web/modules/custom/sw_base/tests/src/FunctionalJavascript/ExampleTest.php

@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\Tests\sw_base\FunctionalJavascript;
+
+use PHPUnit\Framework\Attributes\Group;
+
+/**
+ * Class ExampleTest.
+ *
+ * Example functional JavaScript test case class.
+ *
+ * @package Drupal\sw_base\Tests
+ */
+#[Group('SwBase')]
+class ExampleTest extends SwBaseFunctionalJavascriptTestBase {
+
+  /**
+   * Test that a page can be loaded and JavaScript is functional.
+   */
+  public function testPageLoad(): void {
+    $this->drupalGet('<front>');
+
+    // Verify that the page loaded by checking for a page element.
+    $result = $this->assertSession()->waitForElement('css', 'html');
+    $this->assertNotNull($result, 'Page HTML element is present.');
+
+    $this->takeScreenshot('module_page_load');
+  }
+
+  /**
+   * Test that JavaScript can be executed in the browser.
+   */
+  public function testJavascriptExecution(): void {
+    $this->drupalGet('<front>');
+
+    // Execute JavaScript and verify the result.
+    $result = $this->getSession()->evaluateScript('1 + 1');
+    $this->assertEquals(2, $result);
+
+    $this->takeScreenshot('module_js_execution');
+  }
+
+}

.vortex/installer/tests/Fixtures/handler_process/_baseline/web/modules/custom/sw_base/tests/src/FunctionalJavascript/SwBaseFunctionalJavascriptTestBase.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\Tests\sw_base\FunctionalJavascript;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+use Drupal\Tests\sw_base\Traits\ArrayTrait;
+use Drupal\Tests\sw_base\Traits\AssertTrait;
+use Drupal\Tests\sw_base\Traits\BrowserHtmlDebugTrait;
+use Drupal\Tests\sw_base\Traits\MockTrait;
+use Drupal\Tests\sw_base\Traits\ReflectionTrait;
+
+/**
+ * Class SwBaseFunctionalJavascriptTestBase.
+ *
+ * Base class for functional JavaScript tests.
+ *
+ * @package Drupal\sw_base\Tests
+ */
+abstract class SwBaseFunctionalJavascriptTestBase extends WebDriverTestBase {
+
+  use ArrayTrait;
+  use AssertTrait;
+  use BrowserHtmlDebugTrait;
+  use MockTrait;
+  use ReflectionTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+}