image_diff_notes_spec.rb 6.78 KB
Newer Older
Felipe Artur's avatar
Felipe Artur committed
1 2
require 'spec_helper'

3
feature 'image diff notes', :js do
Felipe Artur's avatar
Felipe Artur committed
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 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
  include NoteInteractionHelpers

  let(:user) { create(:user) }
  let(:project) { create(:project, :public, :repository) }

  before do
    project.team << [user, :master]
    sign_in user

    # Stub helper to return any blob file as image from public app folder.
    # This is necessary to run this specs since we don't display repo images in capybara.
    allow_any_instance_of(DiffHelper).to receive(:diff_file_blob_raw_path).and_return('/apple-touch-icon.png')
  end

  context 'create commit diff notes' do
    commit_id = '2f63565e7aac07bcdadb654e253078b727143ec4'

    describe 'create a new diff note' do
      before do
        visit project_commit_path(project, commit_id)
        create_image_diff_note
      end

      it 'shows indicator badge on image diff' do
        indicator = find('.js-image-badge')

        expect(indicator).to have_content('1')
      end

      it 'shows the avatar badge on the new note' do
        badge = find('.image-diff-avatar-link .badge')

        expect(badge).to have_content('1')
      end

      it 'allows collapsing/expanding the discussion notes' do
        find('.js-diff-notes-toggle', :first).click

        expect(page).not_to have_content('image diff test comment')

        find('.js-diff-notes-toggle').click

        expect(page).to have_content('image diff test comment')
      end
    end

    describe 'render commit diff notes' do
      let(:path) { "files/images/6049019_460s.jpg" }
      let(:commit) { project.commit('2f63565e7aac07bcdadb654e253078b727143ec4') }

      let(:note1_position) do
        Gitlab::Diff::Position.new(
          old_path: path,
          new_path: path,
          width: 100,
          height: 100,
          x: 10,
          y: 10,
          position_type: "image",
          diff_refs: commit.diff_refs
        )
      end

      let(:note2_position) do
        Gitlab::Diff::Position.new(
          old_path: path,
          new_path: path,
          width: 100,
          height: 100,
          x: 20,
          y: 20,
          position_type: "image",
          diff_refs: commit.diff_refs
        )
      end

      let!(:note1) { create(:diff_note_on_commit, commit_id: commit.id, project: project, position: note1_position, note: 'my note 1') }
      let!(:note2) { create(:diff_note_on_commit, commit_id: commit.id, project: project, position: note2_position, note: 'my note 2') }

      before do
        visit project_commit_path(project, commit.id)
        wait_for_requests
      end

      it 'render diff indicators within the image diff frame' do
        expect(page).to have_css('.js-image-badge', count: 2)
      end

      it 'shows the diff notes' do
        expect(page).to have_css('.diff-content .note', count: 2)
      end

      it 'shows the diff notes with correct avatar badge numbers' do
        expect(page).to have_css('.image-diff-avatar-link', text: 1)
        expect(page).to have_css('.image-diff-avatar-link', text: 2)
      end
    end
  end

  %w(inline parallel).each do |view|
    context "#{view} view" do
      let(:merge_request) { create(:merge_request_with_diffs, :with_image_diffs, source_project: project, author: user) }
      let(:path)          { "files/images/ee_repo_logo.png" }

      let(:position) do
        Gitlab::Diff::Position.new(
          old_path: path,
          new_path: path,
          width: 100,
          height: 100,
          x: 1,
          y: 1,
          position_type: "image",
          diff_refs: merge_request.diff_refs
        )
      end

      let!(:note) { create(:diff_note_on_merge_request, project: project, noteable: merge_request, position: position) }

      describe 'creating a new diff note' do
        before do
          visit diffs_project_merge_request_path(project, merge_request, view: view)
          create_image_diff_note
        end

        it 'shows indicator badge on image diff' do
          indicator = find('.js-image-badge', match: :first)

          expect(indicator).to have_content('1')
        end

        it 'shows the avatar badge on the new note' do
          badge = find('.image-diff-avatar-link .badge', match: :first)

          expect(badge).to have_content('1')
        end

        it 'allows expanding/collapsing the discussion notes' do
142 143
          page.all('.js-diff-notes-toggle')[0].click
          page.all('.js-diff-notes-toggle')[1].click
Felipe Artur's avatar
Felipe Artur committed
144 145 146

          expect(page).not_to have_content('image diff test comment')

147 148
          page.all('.js-diff-notes-toggle')[0].click
          page.all('.js-diff-notes-toggle')[1].click
Felipe Artur's avatar
Felipe Artur committed
149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185

          expect(page).to have_content('image diff test comment')
        end
      end
    end
  end

  describe 'discussion tab polling', :js do
    let(:merge_request) { create(:merge_request_with_diffs, :with_image_diffs, source_project: project, author: user) }
    let(:path)          { "files/images/ee_repo_logo.png" }

    let(:position) do
      Gitlab::Diff::Position.new(
        old_path: path,
        new_path: path,
        width: 100,
        height: 100,
        x: 50,
        y: 50,
        position_type: "image",
        diff_refs: merge_request.diff_refs
      )
    end

    before do
      visit project_merge_request_path(project, merge_request)
    end

    it 'render diff indicators within the image frame' do
      diff_note = create(:diff_note_on_merge_request, project: project, noteable: merge_request, position: position)

      wait_for_requests

      expect(page).to have_selector('.image-comment-badge')
      expect(page).to have_content(diff_note.note)
    end
  end
Clement Ho's avatar
Clement Ho committed
186 187 188 189 190 191 192 193 194 195 196

  describe 'image view modes' do
    before do
      visit project_commit_path(project, '2f63565e7aac07bcdadb654e253078b727143ec4')
    end

    it 'resizes image in onion skin view mode' do
      find('.view-modes-menu .onion-skin').click

      expect(find('.onion-skin-frame')['style']).to match('width: 228px; height: 240px;')
    end
197 198 199 200 201 202 203 204 205 206 207 208 209 210

    it 'resets onion skin view mode opacity when toggling between view modes' do
      find('.view-modes-menu .onion-skin').click

      # Simulate dragging onion-skin slider
      drag_and_drop_by(find('.dragger'), -30, 0)

      expect(find('.onion-skin-frame .frame.added', visible: false)['style']).not_to match('opacity: 1;')

      find('.view-modes-menu .swipe').click
      find('.view-modes-menu .onion-skin').click

      expect(find('.onion-skin-frame .frame.added', visible: false)['style']).to match('opacity: 1;')
    end
Clement Ho's avatar
Clement Ho committed
211
  end
Felipe Artur's avatar
Felipe Artur committed
212

213 214 215 216 217 218 219 220 221 222 223
  def drag_and_drop_by(element, right_by, down_by)
    page.driver.browser.action.drag_and_drop_by(element.native, right_by, down_by).perform
  end

  def create_image_diff_note
    find('.js-add-image-diff-note-button', match: :first).click
    page.all('.js-add-image-diff-note-button')[0].click
    find('.diff-content .note-textarea').native.send_keys('image diff test comment')
    click_button 'Comment'
    wait_for_requests
  end
Felipe Artur's avatar
Felipe Artur committed
224
end