Improves Overlay UI tests (#17920)

12 files changed, 170 insertions, 123 deletions

diff --git a/config/environment/ui-test.php b/config/environment/ui-test.php
index aae19a5bb6..3e4c9a6d41 100644
--- a/config/environment/ui-test.php
+++ b/config/environment/ui-test.php
@@ -12,6 +12,7 @@ return array(
 
     'Piwik\Config' => \DI\decorate(function (\Piwik\Config $config) {
         $config->General['cors_domains'][] = '*';
+        $config->General['trusted_hosts'][] = '127.0.0.1';
         $config->General['trusted_hosts'][] = $config->tests['http_host'];
         $config->General['trusted_hosts'][] = $config->tests['http_host'] . ':' . $config->tests['port'];
         return $config;
diff --git a/plugins/Overlay/tests/UI/Overlay_spec.js b/plugins/Overlay/tests/UI/Overlay_spec.js
index 2d2c9e7960..d005178af1 100644
--- a/plugins/Overlay/tests/UI/Overlay_spec.js
+++ b/plugins/Overlay/tests/UI/Overlay_spec.js
@@ -9,25 +9,35 @@
 describe("Overlay", function () {
     this.timeout(0);
 
-    var baseUrl;
-    var hash;
-    var url = null;
-    var urlWithSegment;
-
-    async function removeOptOutIframe() {
-        await page.evaluate(function () {
-            $('iframe#optOutIframe', $('iframe').contents()).remove();
-        });
+    async function removeOptOutIframe(page) {
+        const frame = page.frames().find(f => f.name() === 'overlayIframe');
+        if (frame) {
+            await frame.evaluate(function () {
+                $('iframe#optOutIframe').remove();
+            });
+        }
     }
 
-    before(async function () {
-        baseUrl = '?module=Overlay&period=year&date=today&idSite=3';
-        hash = '#?l=' + encodeURIComponent(testEnvironment.overlayUrl).replace(/[%]/g, "$");
+    function getUrl (useTokenAuth, withSegment) {
+        var baseUrl = '?module=Overlay&period=year&date=today&idSite=3';
+        var hash = '#?l=' + encodeURIComponent(testEnvironment.overlayUrl).replace(/[%]/g, "$");
+
+        if (useTokenAuth === true) {
+            baseUrl += '&token_auth=a4ca4238a0b923820dcc509a6f75849f';
+            testEnvironment.testUseMockAuth = 0;
+            testEnvironment.overrideConfig('General', 'enable_framed_pages', 1);
+            testEnvironment.save();
+        }
 
-        url = baseUrl + hash;
-        urlWithSegment = baseUrl + '&segment=' + encodeURIComponent('visitIp==50.112.3.5') + hash;
+        if (withSegment) {
+            return baseUrl + '&segment=' + encodeURIComponent('visitIp==50.112.3.5') + hash;
+        }
 
-        await testEnvironment.callApi("SitesManager.addSiteAliasUrls", {idSite: 3, urls: [config.piwikUrl]});
+        return baseUrl + hash;
+    }
+
+    before(async function () {
+        await testEnvironment.callApi("SitesManager.addSiteAliasUrls", {idSite: 3, urls: [config.piwikUrl, '127.0.0.1']});
     });
 
     after(async function () {
@@ -40,122 +50,151 @@ describe("Overlay", function () {
         await testEnvironment.callApi("SitesManager.setSiteAliasUrls", {idSite: 3, urls: []});
     });
 
-    it("should load correctly", async function() {
-        await page.goto(url);
+    var testCases = [false, true];
+    for (var index = 0; index < testCases.length; index++) {
+        (function(useTokenAuth) {
 
-        await removeOptOutIframe();
-        expect(await page.screenshot({ fullPage: true })).to.matchImage('loaded');
-    });
+            var descAppendix = useTokenAuth ? ' (with auth_token)' : '';
+
+            it("should load correctly" + descAppendix, async function () {
+                await page.goto(getUrl(useTokenAuth));
 
-    it("should show clicks when hover over link in iframe", async function() {
-        var pos = await page.webpage.evaluate(() => {
-            var iframe = $('iframe'),
-                innerOffset = $('.btn.btn-large', iframe.contents()).offset();
-            return {
-                x: iframe.offset().left + innerOffset.left,
-                y: iframe.offset().top + innerOffset.top
-            };
-        });
-        await page.mouse.move(pos.x, pos.y);
-
-        await page.evaluate(function () {
-            $('div#PIS_StatusBar', $('iframe').contents()).each(function () {
-                var html = $(this).html();
-                html = html.replace(/localhost\:[0-9]+/g, 'localhost');
-                $(this).html(html);
+                await removeOptOutIframe(page);
+                expect(await page.screenshot({fullPage: true})).to.matchImage('loaded');
             });
-        });
-        await removeOptOutIframe();
-        expect(await page.screenshot({ fullPage: true })).to.matchImage('page_link_clicks');
-    });
 
-    it("should show stats for new links when dropdown opened", async function() {
-        await page.reload();
-        await page.evaluate(function(){
-            $('.dropdown-toggle', $('iframe').contents())[0].click();
-        });
-        await page.waitForTimeout(1000);
+            it("should show clicks when hover over link in iframe" + descAppendix, async function () {
+
+                const frame = page.frames().find(f => f.name() === 'overlayIframe');
+                await (await frame.$('.btn.btn-large')).hover();
+                await page.waitForTimeout(250);
+
+                await frame.evaluate(function () {
+                    $('div#PIS_StatusBar').each(function () {
+                        var html = $(this).html();
+                        html = html.replace(/localhost\:[0-9]+/g, 'localhost');
+                        $(this).html(html);
+                    });
+                });
+                await removeOptOutIframe(page);
+                expect(await page.screenshot({fullPage: true})).to.matchImage('page_link_clicks');
+            });
 
-        await removeOptOutIframe();
-        expect(await page.screenshot({ fullPage: true })).to.matchImage('page_new_links');
-    });
+            it("should show stats for new links when dropdown opened" + descAppendix, async function () {
+                await page.reload();
+                const frame = page.frames().find(f => f.name() === 'overlayIframe');
+                await (await frame.$('.dropdown-toggle')).click();
 
-    it("should change page when clicking on internal iframe link", async function() {
-        var pos = await page.webpage.evaluate(() => {
-            var iframe = $('iframe'),
-                innerOffset = $('ul.nav>li:nth-child(2)>a', iframe.contents()).offset();
-            return {
-                x: iframe.offset().left + innerOffset.left + 32, // position is incorrect for some reason w/o adding pixels
-                y: iframe.offset().top + innerOffset.top
-            };
-        });
-        await page.mouse.click(pos.x, pos.y);
-        await page.waitForNetworkIdle();
+                await page.waitForTimeout(2000);
 
-        await removeOptOutIframe();
-        expect(await page.screenshot({ fullPage: true })).to.matchImage('page_change');
-    });
+                await removeOptOutIframe(page);
+                expect(await page.screenshot({fullPage: true})).to.matchImage('page_new_links');
+            });
 
-    it("should change date range when period changed", async function() {
-        await page.waitForSelector('#overlayDateRangeSelect');
-        await page.webpage.evaluate(function () {
-            $('#overlayDateRangeSelect').val('day;yesterday').trigger('change');
-        });
+            it("should change page when clicking on internal iframe link" + descAppendix, async function () {
+                const frame = page.frames().find(f => f.name() === 'overlayIframe');
+                await (await frame.$('ul.nav>li:nth-child(2)>a')).click();
+                await page.waitForNetworkIdle();
 
-        await page.waitForSelector('.overlayMainMetrics,.overlayNoData');
-        await page.waitForNetworkIdle();
+                await removeOptOutIframe(page);
+                expect(await page.screenshot({fullPage: true})).to.matchImage('page_change');
+            });
 
-        await removeOptOutIframe();
-        expect(await page.screenshot({ fullPage: true })).to.matchImage('period_change');
-    });
+            it("should change date range when period changed" + descAppendix, async function () {
+                await page.waitForSelector('#overlayDateRangeSelect');
+                await page.webpage.evaluate(function () {
+                    $('#overlayDateRangeSelect').val('day;yesterday').trigger('change');
+                });
 
-    it("should open row evolution popup when row evolution link clicked", async function() {
-        await page.evaluate(function(){
-            $('#overlayRowEvolution').click();
-        });
-        await page.waitForTimeout(500); // for modal to appear
-        await page.waitForNetworkIdle();
-        await page.evaluate(function () {
-            $('.jqplot-xaxis').hide(); // xaxis will change every day so hide it
-        });
+                await page.waitForSelector('.overlayMainMetrics,.overlayNoData');
+                await page.waitForNetworkIdle();
 
-        await removeOptOutIframe();
-        expect(await page.screenshot({ fullPage: true })).to.matchImage('row_evolution');
-    });
+                await removeOptOutIframe(page);
+                expect(await page.screenshot({fullPage: true})).to.matchImage('period_change');
+            });
 
-    it("should open transitions popup when transitions link clicked", async function() {
-        await page.click('button.ui-dialog-titlebar-close');
-        await page.waitForSelector('#overlayTransitions');
-        await page.click('#overlayTransitions');
-        await page.waitForNetworkIdle();
-        await page.waitForTimeout(2000);
+            it("should open row evolution popup when row evolution link clicked" + descAppendix, async function () {
+                await page.evaluate(function () {
+                    $('#overlayRowEvolution').click();
+                });
+                await page.waitForTimeout(500); // for modal to appear
+                await page.waitForNetworkIdle();
+                await page.evaluate(function () {
+                    $('.jqplot-xaxis').hide(); // xaxis will change every day so hide it
+                });
+
+                await page.evaluate(function () {
+                    $('.ui-dialog .ui-dialog-title,.ui-dialog h2').each(function () {
+                        var html = $(this).html();
+                        // ensure to use localhost as url for screenshots
+                        html = html.split('127.0.0.1').join('localhost')
+                        $(this).html(html);
+                    });
+                });
+                await page.waitForTimeout(500);
+
+                await removeOptOutIframe(page);
+                expect(await page.screenshot({fullPage: true})).to.matchImage('row_evolution');
+            });
 
-        await removeOptOutIframe();
-        expect(await page.screenshot({ fullPage: true })).to.matchImage('transitions');
-    });
+            it("should open transitions popup when transitions link clicked" + descAppendix, async function () {
+                await page.click('button.ui-dialog-titlebar-close');
+                await page.waitForSelector('#overlayTransitions');
+                await page.click('#overlayTransitions');
+                await page.waitForNetworkIdle();
+                await page.waitForTimeout(2000);
+
+                await page.evaluate(function () {
+                    $('.Transitions_Text').each(function () {
+                        var html = $(this).html();
+                        // ensure to use localhost as url for screenshots
+                        html = html.split('127.<wbr>​0.<wbr>​0.<wbr>​1').join('localhost')
+                        $(this).html(html);
+                    });
+                });
+
+                await removeOptOutIframe(page);
+                expect(await page.screenshot({fullPage: true})).to.matchImage('transitions');
+            });
 
-    it("should load an overlay with segment", async function() {
-        await page.goto(urlWithSegment);
-        await page.waitForNetworkIdle();
+            it("should load an overlay with segment" + descAppendix, async function () {
+                await page.goto(getUrl(useTokenAuth, true));
+                await page.waitForNetworkIdle();
 
-        await page.waitForTimeout(2000);
+                await page.waitForTimeout(2000);
 
-        const frame = page.frames().find(f => f.name() === 'overlayIframe');
-        await frame.waitForSelector('.PIS_LinkTag');
+                const frame = page.frames().find(f => f.name() === 'overlayIframe');
+                await frame.waitForSelector('.PIS_LinkTag');
 
-        await removeOptOutIframe();
-        expect(await page.screenshot({ fullPage: true })).to.matchImage('loaded_with_segment');
-    });
+                await removeOptOutIframe(page);
+                expect(await page.screenshot({fullPage: true})).to.matchImage('loaded_with_segment');
+            });
+        })(testCases[index]);
+    }
 
-    it('should load correctly with token_auth if enable_framed_pages is set', async function () {
+    it("should load overlay correctly when coming from an widgetized action report", async function () {
         testEnvironment.testUseMockAuth = 0;
         testEnvironment.overrideConfig('General', 'enable_framed_pages', 1);
+        testEnvironment.overrideConfig('General', 'enable_framed_allow_write_admin_token_auth', 1);
         testEnvironment.save();
 
-        await page.goto(baseUrl + '&token_auth=a4ca4238a0b923820dcc509a6f75849f' + hash);
-        await page.waitForSelector('.overlayMainMetrics,.overlayNoData');
+        await page.goto('?module=Widgetize&action=iframe&disableLink=0&widget=1&moduleToWidgetize=Actions&actionToWidgetize=getPageUrls&idSite=3&period=year&date=today&disableLink=1&widget=1&token_auth=a4ca4238a0b923820dcc509a6f75849f', {waitUntil: 'networkidle0'});
+        await page.waitForNetworkIdle();
+
+        const row = await page.jQuery('.dataTable tbody tr:contains(index)');
+        await row.hover();
 
-        await removeOptOutIframe();
-        expect(await page.screenshot({ fullPage: true })).to.matchImage('framed_loaded');
+        const icon = await page.waitForSelector('.dataTable tbody tr a.actionOverlay');
+
+        const [popup] = await Promise.all([
+            new Promise(resolve => page.once('popup', resolve)),
+            await icon.click()
+        ]);
+
+        await popup.waitForTimeout(2500);
+
+        await removeOptOutIframe(popup);
+        expect(await popup.screenshot({fullPage: true})).to.matchImage('loaded_from_actions');
     });
+
 });
\ No newline at end of file
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_framed_loaded.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_framed_loaded.png
deleted file mode 100644
index 546d19452e..0000000000
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_framed_loaded.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6c87f9c4fc7dda4389d292b5a57d81fb827914b9b5e047c4378efa0616b6f92e
-size 108840
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_from_actions.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_from_actions.png
new file mode 100644
index 0000000000..30760f63ee
--- /dev/null
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_from_actions.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cd435257a86a2ed634884f44a4c02584839f21e797022cf3f5c099e324e0627b
+size 77916
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_with_segment.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_with_segment.png
index 96d641e061..f7f4dfb7f1 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_with_segment.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_loaded_with_segment.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4325d7a68e6995c176d0ecb3bb71fe206362d4c469fcb0f79998a8614ecfc9ab
+oid sha256:badfedee0377cf1825eac084d09d4e78fa2be6cbe1e5a42d0fc755b005829e69
 size 106348
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_link_clicks.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_link_clicks.png
index a0fa94a612..0ffc5e6066 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_link_clicks.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_link_clicks.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:93e75037f960563ccb410347395323cec9b15e11f8623152a2ca7643820b6a1b
-size 115324
+oid sha256:38cce031c12f83d0ded2839c969338f408635d769b466df55d4d56193fa7ea53
+size 115350
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_new_links.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_new_links.png
index c39aaba1d9..925616ab39 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_new_links.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_page_new_links.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:da9eb1f73eebeb6dd1511a4337ccffba3297c36ff71fe8c69849070faa7b3dd0
-size 112605
+oid sha256:5fa4372a99b33d5198b0c930819e7552bd38171133e22714708c460b84bedd3e
+size 117411
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
index d9cb6994e6..d1dd6879e6 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ebc9efab191105b84d0f5794c561be8cd431e511c34b5886d7539642938310dc
-size 100448
+oid sha256:1b9f8b094b7bb1dc2fb05aef603f357da73f34bba6b46ce0c51ad2cebd31c36b
+size 100401
diff --git a/tests/PHPUnit/Fixtures/UITestFixture.php b/tests/PHPUnit/Fixtures/UITestFixture.php
index 64972ea701..a862e3eef5 100644
--- a/tests/PHPUnit/Fixtures/UITestFixture.php
+++ b/tests/PHPUnit/Fixtures/UITestFixture.php
@@ -40,6 +40,7 @@ use Piwik\Plugins\UsersManager\Model;
 use Piwik\Plugins\UsersManager\UserUpdater;
 use Piwik\Plugins\VisitsSummary\API as VisitsSummaryAPI;
 use Piwik\ReportRenderer;
+use Piwik\Tests\Framework\TestCase\SystemTestCase;
 use Piwik\Tests\Framework\XssTesting;
 use Piwik\Plugins\ScheduledReports\API as APIScheduledReports;
 use Psr\Container\ContainerInterface;
@@ -311,7 +312,11 @@ class UITestFixture extends SqlDump
 
     public static function getLocalTestSiteUrl()
     {
-        return self::getRootUrl() . "tests/resources/overlay-test-site-real/";
+        $url = self::getRootUrl() . "tests/resources/overlay-test-site-real/";
+
+        // when running tests on localhost we use 127.0.0.1 as url instead, so we have a different host in the iframe
+        // otherwise we would only test on the same host, which causes a lot less issues
+        return str_replace('localhost', '127.0.0.1', $url);
     }
 
     private function addNewSitesForSiteSelector()
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_admin_diagnostics_configfile.png b/tests/UI/expected-screenshots/UIIntegrationTest_admin_diagnostics_configfile.png
index 51a090384e..633b14c135 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_admin_diagnostics_configfile.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_admin_diagnostics_configfile.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:98ab6912b76cd1fa2d1b4fe624e4ee59704b7ff6af7fad3935742d277f83933b
-size 5250680
+oid sha256:45c430b9702f74fe073718aab63746747dfc20ad97bca071d74ca3162e121d35
+size 5251676
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_admin_settings_general.png b/tests/UI/expected-screenshots/UIIntegrationTest_admin_settings_general.png
index 38e446e41d..3b52c6b462 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_admin_settings_general.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_admin_settings_general.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:687b227bd072a401064b9635fa6144f145d478af5d9f14045e30f3d0f8cd3c29
-size 1402091
+oid sha256:1582d93f74ae9a7402b8f964c74fbe20f29e8f54cbf7f3cd5a527b404934fcde
+size 1408938
diff --git a/tests/lib/screenshot-testing/support/page-renderer.js b/tests/lib/screenshot-testing/support/page-renderer.js
index 7a2d517832..686a4b6440 100644
--- a/tests/lib/screenshot-testing/support/page-renderer.js
+++ b/tests/lib/screenshot-testing/support/page-renderer.js
@@ -40,6 +40,8 @@ const PAGE_METHODS_TO_PROXY = [
     'hover',
     'mainFrame',
     'metrics',
+    'on',
+    'once',
     'queryObjects',
     'reload',
     'screenshot',