Merge branch 'user-profile-achievements' into 'master'

User profile: Show 7 achievements instead of 3

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/144453



Merged-by: Anna Vovchenko <avovchenko@gitlab.com>
Approved-by: Julia Miocene <jmiocene@gitlab.com>
Approved-by: Lee Tickett <ltickett@gitlab.com>
Approved-by: Anna Vovchenko <avovchenko@gitlab.com>
Reviewed-by: Anna Vovchenko <avovchenko@gitlab.com>
Reviewed-by: Lee Tickett <ltickett@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>
Co-authored-by: Lee Tickett <ltickett@gitlab.com>

app/assets/javascripts/profile/components/user_achievements.vue

@@ -7,6 +7,8 @@ import { TYPENAME_USER } from '~/graphql_shared/constants';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import getUserAchievements from './graphql/get_user_achievements.query.graphql';
 
+export const MAX_VISIBLE_ACHIEVEMENTS = 7;
+
 export default {
   name: 'UserAchievements',
   components: { GlAvatar, GlBadge, GlPopover, GlSprintf },
@@ -36,7 +38,7 @@ export default {
   methods: {
     processNodes(nodes) {
       return Object.entries(groupBy(nodes, 'achievement.id'))
-        .slice(0, 3)
+        .slice(0, MAX_VISIBLE_ACHIEVEMENTS)
         .map(([id, values]) => {
           const {
             achievement: { name, avatarUrl, description, namespace },

spec/frontend/fixtures/users.rb

@@ -56,9 +56,8 @@
     context 'for user achievements' do
       let_it_be(:group) { create(:group, :public) }
       let_it_be(:private_group) { create(:group, :private) }
-      let_it_be(:achievement1) { create(:achievement, namespace: group, name: 'Multiple') }
-      let_it_be(:achievement2) { create(:achievement, namespace: group) }
-      let_it_be(:achievement3) { create(:achievement, namespace: group) }
+      let_it_be(:multiple_achievement) { create(:achievement, namespace: group, name: 'Multiple') }
+      let_it_be(:achievements) { create_list(:achievement, 6, namespace: group) }
       let_it_be(:achievement_from_private_group) { create(:achievement, namespace: private_group) }
       let_it_be(:achievement_with_avatar_and_description) do
         create(:achievement,
@@ -89,7 +88,7 @@
       end
 
       it "graphql/get_user_achievements_without_avatar_or_description_response.json" do
-        create(:user_achievement, user: user, achievement: achievement1)
+        create(:user_achievement, user: user, achievement: multiple_achievement)
 
         post_graphql(query, current_user: user, variables: { id: user.to_global_id })
 
@@ -105,10 +104,11 @@
       end
 
       it "graphql/get_user_achievements_long_response.json" do
-        [achievement1, achievement2, achievement3, achievement_with_avatar_and_description].each do |achievement|
+        [
+          multiple_achievement, multiple_achievement, achievement_with_avatar_and_description, *achievements
+        ].each do |achievement|
           create(:user_achievement, user: user, achievement: achievement)
         end
-        create(:user_achievement, user: user, achievement: achievement1)
 
         post_graphql(query, current_user: user, variables: { id: user.to_global_id })
 

spec/frontend/profile/components/user_achievements_spec.js

@@ -8,7 +8,9 @@ import getUserAchievementsPrivateGroupResponse from 'test_fixtures/graphql/get_u
 import getUserAchievementsNoAvatarResponse from 'test_fixtures/graphql/get_user_achievements_without_avatar_or_description_response.json';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import UserAchievements from '~/profile/components/user_achievements.vue';
+import UserAchievements, {
+  MAX_VISIBLE_ACHIEVEMENTS,
+} from '~/profile/components/user_achievements.vue';
 import getUserAchievements from '~/profile/components//graphql/get_user_achievements.query.graphql';
 import { getTimeago, timeagoLanguageCode } from '~/lib/utils/datetime_utility';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
@@ -56,12 +58,15 @@ describe('UserAchievements', () => {
     expect(wrapper.findAllByTestId('user-achievement').length).toBe(0);
   });
 
-  it('only renders 3 achievements when more are present', async () => {
+  it(`only renders ${MAX_VISIBLE_ACHIEVEMENTS} achievements when more are present`, async () => {
     createComponent({ queryHandler: jest.fn().mockResolvedValue(getUserAchievementsLongResponse) });
 
     await waitForPromises();
 
-    expect(wrapper.findAllByTestId('user-achievement').length).toBe(3);
+    expect(getUserAchievementsLongResponse.data.user.userAchievements.nodes.length).toBeGreaterThan(
+      MAX_VISIBLE_ACHIEVEMENTS,
+    );
+    expect(wrapper.findAllByTestId('user-achievement').length).toBe(MAX_VISIBLE_ACHIEVEMENTS);
   });
 
   it('renders count for achievements awarded more than once', async () => {