diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-07 21:07:59 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-07 21:07:59 +0300 |
commit | 3ff3d897d6529aabb21aa6aed54eb430a9cf0fe2 (patch) | |
tree | d5aaf0b6766cd5d4118e8ccd57d1269d3e4d673e /spec/frontend/drawio | |
parent | 807c4eae46f96ccd54ce1d8d13f4547eda017267 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/drawio')
-rw-r--r-- | spec/frontend/drawio/content_editor_facade_spec.js | 138 | ||||
-rw-r--r-- | spec/frontend/drawio/drawio_editor_spec.js | 54 | ||||
-rw-r--r-- | spec/frontend/drawio/markdown_field_editor_facade_spec.js | 1 |
3 files changed, 184 insertions, 9 deletions
diff --git a/spec/frontend/drawio/content_editor_facade_spec.js b/spec/frontend/drawio/content_editor_facade_spec.js new file mode 100644 index 00000000000..673968bac9f --- /dev/null +++ b/spec/frontend/drawio/content_editor_facade_spec.js @@ -0,0 +1,138 @@ +import AxiosMockAdapter from 'axios-mock-adapter'; +import { create } from '~/drawio/content_editor_facade'; +import { HTTP_STATUS_OK } from '~/lib/utils/http_status'; +import DrawioDiagram from '~/content_editor/extensions/drawio_diagram'; +import axios from '~/lib/utils/axios_utils'; +import { PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML } from '../content_editor/test_constants'; +import { createTestEditor } from '../content_editor/test_utils'; + +describe('drawio/contentEditorFacade', () => { + let tiptapEditor; + let axiosMock; + let contentEditorFacade; + let assetResolver; + const imageURL = '/group1/project1/-/wikis/test-file.drawio.svg'; + const diagramSvg = '<svg></svg>'; + const contentType = 'image/svg+xml'; + const filename = 'test-file.drawio.svg'; + const uploadsPath = '/uploads'; + const canonicalSrc = '/new-diagram.drawio.svg'; + const src = `/uploads${canonicalSrc}`; + + beforeEach(() => { + assetResolver = { + resolveUrl: jest.fn(), + }; + tiptapEditor = createTestEditor({ extensions: [DrawioDiagram] }); + contentEditorFacade = create({ + tiptapEditor, + drawioNodeName: DrawioDiagram.name, + uploadsPath, + assetResolver, + }); + }); + beforeEach(() => { + axiosMock = new AxiosMockAdapter(axios); + }); + + afterEach(() => { + axiosMock.restore(); + tiptapEditor.destroy(); + }); + + describe('getDiagram', () => { + describe('when there is a selected diagram', () => { + beforeEach(() => { + tiptapEditor + .chain() + .setContent(PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML) + .setNodeSelection(1) + .run(); + axiosMock + .onGet(imageURL) + .reply(HTTP_STATUS_OK, diagramSvg, { 'content-type': contentType }); + }); + + it('returns diagram information', async () => { + const diagram = await contentEditorFacade.getDiagram(); + + expect(diagram).toEqual({ + diagramURL: imageURL, + filename, + diagramSvg, + contentType, + }); + }); + }); + + describe('when there is not a selected diagram', () => { + beforeEach(() => { + tiptapEditor.chain().setContent('<p>text</p>').setNodeSelection(1).run(); + }); + + it('returns null', async () => { + const diagram = await contentEditorFacade.getDiagram(); + + expect(diagram).toBe(null); + }); + }); + }); + + describe('updateDiagram', () => { + beforeEach(() => { + tiptapEditor + .chain() + .setContent(PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML) + .setNodeSelection(1) + .run(); + + assetResolver.resolveUrl.mockReturnValueOnce(src); + contentEditorFacade.updateDiagram({ uploadResults: { file_path: canonicalSrc } }); + }); + + it('updates selected diagram diagram node src and canonicalSrc', () => { + tiptapEditor.commands.setNodeSelection(1); + expect(tiptapEditor.state.selection.node.attrs).toMatchObject({ + src, + canonicalSrc, + }); + }); + }); + + describe('insertDiagram', () => { + beforeEach(() => { + tiptapEditor.chain().setContent('<p></p>').run(); + + assetResolver.resolveUrl.mockReturnValueOnce(src); + contentEditorFacade.insertDiagram({ uploadResults: { file_path: canonicalSrc } }); + }); + + it('inserts a new draw.io diagram in the document', () => { + tiptapEditor.commands.setNodeSelection(1); + expect(tiptapEditor.state.selection.node.attrs).toMatchObject({ + src, + canonicalSrc, + }); + }); + }); + + describe('uploadDiagram', () => { + it('sends a post request to the uploadsPath containing the diagram svg', async () => { + const link = { markdown: '![](diagram.drawio.svg)' }; + const blob = new Blob([diagramSvg], { type: 'image/svg+xml' }); + const formData = new FormData(); + + formData.append('file', blob, filename); + + axiosMock.onPost(uploadsPath, formData).reply(HTTP_STATUS_OK, { + data: { + link, + }, + }); + + const response = await contentEditorFacade.uploadDiagram({ diagramSvg, filename }); + + expect(response).not.toBe(link); + }); + }); +}); diff --git a/spec/frontend/drawio/drawio_editor_spec.js b/spec/frontend/drawio/drawio_editor_spec.js index bcf0179e2e2..5ef26c04204 100644 --- a/spec/frontend/drawio/drawio_editor_spec.js +++ b/spec/frontend/drawio/drawio_editor_spec.js @@ -4,6 +4,7 @@ import { DRAWIO_FRAME_ID, DIAGRAM_BACKGROUND_COLOR, DRAWIO_IFRAME_TIMEOUT, + DIAGRAM_MAX_SIZE, } from '~/drawio/constants'; import { createAlert, VARIANT_SUCCESS } from '~/alert'; @@ -14,8 +15,10 @@ jest.useFakeTimers(); describe('drawio/drawio_editor', () => { let editorFacade; let drawioIFrameReceivedMessages; + const diagramURL = `${window.location.origin}/uploads/diagram.drawio.svg`; const testSvg = '<svg></svg>'; const testEncodedSvg = `data:image/svg+xml;base64,${btoa(testSvg)}`; + const filename = 'diagram.drawio.svg'; const findDrawioIframe = () => document.getElementById(DRAWIO_FRAME_ID); const waitForDrawioIFrameMessage = ({ messageNumber = 1 } = {}) => @@ -71,6 +74,10 @@ describe('drawio/drawio_editor', () => { it('creates the drawio editor iframe and attaches it to the body', () => { expect(findDrawioIframe().getAttribute('src')).toBe(DRAWIO_EDITOR_URL); }); + + it('sets drawio-editor classname to the iframe', () => { + expect(findDrawioIframe().classList).toContain('drawio-editor'); + }); }); describe(`when parent window does not receive configure event after ${DRAWIO_IFRAME_TIMEOUT} ms`, () => { @@ -88,7 +95,7 @@ describe('drawio/drawio_editor', () => { jest.runAllTimers(); expect(createAlert).toHaveBeenCalledWith({ - message: 'The draw.io editor could not be loaded.', + message: 'The diagrams.net editor could not be loaded.', }); }); }); @@ -149,10 +156,10 @@ describe('drawio/drawio_editor', () => { describe('when there is a diagram selected', () => { const diagramSvg = '<svg></svg>'; - const filename = 'diagram.drawio.svg'; beforeEach(() => { editorFacade.getDiagram.mockResolvedValueOnce({ + diagramURL, diagramSvg, filename, contentType: 'image/svg+xml', @@ -177,14 +184,43 @@ describe('drawio/drawio_editor', () => { }, }); }); + + it('sets the drawio iframe as visible and resets cursor', async () => { + await waitForDrawioIFrameMessage(); + + expect(findDrawioIframe().style.visibility).toBe('visible'); + expect(findDrawioIframe().style.cursor).toBe(''); + }); + + it('scrolls window to the top', async () => { + await waitForDrawioIFrameMessage(); + + expect(window.scrollX).toBe(0); + }); }); - describe('when there is an image selected that is not a diagram', () => { + describe.each` + description | errorMessage | diagram + ${'when there is an image selected that is not an svg file'} | ${'The selected image is not a valid SVG diagram'} | ${{ + diagramURL, + contentType: 'image/png', + filename: 'image.png', +}} + ${'when the selected image is not an asset upload'} | ${'The selected image is not an asset uploaded in the application'} | ${{ + diagramSvg: '<svg></svg>', + filename, + contentType: 'image/svg+xml', + diagramURL: 'https://example.com/image.drawio.svg', +}} + ${'when the selected image is too large'} | ${'The selected image is too large.'} | ${{ + diagramSvg: 'x'.repeat(DIAGRAM_MAX_SIZE + 1), + filename, + contentType: 'image/svg+xml', + diagramURL, +}} + `('$description', ({ errorMessage, diagram }) => { beforeEach(() => { - editorFacade.getDiagram.mockResolvedValueOnce({ - contentType: 'image/png', - filename: 'image.png', - }); + editorFacade.getDiagram.mockResolvedValueOnce(diagram); launchDrawioEditor({ editorFacade }); @@ -193,7 +229,7 @@ describe('drawio/drawio_editor', () => { it('displays an error alert indicating that the image is not a diagram', async () => { expect(createAlert).toHaveBeenCalledWith({ - message: 'The selected image is not a diagram', + message: errorMessage, error: expect.any(Error), }); }); @@ -214,7 +250,7 @@ describe('drawio/drawio_editor', () => { it('displays an error alert indicating the failure', async () => { expect(createAlert).toHaveBeenCalledWith({ - message: 'Cannot load the diagram into the draw.io editor', + message: 'Cannot load the diagram into the diagrams.net editor', error: expect.any(Error), }); }); diff --git a/spec/frontend/drawio/markdown_field_editor_facade_spec.js b/spec/frontend/drawio/markdown_field_editor_facade_spec.js index 992dcf0017c..e3eafc63839 100644 --- a/spec/frontend/drawio/markdown_field_editor_facade_spec.js +++ b/spec/frontend/drawio/markdown_field_editor_facade_spec.js @@ -57,6 +57,7 @@ describe('drawio/textareaMarkdownEditor', () => { ); expect(diagram).toEqual({ + diagramURL: imageURL, diagramMarkdown, filename, diagramSvg, |