Add error handling and UI feedback when submitting comment resulting in a 503 error (#14233)

* add catch to response.json promise to handle 503 service unavailable error

* fix typo in error message

* make error message more generic

* add test for comment when server response with 503
This commit is contained in:
zeotuan 2021-07-15 19:24:32 +10:00 committed by GitHub
parent 871dfc4582
commit 9900d40521
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 0 deletions

View file

@ -297,6 +297,8 @@ function handleCommentSubmit(event) {
} else {
showUserAlertModal('Error posting comment', 'Your comment could not be posted due to an error: ' + errorReponse.error, 'OK')
}
}).catch(function parseError(error){
showUserAlertModal('Error posting comment', 'Your comment could not be posted due to a server error', 'OK')
});
return false;
}

View file

@ -516,6 +516,31 @@ describe('Comment on articles', () => {
cy.findByRole('button', { name: /^Submit$/i }).should('have.focus');
});
it('server error that return empty body should show error modal', () => {
cy.intercept('POST', '/comments', {
statusCode: 503,
});
cy.findByRole('main').within(() => {
cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i })
.focus() // Focus activates the Submit button and mini toolbar below a comment textbox
.type('this is a comment');
cy.findByRole('button', { name: /^Submit$/i }).click();
});
cy.findByTestId('modal-container').within(() => {
cy.findByRole('button', { name: /Close/ }).should('have.focus');
cy.findByRole('heading', { name: 'Error posting comment' }).should(
'exist',
);
cy.findByText('Your comment could not be posted due to a server error');
cy.findByRole('button', { name: 'OK' }).click();
});
cy.findByTestId('modal-container').should('not.exist');
cy.findByRole('button', { name: /^Submit$/i }).should('have.focus');
});
it('should add a comment with a gist embed', () => {
cy.findByRole('main').within(() => {
cy.findByRole('textbox', {