Merge branch '202196-show-image-file-size-in-diff-view' into 'master'

Show image file size in diff view

See merge request gitlab-org/gitlab!25734

app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue

@@ -112,6 +112,7 @@ export default {
       <div class="image">
         <image-viewer
           :path="imagePath"
+          :file-size="isNew ? newSize : oldSize"
           :inner-css-classes="[
             'frame',
             {

changelogs/unreleased/feature-image-diff-size.yml

+---
+title: All image diffs (except for renamed files) show the image file size in the
+  diff
+merge_request: 25734
+author:
+type: added

spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js → spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js

 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';
 
@@ -9,50 +11,52 @@ describe('ImageDiffViewer', () => {
     newPath: GREEN_BOX_IMAGE_URL,
     oldPath: RED_BOX_IMAGE_URL,
   };
+  const allProps = {
+    ...requiredProps,
+    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,
+    const event = new MouseEvent(eventName, {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      detail: 1,
+      screenX: clientX,
       clientX,
-      0,
-      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(requiredProps);
+    createComponent({ ...allProps });
+
+    vm.$nextTick(() => {
+      const metaInfoElements = vm.$el.querySelectorAll('.image-info');
 
-    setTimeout(() => {
       expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
 
       expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL);
@@ -66,35 +70,35 @@ describe('ImageDiffViewer', () => {
         'Onion skin',
       );
 
+      expect(metaInfoElements.length).toBe(2);
+      expect(metaInfoElements[0]).toHaveText('2.00 KiB');
+      expect(metaInfoElements[1]).toHaveText('1.00 KiB');
+
       done();
     });
   });
 
   it('renders image diff for new', done => {
-    createComponent(
-      Object.assign({}, requiredProps, {
-        diffMode: 'new',
-        oldPath: '',
-      }),
-    );
-
-    setTimeout(() => {
+    createComponent({ ...allProps, diffMode: 'new', oldPath: '' });
+
+    setImmediate(() => {
+      const metaInfoElement = vm.$el.querySelector('.image-info');
+
       expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
+      expect(metaInfoElement).toHaveText('1.00 KiB');
 
       done();
     });
   });
 
   it('renders image diff for deleted', done => {
-    createComponent(
-      Object.assign({}, requiredProps, {
-        diffMode: 'deleted',
-        newPath: '',
-      }),
-    );
-
-    setTimeout(() => {
+    createComponent({ ...allProps, diffMode: 'deleted', newPath: '' });
+
+    setImmediate(() => {
+      const metaInfoElement = vm.$el.querySelector('.image-info');
+
       expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL);
+      expect(metaInfoElement).toHaveText('2.00 KiB');
 
       done();
     });
@@ -105,26 +109,40 @@ describe('ImageDiffViewer', () => {
       components: {
         imageDiffViewer,
       },
-      template: `
-        <image-diff-viewer diff-mode="renamed" new-path="${GREEN_BOX_IMAGE_URL}" old-path="">
+      data: {
+        ...allProps,
+        diffMode: 'renamed',
+      },
+      ...compileToFunctions(`
+        <image-diff-viewer
+          :diff-mode="diffMode"
+          :new-path="newPath"
+          :old-path="oldPath"
+          :new-size="newSize"
+          :old-size="oldSize"
+        >
           <span slot="image-overlay" class="overlay">test</span>
         </image-diff-viewer>
-      `,
+      `),
     }).$mount();
 
-    setTimeout(() => {
+    setImmediate(() => {
+      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(() => {
+      setImmediate(() => {
         done();
       });
     });
@@ -141,9 +159,9 @@ describe('ImageDiffViewer', () => {
 
   describe('onionSkin', () => {
     beforeEach(done => {
-      createComponent(requiredProps);
+      createComponent({ ...requiredProps });
 
-      setTimeout(() => {
+      setImmediate(() => {
         done();
       });
     });
@@ -163,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');