1 files changed, 52 insertions, 12 deletions

diff --git a/spec/frontend/members/store/mutations_spec.js b/spec/frontend/members/store/mutations_spec.js
index 488bfdf15fd..a56e6a72d9e 100644
--- a/spec/frontend/members/store/mutations_spec.js
+++ b/spec/frontend/members/store/mutations_spec.js
@@ -28,13 +28,33 @@ describe('Vuex members mutations', () => {
     });
 
     describe(types.RECEIVE_MEMBER_ROLE_ERROR, () => {
-      it('shows error message', () => {
-        mutations[types.RECEIVE_MEMBER_ROLE_ERROR](state);
+      describe('when error does not have a message', () => {
+        it('shows default error message', () => {
+          mutations[types.RECEIVE_MEMBER_ROLE_ERROR](state, {
+            error: new Error('Network Error'),
+          });
+
+          expect(state.showError).toBe(true);
+          expect(state.errorMessage).toBe(
+            "An error occurred while updating the member's role, please try again.",
+          );
+        });
+      });
+
+      describe('when error has a message', () => {
+        it('shows error message', () => {
+          const error = new Error('Request failed with status code 422');
+          const message =
+            'User email "john.smith@gmail.com" does not match the allowed domain of example.com';
 
-        expect(state.showError).toBe(true);
-        expect(state.errorMessage).toBe(
-          "An error occurred while updating the member's role, please try again.",
-        );
+          error.response = {
+            data: { message },
+          };
+          mutations[types.RECEIVE_MEMBER_ROLE_ERROR](state, { error });
+
+          expect(state.showError).toBe(true);
+          expect(state.errorMessage).toBe(message);
+        });
       });
     });
 
@@ -52,13 +72,33 @@ describe('Vuex members mutations', () => {
     });
 
     describe(types.RECEIVE_MEMBER_EXPIRATION_ERROR, () => {
-      it('shows error message', () => {
-        mutations[types.RECEIVE_MEMBER_EXPIRATION_ERROR](state);
+      describe('when error does not have a message', () => {
+        it('shows default error message', () => {
+          mutations[types.RECEIVE_MEMBER_EXPIRATION_ERROR](state, {
+            error: new Error('Network Error'),
+          });
+
+          expect(state.showError).toBe(true);
+          expect(state.errorMessage).toBe(
+            "An error occurred while updating the member's expiration date, please try again.",
+          );
+        });
+      });
+
+      describe('when error has a message', () => {
+        it('shows error message', () => {
+          const error = new Error('Request failed with status code 422');
+          const message =
+            'User email "john.smith@gmail.com" does not match the allowed domain of example.com';
 
-        expect(state.showError).toBe(true);
-        expect(state.errorMessage).toBe(
-          "An error occurred while updating the member's expiration date, please try again.",
-        );
+          error.response = {
+            data: { message },
+          };
+          mutations[types.RECEIVE_MEMBER_EXPIRATION_ERROR](state, { error });
+
+          expect(state.showError).toBe(true);
+          expect(state.errorMessage).toBe(message);
+        });
       });
     });
   });