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 index fbe805ff7c2..07e30824d05 100644 --- 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 => { 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 index f9010bdc4d6..cb7eedd88b9 100644 --- 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;