diff options
author | ftab <fury@xibase.com> | 2019-04-23 07:25:06 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-04-23 07:25:06 +0000 |
commit | 3dfd2451b0dfae67f14e338e61c8415fcb0e5d08 (patch) | |
tree | fdac1ec427ba701f97d94d59e09c9bb9a70d3eac /spec/features/merge_request/user_creates_image_diff_notes_spec.rb | |
parent | dfb2c3784e06684e3d76b0f9b30906ef086b938a (diff) | |
download | gitlab-ce-3dfd2451b0dfae67f14e338e61c8415fcb0e5d08.tar.gz |
Make swipe view images line up
If left without a width/height, swipeFrame goes off track when the image
isn't wide enough to fill the available width. The spaceLeft prevented
reaching the right edge of the image.
Diffstat (limited to 'spec/features/merge_request/user_creates_image_diff_notes_spec.rb')
-rw-r--r-- | spec/features/merge_request/user_creates_image_diff_notes_spec.rb | 114 |
1 files changed, 104 insertions, 10 deletions
diff --git a/spec/features/merge_request/user_creates_image_diff_notes_spec.rb b/spec/features/merge_request/user_creates_image_diff_notes_spec.rb index 65de0afae0c..5db54f42264 100644 --- a/spec/features/merge_request/user_creates_image_diff_notes_spec.rb +++ b/spec/features/merge_request/user_creates_image_diff_notes_spec.rb @@ -191,29 +191,119 @@ describe 'Merge request > User creates image diff notes', :js do end end - describe 'image view modes' do - before do - visit project_commit_path(project, '2f63565e7aac07bcdadb654e253078b727143ec4') + 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')) end - it 'resizes image in onion skin view mode' do - find('.view-modes-menu .onion-skin').click + it 'shows both images at the same position' do + drag_and_drop_by(find('.swipe-bar'), 40, 0) - expect(find('.onion-skin-frame')['style']).to match('width: 228px; height: 240px;') + expect(left_position('.frame.added img')) + .to eq(left_position('.frame.deleted img')) end + end - it 'resets onion skin view mode opacity when toggling between view modes' do - find('.view-modes-menu .onion-skin').click - + shared_examples 'onion skin' do + it 'resets opacity when toggling between view modes' do # 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;') + 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 + + describe 'swipe view' do + 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 find('.view-modes-menu .swipe').click + end + + def switch_to_onion_skin find('.view-modes-menu .onion-skin').click + end - expect(find('.onion-skin-frame .frame.added', visible: false)['style']).to match('opacity: 1;') + 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' end end @@ -232,4 +322,8 @@ describe 'Merge request > User creates image diff notes', :js do click_button 'Comment' wait_for_requests end + + def left_position(element) + page.evaluate_script("document.querySelectorAll('#{element}')[0].getBoundingClientRect().left;") + end end |