include UI specs in Piwik repo and run tests in this repository.

On local it does not work and I have not figured out why.
Maybe it works on travis though?

.travis.yml

@@ -30,6 +30,7 @@ env:
     # All tests after another
     - TEST_SUITE=AllTests MYSQL_ADAPTER=PDO_MYSQL
     - TEST_SUITE=AllTests MYSQL_ADAPTER=MYSQLI
+    - TEST_SUITE=UITests MYSQL_ADAPTER=PDO_MYSQL
   global:
     - PIWIK_ROOT_DIR=$TRAVIS_BUILD_DIR
     - secure: "AMhZmPZx4SUcuZRBzGHlQPxzM4D8FvFB3UThDa52gbi9KIBrwcumzV2VGi6B\n5fgjwtB4XTE1In7qhY2HMikPWBmWYYOQ5QcMPJsqqHt4iMmahx8WKzne6NOk\nNpqAuje/fulNGeP2LJZi0nrub3Fh4VwXaOvpNloKNQN/2JuqPtM="
@@ -58,6 +59,9 @@ matrix:
       env: TEST_SUITE=IntegrationTests MYSQL_ADAPTER=PDO_MYSQL
     - php: hhvm
       env: TEST_SUITE=UnitTests MYSQL_ADAPTER=PDO_MYSQL
+    # run UI tests on PHP 5.3.3 only
+    - php: 5.6
+      env: TEST_SUITE=UITests MYSQL_ADAPTER=PDO_MYSQL
     # run all tests not on PHP 5.6 and run MySQLI tests only on 5.6
     - php: 5.6
       env: TEST_SUITE=AllTests MYSQL_ADAPTER=PDO_MYSQL
@@ -117,9 +121,6 @@ before_script:
   - mysql -e "SELECT @@sql_mode;"
   # - mysql -e "SHOW GLOBAL VARIABLES;"
 
-
-  # Start UI tests
-  - ./tests/travis/initiate_ui_tests.sh
   # travis now complains about this failing 9 times out of 10, so removing it. hopefully the random failures it prevented won't come back
   # - travis_retry composer self-update
 

plugins/CoreConsole/Commands/DevelopmentSyncUITestScreenshots.php

@@ -29,7 +29,7 @@ class DevelopmentSyncUITestScreenshots extends ConsoleCommand
     {
         $this->setName('development:sync-ui-test-screenshots');
         $this->setDescription('For Piwik core devs. Copies screenshots '
-                            . 'from travis artifacts to tests/PHPUnit/UI/expected-ui-screenshots/');
+                            . 'from travis artifacts to tests/UI/expected-ui-screenshots/');
         $this->addArgument('buildnumber', InputArgument::REQUIRED, 'Travis build number you want to sync.');
         $this->addArgument('screenshotsRegex', InputArgument::OPTIONAL,
             'A regex to use when selecting screenshots to copy. If not supplied all screenshots are copied.', '.*');
@@ -74,7 +74,7 @@ class DevelopmentSyncUITestScreenshots extends ConsoleCommand
                 && preg_match("/" . $screenshotsRegex . "/", $file)
             ) {
                 if ($testPlugin == null) {
-                    $downloadTo = "tests/PHPUnit/UI/expected-ui-screenshots/$file";
+                    $downloadTo = "tests/UI/expected-ui-screenshots/$file";
                 } else {
                     $downloadTo = "plugins/$testPlugin/tests/UI/expected-ui-screenshots/$file";
                 }
@@ -99,15 +99,15 @@ class DevelopmentSyncUITestScreenshots extends ConsoleCommand
         $output->writeln('');
         $output->writeln("If all downloaded screenshots are valid you may push them with these commands:");
         $output->writeln('');
-        $commands = "cd tests/PHPUnit/UI/
+        $commands = "cd tests/UI/expected-ui-screenshots
 git pull
-git add expected-ui-screenshots/
-git commit -m'' # WRITE A COMMIT MESSAGE
+git add .
+git commit -m '' # WRITE A COMMIT MESSAGE
 git push
 cd ..
 git pull
-git add UI
-git commit -m'' #WRITE A COMMIT MESSAGE
+git add expected-ui-screenshots
+git commit -m '' #WRITE A COMMIT MESSAGE
 git push";
         $output->writeln($commands);
     }

plugins/TestRunner/Commands/TestsRunOnAws.php

@@ -155,7 +155,7 @@ This feature is still beta and there might be problems with pictures and/or bina
         if (in_array($testSuite, array('system', 'all'))) {
             $message = "<info>Tests finished. You can browse processed files and download artifacts at </info><comment>http://$host/tests/PHPUnit/System/processed/</comment>";
         } elseif ('ui' === $testSuite) {
-            $message = "<info>Tests finished. You can browse processed screenshots at </info><comment>http://$host/tests/PHPUnit/UI/screenshot-diffs/diffviewer.html</comment>";
+            $message = "<info>Tests finished. You can browse processed screenshots at </info><comment>http://$host/tests/UI/screenshot-diffs/diffviewer.html</comment>";
         } else {
             $message = "<info>Tests finished</info>";
         }

