Add latest changes from gitlab-org/gitlab@master

2 files changed, 20 insertions, 2 deletions

diff --git a/spec/frontend/ide/components/preview/clientside_spec.js b/spec/frontend/ide/components/preview/clientside_spec.js
index 0c0ddcbbfd3..d6df061ad04 100644
--- a/spec/frontend/ide/components/preview/clientside_spec.js
+++ b/spec/frontend/ide/components/preview/clientside_spec.js
@@ -1,9 +1,11 @@
 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 Vuex from 'vuex';
 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', () => ({
@@ -39,6 +41,7 @@ describe('IDE clientside preview', () => {
   const storeClientsideActions = {
     pingUsage: jest.fn().mockReturnValue(Promise.resolve({})),
   };
+  const dispatchCodesandboxReady = () => dispatch({ type: 'done' });
 
   const waitForCalls = () => new Promise(setImmediate);
 
@@ -110,6 +113,20 @@ describe('IDE clientside preview', () => {
 
     it('pings usage', () => {
       expect(storeClientsideActions.pingUsage).toHaveBeenCalledTimes(1);
+      expect(storeClientsideActions.pingUsage).toHaveBeenCalledWith(
+        expect.anything(),
+        PING_USAGE_PREVIEW_KEY,
+      );
+    });
+
+    it('pings usage success', async () => {
+      dispatchCodesandboxReady();
+      await wrapper.vm.$nextTick();
+      expect(storeClientsideActions.pingUsage).toHaveBeenCalledTimes(2);
+      expect(storeClientsideActions.pingUsage).toHaveBeenCalledWith(
+        expect.anything(),
+        PING_USAGE_PREVIEW_SUCCESS_KEY,
+      );
     });
   });
 
diff --git a/spec/frontend/ide/stores/modules/clientside/actions_spec.js b/spec/frontend/ide/stores/modules/clientside/actions_spec.js
index 88d7a630a90..d2777623b0d 100644
--- a/spec/frontend/ide/stores/modules/clientside/actions_spec.js
+++ b/spec/frontend/ide/stores/modules/clientside/actions_spec.js
@@ -1,11 +1,12 @@
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
+import { PING_USAGE_PREVIEW_KEY } from '~/ide/constants';
 import * as actions from '~/ide/stores/modules/clientside/actions';
 import axios from '~/lib/utils/axios_utils';
 
 const TEST_PROJECT_URL = `${TEST_HOST}/lorem/ipsum`;
-const TEST_USAGE_URL = `${TEST_PROJECT_URL}/service_ping/web_ide_clientside_preview`;
+const TEST_USAGE_URL = `${TEST_PROJECT_URL}/service_ping/${PING_USAGE_PREVIEW_KEY}`;
 
 describe('IDE store module clientside actions', () => {
   let rootGetters;
@@ -30,7 +31,7 @@ describe('IDE store module clientside actions', () => {
 
       mock.onPost(TEST_USAGE_URL).reply(() => usageSpy());
 
-      testAction(actions.pingUsage, null, rootGetters, [], [], () => {
+      testAction(actions.pingUsage, PING_USAGE_PREVIEW_KEY, rootGetters, [], [], () => {
         expect(usageSpy).toHaveBeenCalled();
         done();
       });