Merge branch '321666-improve-unit-tests-for-assignees-widget-component' into 'master'

Resolve "Improve unit tests for assignees widget component"

See merge request gitlab-org/gitlab!55504

app/assets/javascripts/boards/components/board_sidebar.js

@@ -107,8 +107,8 @@ export default Vue.extend({
     closeSidebar() {
       this.detail.issue = {};
     },
-    setAssignees(data) {
-      boardsStore.detail.issue.setAssignees(data.issueSetAssignees.issue.assignees.nodes);
+    setAssignees(assignees) {
+      boardsStore.detail.issue.setAssignees(assignees);
     },
     showScopedLabels(label) {
       return boardsStore.scopedLabels.enabled && isScopedLabel(label);

app/assets/javascripts/graphql_shared/queries/users_search.query.graphql

 #import "../fragments/user.fragment.graphql"
 
 query usersSearch($search: String!, $fullPath: ID!) {
-  issuable: project(fullPath: $fullPath) {
+  workspace: project(fullPath: $fullPath) {
     users: projectMembers(search: $search) {
       nodes {
         user {

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

@@ -15,13 +15,12 @@ import { IssuableType } from '~/issue_show/constants';
 import { __, n__ } from '~/locale';
 import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-import { assigneesQueries } from '~/sidebar/constants';
+import { assigneesQueries, ASSIGNEES_DEBOUNCE_DELAY } from '~/sidebar/constants';
 import MultiSelectDropdown from '~/vue_shared/components/sidebar/multiselect_dropdown.vue';
 
 export const assigneesWidget = Vue.observable({
   updateAssignees: null,
 });
-
 export default {
   i18n: {
     unassigned: __('Unassigned'),
@@ -88,10 +87,10 @@ export default {
         return this.queryVariables;
       },
       update(data) {
-        return data.issuable || data.project?.issuable;
+        return data.workspace?.issuable;
       },
       result({ data }) {
-        const issuable = data.issuable || data.project?.issuable;
+        const issuable = data.workspace?.issuable;
         if (issuable) {
           this.selected = this.moveCurrentUserToStart(cloneDeep(issuable.assignees.nodes));
         }
@@ -109,7 +108,7 @@ export default {
         };
       },
       update(data) {
-        const searchResults = data.issuable?.users?.nodes.map(({ user }) => user) || [];
+        const searchResults = data.workspace?.users?.nodes.map(({ user }) => user) || [];
         const mergedSearchResults = this.participants.reduce((acc, current) => {
           if (
             !acc.some((user) => current.username === user.username) &&
@@ -121,7 +120,7 @@ export default {
         }, searchResults);
         return mergedSearchResults;
       },
-      debounce: 250,
+      debounce: ASSIGNEES_DEBOUNCE_DELAY,
       skip() {
         return this.isSearchEmpty;
       },
@@ -229,7 +228,7 @@ export default {
           },
         })
         .then(({ data }) => {
-          this.$emit('assignees-updated', data);
+          this.$emit('assignees-updated', data.issuableSetAssignees.issuable.assignees.nodes);
           return data;
         })
         .catch(() => {
@@ -378,7 +377,7 @@ export default {
             <template v-if="showCurrentUser">
               <gl-dropdown-divider />
               <gl-dropdown-item
-                data-testid="unselected-participant"
+                data-testid="current-user"
                 @click.stop="selectAssignee(currentUser)"
               >
                 <gl-avatar-link>
@@ -409,7 +408,7 @@ export default {
                 />
               </gl-avatar-link>
             </gl-dropdown-item>
-            <gl-dropdown-item v-if="noUsersFound && !isSearching">
+            <gl-dropdown-item v-if="noUsersFound && !isSearching" data-testid="empty-results">
               {{ __('No matching results') }}
             </gl-dropdown-item>
           </template>

app/assets/javascripts/sidebar/constants.js

@@ -6,6 +6,8 @@ import getMergeRequestParticipants from '~/vue_shared/components/sidebar/queries
 import updateAssigneesMutation from '~/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql';
 import updateMergeRequestParticipantsMutation from '~/vue_shared/components/sidebar/queries/update_mr_assignees.mutation.graphql';
 
+export const ASSIGNEES_DEBOUNCE_DELAY = 250;
+
 export const assigneesQueries = {
   [IssuableType.Issue]: {
     query: getIssueParticipants,

app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_participants.query.graphql

 #import "~/graphql_shared/fragments/user.fragment.graphql"
 
 query issueParticipants($fullPath: ID!, $iid: String!) {
-  project(fullPath: $fullPath) {
+  workspace: project(fullPath: $fullPath) {
+    __typename
     issuable: issue(iid: $iid) {
+      __typename
       id
       participants {
         nodes {

app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_participants.query.graphql

 #import "~/graphql_shared/fragments/user.fragment.graphql"
 
 query getMrParticipants($fullPath: ID!, $iid: String!) {
-  project(fullPath: $fullPath) {
+  workspace: project(fullPath: $fullPath) {
     issuable: mergeRequest(iid: $iid) {
       id
       participants {

app/assets/javascripts/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql

 #import "~/graphql_shared/fragments/user.fragment.graphql"
 
 mutation issueSetAssignees($iid: String!, $assigneeUsernames: [String!]!, $fullPath: ID!) {
-  issueSetAssignees(
+  issuableSetAssignees: issueSetAssignees(
     input: { iid: $iid, assigneeUsernames: $assigneeUsernames, projectPath: $fullPath }
   ) {
-    issue {
+    issuable: issue {
       id
       assignees {
         nodes {

ee/spec/frontend/sidebar/mock_data.js

@@ -86,7 +86,8 @@ export const mockMutationResponse = {
 
 export const issuableQueryResponse = {
   data: {
-    project: {
+    workspace: {
+      __typename: 'Project',
       issuable: {
         __typename: 'Issue',
         id: 'gid://gitlab/Issue/1',
@@ -109,6 +110,13 @@ export const issuableQueryResponse = {
               username: 'francina.skiles',
               webUrl: '/franc',
             },
+            {
+              id: 'gid://gitlab/User/3',
+              avatarUrl: '/avatar',
+              name: 'John Doe',
+              username: 'johndoe',
+              webUrl: '/john',
+            },
           ],
         },
         assignees: {
@@ -130,7 +138,8 @@ export const issuableQueryResponse = {
 
 export const searchQueryResponse = {
   data: {
-    issuable: {
+    workspace: {
+      __typename: 'Project',
       users: {
         nodes: [
           {
@@ -144,8 +153,8 @@ export const searchQueryResponse = {
           },
           {
             user: {
-              id: '3',
-              avatarUrl: '/avatar',
+              id: '2',
+              avatarUrl: '/avatar2',
               name: 'rookie',
               username: 'rookie',
               webUrl: 'rookie',
@@ -159,8 +168,8 @@ export const searchQueryResponse = {
 
 export const updateIssueAssigneesMutationResponse = {
   data: {
-    issueSetAssignees: {
-      issue: {
+    issuableSetAssignees: {
+      issuable: {
         id: 'gid://gitlab/Issue/1',
         iid: '1',
         assignees: {
@@ -202,7 +211,6 @@ export const updateIssueAssigneesMutationResponse = {
         },
         __typename: 'Issue',
       },
-      __typename: 'IssueSetAssigneesPayload',
     },
   },
 };