From 1f63581a972dac3c569a578f7944f5a82f039c66 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Fri, 21 Feb 2020 18:15:31 -0700 Subject: [PATCH 1/3] Ensure that the image size always appears ...regardless of the diffMode that occurred --- .../diff_viewer/viewers/image_diff_viewer.vue | 1 + .../viewers/image_diff_viewer_spec.js | 53 +++++++++++++------ 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue index e30871b66fcce5..6f5a133b225233 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue @@ -112,6 +112,7 @@ export default {
+ test `, }).$mount(); setTimeout(() => { + const metaInfoElement = vm.$el.querySelector('.image-info'); + expect(vm.$el.querySelector('img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL); expect(vm.$el.querySelector('.overlay')).not.toBe(null); + expect(metaInfoElement).toHaveText('2.00 KiB'); + done(); }); }); describe('swipeMode', () => { beforeEach(done => { - createComponent(requiredProps); + createComponent({ ...requiredProps }); setTimeout(() => { done(); @@ -141,7 +162,7 @@ describe('ImageDiffViewer', () => { describe('onionSkin', () => { beforeEach(done => { - createComponent(requiredProps); + createComponent({ ...requiredProps }); setTimeout(() => { done(); -- GitLab From 55bd77be2b43d47da7ba10364c9c6fafdb1284c2 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Fri, 28 Feb 2020 13:14:41 -0700 Subject: [PATCH 2/3] Add changelog file --- changelogs/unreleased/feature-image-diff-size.yml | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 changelogs/unreleased/feature-image-diff-size.yml diff --git a/changelogs/unreleased/feature-image-diff-size.yml b/changelogs/unreleased/feature-image-diff-size.yml new file mode 100644 index 00000000000000..0217f6b8018d6d --- /dev/null +++ b/changelogs/unreleased/feature-image-diff-size.yml @@ -0,0 +1,6 @@ +--- +title: All image diffs (except for renamed files) show the image file size in the + diff +merge_request: 25734 +author: +type: added -- GitLab From 71ac09ac253f95f2d378e43c79c826f797aebcf2 Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Wed, 26 Feb 2020 16:36:14 -0700 Subject: [PATCH 3/3] Move test file to Jest to make CI pass This also switches the `initMouseEvent` stuff to not use the deprecated API. In the process, I stopped explicitly defining values that default to the same thing. --- .../viewers/image_diff_viewer_spec.js | 61 +++++++++---------- 1 file changed, 29 insertions(+), 32 deletions(-) rename spec/{javascripts => frontend}/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js (83%) diff --git a/spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js similarity index 83% rename from spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js rename to spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js index 89c9892b75f01d..f364f3748878c7 100644 --- a/spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js +++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js @@ -1,5 +1,7 @@ import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import { compileToFunctions } from 'vue-template-compiler'; +import { mount } from '@vue/test-utils'; + import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants'; import imageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue'; @@ -14,50 +16,45 @@ describe('ImageDiffViewer', () => { oldSize: 2048, newSize: 1024, }; + let wrapper; let vm; function createComponent(props) { const ImageDiffViewer = Vue.extend(imageDiffViewer); - vm = mountComponent(ImageDiffViewer, props); + wrapper = mount(ImageDiffViewer, { propsData: props }); + vm = wrapper.vm; } const triggerEvent = (eventName, el = vm.$el, clientX = 0) => { - const event = document.createEvent('MouseEvents'); - event.initMouseEvent( - eventName, - true, - true, - window, - 1, - clientX, - 0, + const event = new MouseEvent(eventName, { + bubbles: true, + cancelable: true, + view: window, + detail: 1, + screenX: clientX, clientX, - 0, - false, - false, - false, - false, - 0, - null, - ); + }); + + // JSDOM does not implement experimental APIs + event.pageX = clientX; el.dispatchEvent(event); }; - const dragSlider = (sliderElement, dragPixel = 20) => { + const dragSlider = (sliderElement, doc, dragPixel) => { triggerEvent('mousedown', sliderElement); - triggerEvent('mousemove', document.body, dragPixel); - triggerEvent('mouseup', document.body); + triggerEvent('mousemove', doc.body, dragPixel); + triggerEvent('mouseup', doc.body); }; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); it('renders image diff for replaced', done => { createComponent({ ...allProps }); - setTimeout(() => { + vm.$nextTick(() => { const metaInfoElements = vm.$el.querySelectorAll('.image-info'); expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL); @@ -84,7 +81,7 @@ describe('ImageDiffViewer', () => { it('renders image diff for new', done => { createComponent({ ...allProps, diffMode: 'new', oldPath: '' }); - setTimeout(() => { + setImmediate(() => { const metaInfoElement = vm.$el.querySelector('.image-info'); expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL); @@ -97,7 +94,7 @@ describe('ImageDiffViewer', () => { it('renders image diff for deleted', done => { createComponent({ ...allProps, diffMode: 'deleted', newPath: '' }); - setTimeout(() => { + setImmediate(() => { const metaInfoElement = vm.$el.querySelector('.image-info'); expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL); @@ -116,7 +113,7 @@ describe('ImageDiffViewer', () => { ...allProps, diffMode: 'renamed', }, - template: ` + ...compileToFunctions(` { > test - `, + `), }).$mount(); - setTimeout(() => { + setImmediate(() => { const metaInfoElement = vm.$el.querySelector('.image-info'); expect(vm.$el.querySelector('img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL); @@ -145,7 +142,7 @@ describe('ImageDiffViewer', () => { beforeEach(done => { createComponent({ ...requiredProps }); - setTimeout(() => { + setImmediate(() => { done(); }); }); @@ -164,7 +161,7 @@ describe('ImageDiffViewer', () => { beforeEach(done => { createComponent({ ...requiredProps }); - setTimeout(() => { + setImmediate(() => { done(); }); }); @@ -184,7 +181,7 @@ describe('ImageDiffViewer', () => { vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click(); vm.$nextTick(() => { - dragSlider(vm.$el.querySelector('.dragger')); + dragSlider(vm.$el.querySelector('.dragger'), document, 20); vm.$nextTick(() => { expect(vm.$el.querySelector('.dragger').style.left).toBe('20px'); -- GitLab