Welcome to mirror list, hosted at ThFree Co, Russian Federation.

drawio_diagram_spec.js « extensions « content_editor « frontend « spec - gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
blob: 61dc164c99ad81e44ede7dc3bac8bf070fb4435e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
import Image from '~/content_editor/extensions/image';
import createAssetResolver from '~/content_editor/services/asset_resolver';
import { create } from '~/drawio/content_editor_facade';
import { launchDrawioEditor } from '~/drawio/drawio_editor';
import { createTestEditor, createDocBuilder } from '../test_utils';
import {
  PROJECT_WIKI_ATTACHMENT_IMAGE_HTML,
  PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML,
} from '../test_constants';

jest.mock('~/content_editor/services/asset_resolver');
jest.mock('~/drawio/content_editor_facade');
jest.mock('~/drawio/drawio_editor');

describe('content_editor/extensions/drawio_diagram', () => {
  let tiptapEditor;
  let doc;
  let paragraph;
  let image;
  let drawioDiagram;
  const uploadsPath = '/uploads';
  const renderMarkdown = () => {};

  beforeEach(() => {
    tiptapEditor = createTestEditor({
      extensions: [Image, DrawioDiagram.configure({ uploadsPath, renderMarkdown })],
    });
    const { builders } = createDocBuilder({
      tiptapEditor,
      names: {
        image: { nodeType: Image.name },
        drawioDiagram: { nodeType: DrawioDiagram.name },
      },
    });

    doc = builders.doc;
    paragraph = builders.paragraph;
    image = builders.image;
    drawioDiagram = builders.drawioDiagram;
  });

  describe('parsing', () => {
    it('distinguishes a drawio diagram from an image', () => {
      const expectedDocWithDiagram = doc(
        paragraph(
          drawioDiagram({
            alt: 'test-file',
            canonicalSrc: 'test-file.drawio.svg',
            src: '/group1/project1/-/wikis/test-file.drawio.svg',
          }),
        ),
      );
      const expectedDocWithImage = doc(
        paragraph(
          image({
            alt: 'test-file',
            canonicalSrc: 'test-file.png',
            src: '/group1/project1/-/wikis/test-file.png',
          }),
        ),
      );
      tiptapEditor.commands.setContent(PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML);

      expect(tiptapEditor.state.doc.toJSON()).toEqual(expectedDocWithDiagram.toJSON());

      tiptapEditor.commands.setContent(PROJECT_WIKI_ATTACHMENT_IMAGE_HTML);

      expect(tiptapEditor.state.doc.toJSON()).toEqual(expectedDocWithImage.toJSON());
    });
  });

  describe('createOrEditDiagram command', () => {
    let editorFacade;
    let assetResolver;

    beforeEach(() => {
      editorFacade = {};
      assetResolver = {};
      tiptapEditor.commands.createOrEditDiagram();

      create.mockReturnValueOnce(editorFacade);
      createAssetResolver.mockReturnValueOnce(assetResolver);
    });

    it('creates a new instance of asset resolver', () => {
      expect(createAssetResolver).toHaveBeenCalledWith({ renderMarkdown });
    });

    it('creates a new instance of the content_editor_facade', () => {
      expect(create).toHaveBeenCalledWith({
        tiptapEditor,
        drawioNodeName: DrawioDiagram.name,
        uploadsPath,
        assetResolver,
      });
    });

    it('calls launchDrawioEditor and provides content_editor_facade', () => {
      expect(launchDrawioEditor).toHaveBeenCalledWith({ editorFacade });
    });
  });
});