Add UI test for JavaScript tracking. (#15567)

* Add UI test for JavaScript tracking.

* apply some review feedback

* try to fix UI test on travis

* Add missing screenshot.

* Normalize JSTracker UI test result.

* update screenshot

11 files changed, 129 insertions, 19 deletions

diff --git a/tests/PHPUnit/Fixtures/JSTrackingUIFixture.php b/tests/PHPUnit/Fixtures/JSTrackingUIFixture.php
new file mode 100644
index 0000000000..73c86fef61
--- /dev/null
+++ b/tests/PHPUnit/Fixtures/JSTrackingUIFixture.php
@@ -0,0 +1,53 @@
+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ *
+ */
+
+namespace Piwik\Tests\Fixtures;
+
+use Piwik\Plugins\GeoIp2\LocationProvider\GeoIp2\Php;
+use Piwik\Plugins\PrivacyManager\IPAnonymizer;
+use Piwik\Plugins\UserCountry\LocationProvider;
+use Piwik\Tests\Framework\Fixture;
+
+class JSTrackingUIFixture extends Fixture
+{
+    public function setUp()
+    {
+        parent::setUp();
+
+        self::resetPluginsInstalledConfig();
+        self::updateDatabase();
+        self::installAndActivatePlugins($this->getTestEnvironment());
+        self::updateDatabase();
+
+        // for proper geolocation
+        LocationProvider::setCurrentProvider(Php::ID);
+        IPAnonymizer::deactivate();
+
+        Fixture::createWebsite('2012-02-02 00:00:00');
+    }
+
+    public function performSetUp($setupEnvironmentOnly = false)
+    {
+        $this->extraTestEnvVars = array(
+            'loadRealTranslations' => 1,
+        );
+        $this->extraPluginsToLoad = array(
+            'ExampleTracker',
+        );
+
+        parent::performSetUp($setupEnvironmentOnly);
+
+        $this->testEnvironment->overlayUrl = UITestFixture::getLocalTestSiteUrl();
+        UITestFixture::createOverlayTestSite($idSite = 1);
+
+        $this->testEnvironment->tokenAuth = self::getTokenAuth();
+        $this->testEnvironment->pluginsToLoad = $this->extraPluginsToLoad;
+        $this->testEnvironment->save();
+    }
+}
\ No newline at end of file
diff --git a/tests/PHPUnit/Fixtures/UITestFixture.php b/tests/PHPUnit/Fixtures/UITestFixture.php
index 06b4a5650b..e83070eb8f 100644
--- a/tests/PHPUnit/Fixtures/UITestFixture.php
+++ b/tests/PHPUnit/Fixtures/UITestFixture.php
@@ -17,6 +17,7 @@ use Piwik\DataTable\Row;
 use Piwik\Date;
 use Piwik\Db;
 use Piwik\DbHelper;
+use Piwik\Filesystem;
 use Piwik\FrontController;
 use Piwik\Option;
 use Piwik\Piwik;
@@ -144,8 +145,8 @@ class UITestFixture extends SqlDump
             . " WHERE idsite = 2 AND location_latitude IS NOT NULL LIMIT 1"));
         $this->testEnvironment->forcedIdVisitor = $visitorIdDeterministic;
 
-        $this->testEnvironment->overlayUrl = $this->getLocalTestSiteUrl();
-        $this->createOverlayTestSite();
+        $this->testEnvironment->overlayUrl = self::getLocalTestSiteUrl();
+        self::createOverlayTestSite();
 
         $forcedNowTimestamp = Option::get("Tests.forcedNowTimestamp");
         if ($forcedNowTimestamp == false) {
@@ -237,11 +238,11 @@ class UITestFixture extends SqlDump
         self::checkBulkTrackingResponse($t->doBulkTrack());
     }
 
-    private function createOverlayTestSite()
+    public static function createOverlayTestSite($idSite = 3)
     {
         $realDir = PIWIK_INCLUDE_PATH . "/tests/resources/overlay-test-site-real";
         if (is_dir($realDir)) {
-            return;
+            Filesystem::unlinkRecursive($realDir, true);
         }
 
         $files = array('index.html', 'page-1.html', 'page-2.html', 'page-3.html', 'page-4.html', 'page-5.html', 'page-6.html');
@@ -263,11 +264,12 @@ class UITestFixture extends SqlDump
 
             $contents = file_get_contents($path);
             $contents = str_replace("%trackerBaseUrl%", $url, $contents);
+            $contents = str_replace("%idSite%", $idSite, $contents);
             file_put_contents($path, $contents);
         }
     }
 
