Add latest changes from gitlab-org/gitlab@master

2 files changed, 28 insertions, 28 deletions

diff --git a/spec/frontend/ide/components/preview/clientside_spec.js b/spec/frontend/ide/components/preview/clientside_spec.js
index cf768114e70..51e6a9d9034 100644
--- a/spec/frontend/ide/components/preview/clientside_spec.js
+++ b/spec/frontend/ide/components/preview/clientside_spec.js
@@ -2,15 +2,15 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import { dispatch } from 'codesandbox-api';
-import smooshpack from 'smooshpack';
+import { SandpackClient } from '@codesandbox/sandpack-client';
 import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
 import Clientside from '~/ide/components/preview/clientside.vue';
 import { PING_USAGE_PREVIEW_KEY, PING_USAGE_PREVIEW_SUCCESS_KEY } from '~/ide/constants';
 import eventHub from '~/ide/eventhub';
 
-jest.mock('smooshpack', () => ({
-  Manager: jest.fn(),
+jest.mock('@codesandbox/sandpack-client', () => ({
+  SandpackClient: jest.fn(),
 }));
 
 Vue.use(Vuex);
@@ -78,8 +78,8 @@ describe('IDE clientside preview', () => {
     // eslint-disable-next-line no-restricted-syntax
     wrapper.setData({
       sandpackReady: true,
-      manager: {
-        listener: jest.fn(),
+      client: {
+        cleanup: jest.fn(),
         updatePreview: jest.fn(),
       },
     });
@@ -90,9 +90,9 @@ describe('IDE clientside preview', () => {
   });
 
   describe('without main entry', () => {
-    it('creates sandpack manager', () => {
+    it('creates sandpack client', () => {
       createComponent();
-      expect(smooshpack.Manager).not.toHaveBeenCalled();
+      expect(SandpackClient).not.toHaveBeenCalled();
     });
   });
   describe('with main entry', () => {
@@ -102,8 +102,8 @@ describe('IDE clientside preview', () => {
       return waitForPromises();
     });
 
-    it('creates sandpack manager', () => {
-      expect(smooshpack.Manager).toHaveBeenCalledWith(
+    it('creates sandpack client', () => {
+      expect(SandpackClient).toHaveBeenCalledWith(
         '#ide-preview',
         expectedSandpackOptions(),
         expectedSandpackSettings(),
@@ -141,8 +141,8 @@ describe('IDE clientside preview', () => {
       return waitForPromises();
     });
 
-    it('creates sandpack manager with bundlerURL', () => {
-      expect(smooshpack.Manager).toHaveBeenCalledWith('#ide-preview', expectedSandpackOptions(), {
+    it('creates sandpack client with bundlerURL', () => {
+      expect(SandpackClient).toHaveBeenCalledWith('#ide-preview', expectedSandpackOptions(), {
         ...expectedSandpackSettings(),
         bundlerURL: TEST_BUNDLER_URL,
       });
@@ -156,8 +156,8 @@ describe('IDE clientside preview', () => {
       return waitForPromises();
     });
 
-    it('creates sandpack manager', () => {
-      expect(smooshpack.Manager).toHaveBeenCalledWith(
+    it('creates sandpack client', () => {
+      expect(SandpackClient).toHaveBeenCalledWith(
         '#ide-preview',
         {
           files: {},
@@ -332,7 +332,7 @@ describe('IDE clientside preview', () => {
     });
 
     describe('update', () => {
-      it('initializes manager if manager is empty', () => {
+      it('initializes client if client is empty', () => {
         createComponent({ getters: { packageJson: dummyPackageJson } });
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -340,7 +340,7 @@ describe('IDE clientside preview', () => {
         wrapper.vm.update();
 
         return waitForPromises().then(() => {
-          expect(smooshpack.Manager).toHaveBeenCalled();
+          expect(SandpackClient).toHaveBeenCalled();
         });
       });
 
@@ -349,7 +349,7 @@ describe('IDE clientside preview', () => {
 
         wrapper.vm.update();
 
-        expect(wrapper.vm.manager.updatePreview).toHaveBeenCalledWith(wrapper.vm.sandboxOpts);
+        expect(wrapper.vm.client.updatePreview).toHaveBeenCalledWith(wrapper.vm.sandboxOpts);
       });
     });
 
@@ -361,7 +361,7 @@ describe('IDE clientside preview', () => {
       });
 
       it('calls updatePreview', () => {
-        expect(wrapper.vm.manager.updatePreview).toHaveBeenCalledWith(wrapper.vm.sandboxOpts);
+        expect(wrapper.vm.client.updatePreview).toHaveBeenCalledWith(wrapper.vm.sandboxOpts);
       });
     });
   });
@@ -405,7 +405,7 @@ describe('IDE clientside preview', () => {
 
     beforeEach(() => {
       createInitializedComponent();
-      spy = wrapper.vm.manager.updatePreview;
+      spy = wrapper.vm.client.updatePreview;
       wrapper.destroy();
     });
 
diff --git a/spec/frontend/ide/components/preview/navigator_spec.js b/spec/frontend/ide/components/preview/navigator_spec.js
index 9c4f825ccf5..532cb6e795c 100644
--- a/spec/frontend/ide/components/preview/navigator_spec.js
+++ b/spec/frontend/ide/components/preview/navigator_spec.js
@@ -11,7 +11,7 @@ jest.mock('codesandbox-api', () => ({
 
 describe('IDE clientside preview navigator', () => {
   let wrapper;
-  let manager;
+  let client;
   let listenHandler;
 
   const findBackButton = () => wrapper.findAll('button').at(0);
@@ -20,9 +20,9 @@ describe('IDE clientside preview navigator', () => {
 
   beforeEach(() => {
     listen.mockClear();
-    manager = { bundlerURL: TEST_HOST, iframe: { src: '' } };
+    client = { bundlerURL: TEST_HOST, iframe: { src: '' } };
 
-    wrapper = shallowMount(ClientsideNavigator, { propsData: { manager } });
+    wrapper = shallowMount(ClientsideNavigator, { propsData: { client } });
     [[listenHandler]] = listen.mock.calls;
   });
 
@@ -31,7 +31,7 @@ describe('IDE clientside preview navigator', () => {
   });
 
   it('renders readonly URL bar', async () => {
-    listenHandler({ type: 'urlchange', url: manager.bundlerURL });
+    listenHandler({ type: 'urlchange', url: client.bundlerURL });
     await nextTick();
     expect(wrapper.find('input[readonly]').element.value).toBe('/');
   });
@@ -89,13 +89,13 @@ describe('IDE clientside preview navigator', () => {
       expect(findBackButton().attributes('disabled')).toBe('disabled');
     });
 
-    it('updates manager iframe src', async () => {
+    it('updates client iframe src', async () => {
       listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
       listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` });
       await nextTick();
       findBackButton().trigger('click');
 
-      expect(manager.iframe.src).toBe(`${TEST_HOST}/url1`);
+      expect(client.iframe.src).toBe(`${TEST_HOST}/url1`);
     });
   });
 
@@ -133,13 +133,13 @@ describe('IDE clientside preview navigator', () => {
       expect(findForwardButton().attributes('disabled')).toBe('disabled');
     });
 
-    it('updates manager iframe src', async () => {
+    it('updates client iframe src', async () => {
       listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
       listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` });
       await nextTick();
       findBackButton().trigger('click');
 
-      expect(manager.iframe.src).toBe(`${TEST_HOST}/url1`);
+      expect(client.iframe.src).toBe(`${TEST_HOST}/url1`);
     });
   });
 
@@ -152,10 +152,10 @@ describe('IDE clientside preview navigator', () => {
     });
 
     it('calls refresh with current path', () => {
-      manager.iframe.src = 'something-other';
+      client.iframe.src = 'something-other';
       findRefreshButton().trigger('click');
 
-      expect(manager.iframe.src).toBe(url);
+      expect(client.iframe.src).toBe(url);
     });
   });
 });