fix: hide loading indicator when endpoint call fails (#9380)

vaadin · Nov 11, 2020 · 676f752 · 676f752
1 parent 529f711
commit 676f752
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
diff --git a/flow-client/src/main/resources/META-INF/resources/frontend/Connect.ts b/flow-client/src/main/resources/META-INF/resources/frontend/Connect.ts
@@ -352,10 +352,11 @@ export class ConnectClient {
     const fetchNext: MiddlewareNext =
       async(context: MiddlewareContext): Promise<Response> => {
         this.loading(true);
-        return fetch(context.request).then(response => {
-          this.loading(false);
-          return response;
-        });
+        try {
+          return fetch(context.request);
+        } finally {
+          this.loading(false); 
+        }
       };
 
     // Assemble the final middlewares array from internal

diff --git a/flow-client/src/test/frontend/ConnectTests.ts b/flow-client/src/test/frontend/ConnectTests.ts
@@ -132,6 +132,44 @@ describe('ConnectClient', () => {
       expect(calls).to.equal('truefalse');
     });
 
+    it('should hide Flow.loading indicator upon network failure', async() => {
+      let calls = '';
+      (window as any).Vaadin.Flow = {loading: (action: boolean) => calls += action};
+      fetchMock.post(
+        base + '/connect/FooEndpoint/reject',
+        Promise.reject(new TypeError('Network failure'))
+      );
+      try {
+        await client.call('FooEndpoint', 'reject');
+      } catch (error) {
+        // expected
+      } finally {
+        expect(calls).to.equal('truefalse');
+      }
+    });
+
+    it('should hide Flow.loading indicator upon server error', async() => {
+      const body = 'Unexpected error';
+      const errorResponse = new Response(
+          body,
+          {
+            status: 500,
+            statusText: 'Internal Server Error'
+          }
+      );
+      fetchMock.post(base + '/connect/FooEndpoint/vaadinConnectResponse', errorResponse);
+
+      let calls = '';
+      (window as any).Vaadin.Flow = {loading: (action: boolean) => calls += action};
+      try {
+        await client.call('FooEndpoint', 'vaadinConnectResponse');
+      } catch (error) {
+        // expected
+      } finally {
+        expect(calls).to.equal('truefalse');
+      }
+    });
+
     it('should use JSON request headers', async() => {
       await client.call('FooEndpoint', 'fooMethod');
 
@@ -143,7 +181,6 @@ describe('ConnectClient', () => {
     });
 
     it('should set header for preventing CSRF', async() => {
-      debugger;
       await client.call('FooEndpoint', 'fooMethod');
 
       const headers = fetchMock.lastOptions().headers;