-    private function getLocalTestSiteUrl()
+    public static function getLocalTestSiteUrl()
     {
         return self::getRootUrl() . "tests/resources/overlay-test-site-real/";
     }
diff --git a/tests/UI/expected-screenshots/JSTracker_visitor_log.png b/tests/UI/expected-screenshots/JSTracker_visitor_log.png
new file mode 100644
index 0000000000..50f7f03142
--- /dev/null
+++ b/tests/UI/expected-screenshots/JSTracker_visitor_log.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e22357b298003038503fbd94e6cc962667b99139cfcf0010b594b8e9ef441ba6
+size 31826
diff --git a/tests/UI/specs/JSTracker_spec.js b/tests/UI/specs/JSTracker_spec.js
new file mode 100644
index 0000000000..3101a1b1d0
--- /dev/null
+++ b/tests/UI/specs/JSTracker_spec.js
@@ -0,0 +1,38 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * JS tracker UI tests.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("JSTracker", function () {
+    this.fixture = 'Piwik\\Tests\\Fixtures\\JSTrackingUIFixture';
+
+    var testWebsiteUrl = 'tests/resources/overlay-test-site-real/index.html';
+    var generalParams = 'idSite=1&period=day&date=today',
+        widgetizeParams = "module=Widgetize&action=iframe",
+        visitorLogUrl = "?" + widgetizeParams + "&" + generalParams + "&moduleToWidgetize=Live&actionToWidgetize=getVisitorLog";
+
+    it("run correctly on a website and correctly track visits in the visitor log", async function () {
+        await page.goto(testWebsiteUrl);
+
+        // view another page
+        await page.evaluate(() => $('a:contains(Page 3)')[0].click());
+        await page.waitForNetworkIdle();
+        await page.waitFor(500);
+        await page.waitForNetworkIdle();
+
+        // visit visitor log for correct date
+        await page.goto(visitorLogUrl);
+
+        await page.evaluate(function () {
+            $('.visitor-log-datetime').html('REMOVED');
+            var $e = $('.dataTableWrapper>.row>.column>strong');
+            $e.text($e.text().replace(/\d+s/, 'Ns'));
+        });
+
+        expect(await page.screenshot({ fullPage: true })).to.matchImage('visitor_log');
+    });
+});
\ No newline at end of file
diff --git a/tests/resources/overlay-test-site/index.html b/tests/resources/overlay-test-site/index.html
index 2b1f099263..d8151c2054 100644
--- a/tests/resources/overlay-test-site/index.html
+++ b/tests/resources/overlay-test-site/index.html
@@ -86,12 +86,14 @@
     <script>
         var pkBaseURL = (("https:" == document.location.protocol) ? "https://%trackerBaseUrl%" : "http://%trackerBaseUrl%");
         try {
-            var piwikTracker = Piwik.getTracker(pkBaseURL + "matomo.php", 3);
+            var piwikTracker = Piwik.addTracker(pkBaseURL + "matomo.php", %idSite%);
             piwikTracker.setCookieDomain('*.piwik.org');
 
             piwikTracker.trackPageView();
             piwikTracker.enableLinkTracking();
-        } catch( err ) {}
+        } catch( err ) {
+            console.log(err.stack || err.message);
+        }
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/tests/resources/overlay-test-site/page-1.html b/tests/resources/overlay-test-site/page-1.html
index 16330c63a8..70575666ae 100644
--- a/tests/resources/overlay-test-site/page-1.html
+++ b/tests/resources/overlay-test-site/page-1.html
@@ -83,12 +83,14 @@
     <script>
         var pkBaseURL = (("https:" == document.location.protocol) ? "https://%trackerBaseUrl%" : "http://%trackerBaseUrl%");
         try {
-            var piwikTracker = Piwik.getTracker(pkBaseURL + "matomo.php", 3);
+            var piwikTracker = Piwik.getTracker(pkBaseURL + "matomo.php", %idSite%);
             piwikTracker.setCookieDomain('*.piwik.org');
 
             piwikTracker.trackPageView();
             piwikTracker.enableLinkTracking();
-        } catch( err ) {}
+        } catch( err ) {
+            console.log(err.stack || err.message);
+        }
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/tests/resources/overlay-test-site/page-2.html b/tests/resources/overlay-test-site/page-2.html
index 43f08ee61f..cf83bdb641 100644
--- a/tests/resources/overlay-test-site/page-2.html
+++ b/tests/resources/overlay-test-site/page-2.html
@@ -83,12 +83,14 @@
     <script>
         var pkBaseURL = (("https:" == document.location.protocol) ? "https://%trackerBaseUrl%" : "http://%trackerBaseUrl%");
         try {
-            var piwikTracker = Piwik.getTracker(pkBaseURL + "matomo.php", 3);
+            var piwikTracker = Piwik.addTracker(pkBaseURL + "matomo.php", %idSite%);
             piwikTracker.setCookieDomain('*.piwik.org');
 
             piwikTracker.trackPageView();
             piwikTracker.enableLinkTracking();
-        } catch( err ) {}
+        } catch( err ) {
+            console.log(err.stack || err.message);
+        }
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/tests/resources/overlay-test-site/page-3.html b/tests/resources/overlay-test-site/page-3.html
index a53f07050e..3399004f97 100644
--- a/tests/resources/overlay-test-site/page-3.html
+++ b/tests/resources/overlay-test-site/page-3.html
@@ -83,12 +83,14 @@
     <script>
         var pkBaseURL = (("https:" == document.location.protocol) ? "https://%trackerBaseUrl%" : "http://%trackerBaseUrl%");
         try {
-            var piwikTracker = Piwik.getTracker(pkBaseURL + "matomo.php", 3);
+            var piwikTracker = Piwik.addTracker(pkBaseURL + "matomo.php", %idSite%);
             piwikTracker.setCookieDomain('*.piwik.org');
 
             piwikTracker.trackPageView();
             piwikTracker.enableLinkTracking();
-        } catch( err ) {}
+        } catch( err ) {
+            console.log(err.stack || err.message);
+        }
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/tests/resources/overlay-test-site/page-4.html b/tests/resources/overlay-test-site/page-4.html
index 8341fc48c7..6085970787 100644
--- a/tests/resources/overlay-test-site/page-4.html
+++ b/tests/resources/overlay-test-site/page-4.html
@@ -83,12 +83,14 @@
     <script>
         var pkBaseURL = (("https:" == document.location.protocol) ? "https://%trackerBaseUrl%" : "http://%trackerBaseUrl%");
         try {
-            var piwikTracker = Piwik.getTracker(pkBaseURL + "matomo.php", 3);
+            var piwikTracker = Piwik.addTracker(pkBaseURL + "matomo.php", %idSite%);
             piwikTracker.setCookieDomain('*.piwik.org');
 
             piwikTracker.trackPageView();
             piwikTracker.enableLinkTracking();
-        } catch( err ) {}
+        } catch( err ) {
+            console.log(err.stack || err.message);
+        }
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/tests/resources/overlay-test-site/page-5.html b/tests/resources/overlay-test-site/page-5.html
index e8806b0d68..0e4ece13a5 100644
--- a/tests/resources/overlay-test-site/page-5.html
+++ b/tests/resources/overlay-test-site/page-5.html
@@ -83,12 +83,14 @@
     <script>
         var pkBaseURL = (("https:" == document.location.protocol) ? "https://%trackerBaseUrl%" : "http://%trackerBaseUrl%");
         try {
-            var piwikTracker = Piwik.getTracker(pkBaseURL + "matomo.php", 3);
+            var piwikTracker = Piwik.addTracker(pkBaseURL + "matomo.php", %idSite%);
             piwikTracker.setCookieDomain('*.piwik.org');
 
             piwikTracker.trackPageView();
             piwikTracker.enableLinkTracking();
-        } catch( err ) {}
+        } catch( err ) {
+            console.log(err.stack || err.message);
+        }
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/tests/resources/overlay-test-site/page-6.html b/tests/resources/overlay-test-site/page-6.html
index 1dbe72c1a8..b43abaac79 100644
--- a/tests/resources/overlay-test-site/page-6.html
+++ b/tests/resources/overlay-test-site/page-6.html
@@ -83,12 +83,14 @@
     <script>
         var pkBaseURL = (("https:" == document.location.protocol) ? "https://%trackerBaseUrl%" : "http://%trackerBaseUrl%");
         try {
-            var piwikTracker = Piwik.getTracker(pkBaseURL + "matomo.php", 3);
+            var piwikTracker = Piwik.addTracker(pkBaseURL + "matomo.php", %idSite%);
             piwikTracker.setCookieDomain('*.piwik.org');
 
             piwikTracker.trackPageView();
             piwikTracker.enableLinkTracking();
-        } catch( err ) {}
+        } catch( err ) {
+            console.log(err.stack || err.message);
+        }
     </script>
   </body>
 </html>
\ No newline at end of file