spec/features/markdown/keyboard_shortcuts_spec.rb


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

# frozen_string_literal: true

require 'spec_helper'

RSpec.describe 'Markdown keyboard shortcuts', :js do
  let_it_be(:project) { create(:project, :repository) }
  let_it_be(:user) { create(:user) }

  let(:is_mac) { page.evaluate_script('navigator.platform').include?('Mac') }
  let(:modifier_key) { is_mac ? :command : :control }
  let(:other_modifier_key) { is_mac ? :control : :command }

  before do
    project.add_developer(user)

    gitlab_sign_in(user)

    visit path_to_visit

    wait_for_requests
  end

  shared_examples 'keyboard shortcuts' do
    it 'bolds text when <modifier>+B is pressed' do
      type_and_select('bold')

      markdown_field.send_keys([modifier_key, 'b'])

      expect(markdown_field.value).to eq('**bold**')
    end

    it 'italicizes text when <modifier>+I is pressed' do
      type_and_select('italic')

      markdown_field.send_keys([modifier_key, 'i'])

      expect(markdown_field.value).to eq('_italic_')
    end

    it 'links text when <modifier>+K is pressed' do
      type_and_select('link')

      markdown_field.send_keys([modifier_key, 'k'])

      expect(markdown_field.value).to eq('[link](url)')

      # Type some more text to ensure the cursor
      # and selection are set correctly
      markdown_field.send_keys('https://example.com')

      expect(markdown_field.value).to eq('[link](https://example.com)')
    end

    it 'does not affect non-markdown fields on the same page' do
      non_markdown_field.send_keys('some text')

      non_markdown_field.send_keys([modifier_key, 'b'])

      expect(focused_element).to eq(non_markdown_field.native)
      expect(markdown_field.value).to eq('')
    end
  end

  shared_examples 'no side effects' do
    it 'does not bold text when <other modifier>+B is pressed' do
      type_and_select('bold')

      markdown_field.send_keys([@other_modifier_key, 'b'])

      expect(markdown_field.value).not_to eq('**bold**')
    end

    it 'does not italicize text when <other modifier>+I is pressed' do
      type_and_select('italic')

      markdown_field.send_keys([@other_modifier_key, 'i'])

      expect(markdown_field.value).not_to eq('_italic_')
    end

    it 'does not link text when <other modifier>+K is pressed' do
      type_and_select('link')

      markdown_field.send_keys([@other_modifier_key, 'k'])

      expect(markdown_field.value).not_to eq('[link](url)')
    end
  end

  context 'Vue.js markdown editor' do
    let(:path_to_visit) { new_project_release_path(project) }
    let(:markdown_field) { find_field('Release notes') }
    let(:non_markdown_field) { find_field('Release title') }

    it_behaves_like 'keyboard shortcuts'
    it_behaves_like 'no side effects'
  end

  context 'Haml markdown editor' do
    let(:path_to_visit) { new_project_issue_path(project) }
    let(:markdown_field) { find_field('Description') }
    let(:non_markdown_field) { find_field('Title') }

    it_behaves_like 'keyboard shortcuts'
    it_behaves_like 'no side effects'
  end

  def type_and_select(text)
    markdown_field.send_keys(text)

    text.length.times do
      markdown_field.send_keys([:shift, :arrow_left])
    end
  end

  def focused_element
    page.driver.browser.switch_to.active_element
  end
end