Run JavaScript tests also with node/puppeteer (#17432)

* Run Javascript tests on node / puppeteer

* fix js tests for modern browsers supporting sendBeacon

* run js tests on phantomjs & on node/puppeteer

* updates travis submodule

4 files changed, 124 insertions, 4 deletions

diff --git a/plugins/TestRunner/Commands/TestsRunJS.php b/plugins/TestRunner/Commands/TestsRunJS.php
new file mode 100644
index 0000000000..af79f9de67
--- /dev/null
+++ b/plugins/TestRunner/Commands/TestsRunJS.php
@@ -0,0 +1,50 @@
+<?php
+/**
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+namespace Piwik\Plugins\TestRunner\Commands;
+
+use Piwik\Plugin\ConsoleCommand;
+use Symfony\Component\Console\Input\InputInterface;
+use Symfony\Component\Console\Input\InputOption;
+use Symfony\Component\Console\Output\OutputInterface;
+
+class TestsRunJS extends ConsoleCommand
+{
+    protected function configure()
+    {
+        $this->setName('tests:run-js');
+        $this->setDescription('Run javascript tests');
+        $this->addOption('matomo-url', null, InputOption::VALUE_REQUIRED, 'Custom matomo url. Defaults to http://localhost');
+    }
+
+    protected function execute(InputInterface $input, OutputInterface $output)
+    {
+        $matomoUrl = $input->getOption('matomo-url') ?? 'http://localhost';
+
+        $screenshotTestingDir = PIWIK_INCLUDE_PATH . "/tests/lib/screenshot-testing";
+        $javascriptTestingDir = PIWIK_INCLUDE_PATH . "/tests/javascript";
+
+        $cmdNode = "cd '$javascriptTestingDir' && NODE_PATH='$screenshotTestingDir/node_modules' node testrunnerNode.js '$matomoUrl/tests/javascript/'";
+
+        $output->writeln('Executing command: <info>' . $cmdNode . '</info>');
+        $output->writeln('');
+
+        passthru($cmdNode, $returnCodeNode);
+
+        $cmdPhantom = "phantomjs $javascriptTestingDir/testrunnerPhantom.js '$matomoUrl/tests/javascript/'";
+
+        $output->writeln('');
+        $output->writeln('');
+        $output->writeln('Executing command: <info>' . $cmdPhantom . '</info>');
+        $output->writeln('');
+
+        passthru($cmdPhantom, $returnCodePhantom);
+
+
+        return $returnCodeNode + $returnCodePhantom;
+    }
+}
diff --git a/tests/javascript/index.php b/tests/javascript/index.php
index aae7e4d09d..36f3ed44af 100644
--- a/tests/javascript/index.php
+++ b/tests/javascript/index.php
@@ -3276,16 +3276,18 @@ function PiwikTest() {
         tracker.setSiteId(1);
         tracker.setCustomData({ "token": '---' });
         tracker.setRequestMethod('POST');
+        ok(tracker.isUsingAlwaysUseSendBeacon());
+        tracker.setRequestMethod('GeT');
+        ok(!tracker.isUsingAlwaysUseSendBeacon());
 
+        tracker.setRequestMethod('POST');
+        tracker.disableAlwaysUseSendBeacon(); // disable send beacon to force sending a xhr
         var callbackCalled = false;
         tracker.trackPageView('withCredentialsTest', null, function (event) {
             callbackCalled = true;
             ok(event.success, 'succeeded');
             ok(event.xhr && event.xhr.withCredentials, 'withCredentials is true');
         });
-        ok(tracker.isUsingAlwaysUseSendBeacon());
-        tracker.setRequestMethod('GeT');
-        ok(!tracker.isUsingAlwaysUseSendBeacon());
 
         stop();
         setTimeout(function() {
@@ -5116,13 +5118,14 @@ if ($mysql) {
         var msSinceStarted = (stopTime.getTime() - startTime.getTime());
         ok( msSinceStarted < 510, 'beforeUnloadHandler(): ' + msSinceStarted + ' was greater than 510 ' );
 
+        tracker.disableAlwaysUseSendBeacon();
         tracker.setLinkTrackingTimer(2000);
         startTime = new Date();
         tracker.trackPageView();
         tracker.hook.test._beforeUnloadHandler();
         stopTime = new Date();
         var diffTime = (stopTime.getTime() - startTime.getTime());
-        ok( diffTime >= 2000, 'setLinkTrackingTimer()' );
+        ok( diffTime >= 2000, 'setLinkTrackingTimer(): ' + diffTime);
     });
 
 <?php
diff --git a/tests/javascript/testrunnerNode.js b/tests/javascript/testrunnerNode.js
new file mode 100644
index 0000000000..5b97d93eec
--- /dev/null
+++ b/tests/javascript/testrunnerNode.js
@@ -0,0 +1,67 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * UI test runner script
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0; // ignore ssl errors
+
+const puppeteer = require('puppeteer');
+const url = process.argv[2] || 'http://localhost/tests/javascript/';
+
+main();
+
+async function main() {
+
+    const browser = await puppeteer.launch({args: ['--no-sandbox', '--ignore-certificate-errors']});
+    const page = await browser.newPage();
+
+    page.on('console', async (consoleMessage) => {
+        console.log("[" + consoleMessage.type()  + "] " + consoleMessage.text());
+    });
+
+    await page.goto(url);
+    await page.waitFor(() => window.QUnit);
+
+    await page.evaluate(() => {
+        window.testsDone = false;
+        window.testsSuccessfull = false;
+
+        QUnit.done(function (obj) {
+            console.info("Tests passed: " + obj.passed);
+            console.info("Tests failed: " + obj.failed);
+            console.info("Total tests:  " + obj.total);
+            console.info("Runtime (ms): " + obj.runtime);
+            window.testsDone = true;
+            window.testsSuccessfull = (obj.failed == 0);
+        });
+
+        QUnit.log(function (obj) {
+            if (!obj.result) {
+                var errorMessage = "Test failed in module " + obj.module + ": '" + obj.name + "' \nError: " + obj.message;
+
+                if (obj.actual) {
+                    errorMessage += " \nActual: " + obj.actual;
+                }
+
+                if (obj.expected) {
+                    errorMessage += " \nExpected: " + obj.expected;
+                }
+
+                errorMessage += " \nSource: " + obj.source + "\n\n";
+
+                console.info(errorMessage);
+            }
+        });
+    });
+
+    await page.waitFor(() => !!window.testsDone, {timeout: 600000});
+
+    var success = await page.evaluate(function() {
+        return window.testsSuccessfull;
+    });
+
+    process.exit(success ? 0 : 1);
+}
\ No newline at end of file
diff --git a/tests/javascript/testrunner.js b/tests/javascript/testrunnerPhantom.js
index 7194540ec8..7194540ec8 100644
--- a/tests/javascript/testrunner.js
+++ b/tests/javascript/testrunnerPhantom.js