Fix EZP-26709: Incorrect error handling in the my draft block on the dashboard

Resources/public/js/views/dashboard/ez-dashboardblockasynchronousview.js

@@ -32,6 +32,12 @@ YUI.add('ez-dashboardblockasynchronousview', function (Y) {
         initializer: function () {
             this._fireMethod = this._fireLoadDataEvent;
             this._watchAttribute = 'items';
+            this._errorHandlingMethod = function () {
+                if (this.get('loadingError')) {
+                    this._set('loading', false);
+                    this.render();
+                }
+            };
             /**
              * Stores the click outside event handler
              *
@@ -47,8 +53,14 @@ YUI.add('ez-dashboardblockasynchronousview', function (Y) {
                 .addClass(this._generateViewClassName(Y.eZ.DashboardBlockBaseView.NAME))
                 .addClass(this._generateViewClassName(Y.eZ.DashboardBlockAsynchronousView.NAME));
 
-            this.after('itemsChange', function () {
-                this._set('loading', false);
+            this.on('itemsChange', function (e) {
+                if ( e.newVal === null ) {
+                    // null is set when retrying with the Retry button
+                    e.newVal = Y.eZ.DashboardBlockAsynchronousView.ATTRS.items.value;
+                    this._set('loading', true);
+                } else {
+                    this._set('loading', false);
+                }
             });
             this.after('loadingChange', function () {
                 if ( this.get('loading') ) {

Tests/js/views/dashboard/assets/ez-dashboardblockasynchronousview-tests.js

@@ -14,6 +14,70 @@ YUI.add('ez-dashboardblockasynchronousview-tests', function (Y) {
         SELECTOR_OUTSIDE = '.outside',
         Assert = Y.Assert, Mock = Y.Mock;
 
+    NS.ErrorHandlingTest = {
+        "Should unset `loading` on loading error": function () {
+            this.view._set('loading', true);
+            this.view.set('loadingError', true);
+
+            Assert.isFalse(
+                this.view.get('loading'),
+                "`loading` should have been set back to false"
+            );
+        },
+
+        "Should rerender the view on loading error": function () {
+            var templateCalled = false,
+                origTpl = this.view.template;
+
+            this.view.template = function (params) {
+                templateCalled = true;
+
+                return origTpl.apply(this, arguments);
+            };
+
+            this.view.set('loadingError', true);
+
+            Assert.isTrue(
+                templateCalled, "The view should have been rendered"
+            );
+        },
+
+        "Should set items to its default value when retrying loading": function () {
+            var view = this.view;
+
+            view.set('items', []);
+            view.set('loadingError', true);
+
+            view.after('itemsChange', this.next(function () {
+                Assert.areSame(
+                    Y.eZ.DashboardBlockAsynchronousView.ATTRS.items.value,
+                    view.get('items'),
+                    "`items` should have been restored to its default value"
+                );
+            }, this));
+            view.get('container').one('.ez-asynchronousview-retry').simulateGesture('tap');
+            this.wait();
+        },
+
+        "Should set `loading` when retrying loading": function () {
+            var view = this.view;
+
+            view.set('items', []);
+            view.set('loading', false);
+            view.set('loadingError', true);
+
+            view.after('loadingChange', this.next(function () {
+                Assert.isTrue(
+                    view.get('loading'),
+                    "`loading` should be set to true"
+                );
+            }, this));
+
+            view.get('container').one('.ez-asynchronousview-retry').simulateGesture('tap');
+            this.wait();
+        },
+    };
+
     NS.RenderTest = {
         'Should render the view with a template': function () {
             var view = this.view,

Tests/js/views/dashboard/assets/ez-dashboardblockmydraftsview-tests.js

@@ -8,7 +8,7 @@ YUI.add('ez-dashboardblockmydraftsview-tests', function (Y) {
     var AsynchronousViewTests = Y.eZ.Test.DashblockBlockAsynchronousViewTests,
         renderTest,
         loadUserDraftsEvent,
-        rowOptionTest,
+        rowOptionTest, errorHandlingTest,
         CLASS_LOADING = 'is-loading',
         Assert = Y.Assert, Model = Y.Model, Mock = Y.Mock;
 
@@ -146,10 +146,25 @@ YUI.add('ez-dashboardblockmydraftsview-tests', function (Y) {
         },
     }));
 
+    errorHandlingTest = new Y.Test.Case(Y.merge(AsynchronousViewTests.ErrorHandlingTest, {
+        name: 'eZ Dashboard My Drafts Block View error handling',
+
+        setUp: function () {
+            this.view = new Y.eZ.DashboardBlockMyDraftsView({
+                container: '.container',
+            });
+        },
+
+        tearDown: function () {
+            this.view.destroy();
+        },
+    }));
+
     Y.Test.Runner.setName('eZ Dashboard My Drafts Block View tests');
     Y.Test.Runner.add(renderTest);
     Y.Test.Runner.add(loadUserDraftsEvent);
     Y.Test.Runner.add(rowOptionTest);
+    Y.Test.Runner.add(errorHandlingTest);
 }, '', {
     requires: [
         'test', 'base', 'view', 'model', 'node-event-simulate',

Tests/js/views/dashboard/ez-dashboardblockmydraftsview.html

@@ -21,6 +21,9 @@
         {{/each}}
         </tbody>
     </table>
+    {{#if loadingError}}
+        <button class="ez-asynchronousview-retry">Retry</button>
+    {{/if}}
 </script>
 
 <script type="text/javascript" src="../../../../Resources/public/vendors/yui3/build/yui/yui.js"></script>