Add latest changes from gitlab-org/gitlab@master

5 files changed, 79 insertions, 16 deletions

diff --git a/spec/frontend/ide/components/preview/clientside_spec.js b/spec/frontend/ide/components/preview/clientside_spec.js
index 7b22f75cee4..220982e1fd9 100644
--- a/spec/frontend/ide/components/preview/clientside_spec.js
+++ b/spec/frontend/ide/components/preview/clientside_spec.js
@@ -3,6 +3,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import smooshpack from 'smooshpack';
 import Clientside from '~/ide/components/preview/clientside.vue';
+import eventHub from '~/ide/eventhub';
 
 jest.mock('smooshpack', () => ({
   Manager: jest.fn(),
@@ -70,6 +71,17 @@ describe('IDE clientside preview', () => {
     });
   };
 
+  const createInitializedComponent = () => {
+    createComponent();
+    wrapper.setData({
+      sandpackReady: true,
+      manager: {
+        listener: jest.fn(),
+        updatePreview: jest.fn(),
+      },
+    });
+  };
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -293,33 +305,33 @@ describe('IDE clientside preview', () => {
     });
 
     describe('update', () => {
-      beforeEach(() => {
-        createComponent();
-        wrapper.setData({ sandpackReady: true });
-      });
-
       it('initializes manager if manager is empty', () => {
         createComponent({ getters: { packageJson: dummyPackageJson } });
         wrapper.setData({ sandpackReady: true });
         wrapper.vm.update();
 
-        jest.advanceTimersByTime(250);
-
         return waitForCalls().then(() => {
           expect(smooshpack.Manager).toHaveBeenCalled();
         });
       });
 
       it('calls updatePreview', () => {
-        wrapper.setData({
-          manager: {
-            listener: jest.fn(),
-            updatePreview: jest.fn(),
-          },
-        });
+        createInitializedComponent();
+
         wrapper.vm.update();
 
-        jest.advanceTimersByTime(250);
+        expect(wrapper.vm.manager.updatePreview).toHaveBeenCalledWith(wrapper.vm.sandboxOpts);
+      });
+    });
+
+    describe('on ide.files.change event', () => {
+      beforeEach(() => {
+        createInitializedComponent();
+
+        eventHub.$emit('ide.files.change');
+      });
+
+      it('calls updatePreview', () => {
         expect(wrapper.vm.manager.updatePreview).toHaveBeenCalledWith(wrapper.vm.sandboxOpts);
       });
     });
@@ -355,4 +367,18 @@ describe('IDE clientside preview', () => {
       });
     });
   });
