2019-07-25 05:24:42 +00:00
# frozen_string_literal: true
2017-10-07 04:25:17 +00:00
require 'spec_helper'
2020-06-16 18:09:01 +00:00
RSpec . describe 'Merge request > User creates image diff notes' , :js do
2017-10-07 04:25:17 +00:00
include NoteInteractionHelpers
let ( :project ) { create ( :project , :public , :repository ) }
2017-08-01 18:03:07 +00:00
let ( :user ) { project . creator }
2017-10-07 04:25:17 +00:00
before do
2017-08-01 18:03:07 +00:00
sign_in ( user )
2017-10-07 04:25:17 +00:00
# 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.
2017-12-20 17:47:45 +00:00
allow_any_instance_of ( DiffHelper ) . to receive ( :diff_file_blob_raw_url ) . and_return ( '/apple-touch-icon.png' )
2017-12-07 12:15:49 +00:00
allow_any_instance_of ( DiffHelper ) . to receive ( :diff_file_old_blob_raw_url ) . and_return ( '/favicon.png' )
2017-10-07 04:25:17 +00:00
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
2017-08-01 18:03:07 +00:00
it 'shows indicator and avatar badges, and allows collapsing/expanding the discussion notes' do
2017-10-07 04:25:17 +00:00
indicator = find ( '.js-image-badge' )
2022-02-03 12:18:57 +00:00
badge = find ( '.image-diff-avatar-link .design-note-pin' )
2017-10-07 04:25:17 +00:00
2017-08-01 18:03:07 +00:00
expect ( indicator ) . to have_content ( '1' )
2017-10-07 04:25:17 +00:00
expect ( badge ) . to have_content ( '1' )
2017-08-01 18:03:07 +00:00
find ( '.js-diff-notes-toggle' ) . click
2017-10-07 04:25:17 +00:00
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
2020-02-17 18:09:00 +00:00
build ( :image_diff_position , file : path , diff_refs : commit . diff_refs )
2017-10-07 04:25:17 +00:00
end
let ( :note2_position ) do
2020-02-17 18:09:00 +00:00
build ( :image_diff_position , file : path , diff_refs : commit . diff_refs )
2017-10-07 04:25:17 +00:00
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
2017-08-01 18:03:07 +00:00
it 'render diff indicators within the image diff frame, diff notes, and avatar badge numbers' do
2017-10-07 04:25:17 +00:00
expect ( page ) . to have_css ( '.js-image-badge' , count : 2 )
expect ( page ) . to have_css ( '.diff-content .note' , count : 2 )
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 ( :position ) do
2020-02-17 18:09:00 +00:00
build ( :image_diff_position , file : path , diff_refs : merge_request . diff_refs )
2017-10-07 04:25:17 +00:00
end
let! ( :note ) { create ( :diff_note_on_merge_request , project : project , noteable : merge_request , position : position ) }
2018-12-13 17:49:05 +00:00
shared_examples 'creates image diff note' do
2017-10-07 04:25:17 +00:00
before do
visit diffs_project_merge_request_path ( project , merge_request , view : view )
2018-12-13 17:49:05 +00:00
wait_for_requests
2017-10-07 04:25:17 +00:00
create_image_diff_note
end
2020-07-08 06:09:13 +00:00
it 'shows indicator and avatar badges, and allows collapsing/expanding the discussion notes' , quarantine : 'https://gitlab.com/gitlab-org/gitlab/-/issues/27950' do
2017-10-07 04:25:17 +00:00
indicator = find ( '.js-image-badge' , match : :first )
2018-10-18 07:50:38 +00:00
badge = find ( '.user-avatar-link .badge' , match : :first )
2017-10-07 04:25:17 +00:00
2017-08-01 18:03:07 +00:00
expect ( indicator ) . to have_content ( '1' )
2017-10-07 04:25:17 +00:00
expect ( badge ) . to have_content ( '1' )
2017-12-19 17:54:36 +00:00
page . all ( '.js-diff-notes-toggle' ) [ 0 ] . click
page . all ( '.js-diff-notes-toggle' ) [ 1 ] . click
2017-10-07 04:25:17 +00:00
expect ( page ) . not_to have_content ( 'image diff test comment' )
2017-12-19 17:54:36 +00:00
page . all ( '.js-diff-notes-toggle' ) [ 0 ] . click
page . all ( '.js-diff-notes-toggle' ) [ 1 ] . click
2017-10-07 04:25:17 +00:00
expect ( page ) . to have_content ( 'image diff test comment' )
end
end
2018-12-13 17:49:05 +00:00
context 'when images are not stored in LFS' 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' }
it_behaves_like 'creates image diff note'
end
context 'when images are stored in LFS' do
let ( :merge_request ) { create ( :merge_request , source_project : project , target_project : project , source_branch : 'png-lfs' , target_branch : 'master' , author : user ) }
let ( :path ) { 'files/images/logo-black.png' }
before do
allow ( Gitlab . config . lfs ) . to receive ( :enabled ) . and_return ( true )
project . update_attribute ( :lfs_enabled , true )
end
it 'shows lfs badges' do
visit diffs_project_merge_request_path ( project , merge_request , view : view )
wait_for_requests
2022-01-28 12:17:26 +00:00
expect ( page . all ( '[data-testid="label-lfs"]' , visible : :all ) ) . not_to be_empty
2018-12-13 17:49:05 +00:00
end
it_behaves_like 'creates image diff note'
end
2017-10-07 04:25:17 +00:00
end
end
2017-08-01 18:03:07 +00:00
describe 'discussion tab polling' do
2017-10-07 04:25:17 +00:00
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
2020-02-17 18:09:00 +00:00
build ( :image_diff_position , file : path , diff_refs : merge_request . diff_refs )
2017-10-07 04:25:17 +00:00
end
before do
visit project_merge_request_path ( project , merge_request )
end
2018-10-18 07:50:38 +00:00
it 'render diff indicators within the image frame' do
2017-10-07 04:25:17 +00:00
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
2017-12-11 09:50:52 +00:00
2019-04-23 07:25:06 +00:00
shared_examples 'swipe view' do
it 'moves the swipe handle' do
# Simulate dragging swipe view slider
expect { drag_and_drop_by ( find ( '.swipe-bar' ) , 20 , 0 ) }
. to change { find ( '.swipe-bar' ) [ 'style' ] }
. from ( a_string_matching ( 'left: 1px' ) )
2017-12-11 09:50:52 +00:00
end
2019-04-23 07:25:06 +00:00
it 'shows both images at the same position' do
drag_and_drop_by ( find ( '.swipe-bar' ) , 40 , 0 )
2017-12-11 09:50:52 +00:00
2019-04-23 07:25:06 +00:00
expect ( left_position ( '.frame.added img' ) )
. to eq ( left_position ( '.frame.deleted img' ) )
2017-12-11 09:50:52 +00:00
end
2019-04-23 07:25:06 +00:00
end
2017-12-19 17:54:36 +00:00
2019-04-23 07:25:06 +00:00
shared_examples 'onion skin' do
it 'resets opacity when toggling between view modes' do
2017-12-19 17:54:36 +00:00
# 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;' )
2019-04-23 07:25:06 +00:00
switch_to_swipe_view
switch_to_onion_skin
expect ( find ( '.onion-skin-frame .frame.added' , visible : false ) [ 'style' ] ) . to match ( 'opacity: 1;' )
end
end
describe 'changes tab image diff' do
let ( :merge_request ) { create ( :merge_request , source_project : project , target_project : project , target_branch : 'master' , source_branch : 'deleted-image-test' , author : user ) }
before do
visit diffs_project_merge_request_path ( project , merge_request )
click_link " Changes "
end
def set_image_diff_sources
# set path of added and deleted images to something the spec can view
page . execute_script ( " document.querySelector('.frame.added img').src = '/apple-touch-icon.png'; " )
page . execute_script ( " document.querySelector('.frame.deleted img').src = '/favicon.png'; " )
wait_for_requests
expect ( find ( '.frame.added img' , visible : false ) [ 'src' ] ) . to match ( '/apple-touch-icon.png' )
expect ( find ( '.frame.deleted img' , visible : false ) [ 'src' ] ) . to match ( '/favicon.png' )
end
def switch_to_swipe_view
# it isn't given the .swipe class in the merge request diff
find ( '.view-modes-menu li:nth-child(2)' ) . click
expect ( find ( '.view-modes-menu li.active' ) ) . to have_content ( 'Swipe' )
set_image_diff_sources
end
def switch_to_onion_skin
# it isn't given the .onion-skin class in the merge request diff
find ( '.view-modes-menu li:nth-child(3)' ) . click
expect ( find ( '.view-modes-menu li.active' ) ) . to have_content ( 'Onion skin' )
set_image_diff_sources
end
describe 'onion skin' do
before do
switch_to_onion_skin
end
it_behaves_like 'onion skin'
end
2020-03-12 18:09:28 +00:00
describe 'swipe view' , quarantine : 'https://gitlab.com/gitlab-org/gitlab/-/issues/209999' do
2019-04-23 07:25:06 +00:00
before do
switch_to_swipe_view
end
it_behaves_like 'swipe view'
end
end
describe 'image view modes' do
before do
visit project_commit_path ( project , '2f63565e7aac07bcdadb654e253078b727143ec4' )
end
def switch_to_swipe_view
2017-12-19 17:54:36 +00:00
find ( '.view-modes-menu .swipe' ) . click
2019-04-23 07:25:06 +00:00
end
def switch_to_onion_skin
2017-12-19 17:54:36 +00:00
find ( '.view-modes-menu .onion-skin' ) . click
2019-04-23 07:25:06 +00:00
end
2017-12-19 17:54:36 +00:00
2019-04-23 07:25:06 +00:00
describe 'onion skin' do
before do
switch_to_onion_skin
end
it 'resizes image' do
2022-04-27 15:10:01 +00:00
expect ( find ( '.onion-skin-frame' ) [ 'style' ] ) . to match ( 'width: 198px; height: 210px;' )
2019-04-23 07:25:06 +00:00
end
it_behaves_like 'onion skin'
end
describe 'swipe view' do
before do
switch_to_swipe_view
end
it_behaves_like 'swipe view'
2017-12-19 17:54:36 +00:00
end
2017-12-11 09:50:52 +00:00
end
2017-10-07 04:25:17 +00:00
2017-12-19 17:54:36 +00:00
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
2021-05-19 15:10:40 +00:00
wait_for_all_requests
page . all ( 'a' , text : 'Click to expand it.' , wait : false ) . each do | element |
2019-02-15 17:56:50 +00:00
element . click
end
2017-12-19 17:54:36 +00:00
find ( '.js-add-image-diff-note-button' , match : :first ) . click
find ( '.diff-content .note-textarea' ) . native . send_keys ( 'image diff test comment' )
click_button 'Comment'
wait_for_requests
end
2019-04-23 07:25:06 +00:00
def left_position ( element )
page . evaluate_script ( " document.querySelectorAll(' #{ element } ')[0].getBoundingClientRect().left; " )
end
2017-10-07 04:25:17 +00:00
end