plugins/TestRunner/Commands/TestsSetupFixture.php

@@ -238,7 +238,7 @@ class TestsSetupFixture extends ConsoleCommand
 
         $fixturesToLoad = array(
             '/tests/PHPUnit/Fixtures/*.php',
-            '/tests/PHPUnit/UI/Fixtures/*.php',
+            '/tests/UI/Fixtures/*.php',
             '/plugins/*/tests/Fixtures/*.php',
             '/plugins/*/Test/Fixtures/*.php',
         );

plugins/TestRunner/templates/travis.yml.twig

@@ -151,12 +151,6 @@ before_script:
   - mysql -e "SELECT @@sql_mode;"
   # - mysql -e "SHOW GLOBAL VARIABLES;"
 
-{% if generationMode == 'core' %}
-
-  # Start UI tests
-  - ./tests/travis/initiate_ui_tests.sh
-{%- endif %}
-
   # travis now complains about this failing 9 times out of 10, so removing it. hopefully the random failures it prevented won't come back
   # - travis_retry composer self-update
 

tests/PHPUnit/bootstrap.php

@@ -49,7 +49,7 @@ StaticContainer::setEnvironment('test');
 
 // require test fixtures
 $fixturesToLoad = array(
-    '/tests/PHPUnit/UI/Fixtures/*.php',
+    '/tests/UI/Fixtures/*.php',
     '/plugins/*/tests/Fixtures/*.php',
     '/plugins/*/Test/Fixtures/*.php',
 );

tests/README.screenshots.md

@@ -32,7 +32,7 @@ To fix a broken build, follow these steps:
      * If a change is not wanted, revert or fix your commit.
      * If a change is correct, then you can set the new screenshot as the expected screenshot.
        To do so, in the diffviewer.html page click on the "Processed" link for this screenshot.