+
+  describe('when destroyed', () => {
+    let spy;
+
+    beforeEach(() => {
+      createInitializedComponent();
+      spy = wrapper.vm.manager.updatePreview;
+      wrapper.destroy();
+    });
+
+    it('does not call updatePreview', () => {
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/spec/frontend/ide/helpers.js b/spec/frontend/ide/helpers.js
index f9f11d9641c..f815c3d090e 100644
--- a/spec/frontend/ide/helpers.js
+++ b/spec/frontend/ide/helpers.js
@@ -41,5 +41,10 @@ export const createTriggerRenamePayload = (path, newPath) => ({
   newPath,
 });
 
+export const createTriggerUpdatePayload = (path) => ({
+  type: commitActionTypes.update,
+  path,
+});
+
 export const createTriggerRenameAction = (path, newPath) =>
   createTriggerChangeAction(createTriggerRenamePayload(path, newPath));
diff --git a/spec/frontend/ide/stores/actions/file_spec.js b/spec/frontend/ide/stores/actions/file_spec.js
index a9d0c9b3efa..71166234363 100644
--- a/spec/frontend/ide/stores/actions/file_spec.js
+++ b/spec/frontend/ide/stores/actions/file_spec.js
@@ -7,7 +7,7 @@ import * as types from '~/ide/stores/mutation_types';
 import service from '~/ide/services';
 import { createRouter } from '~/ide/ide_router';
 import eventHub from '~/ide/eventhub';
-import { file, createTriggerRenameAction } from '../../helpers';
+import { file, createTriggerRenameAction, createTriggerUpdatePayload } from '../../helpers';
 
 const ORIGINAL_CONTENT = 'original content';
 const RELATIVE_URL_ROOT = '/gitlab';
@@ -510,12 +510,15 @@ describe('IDE store file actions', () => {
 
   describe('changeFileContent', () => {
     let tmpFile;
+    let onFilesChange;
 
     beforeEach(() => {
       tmpFile = file('tmpFile');
       tmpFile.content = '\n';
       tmpFile.raw = '\n';
       store.state.entries[tmpFile.path] = tmpFile;
+      onFilesChange = jest.fn();
+      eventHub.$on('ide.files.change', onFilesChange);
     });
 
     it('updates file content', () => {
@@ -580,6 +583,17 @@ describe('IDE store file actions', () => {
           expect(store.state.changedFiles.length).toBe(0);
         });
     });
+
+    it('triggers ide.files.change', async () => {
+      expect(onFilesChange).not.toHaveBeenCalled();
+
+      await store.dispatch('changeFileContent', {
+        path: tmpFile.path,
+        content: 'content\n',
+      });
+
+      expect(onFilesChange).toHaveBeenCalledWith(createTriggerUpdatePayload(tmpFile.path));
+    });
   });
 
   describe('with changed file', () => {
diff --git a/spec/frontend/ide/stores/modules/editor/setup_spec.js b/spec/frontend/ide/stores/modules/editor/setup_spec.js
index 71b5d7590c5..659bfb2742f 100644
--- a/spec/frontend/ide/stores/modules/editor/setup_spec.js
+++ b/spec/frontend/ide/stores/modules/editor/setup_spec.js
@@ -1,8 +1,9 @@
+import { cloneDeep } from 'lodash';
 import Vuex from 'vuex';
 import eventHub from '~/ide/eventhub';
 import { createStoreOptions } from '~/ide/stores';
 import { setupFileEditorsSync } from '~/ide/stores/modules/editor/setup';
-import { createTriggerRenamePayload } from '../../../helpers';
+import { createTriggerRenamePayload, createTriggerUpdatePayload } from '../../../helpers';
 
 describe('~/ide/stores/modules/editor/setup', () => {
   let store;
@@ -33,6 +34,14 @@ describe('~/ide/stores/modules/editor/setup', () => {
     });
   });
 
+  it('when files update is emitted, does nothing', () => {
+    const origState = cloneDeep(store.state);
+
+    eventHub.$emit('ide.files.change', createTriggerUpdatePayload('foo'));
+
+    expect(store.state).toEqual(origState);
+  });
+
   it('when files rename is emitted, renames fileEditor', () => {
     eventHub.$emit('ide.files.change', createTriggerRenamePayload('foo', 'foo_new'));
 
diff --git a/spec/frontend/ide/stores/plugins/terminal_sync_spec.js b/spec/frontend/ide/stores/plugins/terminal_sync_spec.js
index 2aa3e770e7d..0e5f4184679 100644
--- a/spec/frontend/ide/stores/plugins/terminal_sync_spec.js
+++ b/spec/frontend/ide/stores/plugins/terminal_sync_spec.js
@@ -4,6 +4,7 @@ import { SET_SESSION_STATUS } from '~/ide/stores/modules/terminal/mutation_types
 import { RUNNING, STOPPING } from '~/ide/stores/modules/terminal/constants';
 import { createStore } from '~/ide/stores';
 import eventHub from '~/ide/eventhub';
+import { createTriggerUpdatePayload } from '../../helpers';
 
 jest.mock('~/ide/lib/mirror');
 
@@ -51,6 +52,14 @@ describe('IDE stores/plugins/mirror', () => {
       expect(store.dispatch).toHaveBeenCalledWith(ACTION_UPLOAD);
     });
 
+    it('does nothing when ide.files.change is emitted with "update"', () => {
+      eventHub.$emit(FILES_CHANGE_EVENT, createTriggerUpdatePayload('foo'));
+
+      jest.runAllTimers();
+
+      expect(store.dispatch).not.toHaveBeenCalledWith(ACTION_UPLOAD);
+    });
+
     describe('when session stops', () => {
       beforeEach(() => {
         store.commit(`terminal/${SET_SESSION_STATUS}`, STOPPING);