Apply frontend reviewer feedback

- Refactor `v-if` in Vue template
- Add `null` check to `pronouns` prop
- Add `trim` to `pronouns` prop check

app/assets/javascripts/sidebar/components/assignees/user_name_with_status.vue

@@ -30,7 +30,7 @@ export default {
   },
   computed: {
     hasPronouns() {
-      return this.pronouns !== '';
+      return this.pronouns !== null && this.pronouns.trim() !== '';
     },
     isBusy() {
       return isUserBusy(this.availability);
@@ -40,25 +40,18 @@ export default {
 </script>
 <template>
   <span :class="containerClasses">
-    <gl-sprintf
-      v-if="isBusy"
-      :message="s__('UserAvailability|%{author} %{spanStart}(Busy)%{spanEnd}')"
-    >
-      <template #author>
-        {{ name }}
+    <gl-sprintf :message="s__('UserAvailability|%{author} %{spanStart}(Busy)%{spanEnd}')">
+      <template #author
+        >{{ name }}
         <span v-if="hasPronouns" class="gl-text-gray-500 gl-font-sm gl-font-weight-normal"
           >({{ pronouns }})</span
-        >
-      </template>
-      <template #span="{ content }">
-        <span class="gl-text-gray-500 gl-font-sm gl-font-weight-normal">{{ content }}</span>
+        ></template
+      >
+      <template #span="{ content }"
+        ><span v-if="isBusy" class="gl-text-gray-500 gl-font-sm gl-font-weight-normal">{{
+          content
+        }}</span>
       </template>
     </gl-sprintf>
-    <template v-else>
-      {{ name }}
-      <span v-if="hasPronouns" class="gl-text-gray-500 gl-font-sm gl-font-weight-normal"
-        >({{ pronouns }})</span
-      >
-    </template>
   </span>
 </template>

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/event_item_spec.js.snap

@@ -36,10 +36,10 @@ exports[`Event Item with action buttons renders the action buttons 1`] = `
         <span
           class="note-header-author-name gl-font-weight-bold"
         >
-          
-    Tanuki
-    
+          Tanuki
+      
           <!---->
+           
         </span>
       </a>
        

spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import AssigneeAvatar from '~/sidebar/components/assignees/assignee_avatar.vue';
 import CollapsedAssignee from '~/sidebar/components/assignees/collapsed_assignee.vue';
-import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
 import userDataMock from '../../user_data_mock';
 
 const TEST_USER = userDataMock();
@@ -17,11 +16,8 @@ describe('CollapsedAssignee assignee component', () => {
       ...props,
     };
 
-    wrapper = shallowMount(CollapsedAssignee, {
+    wrapper = mount(CollapsedAssignee, {
       propsData,
-      stubs: {
-        UserNameWithStatus,
-      },
     });
   }
 

spec/frontend/sidebar/components/assignees/user_name_with_status_spec.js

@@ -53,19 +53,23 @@ describe('UserNameWithStatus', () => {
     });
 
     it("renders user's name with pronouns", () => {
-      expect(wrapper.text()).toMatchInterpolatedText(`Administrator (${pronouns})`);
+      expect(wrapper.text()).toMatchInterpolatedText(`${name} (${pronouns})`);
     });
   });
 
   describe('when user does not have pronouns set', () => {
-    it.each`
+    describe.each`
       pronouns
       ${undefined}
+      ${null}
       ${''}
-    `("renders the user's name", ({ pronouns }) => {
-      createComponent({ pronouns });
+      ${'   '}
+    `('when `pronouns` prop is $pronouns', ({ pronouns }) => {
+      it("renders only the user's name", () => {
+        createComponent({ pronouns });
 
-      expect(wrapper.text()).toMatchInterpolatedText('Administrator');
+        expect(wrapper.text()).toMatchInterpolatedText(name);
+      });
     });
   });
 });