diff options
Diffstat (limited to 'spec/frontend/design_management/utils')
4 files changed, 335 insertions, 0 deletions
diff --git a/spec/frontend/design_management/utils/cache_update_spec.js b/spec/frontend/design_management/utils/cache_update_spec.js new file mode 100644 index 00000000000..641d35ff9ff --- /dev/null +++ b/spec/frontend/design_management/utils/cache_update_spec.js @@ -0,0 +1,44 @@ +import { InMemoryCache } from 'apollo-cache-inmemory'; +import { + updateStoreAfterDesignsDelete, + updateStoreAfterAddDiscussionComment, + updateStoreAfterAddImageDiffNote, + updateStoreAfterUploadDesign, + updateStoreAfterUpdateImageDiffNote, +} from '~/design_management/utils/cache_update'; +import { + designDeletionError, + ADD_DISCUSSION_COMMENT_ERROR, + ADD_IMAGE_DIFF_NOTE_ERROR, + UPDATE_IMAGE_DIFF_NOTE_ERROR, +} from '~/design_management/utils/error_messages'; +import design from '../mock_data/design'; +import createFlash from '~/flash'; + +jest.mock('~/flash.js'); + +describe('Design Management cache update', () => { + const mockErrors = ['code red!']; + + let mockStore; + + beforeEach(() => { + mockStore = new InMemoryCache(); + }); + + describe('error handling', () => { + it.each` + fnName | subject | errorMessage | extraArgs + ${'updateStoreAfterDesignsDelete'} | ${updateStoreAfterDesignsDelete} | ${designDeletionError({ singular: true })} | ${[[design]]} + ${'updateStoreAfterAddDiscussionComment'} | ${updateStoreAfterAddDiscussionComment} | ${ADD_DISCUSSION_COMMENT_ERROR} | ${[]} + ${'updateStoreAfterAddImageDiffNote'} | ${updateStoreAfterAddImageDiffNote} | ${ADD_IMAGE_DIFF_NOTE_ERROR} | ${[]} + ${'updateStoreAfterUploadDesign'} | ${updateStoreAfterUploadDesign} | ${mockErrors[0]} | ${[]} + ${'updateStoreAfterUpdateImageDiffNote'} | ${updateStoreAfterUpdateImageDiffNote} | ${UPDATE_IMAGE_DIFF_NOTE_ERROR} | ${[]} + `('$fnName handles errors in response', ({ subject, extraArgs, errorMessage }) => { + expect(createFlash).not.toHaveBeenCalled(); + expect(() => subject(mockStore, { errors: mockErrors }, {}, ...extraArgs)).toThrow(); + expect(createFlash).toHaveBeenCalledTimes(1); + expect(createFlash).toHaveBeenCalledWith(errorMessage); + }); + }); +}); diff --git a/spec/frontend/design_management/utils/design_management_utils_spec.js b/spec/frontend/design_management/utils/design_management_utils_spec.js new file mode 100644 index 00000000000..af631073df6 --- /dev/null +++ b/spec/frontend/design_management/utils/design_management_utils_spec.js @@ -0,0 +1,176 @@ +import { + extractCurrentDiscussion, + extractDiscussions, + findVersionId, + designUploadOptimisticResponse, + updateImageDiffNoteOptimisticResponse, + isValidDesignFile, + extractDesign, +} from '~/design_management/utils/design_management_utils'; +import mockResponseNoDesigns from '../mock_data/no_designs'; +import mockResponseWithDesigns from '../mock_data/designs'; +import mockDesign from '../mock_data/design'; + +jest.mock('lodash/uniqueId', () => () => 1); + +describe('extractCurrentDiscussion', () => { + let discussions; + + beforeEach(() => { + discussions = { + nodes: [ + { id: 101, payload: 'w' }, + { id: 102, payload: 'x' }, + { id: 103, payload: 'y' }, + { id: 104, payload: 'z' }, + ], + }; + }); + + it('finds the relevant discussion if it exists', () => { + const id = 103; + expect(extractCurrentDiscussion(discussions, id)).toEqual({ id, payload: 'y' }); + }); + + it('returns null if the relevant discussion does not exist', () => { + expect(extractCurrentDiscussion(discussions, 0)).not.toBeDefined(); + }); +}); + +describe('extractDiscussions', () => { + let discussions; + + beforeEach(() => { + discussions = { + nodes: [ + { id: 1, notes: { nodes: ['a'] } }, + { id: 2, notes: { nodes: ['b'] } }, + { id: 3, notes: { nodes: ['c'] } }, + { id: 4, notes: { nodes: ['d'] } }, + ], + }; + }); + + it('discards the edges.node artifacts of GraphQL', () => { + expect(extractDiscussions(discussions)).toEqual([ + { id: 1, notes: ['a'] }, + { id: 2, notes: ['b'] }, + { id: 3, notes: ['c'] }, + { id: 4, notes: ['d'] }, + ]); + }); +}); + +describe('version parser', () => { + it('correctly extracts version ID from a valid version string', () => { + const testVersionId = '123'; + const testVersionString = `gid://gitlab/DesignManagement::Version/${testVersionId}`; + + expect(findVersionId(testVersionString)).toEqual(testVersionId); + }); + + it('fails to extract version ID from an invalid version string', () => { + const testInvalidVersionString = `gid://gitlab/DesignManagement::Version`; + + expect(findVersionId(testInvalidVersionString)).toBeUndefined(); + }); +}); + +describe('optimistic responses', () => { + it('correctly generated for designManagementUpload', () => { + const expectedResponse = { + __typename: 'Mutation', + designManagementUpload: { + __typename: 'DesignManagementUploadPayload', + designs: [ + { + __typename: 'Design', + id: -1, + image: '', + imageV432x230: '', + filename: 'test', + fullPath: '', + notesCount: 0, + event: 'NONE', + diffRefs: { __typename: 'DiffRefs', baseSha: '', startSha: '', headSha: '' }, + discussions: { __typename: 'DesignDiscussion', nodes: [] }, + versions: { + __typename: 'DesignVersionConnection', + edges: { + __typename: 'DesignVersionEdge', + node: { __typename: 'DesignVersion', id: -1, sha: -1 }, + }, + }, + }, + ], + errors: [], + skippedDesigns: [], + }, + }; + expect(designUploadOptimisticResponse([{ name: 'test' }])).toEqual(expectedResponse); + }); + + it('correctly generated for updateImageDiffNoteOptimisticResponse', () => { + const mockNote = { + id: 'test-note-id', + }; + + const mockPosition = { + x: 10, + y: 10, + width: 10, + height: 10, + }; + + const expectedResponse = { + __typename: 'Mutation', + updateImageDiffNote: { + __typename: 'UpdateImageDiffNotePayload', + note: { + ...mockNote, + position: mockPosition, + }, + errors: [], + }, + }; + expect(updateImageDiffNoteOptimisticResponse(mockNote, { position: mockPosition })).toEqual( + expectedResponse, + ); + }); +}); + +describe('isValidDesignFile', () => { + // test every filetype that Design Management supports + // https://docs.gitlab.com/ee/user/project/issues/design_management.html#limitations + it.each` + mimetype | isValid + ${'image/svg'} | ${true} + ${'image/png'} | ${true} + ${'image/jpg'} | ${true} + ${'image/jpeg'} | ${true} + ${'image/gif'} | ${true} + ${'image/bmp'} | ${true} + ${'image/tiff'} | ${true} + ${'image/ico'} | ${true} + ${'image/svg'} | ${true} + ${'video/mpeg'} | ${false} + ${'audio/midi'} | ${false} + ${'application/octet-stream'} | ${false} + `('returns $isValid for file type $mimetype', ({ mimetype, isValid }) => { + expect(isValidDesignFile({ type: mimetype })).toBe(isValid); + }); +}); + +describe('extractDesign', () => { + describe('with no designs', () => { + it('returns undefined', () => { + expect(extractDesign(mockResponseNoDesigns)).toBeUndefined(); + }); + }); + + describe('with designs', () => { + it('returns the first design available', () => { + expect(extractDesign(mockResponseWithDesigns)).toEqual(mockDesign); + }); + }); +}); diff --git a/spec/frontend/design_management/utils/error_messages_spec.js b/spec/frontend/design_management/utils/error_messages_spec.js new file mode 100644 index 00000000000..635ff931d7d --- /dev/null +++ b/spec/frontend/design_management/utils/error_messages_spec.js @@ -0,0 +1,62 @@ +import { + designDeletionError, + designUploadSkippedWarning, +} from '~/design_management/utils/error_messages'; + +const mockFilenames = n => + Array(n) + .fill(0) + .map((_, i) => ({ filename: `${i + 1}.jpg` })); + +describe('Error message', () => { + describe('designDeletionError', () => { + const singularMsg = 'Could not delete a design. Please try again.'; + const pluralMsg = 'Could not delete designs. Please try again.'; + + describe('when [singular=true]', () => { + it.each([[undefined], [true]])('uses singular grammar', singularOption => { + expect(designDeletionError({ singular: singularOption })).toEqual(singularMsg); + }); + }); + + describe('when [singular=false]', () => { + it('uses plural grammar', () => { + expect(designDeletionError({ singular: false })).toEqual(pluralMsg); + }); + }); + }); + + describe.each([ + [[], [], null], + [mockFilenames(1), mockFilenames(1), 'Upload skipped. 1.jpg did not change.'], + [ + mockFilenames(2), + mockFilenames(2), + 'Upload skipped. The designs you tried uploading did not change.', + ], + [ + mockFilenames(2), + mockFilenames(1), + 'Upload skipped. Some of the designs you tried uploading did not change: 1.jpg.', + ], + [ + mockFilenames(6), + mockFilenames(5), + 'Upload skipped. Some of the designs you tried uploading did not change: 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg.', + ], + [ + mockFilenames(7), + mockFilenames(6), + 'Upload skipped. Some of the designs you tried uploading did not change: 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, and 1 more.', + ], + [ + mockFilenames(8), + mockFilenames(7), + 'Upload skipped. Some of the designs you tried uploading did not change: 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, and 2 more.', + ], + ])('designUploadSkippedWarning', (uploadedFiles, skippedFiles, expected) => { + test('returns expected warning message', () => { + expect(designUploadSkippedWarning(uploadedFiles, skippedFiles)).toBe(expected); + }); + }); +}); diff --git a/spec/frontend/design_management/utils/tracking_spec.js b/spec/frontend/design_management/utils/tracking_spec.js new file mode 100644 index 00000000000..9fa5eae55b3 --- /dev/null +++ b/spec/frontend/design_management/utils/tracking_spec.js @@ -0,0 +1,53 @@ +import { mockTracking } from 'helpers/tracking_helper'; +import { trackDesignDetailView } from '~/design_management/utils/tracking'; + +function getTrackingSpy(key) { + return mockTracking(key, undefined, jest.spyOn); +} + +describe('Tracking Events', () => { + describe('trackDesignDetailView', () => { + const eventKey = 'projects:issues:design'; + const eventName = 'design_viewed'; + + it('trackDesignDetailView fires a tracking event when called', () => { + const trackingSpy = getTrackingSpy(eventKey); + + trackDesignDetailView(); + + expect(trackingSpy).toHaveBeenCalledWith( + eventKey, + eventName, + expect.objectContaining({ + label: eventName, + value: { + 'internal-object-refrerer': '', + 'design-collection-owner': '', + 'design-version-number': 1, + 'design-is-current-version': false, + }, + }), + ); + }); + + it('trackDesignDetailView allows to customize the value payload', () => { + const trackingSpy = getTrackingSpy(eventKey); + + trackDesignDetailView('from-a-test', 'test', 100, true); + + expect(trackingSpy).toHaveBeenCalledWith( + eventKey, + eventName, + expect.objectContaining({ + label: eventName, + value: { + 'internal-object-refrerer': 'from-a-test', + 'design-collection-owner': 'test', + 'design-version-number': 100, + 'design-is-current-version': true, + }, + }), + ); + }); + }); +}); |