-       Then "Save this file as" and save it in the piwik/tests/PHPUnit/UI/expected-ui-screenshots/ directory.
+       Then "Save this file as" and save it in the piwik/tests/UI/expected-ui-screenshots/ directory.
        (If the screenshot test is for a plugin and not Piwik Core, the expected screenshot should be added to the
        plugin's expected screenshot directory. For example: piwik/plugins/DBStats/tests/UI/expected-ui-screenshots.)
 
@@ -64,7 +64,7 @@ Removing this font may be useful if your generated screenshots' fonts do not mat
 
 ### Configuring screenshot testing library
 
-The screenshot testing library's configuration resides in the tests/lib/screenshot-testing/config.js file.
+The screenshot testing library's configuration resides in the tests/UI/config.local.js file.
 If your development environment's PHP executable isn't named `php`
 or your dev Piwik install isn't at `http://localhost/` you may need to edit the contents of this file.
 

tests/UI/.gitignore

+processed-ui-screenshots/*.png
+processed-ui-screenshots/**/*.png
+processed-ui-screenshots
+screenshot-diffs/*.png
+screenshot-diffs/diff*.html
+screenshot-diffs/jquery.js
+screenshot-diffs/resemble.js
+.idea/*
+php_errors.log
+config.local.js
\ No newline at end of file

tests/UI/Fixtures/UpdaterTestFixture.php

+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+namespace Piwik\Tests\Fixtures;
+
+class UpdaterTestFixture extends SqlDump
+{
+    public function performSetUp($setupEnvironmentOnly = false)
+    {
+        $this->dumpUrl = PIWIK_INCLUDE_PATH . "/tests/UI/resources/piwik1.0.sql.gz";
+        $this->dropDatabaseInSetUp = true;
+        $this->resetPersistedFixture = true;
+
+        parent::performSetUp($setupEnvironmentOnly);
+    }
+}
\ No newline at end of file

tests/UI/screenshot-diffs/diffgenerator.js

+/**
+ * Piwik - free/libre analytics platform
+ *
+ * Diff generator
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+resemble.outputSettings({
+    errorColor: {
+        red: 255,
+        green: 0,
+        blue: 0,
+        alpha: 125
+    },
+    errorType: 'movement',
+    transparency: 0.3
+});
+
+function compareImages(expected, expectedGithub, processed)
+{
+    resemble(processed).compareTo(expected).onComplete(function(data){
+
+        var info = 'Mismatch percentage: ' + data.misMatchPercentage + '%';
+
+        if (data.dimensionDifference && !data.isSameDimensions) {
+            info += ' Dimension difference width: ' + data.dimensionDifference.width + ' height: ' + data.dimensionDifference.height;
+        }
+
+        $('.info').text(info);
+        $('.diff').attr('src', data.getImageDataUrl());
+    });
+
+    $('.processed').attr('src', encodeURI(processed));
+    $('.expected').attr('src', encodeURI(expected));
+    $('.expectedGithub').attr('src', 'https://raw.githubusercontent.com/piwik/piwik-ui-tests/master/expected-ui-screenshots/' + encodeURI(expectedGithub));
+}
+
+function getUrlQueryParam(sParam) {
+    var query     = window.location.search.substring(1);
+    var variables = query.split('&');
+
+    for (var index = 0; index < variables.length; index++) {
+
+        var paramName = variables[index].split('=');
+        if (paramName[0] == sParam) {
+            return paramName[1];
+        }
+    }
+}
+
+$(function () {
+    var processed = getUrlQueryParam('processed');
+    var expected  = getUrlQueryParam('expected');
+    var github    = getUrlQueryParam('github');
+    compareImages(expected, github, processed);
+});
\ No newline at end of file

tests/UI/screenshot-diffs/singlediff.html

+<html>
+<head>
+    <!-- loaded when on build-artifacts -->
+    <script src='jquery.js'></script>
+    <script src='resemble.js'></script>
+    <!-- loaded when viewing within piwik -->
+    <script src='../../../../libs/bower_components/jquery/dist/jquery.min.js'></script>
+    <script src='../../../../tests/lib/resemblejs/resemble.js'></script>
+    <script src='diffgenerator.js'></script>
+</head>
+<body>
+
+<span class="info"></span>
+<br />
+<br />
+<img class="diff">
+
+<h2>Processed</h2>
+<img class="processed">
+
+<h2>Expected</h2>
+<img class="expected">
+
+<h2>Expected GitHub</h2>
+<img class="expectedGithub">
+
+</body></html>
\ No newline at end of file

tests/UI/specs/ActionsDataTable_spec.js

+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * ActionsDataTable screenshot tests.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("ActionsDataTable", function () {
+    this.timeout(0);
+
+    var url = "?module=Widgetize&action=iframe&idSite=1&period=year&date=2012-08-09&moduleToWidgetize=Actions&actionToWidgetize=getPageUrls&isFooterExpandedInDashboard=1";
+
+    it("should load correctly", function (done) {
+        expect.screenshot('initial').to.be.capture(function (page) {
+            page.load(url);
+        }, done);
+    });
+
+    it("should sort column correctly when column header clicked", function (done) {
+        expect.screenshot('column_sorted').to.be.capture(function (page) {
+            page.click('th#avg_time_on_page');
+        }, done);
+    });
+
+    it("should load subtables correctly when row clicked", function (done) {
+        expect.screenshot('subtables_loaded').to.be.capture(function (page) {
+            page.click('tr.subDataTable:first');
+            page.click('tr.subDataTable:eq(2)');
+        }, done);
+    });
+
+    it("should flatten table when flatten link clicked", function (done) {
+        expect.screenshot('flattened').to.be.capture(function (page) {
+            page.mouseMove('.tableConfiguration');
+            page.click('.dataTableFlatten');
+        }, done);
+    });
+
+    // Test is skipped as it randomly fails http://builds-artifacts.piwik.org/ui-tests.master/2433.1/screenshot-diffs/diffviewer.html
+    it.skip("should exclude low population rows when exclude low population link clicked", function (done) {
+        expect.screenshot('exclude_low_population').to.be.capture(function (page) {
+            page.mouseMove('.tableConfiguration');
+            page.click('.dataTableExcludeLowPopulation');
+        }, done);
+    });
+
+    it("should load normal view when switch to view hierarchical view link is clicked", function (done) {
+        expect.screenshot('unflattened').to.be.capture(function (page) {
+            // exclude low population (copied from exclude_low_population test above as it was 'skipped')
+            page.mouseMove('.tableConfiguration');
+            page.click('.dataTableExcludeLowPopulation');
+
+            page.mouseMove('.tableConfiguration');
+            page.click('.dataTableFlatten');
+        }, done);
+    });
+
+    it("should display pageview percentages when hovering over pageviews column", function (done) {
+        expect.screenshot('pageview_percentages').to.be.capture(function (page) {
+            page.mouseMove('tr:eq(2) td.column:first');
+        }, done);
+    });
+
+    it("should display unique pageview percentages when hovering over unique pageviews column", function (done) {
+        expect.screenshot('unique_pageview_percentages').to.be.capture(function (page) {
+            page.mouseMove('tr:eq(2) td.column:eq(1)');
+        }, done);
+    });
+
+    it("should search through table when search input entered and search button clicked", function (done) {
+        expect.screenshot('search').to.be.capture(function (page) {
+            page.sendKeys('.dataTableSearchPattern>input[type=text]', 'i');
+            page.click('.dataTableSearchPattern>input[type=submit]');
+        }, done);
+    });
+});
\ No newline at end of file

tests/UI/specs/BarGraph_spec.js

+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * Bar graph screenshot tests.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("BarGraph", function () {
+    this.timeout(0);
+
+    var url = "?module=Widgetize&action=iframe&moduleToWidgetize=Referrers&idSite=1&period=year&date=2012-08-09&"
+            + "actionToWidgetize=getKeywords&viewDataTable=graphVerticalBar&isFooterExpandedInDashboard=1";
+
+    it("should load correctly", function (done) {
+        expect.screenshot("load").to.be.capture(function (page) {
+            page.load(url);
+        }, done);
+    });
+
+    it("should display the metric picker on hover of metric picker icon", function (done) {
+        expect.screenshot('metric_picker_shown').to.be.capture(function (page) {
+            page.mouseMove('.jqplot-seriespicker');
+        }, done);
+    });
+
+    it("should display multiple metrics when another metric picked", function (done) {
+        expect.screenshot('other_metric').to.be.capture(function (page) {
+            page.click('.jqplot-seriespicker-popover input:not(:checked)');
+        }, done);
+    });
+});
\ No newline at end of file

tests/UI/specs/DBStats_spec.js

+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * Screenshot tests for the DBStats plugin.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("DBStats", function () {
+    this.timeout(0);
+
+    var url = "?module=DBStats&action=index&idSite=1&period=day&date=yesterday";
+
+    it("should load correctly", function (done) {
+        expect.screenshot('admin_page').to.be.captureSelector('#content', function (page) {
+            page.load(url);
+        }, done);
+    });
+});
\ No newline at end of file

tests/UI/specs/DashboardManager_spec.js

+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * Dashboard manager screenshot tests.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("DashboardManager", function () {
+
+    this.timeout(0);
+
+    var selectorToCapture = '.dashboard-manager';
+    var url = "?module=CoreHome&action=index&idSite=1&period=day&date=2012-01-01";
+
+    it("should load correctly", function (done) {
+        expect.screenshot("loaded").to.be.captureSelector(selectorToCapture, function (page) {
+            page.load(url);
+        }, done);
+    });
+
+    it("should expand when clicked", function (done) {
+        expect.screenshot("expanded").to.be.captureSelector(selectorToCapture, function (page) {
+            page.click('.dashboard-manager');
+        }, done);
+    });
+
+    it("should show widget for a category when category label hovered", function (done) {
+        expect.screenshot("widget_list_shown").to.be.captureSelector(selectorToCapture, function (page) {
+            page.mouseMove('.widgetpreview-categorylist>li:contains(Live!)'); // have to mouse move twice... otherwise Live! will just be highlighted
+            page.mouseMove('.widgetpreview-categorylist>li:contains(Visits Summary)');
+        }, done);
+    });
+
+    it("should load a widget preview when a widget is hovered", function (done) {
+        expect.screenshot("widget_preview").to.be.captureSelector(selectorToCapture, function (page) {
+            page.mouseMove('.widgetpreview-widgetlist>li:contains(Visits Over Time)');
+        }, done);
+    });
+
+    it("should close the manager when a widget is selected", function (done) {
+        expect.screenshot("loaded").to.be.captureSelector("widget_selected", selectorToCapture, function (page) {
+            // make sure selecting a widget does nothing
+            page.evaluate(function () {
+                $('.dashboard-manager').data('uiControlObject').widgetSelected = function () {};
+            });
+
+            page.click('.widgetpreview-widgetlist>li:contains(Visits Over Time)');
+        }, done);
+    });
+});
\ No newline at end of file

tests/UI/specs/Dashboard_spec.js

+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * Dashboard screenshot tests.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+// TODO: should move this & dashboard manager test to Dashboard plugin
+describe("Dashboard", function () {
+    this.timeout(0);
+
+    var url = "?module=Widgetize&action=iframe&idSite=1&period=year&date=2012-08-09&moduleToWidgetize=Dashboard&"
+            + "actionToWidgetize=index&idDashboard=5";
+
+    var removeAllExtraDashboards = function (done) {
+        testEnvironment.callController("Dashboard.getAllDashboards", {}, function (err, dashboards) {
+            dashboards = (dashboards || []).filter(function (dash) {
+                return parseInt(dash.iddashboard) > 5;
+            });
+
+            var removeDashboard = function (i) {
+                if (i >= dashboards.length) {
+                    done();
+                    return;
+                }
+
+                console.log("Removing dashboard ID = " + dashboards[i].iddashboard);
+                testEnvironment.callController("Dashboard.removeDashboard", {idDashboard: dashboards[i].iddashboard}, function () {
+                    removeDashboard(i + 1);
+                });
+            };
+
+            removeDashboard(0);
+        });
+    };
+
+    var setup = function (done) {
+        // save empty layout for dashboard ID = 5
+        var layout = [
+            [
+                {
+                    uniqueId: "widgetVisitsSummarygetEvolutionGraphcolumnsArray",
+                    parameters: {module: "VisitsSummary", action: "getEvolutionGraph", columns: "nb_visits"}
+                }
+            ],
+            [],
+            []
+        ];
+
+        // TODO: should probably include an async lib
+        testEnvironment.callController("Dashboard.saveLayout", {name: 'D4', layout: JSON.stringify(layout), idDashboard: 5, idSite: 2}, function () {
+            // reset default widget selection
+            testEnvironment.callController("Dashboard.saveLayoutAsDefault", {layout: 0}, function () {
+                removeAllExtraDashboards(done);
+            });
+        });
+    };
+
+    before(setup);
+    after(setup);
+
+    it("should load correctly", function (done) {
+        expect.screenshot("loaded").to.be.capture(function (page) {
+            page.load(url, 5000);
+        }, done);
+    });
+
+    it("should move a widget when widget is drag & dropped", function (done) {
+        expect.screenshot("widget_move").to.be.capture(function (page) {
+            page.mousedown('.widgetTop');
+            page.mouseMove('#dashboardWidgetsArea > .col:eq(2)');
+            page.mouseup('#dashboardWidgetsArea > .col:eq(2)');
+        }, done);
+    });
+
+    it("should refresh widget when widget refresh icon clicked", function (done) {
+        expect.screenshot("widget_move").to.be.capture("widget_refresh", function (page) {
+            page.mouseMove('.widgetTop');
+            page.click('.button#refresh');
+            page.mouseMove('.dashboard-manager'); // let widget top hide again
+        }, done);
+    });
+
+    it("should minimise widget when widget minimise icon clicked", function (done) {
+        expect.screenshot("widget_minimised").to.be.capture(function (page) {
+            page.mouseMove('.widgetTop');
+            page.click('.button#minimise');
+        }, done);
+    });
+
+    it("should unminimise widget when widget maximise icon is clicked after being minimised", function (done) {
+        expect.screenshot("widget_move").to.be.capture("widget_unminimised", function (page) {
+            page.mouseMove('.widgetTop');
+            page.click('.button#maximise');
+            page.mouseMove('.dashboard-manager'); // let widget top hide again
+        }, done);
+    });
+
+    it("should maximise widget when widget maximise icon is clicked", function (done) {
+        expect.screenshot("widget_maximise").to.be.capture(function (page) {
+            page.mouseMove('.widgetTop');
+            page.click('.button#maximise');
+        }, done);
+    });
+
+    it("should close maximise dialog when minimise icon is clicked", function (done) {
+        expect.screenshot("widget_move").to.be.capture("widget_unmaximise", function (page) {
+            page.mouseMove('.widgetTop');
+            page.click('.button#minimise');
+            page.mouseMove('.dashboard-manager'); // let widget top hide again
+        }, done);
+    });
+
+    it("should add a widget when a widget is selected in the dashboard manager", function (done) {
+        expect.screenshot("widget_add_widget").to.be.capture(function (page) {
+            page.click('.dashboard-manager');
+
+            page.mouseMove('.widgetpreview-categorylist>li:contains(Live!)'); // have to mouse move twice... otherwise Live! will just be highlighted
+            page.mouseMove('.widgetpreview-categorylist>li:contains(Visits Summary)');
+
+            page.mouseMove('.widgetpreview-widgetlist>li:contains(Visits by Local Time)');
+
+            page.click('.widgetpreview-widgetlist>li:contains(Visits by Local Time)');
+        }, done);
+    });
+
+    it("should remove widget when remove widget icon is clicked", function (done) {
+        expect.screenshot("widget_move").to.be.capture("widget_removed", function (page) {
+            page.mouseMove('#widgetVisitTimegetVisitInformationPerLocalTime .widgetTop');
+            page.click('#widgetVisitTimegetVisitInformationPerLocalTime .button#close');
+            page.click('.ui-dialog button>span:contains(Yes)');
+            page.mouseMove('.dashboard-manager');
+        }, done);
+    });
+
+    it("should change dashboard layout when new layout is selected", function (done) {
+        expect.screenshot("change_layout").to.be.capture(function (page) {
+            page.click('.dashboard-manager');
+            page.click('li[data-action=showChangeDashboardLayoutDialog]');
+            page.click('div[layout=50-50]');
+            page.click('.ui-dialog button>span:contains(Save)', 3000);
+        }, done);
+    });
+
+    it("should rename dashboard when dashboard rename process completed", function (done) {
+        expect.screenshot("rename").to.be.capture(function (page) {
+            page.click('.dashboard-manager');
+            page.click('li[data-action=renameDashboard]');
+            page.evaluate(function () {
+                $('#newDashboardName').val('');
+            });
+            page.sendKeys('#newDashboardName', 'newname');
+
+            // sending a mouse event doesn't seem to work...
+            page.click('.ui-dialog[aria-describedby=renameDashboardConfirm] button>span:contains(Save)');
+        }, done);
+    });
+
+    it("should copy dashboard successfully when copy dashboard process completed", function (done) {
+        expect.screenshot("copied").to.be.capture(function (page) {
+            page.click('.dashboard-manager');
+            page.click('li[data-action=copyDashboardToUser]');
+            page.evaluate(function () {
+                $('#copyDashboardName').val('');
+            });
+            page.sendKeys('#copyDashboardName', 'newdash');
+            page.evaluate(function () {
+                $('#copyDashboardUser').val('superUserLogin');
+            });
+            page.click('.ui-dialog button>span:contains(Ok)');
+
+            page.load(url.replace("idDashboard=5", "idDashboard=6"));
+        }, done);
+    });
+
+    it("should reset dashboard when reset dashboard process completed", function (done) {
+        expect.screenshot("reset").to.be.capture(function (page) {
+            page.click('.dashboard-manager');
+            page.click('li[data-action=resetDashboard]');
+            page.click('.ui-dialog button>span:contains(Yes)', 10000);
+            page.mouseMove('.dashboard-manager');
+        }, done);
+    });
+
+    it("should remove dashboard when remove dashboard process completed", function (done) {
+        expect.screenshot("removed").to.be.capture(function (page) {
+            page.click('.dashboard-manager');
+            page.click('li[data-action=removeDashboard]');
+            page.click('.ui-dialog[aria-describedby=removeDashboardConfirm] button>span:contains(Yes)');
+            page.mouseMove('.dashboard-manager');
+            page.evaluate(function () {
+                $('.widgetTop').removeClass('widgetTopHover');
+            });
+        }, done);
+    });
+
+    it("should not fail when default widget selection changed", function (done) {
+        expect.screenshot("default_widget_selection_changed").to.be.capture(function (page) {
+            page.load(url);
+            page.click('.dashboard-manager');
+            page.click('li[data-action=setAsDefaultWidgets]');
+            page.click('.ui-dialog button>span:contains(Yes)');
+        }, done);
+    });
+
+    it("should create new dashboard with new default widget selection when create dashboard process completed", function (done) {
+        expect.screenshot("create_new").to.be.capture(function (page) {
+            page.click('.dashboard-manager');
+            page.click('li[data-action=createDashboard]');
+            page.sendKeys('#createDashboardName', 'newdash2');
+            page.click('.ui-dialog[aria-describedby=createDashboardConfirm] button>span:contains(Yes)');
+        }, done);
+    });
+});
\ No newline at end of file

tests/UI/specs/EvolutionGraph_spec.js

+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * evolution graph screenshot tests.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("EvolutionGraph", function () {
+    this.timeout(0);
+
+    var url = "?module=Widgetize&action=iframe&idSite=1&period=day&date=2012-01-31&evolution_day_last_n=30"
+            + "&moduleToWidgetize=UserCountry&actionToWidgetize=getCountry&viewDataTable=graphEvolution"
+            + "&isFooterExpandedInDashboard=1";
+
+    before(function (done) {
+        testEnvironment.callApi("Annotations.deleteAll", {idSite: 3}, done);
+    });
+
+    it("should load correctly", function (done) {
+        expect.screenshot('initial').to.be.capture(function (page) {
+            page.load(url);
+        }, done);
+    });
+
+    it("should show percent metrics like bounce rate correctly", function (done) {
+        expect.screenshot('bounce_rate').to.be.capture(function (page) {
+            page.load(url + "&columns=nb_visits,bounce_rate&filter_add_columns_when_show_all_columns=0");
+        }, done);
+    });
+
+    it("should show only one series when a label is specified", function (done) {
+        expect.screenshot('one_series').to.be.capture(function (page) {
+            page.load(url + "&label=Canada");
+        }, done);
+    });
+
+    it("should display the metric picker on hover of metric picker icon", function (done) {
+        expect.screenshot('metric_picker_shown').to.be.capture(function (page) {
+            page.mouseMove('.jqplot-seriespicker');
+        }, done);
+    });
+
+    it("should show multiple metrics when another metric picked", function (done) {
+        expect.screenshot('two_metrics').to.be.capture(function (page) {
+            page.click('.jqplot-seriespicker-popover input:not(:checked)');
+        }, done);
+    });
+
+    it("should show graph as image when export as image icon clicked", function (done) {
+        expect.screenshot('export_image').to.be.capture(function (page) {
+            page.click('#dataTableFooterExportAsImageIcon>a');
+        }, done);
+    });
+
+    it("should display more periods when limit selection changed", function (done) {
+        expect.screenshot('limit_changed').to.be.capture(function (page) {
+            page.click('.limitSelection');
+            page.evaluate(function () {
+                $('.limitSelection ul li[value=60]').click();
+            });
+        }, done);
+    });
+
+    // annotations tests
+    it("should show annotations when annotation icon on x-axis clicked", function (done) {
+        expect.screenshot('annotations_single_period').to.be.capture(function (page) {
+            page.evaluate(function () {
+                $('.limitSelection ul li[value=30]').click(); // change limit back
+            });
+
+            page.click('.evolution-annotations>span[data-count!=0]', 3000);
+        }, done);
+    });
+
+    it("should show all annotations when annotations footer link clicked", function (done) {
+        expect.screenshot('annotations_all').to.be.capture(function (page) {
+            page.click('.annotationView', 3000);
+        }, done);
+    });
+
+    it("should show no annotations message when no annotations for site", function (done) {
+        expect.screenshot('annotations_none').to.be.capture(function (page) {
+            page.load(page.getCurrentUrl().replace(/idSite=[^&]*/, "idSite=3") + "&columns=nb_visits");
+            page.click('.annotationView', 3000);
+        }, done);
+    });
+
+    it("should show add annotation form when create annotation clicked", function (done) {
+        expect.screenshot('new_annotation_form').to.be.capture(function (page) {
+            page.click('.add-annotation');
+            page.click('.annotation-period-edit>a');
+            page.evaluate(function () {
+                $('.datepicker').datepicker("setDate", new Date(2012,0,02) );
+                $(".ui-datepicker-current-day").trigger("click"); // this triggers onSelect event which sets .annotation-period-edit>a
+            });
+        }, done);
+    });
+
+    it("should add new annotation when create annotation submitted", function (done) {
+        expect.screenshot('new_annotation_submit').to.be.capture(function (page) {
+            page.sendKeys('.new-annotation-edit', 'new annotation');
+            page.click('.annotation-period-edit>a');
+            page.evaluate(function () {
+                $('.ui-datepicker-calendar td a:contains(15)').click();
+            });
+            page.click('.annotation-list-range');
+            page.click('input.new-annotation-save', 3000);
+        }, done);
+    });
+
+    it("should star annotation when star image clicked", function (done) {
+        expect.screenshot('annotation_starred').to.be.capture(function (page) {
+            page.click('.annotation-star');
+        }, done);
+    });
+
+    it("should show edit annotation form", function (done) {
+        expect.screenshot('annotation_edit_form').to.be.capture(function (page) {
+            page.click('.edit-annotation');
+        }, done);
+    });
+
+    it("should edit annotation when edit form submitted", function (done) {
+        expect.screenshot('annotation_edit_submit').to.be.capture(function (page) {
+            page.sendKeys('.annotation-edit', 'edited annotation');
+            page.click('.annotation-period-edit>a');
+            page.evaluate(function () {
+                $('.ui-datepicker-calendar td a:contains(16)').click();
+            });
+            page.click('.annotation-list-range');
+            page.click('input.annotation-save', 3000);
+        }, done);
+    });
+
+    it("should delete annotation when delete link clicked", function (done) {
+        expect.screenshot('annotation_delete').to.be.capture(function (page) {
+            page.click('.edit-annotation');
+            page.click('.delete-annotation');
+        }, done);
+    });
+});
\ No newline at end of file

