added possibility to generate a UI test

5 files changed, 48 insertions, 0 deletions

diff --git a/plugins/ExamplePlugin/tests/UI/.gitignore b/plugins/ExamplePlugin/tests/UI/.gitignore
new file mode 100644
index 0000000000..f39be478e7
--- /dev/null
+++ b/plugins/ExamplePlugin/tests/UI/.gitignore
@@ -0,0 +1,2 @@
+/processed-ui-screenshots
+/screenshot-diffs
\ No newline at end of file
diff --git a/plugins/ExamplePlugin/tests/UI/SimpleUITest_spec.js b/plugins/ExamplePlugin/tests/UI/SimpleUITest_spec.js
new file mode 100644
index 0000000000..f4c1580622
--- /dev/null
+++ b/plugins/ExamplePlugin/tests/UI/SimpleUITest_spec.js
@@ -0,0 +1,46 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * Screenshot integration tests.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("SimpleUITest", function () {
+    this.timeout(0);
+
+    // uncomment this if you want to define a custom fixture to load before the test instead of the default one
+    // this.fixture = "Piwik\\Plugins\\ExamplePlugin\\tests\\Fixtures\\YOUR_FIXTURE_NAME";
+
+    var generalParams = 'idSite=1&period=day&date=2010-01-03',
+        urlBase = 'module=CoreHome&action=index&' + generalParams;
+
+    before(function () {
+        testEnvironment.pluginsToLoad = ['ExamplePlugin'];
+        testEnvironment.save();
+    });
+
+    it('should load a simple page by its module and action and take a full screenshot', function (done) {
+        var screenshotName = 'simple_page';
+        // will take a screenshot and store it in "processed-ui-screenshots/SimpleUITest_simple_page.png"
+        var urlToTest = "?" + generalParams + "&module=ExamplePlugin&action=index";
+
+        expect.screenshot(screenshotName).to.be.capture(function (page) {
+            page.load(urlToTest);
+        }, done);
+    });
+
+    it('should load a simple page by its module and action and take a partial screenshot', function (done) {
+        var screenshotName  = 'simple_page_partial';
+        // will take a screenshot and store it in "processed-ui-screenshots/SimpleUITest_simple_page_partial.png"
+        var contentSelector = '#root,.expandDataTableFooterDrawer';
+        // take a screenshot only of the content of this CSS/jQuery selector
+        var urlToTest       = "?" + generalParams + "&module=ExamplePlugin&action=index";
+        // "?" + urlBase + "#" + generalParams + "&module=ExamplePlugin&action=index"; this defines a URL for a page within the dashboard
+
+        expect.screenshot(screenshotName).to.be.captureSelector(contentSelector, function (page) {
+            page.load(urlToTest);
+        }, done);
+    });
+});
\ No newline at end of file
diff --git a/plugins/ExamplePlugin/tests/UI/expected-ui-screenshots/.gitkeep b/plugins/ExamplePlugin/tests/UI/expected-ui-screenshots/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/plugins/ExamplePlugin/tests/UI/expected-ui-screenshots/.gitkeep
diff --git a/plugins/ExamplePlugin/tests/UI/expected-ui-screenshots/SimpleUITest_simple_page.png b/plugins/ExamplePlugin/tests/UI/expected-ui-screenshots/SimpleUITest_simple_page.png
new file mode 100644
index 0000000000..7b84c80fc1
--- /dev/null
+++ b/plugins/ExamplePlugin/tests/UI/expected-ui-screenshots/SimpleUITest_simple_page.png
diff --git a/plugins/ExamplePlugin/tests/UI/expected-ui-screenshots/SimpleUITest_simple_page_partial.png b/plugins/ExamplePlugin/tests/UI/expected-ui-screenshots/SimpleUITest_simple_page_partial.png
new file mode 100644
index 0000000000..386280a3b8
--- /dev/null
+++ b/plugins/ExamplePlugin/tests/UI/expected-ui-screenshots/SimpleUITest_simple_page_partial.png