+ {{ $options.i18n.calendarHint }} +
+asdd
", + createdAt: '2023-02-24T06:49:20Z', + resolved: false, + position: { + diffRefs: { + baseSha: 'f63ae53ed82d8765477c191383e1e6a000c10375', + startSha: 'f63ae53ed82d8765477c191383e1e6a000c10375', + headSha: 'f348c652f1a737151fc79047895e695fbe81464c', + __typename: 'DiffRefs', + }, + x: 441, + y: 128, + height: 152, + width: 695, + __typename: 'DiffPosition', + }, + userPermissions: { + adminNote: true, + repositionNote: true, + __typename: 'NotePermissions', + }, + discussion: { + id: 'gid://gitlab/Discussion/6466a72f35b163f3c3e52d7976a09387f2c573e8', + notes: { + nodes: [ + { + id: 'gid://gitlab/DiffNote/459', + __typename: 'Note', + }, + ], + __typename: 'NoteConnection', + }, + __typename: 'Discussion', + }, + __typename: 'Note', + }, + errors: [], + __typename: 'CreateNotePayload', + }, + }, + }, +]; + +export const mockNoteSubmitFailureMutationResponse = [ + { + errors: [ + { + message: + 'Variable $input of type CreateNoteInput! was provided invalid value for bodyaa (Field is not defined on CreateNoteInput), body (Expected value to not be null)', + locations: [ + { + line: 1, + column: 21, + }, + ], + extensions: { + value: { + noteableId: 'gid://gitlab/DesignManagement::Design/10', + discussionId: 'gid://gitlab/Discussion/6466a72f35b163f3c3e52d7976a09387f2c573e8', + bodyaa: 'df', + }, + problems: [ + { + path: ['bodyaa'], + explanation: 'Field is not defined on CreateNoteInput', + }, + { + path: ['body'], + explanation: 'Expected value to not be null', + }, + ], + }, + }, + ], + }, +]; + +export const mockCreateImageNoteDiffResponse = { + data: { + createImageDiffNote: { + note: { + author: { + username: '', + }, + discussion: {}, + }, + }, + }, +}; diff --git a/spec/frontend/design_management/mock_data/project.js b/spec/frontend/design_management/mock_data/project.js new file mode 100644 index 00000000000..e1c2057d8d1 --- /dev/null +++ b/spec/frontend/design_management/mock_data/project.js @@ -0,0 +1,17 @@ +import design from './design'; + +export default { + project: { + issue: { + designCollection: { + designs: { + nodes: [ + { + ...design, + }, + ], + }, + }, + }, + }, +}; diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index a11463ab663..72b143d3789 100644 --- a/spec/frontend/design_management/pages/design/index_spec.js +++ b/spec/frontend/design_management/pages/design/index_spec.js @@ -1,15 +1,14 @@ import { GlAlert } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; -import { ApolloMutation } from 'vue-apollo'; import VueRouter from 'vue-router'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import Api from '~/api'; import DesignPresentation from '~/design_management/components/design_presentation.vue'; import DesignSidebar from '~/design_management/components/design_sidebar.vue'; import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants'; -import createImageDiffNoteMutation from '~/design_management/graphql/mutations/create_image_diff_note.mutation.graphql'; import updateActiveDiscussion from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql'; +import getDesignQuery from '~/design_management/graphql/queries/get_design.query.graphql'; import DesignIndex from '~/design_management/pages/design/index.vue'; import createRouter from '~/design_management/router'; import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management/router/constants'; @@ -17,6 +16,7 @@ import * as utils from '~/design_management/utils/design_management_utils'; import { DESIGN_NOT_FOUND_ERROR, DESIGN_VERSION_NOT_EXIST_ERROR, + ADD_IMAGE_DIFF_NOTE_ERROR, } from '~/design_management/utils/error_messages'; import { DESIGN_TRACKING_PAGE_NAME, @@ -24,15 +24,22 @@ import { DESIGN_SERVICE_PING_EVENT_TYPES, } from '~/design_management/utils/tracking'; import { createAlert } from '~/flash'; +import * as cacheUpdate from '~/design_management/utils/cache_update'; import mockAllVersions from '../../mock_data/all_versions'; import design from '../../mock_data/design'; +import mockProject from '../../mock_data/project'; import mockResponseWithDesigns from '../../mock_data/designs'; import mockResponseNoDesigns from '../../mock_data/no_designs'; +import { mockCreateImageNoteDiffResponse } from '../../mock_data/apollo_mock'; jest.mock('~/flash'); jest.mock('~/api.js'); const focusInput = jest.fn(); +const mockCacheObject = { + readQuery: jest.fn().mockReturnValue(mockProject), + writeQuery: jest.fn(), +}; const mutate = jest.fn().mockResolvedValue(); const mockPageLayoutElement = { classList: { @@ -52,32 +59,13 @@ const mockDesignNoDiscussions = { nodes: [], }, }; -const newComment = 'new comment'; + const annotationCoordinates = { x: 10, y: 10, width: 100, height: 100, }; -const createDiscussionMutationVariables = { - mutation: createImageDiffNoteMutation, - update: expect.anything(), - variables: { - input: { - body: newComment, - noteableId: design.id, - position: { - headSha: 'headSha', - baseSha: 'baseSha', - startSha: 'startSha', - paths: { - newPath: 'full-design-path', - }, - ...annotationCoordinates, - }, - }, - }, -}; Vue.use(VueRouter); @@ -85,8 +73,9 @@ describe('Design management design index page', () => { let wrapper; let router; - const findDiscussionForm = () => wrapper.findComponent(DesignReplyForm); + const findDesignReplyForm = () => wrapper.findComponent(DesignReplyForm); const findSidebar = () => wrapper.findComponent(DesignSidebar); + const findAlert = () => wrapper.findComponent(GlAlert); const findDesignPresentation = () => wrapper.findComponent(DesignPresentation); function createComponent( @@ -95,7 +84,7 @@ describe('Design management design index page', () => { data = {}, intialRouteOptions = {}, provide = {}, - stubs = { ApolloMutation, DesignSidebar, DesignReplyForm }, + stubs = { DesignSidebar, DesignReplyForm }, } = {}, ) { const $apollo = { @@ -105,6 +94,11 @@ describe('Design management design index page', () => { }, }, mutate, + getClient() { + return { + cache: mockCacheObject, + }; + }, }; router = createRouter(); @@ -216,7 +210,7 @@ describe('Design management design index page', () => { findDesignPresentation().vm.$emit('openCommentForm', { x: 0, y: 0 }); await nextTick(); - expect(findDiscussionForm().exists()).toBe(true); + expect(findDesignReplyForm().exists()).toBe(true); }); it('keeps new discussion form focused', () => { @@ -235,24 +229,53 @@ describe('Design management design index page', () => { expect(focusInput).toHaveBeenCalled(); }); - it('sends a mutation on submitting form and closes form', async () => { + it('sends a update and closes the form when mutation is completed', async () => { createComponent( { loading: false }, { data: { design, annotationCoordinates, - comment: newComment, }, }, ); - findDiscussionForm().vm.$emit('submit-form'); - expect(mutate).toHaveBeenCalledWith(createDiscussionMutationVariables); + const addImageDiffNoteToStore = jest.spyOn(cacheUpdate, 'updateStoreAfterAddImageDiffNote'); + + const mockDesignVariables = { + fullPath: 'project-path', + iid: '1', + filenames: ['gid::/gitlab/Design/1'], + atVersion: null, + }; + + findDesignReplyForm().vm.$emit('note-submit-complete', mockCreateImageNoteDiffResponse); await nextTick(); - await mutate({ variables: createDiscussionMutationVariables }); - expect(findDiscussionForm().exists()).toBe(false); + expect(addImageDiffNoteToStore).toHaveBeenCalledWith( + mockCacheObject, + mockCreateImageNoteDiffResponse.data.createImageDiffNote, + getDesignQuery, + mockDesignVariables, + ); + expect(findDesignReplyForm().exists()).toBe(false); + }); + + it('sets error message when form submission fails', async () => { + createComponent( + { loading: false }, + { + data: { + design, + annotationCoordinates, + }, + }, + ); + + findDesignReplyForm().vm.$emit('note-submit-failure'); + + await nextTick(); + expect(findAlert().text()).toBe(ADD_IMAGE_DIFF_NOTE_ERROR); }); it('closes the form and clears the comment on canceling form', async () => { @@ -262,17 +285,14 @@ describe('Design management design index page', () => { data: { design, annotationCoordinates, - comment: newComment, }, }, ); - findDiscussionForm().vm.$emit('cancel-form'); - - expect(wrapper.vm.comment).toBe(''); + findDesignReplyForm().vm.$emit('cancel-form'); await nextTick(); - expect(findDiscussionForm().exists()).toBe(false); + expect(findDesignReplyForm().exists()).toBe(false); }); describe('with error', () => { diff --git a/spec/frontend/issues/show/components/title_spec.js b/spec/frontend/issues/show/components/title_spec.js index 7560b733ae6..0699846e4bb 100644 --- a/spec/frontend/issues/show/components/title_spec.js +++ b/spec/frontend/issues/show/components/title_spec.js @@ -1,94 +1,99 @@ -import Vue, { nextTick } from 'vue'; +import { nextTick } from 'vue'; +import { GlButton } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; -import titleComponent from '~/issues/show/components/title.vue'; +import Title from '~/issues/show/components/title.vue'; import eventHub from '~/issues/show/event_hub'; -import Store from '~/issues/show/stores'; describe('Title component', () => { - let vm; - beforeEach(() => { + let wrapper; + + const getTitleHeader = () => wrapper.findByTestId('issue-title'); + const getEditButton = () => wrapper.findComponent(GlButton); + + const createWrapper = (props) => { setHTMLFixture(`xssxss