tests/UI/specs/GoalsTable_spec.js

+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * GoalsTable screenshot tests.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("GoalsTable", function () {
+    this.timeout(0);
+
+    var url = "?module=Widgetize&action=iframe&moduleToWidgetize=Referrers&idSite=1&period=year&date=2012-08-09&"
+            + "actionToWidgetize=getKeywords&viewDataTable=table&filter_limit=5&isFooterExpandedInDashboard=1";
+
+    it("should load when the goals icon is clicked", function (done) {
+        expect.screenshot('initial').to.be.capture(function (page) {
+            page.load(url);
+            page.click('.tableIconsGroup a[data-footer-icon-id=tableGoals]');
+        }, done);
+    });
+
+    it("should show columns for all goals when idGoal is 0", function (done) {
+        expect.screenshot('goals_table_full').to.be.capture(function (page) {
+            var url = page.getCurrentUrl().replace(/viewDataTable=[^&]*/, "viewDataTable=tableGoals") + "&idGoal=0";
+            page.load(url);
+        }, done);
+    });
+
+    it("should show columns for a single goal when idGoal is 1", function (done) {
+        expect.screenshot('goals_table_single').to.be.capture(function (page) {
+            page.load(page.getCurrentUrl().replace(/idGoal=[^&]*/, "idGoal=1"));
+        }, done);
+    });
+
+    it("should show an ecommerce view when idGoal is ecommerceOrder", function (done) {
+        expect.screenshot('goals_table_ecommerce').to.be.capture(function (page) {
+            page.load(page.getCurrentUrl().replace(/idGoal=[^&]*/, "idGoal=ecommerceOrder"));
+        }, done);
+    });
+
+    it("should show a special view when idGoal is ecommerceOrder and viewDataTable is ecommerceOrder", function (done) {
+        expect.screenshot('goals_table_ecommerce_view').to.be.capture(function (page) {
+            var url = page.getCurrentUrl().replace(/moduleToWidgetize=[^&]*/, "moduleToWidgetize=Goals")
+                                          .replace(/actionToWidgetize=[^&]*/, "actionToWidgetize=getItemsSku")
+                                          .replace(/viewDataTable=[^&]*/, "viewDataTable=ecommerceOrder");
+            page.load(url);
+        }, done);
+    });
+
+    it("should show abandoned carts data when the abandoned carts link is clicked", function (done) {
+        expect.screenshot('goals_table_abandoned_carts').to.be.capture(function (page) {
+            page.click('.tableIconsGroup a[data-footer-icon-id=ecommerceAbandonedCart]');
+        }, done);
+    });
+});
\ No newline at end of file

