2019-10-12 21:52:04 +05:30
# frozen_string_literal: true
2018-03-17 18:26:18 +05:30
require 'spec_helper'
2020-06-23 00:09:42 +05:30
RSpec . describe 'Merge request > User creates image diff notes' , :js do
2018-03-17 18:26:18 +05:30
include NoteInteractionHelpers
let ( :project ) { create ( :project , :public , :repository ) }
let ( :user ) { project . creator }
before do
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_url ) . and_return ( '/apple-touch-icon.png' )
2018-11-08 19:23:39 +05:30
allow_any_instance_of ( DiffHelper ) . to receive ( :diff_file_old_blob_raw_url ) . and_return ( '/favicon.png' )
2018-03-17 18:26:18 +05:30
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 and avatar badges, and allows collapsing/expanding the discussion notes' do
indicator = find ( '.js-image-badge' )
badge = find ( '.image-diff-avatar-link .badge' )
expect ( indicator ) . to have_content ( '1' )
expect ( badge ) . to have_content ( '1' )
find ( '.js-diff-notes-toggle' ) . 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
2020-03-13 15:44:24 +05:30
build ( :image_diff_position , file : path , diff_refs : commit . diff_refs )
2018-03-17 18:26:18 +05:30
end
let ( :note2_position ) do
2020-03-13 15:44:24 +05:30
build ( :image_diff_position , file : path , diff_refs : commit . diff_refs )
2018-03-17 18:26:18 +05:30
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, diff notes, and avatar badge numbers' do
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-03-13 15:44:24 +05:30
build ( :image_diff_position , file : path , diff_refs : merge_request . diff_refs )
2018-03-17 18:26:18 +05:30
end
let! ( :note ) { create ( :diff_note_on_merge_request , project : project , noteable : merge_request , position : position ) }
2019-02-15 15:39:39 +05:30
shared_examples 'creates image diff note' do
2018-03-17 18:26:18 +05:30
before do
visit diffs_project_merge_request_path ( project , merge_request , view : view )
2019-02-15 15:39:39 +05:30
wait_for_requests
2018-03-17 18:26:18 +05:30
create_image_diff_note
end
2020-07-28 23:09:34 +05:30
it 'shows indicator and avatar badges, and allows collapsing/expanding the discussion notes' , quarantine : 'https://gitlab.com/gitlab-org/gitlab/-/issues/27950' do
2018-03-17 18:26:18 +05:30
indicator = find ( '.js-image-badge' , match : :first )
2018-12-13 13:39:08 +05:30
badge = find ( '.user-avatar-link .badge' , match : :first )
2018-03-17 18:26:18 +05:30
expect ( indicator ) . to have_content ( '1' )
expect ( badge ) . to have_content ( '1' )
page . all ( '.js-diff-notes-toggle' ) [ 0 ] . click
page . all ( '.js-diff-notes-toggle' ) [ 1 ] . click
expect ( page ) . not_to have_content ( 'image diff test comment' )
page . all ( '.js-diff-notes-toggle' ) [ 0 ] . click
page . all ( '.js-diff-notes-toggle' ) [ 1 ] . click
expect ( page ) . to have_content ( 'image diff test comment' )
end
end
2019-02-15 15:39:39 +05:30
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
expect ( page . all ( '.diff-file span.label-lfs' , visible : :all ) ) . not_to be_empty
end
it_behaves_like 'creates image diff note'
end
2018-03-17 18:26:18 +05:30
end
end
describe 'discussion tab polling' 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
2020-03-13 15:44:24 +05:30
build ( :image_diff_position , file : path , diff_refs : merge_request . diff_refs )
2018-03-17 18:26:18 +05:30
end
before do
visit project_merge_request_path ( project , merge_request )
end
2018-12-13 13:39:08 +05:30
it 'render diff indicators within the image frame' do
2018-03-17 18:26:18 +05:30
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
2019-07-31 22:56:46 +05:30
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' ) )
2018-03-17 18:26:18 +05:30
end
2019-07-31 22:56:46 +05:30
it 'shows both images at the same position' do
drag_and_drop_by ( find ( '.swipe-bar' ) , 40 , 0 )
2018-03-17 18:26:18 +05:30
2019-07-31 22:56:46 +05:30
expect ( left_position ( '.frame.added img' ) )
. to eq ( left_position ( '.frame.deleted img' ) )
2018-03-17 18:26:18 +05:30
end
2019-07-31 22:56:46 +05:30
end
2018-03-17 18:26:18 +05:30
2019-07-31 22:56:46 +05:30
shared_examples 'onion skin' do
it 'resets opacity when toggling between view modes' do
2018-03-17 18:26:18 +05:30
# 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-07-31 22:56:46 +05:30
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-04-08 14:13:33 +05:30
describe 'swipe view' , quarantine : 'https://gitlab.com/gitlab-org/gitlab/-/issues/209999' do
2019-07-31 22:56:46 +05:30
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
2018-03-17 18:26:18 +05:30
find ( '.view-modes-menu .swipe' ) . click
2019-07-31 22:56:46 +05:30
end
def switch_to_onion_skin
2018-03-17 18:26:18 +05:30
find ( '.view-modes-menu .onion-skin' ) . click
2019-07-31 22:56:46 +05:30
end
2018-03-17 18:26:18 +05:30
2019-07-31 22:56:46 +05:30
describe 'onion skin' do
before do
switch_to_onion_skin
end
it 'resizes image' do
expect ( find ( '.onion-skin-frame' ) [ 'style' ] ) . to match ( 'width: 228px; height: 240px;' )
end
it_behaves_like 'onion skin'
end
describe 'swipe view' do
before do
switch_to_swipe_view
end
it_behaves_like 'swipe view'
2018-03-17 18:26:18 +05:30
end
end
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
2019-07-07 11:18:12 +05:30
expand_text = 'Click to expand it.'
2019-09-04 21:01:54 +05:30
page . all ( 'a' , text : expand_text , wait : false ) . each do | element |
2019-07-07 11:18:12 +05:30
element . click
end
2018-03-17 18:26:18 +05:30
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-07-31 22:56:46 +05:30
def left_position ( element )
page . evaluate_script ( " document.querySelectorAll(' #{ element } ')[0].getBoundingClientRect().left; " )
end
2018-03-17 18:26:18 +05:30
end