config_service: Handled errors in the front page

appengine/config_service/ui/test/config-ui/front-page_test.html

Index: appengine/config_service/ui/test/config-ui/front-page_test.html
diff --git a/appengine/config_service/ui/test/config-ui/front-page_test.html b/appengine/config_service/ui/test/config-ui/front-page_test.html
index 6c7f1e8d3b42006b43920b46449ed2fe989e0c19..66ee24c87b901dfdd6820c9160fcf10661dbbcc2 100644
--- a/appengine/config_service/ui/test/config-ui/front-page_test.html
+++ b/appengine/config_service/ui/test/config-ui/front-page_test.html
@@ -143,6 +143,174 @@
           }.bind(front_page));
         });
       });
+
+      suite('Front page ajax 500 error', function() {

[Sergey Berezin, 2017/07/26 19:40:30]

nit: I'd name suite / tests something like:
suite('Front page ajax errors are handled correctly', ...
  test('500 error is retried once, fails the second time', ...)
  test('500 error is retried once and succeeds on retry', ...)
  test('403 error fails immediately with a message', ...) etc.
)

[cwpayton, 2017/07/26 22:48:50]

Done.

+        var ajax;
+        var request;
+        var server;
+        var responseHeaders = {
+          json: { 'Content-Type': 'application/json' }
+        };
+        var front_page;
+        setup(function() {
+          server = sinon.fakeServer.create();
+          var param = {
+            error: {
+              code: 500,
+              message: "Internal Server Error."
+            }
+          }
+          server.respondWith(
+            'GET',
+            /\/_ah\/api\/config\/v1\/config-sets\?include_last_import_attempt=true/, 
+            [
+              500,
+              responseHeaders.json,
+              JSON.stringify(param)
+            ]
+          );
+          front_page = fixture('front-pageTestFixture');
+          ajax = Polymer.dom(front_page.root).querySelector('iron-ajax');
+        });
+
+        teardown(function() {
+          server.restore();
+        });
+
+        test('front page handles 500 error', function() {
+          request = ajax.generateRequest();
+          server.respond();
+          front_page.addEventListener('fetchError', function() {
+            expect(front_page.errorMessage).to.be.equal("Internal server error.");
+          })
+        });
+      });
+
+      suite('Front page ajax 500 error', function() {

[Sergey Berezin, 2017/07/26 19:40:30]

This looks like an identical repeated test suite - did you mean to adapt it to
non-500 code?

BTW, it would be nice to be able to test for different error codes in the same
suite. Perhaps, write a helper function serverResponse(code, message) and call
it in the tests, instead of in setup().

[cwpayton, 2017/07/26 22:48:50]

Done.

+        var ajax;
+        var request;
+        var server;
+        var responseHeaders = {
+          json: { 'Content-Type': 'application/json' }
+        };
+        var front_page;
+        setup(function() {
+          server = sinon.fakeServer.create();
+          var param = {
+            error: {
+              code: 500,
+              message: "Internal Server Error."
+            }
+          }
+          server.respondWith(
+            'GET',
+            /\/_ah\/api\/config\/v1\/config-sets\?include_last_import_attempt=true/, 
+            [
+              500,
+              responseHeaders.json,
+              JSON.stringify(param)
+            ]
+          );
+          front_page = fixture('front-pageTestFixture');
+          ajax = Polymer.dom(front_page.root).querySelector('iron-ajax');
+        });
+
+        teardown(function() {
+          server.restore();
+        });
+
+        test('front page handles 500 error', function() {
+          request = ajax.generateRequest();
+          server.respond();
+          front_page.addEventListener('fetchError', function() {
+            expect(front_page.errorMessage).to.be.equal("Internal server error.");
+          })
+        });
+      });
+
+      suite('Front page ajax 403 error', function() {
+        var ajax;
+        var request;
+        var server;
+        var responseHeaders = {
+          json: { 'Content-Type': 'application/json' }
+        };
+        var front_page;
+        setup(function() {
+          server = sinon.fakeServer.create();
+          var param = {
+            error: {
+              code: 403,
+              message: "The request returned with a status of 403."
+            }
+          }
+          server.respondWith(
+            'GET',
+            /\/_ah\/api\/config\/v1\/config-sets\?include_last_import_attempt=true/, 
+            [
+              403,
+              responseHeaders.json,
+              JSON.stringify(param)
+            ]
+          );
+          front_page = fixture('front-pageTestFixture');
+          ajax = Polymer.dom(front_page.root).querySelector('iron-ajax');
+        });
+
+        teardown(function() {
+          server.restore();
+        });
+
+        test('front page handles 403 error', function() {
+          request = ajax.generateRequest();
+          server.respond();
+          front_page.addEventListener('fetchError', function() {
+            expect(front_page.errorMessage).to.be.equal("Access denied. Please try again later.");
+          })
+        });
+      });
+
+      suite('Front page ajax general error', function() {
+        var ajax;
+        var request;
+        var server;
+        var responseHeaders = {
+          json: { 'Content-Type': 'application/json' }
+        };
+        var front_page;
+        setup(function() {
+          server = sinon.fakeServer.create();
+          var param = {
+            error: {
+              code: 400,
+              message: "The request returned with a status of 403."
+            }
+          }
+          server.respondWith(
+            'GET',
+            /\/_ah\/api\/config\/v1\/config-sets\?include_last_import_attempt=true/, 
+            [
+              400,
+              responseHeaders.json,
+              JSON.stringify(param)
+            ]
+          );
+          front_page = fixture('front-pageTestFixture');
+          ajax = Polymer.dom(front_page.root).querySelector('iron-ajax');
+        });
+
+        teardown(function() {
+          server.restore();
+        });
+
+        test('front page handles error that is not 403 or 500', function() {
+          request = ajax.generateRequest();
+          server.respond();
+          front_page.addEventListener('fetchError', function() {
+            expect(front_page.errorMessage).to.be.equal("Error occured. Please try again later.");
+          })
+        });
+      });
     </script>
   </body>
 </html>