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
openedx · Feb 16, 2024 · 6353bb2 · 6353bb2
1 parent 4d1d82d
commit 6353bb2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/lms/static/js/financial-assistance/views/financial_assistance_form_view.js b/lms/static/js/financial-assistance/views/financial_assistance_form_view.js
@@ -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);
             }
         });
     }

diff --git a/lms/static/js/spec/financial-assistance/financial_assistance_form_view_spec.js b/lms/static/js/spec/financial-assistance/financial_assistance_form_view_spec.js
@@ -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();
         });