Add latest changes from gitlab-org/gitlab@master

2 files changed, 39 insertions, 57 deletions

diff --git a/spec/frontend/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
index 8deb466b33c..977e7c9c38c 100644
--- a/spec/frontend/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,5 @@
 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { compileToFunctions } from 'vue-template-compiler';
 
 import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
@@ -51,31 +51,28 @@ describe('ImageDiffViewer', () => {
     wrapper.destroy();
   });
 
-  it('renders image diff for replaced', (done) => {
+  it('renders image diff for replaced', async () => {
     createComponent({ ...allProps });
 
-    vm.$nextTick(() => {
-      const metaInfoElements = vm.$el.querySelectorAll('.image-info');
+    await nextTick();
+    const metaInfoElements = vm.$el.querySelectorAll('.image-info');
 
-      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);
+    expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
 
-      expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('2-up');
-      expect(vm.$el.querySelector('.view-modes-menu li:nth-child(2)').textContent.trim()).toBe(
-        'Swipe',
-      );
+    expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL);
 
-      expect(vm.$el.querySelector('.view-modes-menu li:nth-child(3)').textContent.trim()).toBe(
-        'Onion skin',
-      );
+    expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('2-up');
+    expect(vm.$el.querySelector('.view-modes-menu li:nth-child(2)').textContent.trim()).toBe(
+      'Swipe',
+    );
 
-      expect(metaInfoElements.length).toBe(2);
-      expect(metaInfoElements[0]).toHaveText('2.00 KiB');
-      expect(metaInfoElements[1]).toHaveText('1.00 KiB');
+    expect(vm.$el.querySelector('.view-modes-menu li:nth-child(3)').textContent.trim()).toBe(
+      'Onion skin',
+    );
 
-      done();
-    });
+    expect(metaInfoElements.length).toBe(2);
+    expect(metaInfoElements[0]).toHaveText('2.00 KiB');
+    expect(metaInfoElements[1]).toHaveText('1.00 KiB');
   });
 
   it('renders image diff for new', (done) => {
@@ -151,13 +148,11 @@ describe('ImageDiffViewer', () => {
       });
     });
 
-    it('switches to Swipe Mode', (done) => {
+    it('switches to Swipe Mode', async () => {
       vm.$el.querySelector('.view-modes-menu li:nth-child(2)').click();
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('Swipe');
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('Swipe');
     });
   });
 
@@ -170,29 +165,24 @@ describe('ImageDiffViewer', () => {
       });
     });
 
-    it('switches to Onion Skin Mode', (done) => {
+    it('switches to Onion Skin Mode', async () => {
       vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click();
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe(
-          'Onion skin',
-        );
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe(
+        'Onion skin',
+      );
     });
 
-    it('has working drag handler', (done) => {
+    it('has working drag handler', async () => {
       vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click();
 
-      vm.$nextTick(() => {
-        dragSlider(vm.$el.querySelector('.dragger'), document, 20);
+      await nextTick();
+      dragSlider(vm.$el.querySelector('.dragger'), document, 20);
 
-        vm.$nextTick(() => {
-          expect(vm.$el.querySelector('.dragger').style.left).toBe('20px');
-          expect(vm.$el.querySelector('.added.frame').style.opacity).toBe('0.2');
-          done();
-        });
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.dragger').style.left).toBe('20px');
+      expect(vm.$el.querySelector('.added.frame').style.opacity).toBe('0.2');
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js
index b8d3cbebe16..549388c1a5c 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import {
   TRANSITION_LOAD_START,
@@ -126,15 +126,14 @@ describe('Renamed Diff Viewer', () => {
       store = null;
     });
 
-    it('calls the switchToFullDiffFromRenamedFile action when the method is triggered', () => {
+    it('calls the switchToFullDiffFromRenamedFile action when the method is triggered', async () => {
       store.dispatch.mockResolvedValue();
 
       wrapper.vm.switchToFull();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(store.dispatch).toHaveBeenCalledWith('diffs/switchToFullDiffFromRenamedFile', {
-          diffFile,
-        });
+      await nextTick();
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/switchToFullDiffFromRenamedFile', {
+        diffFile,
       });
     });
 
@@ -144,7 +143,7 @@ describe('Renamed Diff Viewer', () => {
       ${STATE_ERRORED} | ${'mockRejectedValue'} | ${'rejected'}
     `(
       'moves through the correct states during a $resolution request',
-      ({ after, resolvePromise }) => {
+      async ({ after, resolvePromise }) => {
         store.dispatch[resolvePromise]();
 
         expect(wrapper.vm.state).toEqual(STATE_IDLING);
@@ -153,16 +152,9 @@ describe('Renamed Diff Viewer', () => {
 
         expect(wrapper.vm.state).toEqual(STATE_LOADING);
 
-        return (
-          wrapper.vm
-            // This tick is needed for when the action (promise) finishes
-            .$nextTick()
-            // This tick waits for the state change in the promise .then/.catch to bubble into the component
-            .then(() => wrapper.vm.$nextTick())
-            .then(() => {
-              expect(wrapper.vm.state).toEqual(after);
-            })
-        );
+        await nextTick(); // This tick is needed for when the action (promise) finishes
+        await nextTick(); // This tick waits for the state change in the promise .then/.catch to bubble into the component
+        expect(wrapper.vm.state).toEqual(after);
       },
     );
   });