tests/UI/specs/Installation_spec.js

+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * Installation screenshot tests.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+var fs = require('fs');
+
+describe("Installation", function () {
+    this.timeout(0);
+
+    this.fixture = null;
+
+    before(function () {
+        testEnvironment.testUseRegularAuth = 1;
+        testEnvironment.configFileLocal = path.join(PIWIK_INCLUDE_PATH, "/tmp/test.config.ini.php");
+        testEnvironment.dontUseTestConfig = true;
+        testEnvironment.tablesPrefix = 'piwik_';
+        testEnvironment.save();
+
+        if (fs.exists(testEnvironment.configFileLocal)) {
+            fs.remove(testEnvironment.configFileLocal);
+        }
+    });
+
+    after(function () {
+        delete testEnvironment.configFileLocal;
+        delete testEnvironment.dontUseTestConfig;
+        delete testEnvironment.tablesPrefix;
+        delete testEnvironment.testUseRegularAuth;
+        testEnvironment.save();
+    });
+
+    it("should display an error message when trying to access a resource w/o a config.ini.php file", function (done) {
+        expect.screenshot("access_no_config").to.be.capture(function (page) {
+            page.load("?module=CoreHome&action=index&ignoreClearAllViewDataTableParameters=1");
+        }, done);
+    });
+
+    it("should start the installation process when the index is visited w/o a config.ini.php file", function (done) {
+        expect.screenshot("start").to.be.capture(function (page) {
+            page.load("?ignoreClearAllViewDataTableParameters=1");
+        }, done);
+    });
+
+    it("should display the system check page when next is clicked on the first page", function (done) {
+        expect.screenshot("system_check").to.be.capture(function (page) {
+            page.click('.submit');
+        }, done);
+    });
+
+    it("should display the database setup page when next is clicked on the system check page", function (done) {
+        expect.screenshot("db_setup").to.be.capture(function (page) {
+            page.click('.submit');
+        }, done);
+    });
+
+    it("should fail when the next button is clicked and no database info is entered in the form", function (done) {
+        expect.screenshot("db_setup_fail").to.be.capture(function (page) {
+            page.click('.submit');
+        }, done);
+    });
+
+    it("should display the tables created page when next is clicked on the db setup page w/ correct info entered in the form", function (done) {
+        expect.screenshot("db_created").to.be.capture(function (page) {
+            var dbInfo = testEnvironment.readDbInfoFromConfig();
+            var username = dbInfo.username;
+            var password = dbInfo.password;
+
+            page.sendKeys('input[name=username]', username);
+
+            if (password) {
+                page.sendKeys('input[name=password]', password);
+            }
+
+            page.sendKeys('input[name=dbname]', 'newdb');
+            page.click('.submit');
+        }, done);
+    });
+
+    it("should display the superuser configuration page when next is clicked on the tables created page", function (done) {
+        expect.screenshot("superuser").to.be.capture(function (page) {
+            page.click('.submit');
+        }, done);
+    });
+
+    it("should fail when incorrect information is entered in the superuser configuration page", function (done) {
+        expect.screenshot("superuser_fail").to.be.capture(function (page) {
+            page.click('.submit');
+        }, done);
+    });
+
+    it("should display the setup a website page when next is clicked on the filled out superuser config page", function (done) {
+        expect.screenshot("setup_website").to.be.capture(function (page) {
+            page.sendKeys('input[name=login]', 'thesuperuser');
+            page.sendKeys('input[name=password]', 'thepassword');
+            page.sendKeys('input[name=password_bis]', 'thepassword');
+            page.sendKeys('input[name=email]', 'hello@piwik.org');
+            page.click('.submit');
+            page.wait(3000);
+        }, done);
+    });
+
+    it("should should fail when incorrect information is entered in the setup a website page", function (done) {
+        expect.screenshot("setup_website_fail").to.be.capture(function (page) {
+            page.click('.submit');
+        }, done);
+    });
+
+    it("should display the javascript tracking page when correct information is entered in the setup website page and next is clicked", function (done) {
+        expect.screenshot("js_tracking").to.be.capture(function (page) {
+            page.sendKeys('input[name=siteName]', 'Serenity');
+            page.sendKeys('input[name=url]', 'serenity.com');
+            page.evaluate(function () {
+                $('select[name=timezone]').val('Europe/Paris');
+                $('select[name=ecommerce]').val('1');
+            });
+            page.click('.submit');
+            page.wait(3000);
+        }, done);
+    });
+
+    it("should display the congratulations page when next is clicked on the javascript tracking page", function (done) {
+        expect.screenshot("congrats").to.be.capture(function (page) {
+            page.click('.submit');
+        }, done);
+    });
+
+    it("should continue to piwik after submitting on the privacy settings form in the congrats page", function (done) {
+        expect.screenshot('login_form', 'Login').to.be.capture(function (page) {
+            page.click('.submit');
+        }, done);
+    });
+});
\ No newline at end of file