1 files changed, 26 insertions, 5 deletions
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
index 1ad6d043399..63371b1492b 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
@@ -4,6 +4,7 @@ import { nextTick } from 'vue';
 import { TEST_HOST } from 'spec/test_constants';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 const TEST_IMAGE_SIZE = 7;
 const TEST_BREAKPOINT = 5;
@@ -16,10 +17,13 @@ const createUser = (id) => ({
   web_url: `${TEST_HOST}/${id}`,
   avatar_url: `${TEST_HOST}/${id}/avatar`,
 });
+
 const createList = (n) =>
   Array(n)
     .fill(1)
     .map((x, id) => createUser(id));
+const createListCamelCase = (n) =>
+  createList(n).map((user) => convertObjectPropsToCamelCase(user, { deep: true }));
 
 describe('UserAvatarList', () => {
   let props;
@@ -75,14 +79,14 @@ describe('UserAvatarList', () => {
       props.breakpoint = 0;
     });
 
-    it('renders avatars', () => {
+    const linkProps = () =>
+      wrapper.findAllComponents(UserAvatarLink).wrappers.map((x) => x.props());
+
+    it('renders avatars when user has snake_case attributes', () => {
       const items = createList(20);
       factory({ propsData: { items } });
 
-      const links = wrapper.findAllComponents(UserAvatarLink);
-      const linkProps = links.wrappers.map((x) => x.props());
-
-      expect(linkProps).toEqual(
+      expect(linkProps()).toEqual(
         items.map((x) =>
           expect.objectContaining({
             linkHref: x.web_url,
@@ -94,6 +98,23 @@ describe('UserAvatarList', () => {
         ),
       );
     });
+
+    it('renders avatars when user has camelCase attributes', () => {
+      const items = createListCamelCase(20);
+      factory({ propsData: { items } });
+
+      expect(linkProps()).toEqual(
+        items.map((x) =>
+          expect.objectContaining({
+            linkHref: x.webUrl,
+            imgSrc: x.avatarUrl,
+            imgAlt: x.name,
+            tooltipText: x.name,
+            imgSize: TEST_IMAGE_SIZE,
+          }),
+        ),
+      );
+    });
   });
 
   describe('with breakpoint and length equal to breakpoint', () => {