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

content_editor_shared_examples.rb « features « shared_examples « support « spec - gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
blob: 3fa7beea97ebe162a120beba9a8cbb31e4616fa0 (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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
# frozen_string_literal: true

RSpec.shared_examples 'edits content using the content editor' do
  content_editor_testid = '[data-testid="content-editor"] [contenteditable].ProseMirror'

  describe 'formatting bubble menu' do
    it 'shows a formatting bubble menu for a regular paragraph' do
      expect(page).to have_css(content_editor_testid)

      find(content_editor_testid).send_keys 'Typing text in the content editor'
      find(content_editor_testid).send_keys [:shift, :left]

      expect(page).to have_css('[data-testid="formatting-bubble-menu"]')
    end

    it 'does not show a formatting bubble menu for code blocks' do
      find(content_editor_testid).send_keys '```js '

      expect(page).not_to have_css('[data-testid="formatting-bubble-menu"]')
    end
  end

  describe 'code block' do
    before do
      visit(profile_preferences_path)

      find('.syntax-theme').choose('Dark')

      wait_for_requests

      page.go_back
      refresh
    end

    it 'applies theme classes to code blocks' do
      expect(page).not_to have_css('.content-editor-code-block.code.highlight.dark')

      find(content_editor_testid).send_keys [:enter, :enter]
      find(content_editor_testid).send_keys '```js ' # trigger input rule
      find(content_editor_testid).send_keys 'var a = 0'

      expect(page).to have_css('.content-editor-code-block.code.highlight.dark')
    end
  end

  describe 'code block bubble menu' do
    it 'shows a code block bubble menu for a code block' do
      find(content_editor_testid).send_keys [:enter, :enter]

      find(content_editor_testid).send_keys '```js ' # trigger input rule
      find(content_editor_testid).send_keys 'var a = 0'
      find(content_editor_testid).send_keys [:shift, :left]

      expect(page).not_to have_css('[data-testid="formatting-bubble-menu"]')
      expect(page).to have_css('[data-testid="code-block-bubble-menu"]')
    end

    it 'sets code block type to "javascript" for `js`' do
      find(content_editor_testid).send_keys [:enter, :enter]

      find(content_editor_testid).send_keys '```js '
      find(content_editor_testid).send_keys 'var a = 0'

      expect(find('[data-testid="code-block-bubble-menu"]')).to have_text('Javascript')
    end

    it 'sets code block type to "Custom (nomnoml)" for `nomnoml`' do
      find(content_editor_testid).send_keys [:enter, :enter]

      find(content_editor_testid).send_keys '```nomnoml '
      find(content_editor_testid).send_keys 'test'

      expect(find('[data-testid="code-block-bubble-menu"]')).to have_text('Custom (nomnoml)')
    end
  end

  describe 'mermaid diagram' do
    before do
      find(content_editor_testid).send_keys [:enter, :enter]

      find(content_editor_testid).send_keys '```mermaid '
      find(content_editor_testid).send_keys ['graph TD;', :enter, '  JohnDoe12 --> HelloWorld34']
    end

    it 'renders and updates the diagram correctly in a sandboxed iframe' do
      iframe = find(content_editor_testid).find('iframe')
      expect(iframe['src']).to include('/-/sandbox/mermaid')

      within_frame(iframe) do
        expect(find('svg').text).to include('JohnDoe12')
        expect(find('svg').text).to include('HelloWorld34')
      end

      expect(iframe['height'].to_i).to be > 100

      find(content_editor_testid).send_keys [:enter, '  JaneDoe34 --> HelloWorld56']

      within_frame(iframe) do
        page.has_content?('JaneDoe34')

        expect(find('svg').text).to include('JaneDoe34')
        expect(find('svg').text).to include('HelloWorld56')
      end
    end

    it 'toggles the diagram when preview button is clicked' do
      find('[data-testid="preview-diagram"]').click

      expect(find(content_editor_testid)).not_to have_selector('iframe')

      find('[data-testid="preview-diagram"]').click

      iframe = find(content_editor_testid).find('iframe')

      within_frame(iframe) do
        expect(find('svg').text).to include('JohnDoe12')
        expect(find('svg').text).to include('HelloWorld34')
      end
    end
  end
end