Fixes #3135, fix opt-out form on Safari browsers by opening new window that sets the cookie.

This PR allows us to set 3rd party cookies in the opt-out form for Piwik. It works by opening a new window on form submission, reloading the new window, and setting the cookie on this reload. It is necessary to reload the window, because the session cookie isn't set, so the nonce won't be detected & so, the ignore cookie won't be set.

It works whether JavaScript is enabled or not, and other browsers still get the better UX.

The new window is closed immediately after opening, if JS is enabled.

There is also a new UI test for the opt out form, plus a small change to the UI testing framework to allow switching the user agent during tests.

3 files changed, 67 insertions, 0 deletions

diff --git a/tests/UI/specs/OptOutForm_spec.js b/tests/UI/specs/OptOutForm_spec.js
new file mode 100644
index 0000000000..f703eb4139
--- /dev/null
+++ b/tests/UI/specs/OptOutForm_spec.js
@@ -0,0 +1,59 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * Opt-out form tests
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+// NOTE: this test actually tests safari-specific opt out form behavior, since phantomjs' user-agent string
+//       is similar to Safari's
+describe("OptOutForm", function () {
+    this.timeout(0);
+
+    var siteUrl = "/tests/resources/overlay-test-site-real/index.html",
+        safariUserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 Safari/7046A194A",
+        chromeUserAgent = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36";
+
+    it("should display correctly when embedded in another site", function (done) {
+        expect.screenshot('loaded').to.be.captureSelector('iframe#optOutIframe', function (page) {
+            page.userAgent = chromeUserAgent;
+            page.load(siteUrl);
+        }, done);
+    });
+
+    it("should reload the iframe when clicking the opt out checkbox and display an empty checkbox", function (done) {
+        expect.screenshot('opted-out').to.be.captureSelector('iframe#optOutIframe', function (page) {
+            page.evaluate(function () {
+                $('iframe#optOutIframe').contents().find('input#trackVisits').click();
+            });
+            page.wait(1000); // wait for iframe to reload
+        }, done);
+    });
+
+    it("should correctly show the checkbox unchecked after reloading after opting-out", function (done) {
+        expect.screenshot('opted-out').to.be.captureSelector('opted-out-reload', 'iframe#optOutIframe', function (page) {
+            page.userAgent = chromeUserAgent;
+            page.load(siteUrl);
+        }, done);
+    });
+
+    it("should correctly show display opted-in form when cookies are cleared", function (done) {
+        expect.screenshot('loaded').to.be.captureSelector('safari-loaded', 'iframe#optOutIframe', function (page) {
+            page.webpage.clearCookies();
+
+            page.userAgent = safariUserAgent;
+            page.load(siteUrl);
+        }, done);
+    });
+
+    it("should correclty set opt-out cookie on safari", function (done) {
+        expect.screenshot('opted-out').to.be.captureSelector('safari-opted-out', 'iframe#optOutIframe', function (page) {
+            page.evaluate(function () {
+                $('iframe#optOutIframe').contents().find('input#trackVisits').click();
+            });
+            page.load(siteUrl); // reload to check that cookie was set
+        }, done);
+    });
+});
\ No newline at end of file
diff --git a/tests/lib/screenshot-testing/support/page-renderer.js b/tests/lib/screenshot-testing/support/page-renderer.js
index 4f66a728f2..9f9d1a3995 100644
--- a/tests/lib/screenshot-testing/support/page-renderer.js
+++ b/tests/lib/screenshot-testing/support/page-renderer.js
@@ -12,6 +12,7 @@ var VERBOSE = false;
 // TODO: should refactor, move all event queueing logic to PageAutomation class and add .frame method to change context
 var PageRenderer = function (baseUrl) {
     this.webpage = null;
+    this.userAgent = null;
 
     this.queuedEvents = [];
     this.pageLogs = [];
@@ -34,6 +35,10 @@ PageRenderer.prototype._recreateWebPage = function () {
 
     this.webpage = require('webpage').create();
     this.webpage.viewportSize = {width:1350, height:768};
+    if (this.userAgent) {
+        this.webpage.settings.userAgent = this.userAgent;
+    }
+
     this._setupWebpageEvents();
 };
 
diff --git a/tests/resources/overlay-test-site/index.html b/tests/resources/overlay-test-site/index.html
index c6911af4db..27517450b0 100644
--- a/tests/resources/overlay-test-site/index.html
+++ b/tests/resources/overlay-test-site/index.html
@@ -69,6 +69,9 @@
         </p>
       </div>
 
+      <!-- opt out frame -->
+      <iframe id="optOutIframe" src="../../../index.php?module=CoreAdminHome&action=optOut&language=en"></iframe>
+
     </div> <!-- /container -->
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->