8 files changed, 45 insertions, 34 deletions

diff --git a/.gitignore b/.gitignore
index eecdb784c3..344d651bf5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,8 @@ php_errors.log
 /plugins/ImageGraph/fonts/unifont.ttf
 /plugins/ImageGraph/fonts/unifont.ttf.zip
 /plugins/*/tests/System/processed
+/plugins/*/tests/UI/processed-ui-screenshots
+/plugins/*/tests/UI/screenshot-diffs
 /robots.txt
 /tmp/
 /vendor/
diff --git a/plugins/Ecommerce/Controller.php b/plugins/Ecommerce/Controller.php
index 322756eda4..b78e6aebe2 100644
--- a/plugins/Ecommerce/Controller.php
+++ b/plugins/Ecommerce/Controller.php
@@ -24,18 +24,22 @@ class Controller extends \Piwik\Plugins\Goals\Controller
 
         $view = $this->getGoalReportView($idGoal = Piwik::LABEL_ID_GOAL_IS_ECOMMERCE_ORDER);
         $view->displayFullReport = false;
-        $view->showHeadline = true;
+        $view->headline = Piwik::translate('Goals_EcommerceOverview');
         return $view->render();
     }
 
     public function getEcommerceLog($fetch = false)
     {
+        $view = new View('@Ecommerce/ecommerceLog');
+        $this->setGeneralVariablesView($view);
+
         $saveGET = $_GET;
         $_GET['segment'] = urlencode('visitEcommerceStatus!=none');
         $_GET['widget'] = 1;
-        $output = FrontController::getInstance()->dispatch('Live', 'getVisitorLog', array($fetch));
+        $view->ecommerceLog = FrontController::getInstance()->dispatch('Live', 'getVisitorLog', array($fetch));
         $_GET = $saveGET;
-        return $output;
+
+        return $view->render();
     }
 
     public function index()
diff --git a/plugins/Ecommerce/templates/ecommerceLog.twig b/plugins/Ecommerce/templates/ecommerceLog.twig
new file mode 100644
index 0000000000..4c40a94d99
--- /dev/null
+++ b/plugins/Ecommerce/templates/ecommerceLog.twig
@@ -0,0 +1,3 @@
+<h2 piwik-enriched-headline>{{ 'Goals_EcommerceLog'|translate }}</h2>
+
+{{ ecommerceLog|raw }}
diff --git a/plugins/Ecommerce/tests/UI/Ecommerce_spec.js b/plugins/Ecommerce/tests/UI/Ecommerce_spec.js
index 07ff64486b..6f87553c9a 100644
--- a/plugins/Ecommerce/tests/UI/Ecommerce_spec.js
+++ b/plugins/Ecommerce/tests/UI/Ecommerce_spec.js
@@ -1,7 +1,7 @@
 /*!
  * Piwik - free/libre analytics platform
  *
- * GoalsTable screenshot tests.
+ * Screenshot integration tests.
  *
  * @link http://piwik.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
@@ -10,47 +10,49 @@
 describe("Ecommerce", 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";
+    var generalParams = 'idSite=1&period=year&date=2012-08-09',
+        urlBase = 'module=CoreHome&action=index&' + generalParams;
 
-    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);
+    before(function (done) {
+        testEnvironment.queryParamOverride = {
+            forceNowValue: testEnvironment.forcedNowTimestamp,
+            visitorId: testEnvironment.forcedIdVisitor,
+            realtimeWindow: 'false'
+        };
+        testEnvironment.save();
+
+        testEnvironment.callApi("SitesManager.setSiteAliasUrls", {idSite: 3, urls: []}, 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);
+    beforeEach(function () {
+        delete testEnvironment.configOverride;
+        testEnvironment.testUseRegularAuth = 0;
+        testEnvironment.save();
     });
 
-    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);
+    after(function () {
+        delete testEnvironment.queryParamOverride;
+        testEnvironment.testUseRegularAuth = 0;
+        testEnvironment.save();
     });
 
-    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"));
+    // goals pages
+    it('should load ecommerce overview', function (done) {
+        expect.screenshot('ecommerce_overview').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+            page.load("?" + urlBase + "#" + generalParams + "&module=Ecommerce&action=ecommerceReport&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=Ecommerce")
-                                          .replace(/actionToWidgetize=[^&]*/, "actionToWidgetize=getItemsSku")
-                                          .replace(/viewDataTable=[^&]*/, "viewDataTable=ecommerceOrder");
-            page.load(url);
+    it('should load ecommerce log', function (done) {
+        expect.screenshot('ecommerce_log').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+            page.load( "?" + urlBase + "#" + generalParams + "&module=Ecommerce&action=getEcommerceLog");
         }, 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]');
+    it('should load ecommerce products', function (done) {
+        expect.screenshot('ecommerce_products').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+            page.load("?" + urlBase + "#" + generalParams + "&module=Ecommerce&action=ecommerceProducts&idGoal=ecommerceOrder");
         }, done);
     });
+
 });
\ No newline at end of file
diff --git a/plugins/Ecommerce/tests/UI/expected-ui-screenshots/Ecommerce_ecommerce_log.png b/plugins/Ecommerce/tests/UI/expected-ui-screenshots/Ecommerce_ecommerce_log.png
new file mode 100644
index 0000000000..da272f8696
--- /dev/null
+++ b/plugins/Ecommerce/tests/UI/expected-ui-screenshots/Ecommerce_ecommerce_log.png
diff --git a/plugins/Ecommerce/tests/UI/expected-ui-screenshots/Ecommerce_ecommerce_overview.png b/plugins/Ecommerce/tests/UI/expected-ui-screenshots/Ecommerce_ecommerce_overview.png
new file mode 100644
index 0000000000..34b3e12149
--- /dev/null
+++ b/plugins/Ecommerce/tests/UI/expected-ui-screenshots/Ecommerce_ecommerce_overview.png
diff --git a/plugins/Ecommerce/tests/UI/expected-ui-screenshots/Ecommerce_ecommerce_products.png b/plugins/Ecommerce/tests/UI/expected-ui-screenshots/Ecommerce_ecommerce_products.png
new file mode 100644
index 0000000000..d02ce2d606
--- /dev/null
+++ b/plugins/Ecommerce/tests/UI/expected-ui-screenshots/Ecommerce_ecommerce_products.png
diff --git a/plugins/Goals/templates/_titleAndEvolutionGraph.twig b/plugins/Goals/templates/_titleAndEvolutionGraph.twig
index 26f7772ebe..1a60d0d335 100644
--- a/plugins/Goals/templates/_titleAndEvolutionGraph.twig
+++ b/plugins/Goals/templates/_titleAndEvolutionGraph.twig
@@ -1,7 +1,7 @@
 <span data-graph-id="{{ nameGraphEvolution }}"></span>
 
-{% if displayFullReport or showHeadline %}
-    <h2 piwik-enriched-headline>{% if goalName is defined %}{{ 'Goals_GoalX'|translate(goalName)|raw }}{% else %}{{ 'Goals_GoalsOverview'|translate }}{% endif %}</h2>
+{% if displayFullReport or headline %}
+    <h2 piwik-enriched-headline>{% if headline is defined %}{{ headline }}{% elseif goalName is defined %}{{ 'Goals_GoalX'|translate(goalName)|raw }}{% else %}{{ 'Goals_GoalsOverview'|translate }}{% endif %}</h2>
 {% endif %}
 {{ graphEvolution|raw }}