feat: make FA form error messaging more descript (#34247)

* feat: make FA form error messaging more descript

* chore: quality

* fix: split up tests

* fix: make test more specific

* chore: fix comment typo

* chore: fix comment typo
This commit is contained in:
Chris Pappas
2024-02-16 13:12:40 -05:00
committed by GitHub
parent 4d1d82dd35
commit 6353bb2e8e
2 changed files with 23 additions and 5 deletions

View File

@@ -28,7 +28,8 @@
return FormView.extend({
el: '.financial-assistance-wrapper',
events: {
'click .js-submit-form': 'submitForm'
'click .js-submit-form': 'submitForm',
'ajaxError': 'handleAjaxError'
},
tpl: formViewTpl,
fieldTpl: formFieldTpl,
@@ -101,6 +102,12 @@
if (error.status === 0) {
msg = gettext('An error has occurred. Check your Internet connection and try again.');
} else if (error.status === 403) {
txt = [
'You must confirm your email to complete registration before applying for financial assistance.',
'If you continue to have issues please contact support.'
],
msg = gettext(txt.join(' '));
}
this.errors = [HtmlUtils.joinHtml(
@@ -155,6 +162,12 @@
});
}
}
},
// this.model.save() makes an ajax call, which, when it errors,
// should have an error message displayed on the banner on the page
handleAjaxError: function (event, request, settings, thrownError) {
this.saveError(request);
}
});
}

View File

@@ -98,11 +98,11 @@ define([
expect(view.$('.js-success-message').length).toEqual(1);
};
failedSubmission = function() {
failedSubmission = function(statusCode) {
expect(view.$('.js-success-message').length).toEqual(0);
expect(view.$formFeedback.find('.' + view.formErrorsJsHook).length).toEqual(0);
validSubmission();
view.model.trigger('error', {status: 500});
view.model.trigger('error', {status: statusCode});
expect(view.$('.js-success-message').length).toEqual(0);
expect(view.$formFeedback.find('.' + view.formErrorsJsHook).length).toEqual(1);
};
@@ -166,7 +166,12 @@ define([
});
it('should submit the form and show an error message if content is valid and API returns error', function() {
failedSubmission();
failedSubmission(500);
});
it('should submit the form and show an error message if content is valid and API returns 403 error', function() {
failedSubmission(403);
expect(view.$('.message-copy').text()).toContain('You must confirm your email');
});
it('should allow form resubmission after a front end validation failure', function() {
@@ -176,7 +181,7 @@ define([
});
it('should allow form resubmission after an API error is returned', function() {
failedSubmission();
failedSubmission(500);
successfulSubmission();
});