7 files changed, 182 insertions, 10 deletions
diff --git a/spec/frontend/ide/components/repo_editor_spec.js b/spec/frontend/ide/components/repo_editor_spec.js
index a3b327343e5..646e51160d8 100644
--- a/spec/frontend/ide/components/repo_editor_spec.js
+++ b/spec/frontend/ide/components/repo_editor_spec.js
@@ -510,6 +510,7 @@ describe('RepoEditor', () => {
         },
       });
       await vm.$nextTick();
+      await vm.$nextTick();
 
       expect(vm.initEditor).toHaveBeenCalled();
     });
diff --git a/spec/frontend/ide/lib/alerts/environment_spec.js b/spec/frontend/ide/lib/alerts/environment_spec.js
new file mode 100644
index 00000000000..d645209345c
--- /dev/null
+++ b/spec/frontend/ide/lib/alerts/environment_spec.js
@@ -0,0 +1,21 @@
+import { GlLink } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import Environments from '~/ide/lib/alerts/environments.vue';
+
+describe('~/ide/lib/alerts/environment.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Environments);
+  });
+
+  it('shows a message regarding environments', () => {
+    expect(wrapper.text()).toBe(
+      "No deployments detected. Use environments to control your software's continuous deployment. Learn more about deployment jobs.",
+    );
+  });
+
+  it('links to the help page on environments', () => {
+    expect(wrapper.findComponent(GlLink).attributes('href')).toBe('/help/ci/environments/index.md');
+  });
+});
diff --git a/spec/frontend/ide/services/index_spec.js b/spec/frontend/ide/services/index_spec.js
index 3503834e24b..4a726cff3b6 100644
--- a/spec/frontend/ide/services/index_spec.js
+++ b/spec/frontend/ide/services/index_spec.js
@@ -2,9 +2,11 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import getIdeProject from 'ee_else_ce/ide/queries/get_ide_project.query.graphql';
 import Api from '~/api';
+import dismissUserCallout from '~/graphql_shared/mutations/dismiss_user_callout.mutation.graphql';
 import services from '~/ide/services';
-import { query } from '~/ide/services/gql';
+import { query, mutate } from '~/ide/services/gql';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
+import ciConfig from '~/pipeline_editor/graphql/queries/ci_config.graphql';
 import { projectData } from '../mock_data';
 
 jest.mock('~/api');
@@ -299,4 +301,33 @@ describe('IDE services', () => {
       });
     });
   });
+  describe('getCiConfig', () => {
+    const TEST_PROJECT_PATH = 'foo/bar';
+    const TEST_CI_CONFIG = 'test config';
+
+    it('queries with the given CI config and project', () => {
+      const result = { data: { ciConfig: { test: 'data' } } };
+      query.mockResolvedValue(result);
+      return services.getCiConfig(TEST_PROJECT_PATH, TEST_CI_CONFIG).then((data) => {
+        expect(data).toEqual(result.data.ciConfig);
+        expect(query).toHaveBeenCalledWith({
+          query: ciConfig,
+          variables: { projectPath: TEST_PROJECT_PATH, content: TEST_CI_CONFIG },
+        });
+      });
+    });
+  });
+  describe('dismissUserCallout', () => {
+    it('mutates the callout to dismiss', () => {
+      const result = { data: { callouts: { test: 'data' } } };
+      mutate.mockResolvedValue(result);
+      return services.dismissUserCallout('test').then((data) => {
+        expect(data).toEqual(result.data);
+        expect(mutate).toHaveBeenCalledWith({
+          mutation: dismissUserCallout,
+          variables: { input: { featureName: 'test' } },
+        });
+      });
+    });
+  });
 });
diff --git a/spec/frontend/ide/stores/actions/alert_spec.js b/spec/frontend/ide/stores/actions/alert_spec.js
new file mode 100644
index 00000000000..1321c402ebb
--- /dev/null
+++ b/spec/frontend/ide/stores/actions/alert_spec.js
@@ -0,0 +1,46 @@
+import testAction from 'helpers/vuex_action_helper';
+import service from '~/ide/services';
+import {
+  detectEnvironmentsGuidance,
+  dismissEnvironmentsGuidance,
+} from '~/ide/stores/actions/alert';
+import * as types from '~/ide/stores/mutation_types';
+
+jest.mock('~/ide/services');
+
+describe('~/ide/stores/actions/alert', () => {
+  describe('detectEnvironmentsGuidance', () => {
+    it('should try to fetch CI info', () => {
+      const stages = ['a', 'b', 'c'];
+      service.getCiConfig.mockResolvedValue({ stages });
+
+      return testAction(
+        detectEnvironmentsGuidance,
+        'the content',
+        { currentProjectId: 'gitlab/test' },
+        [{ type: types.DETECT_ENVIRONMENTS_GUIDANCE_ALERT, payload: stages }],
+        [],
+        () => expect(service.getCiConfig).toHaveBeenCalledWith('gitlab/test', 'the content'),
+      );
+    });
+  });
+  describe('dismissCallout', () => {
+    it('should try to dismiss the given callout', () => {
+      const callout = { featureName: 'test', dismissedAt: 'now' };
+
+      service.dismissUserCallout.mockResolvedValue({ userCalloutCreate: { userCallout: callout } });
+
+      return testAction(
+        dismissEnvironmentsGuidance,
+        undefined,
+        {},
+        [{ type: types.DISMISS_ENVIRONMENTS_GUIDANCE_ALERT }],
+        [],
+        () =>
+          expect(service.dismissUserCallout).toHaveBeenCalledWith(
+            'web_ide_ci_environments_guidance',
+          ),
+      );
+    });
+  });
+});
diff --git a/spec/frontend/ide/stores/actions_spec.js b/spec/frontend/ide/stores/actions_spec.js
index d47dd88dd47..ad55313da93 100644
--- a/spec/frontend/ide/stores/actions_spec.js
+++ b/spec/frontend/ide/stores/actions_spec.js
@@ -4,6 +4,7 @@ import eventHub from '~/ide/eventhub';
 import { createRouter } from '~/ide/ide_router';
 import { createStore } from '~/ide/stores';
 import {
+  init,
   stageAllChanges,
   unstageAllChanges,
   toggleFileFinder,
@@ -54,15 +55,15 @@ describe('Multi-file store actions', () => {
     });
   });
 
-  describe('setInitialData', () => {
-    it('commits initial data', (done) => {
-      store
-        .dispatch('setInitialData', { canCommit: true })
-        .then(() => {
-          expect(store.state.canCommit).toBeTruthy();
-          done();
-        })
-        .catch(done.fail);
+  describe('init', () => {
+    it('commits initial data and requests user callouts', () => {
+      return testAction(
+        init,
+        { canCommit: true },
+        store.state,
+        [{ type: 'SET_INITIAL_DATA', payload: { canCommit: true } }],
+        [],
+      );
     });
   });
 
diff --git a/spec/frontend/ide/stores/getters/alert_spec.js b/spec/frontend/ide/stores/getters/alert_spec.js
new file mode 100644
index 00000000000..7068b8e637f
--- /dev/null
+++ b/spec/frontend/ide/stores/getters/alert_spec.js
@@ -0,0 +1,46 @@
+import { getAlert } from '~/ide/lib/alerts';
+import EnvironmentsMessage from '~/ide/lib/alerts/environments.vue';
+import { createStore } from '~/ide/stores';
+import * as getters from '~/ide/stores/getters/alert';
+import { file } from '../../helpers';
+
+describe('IDE store alert getters', () => {
+  let localState;
+  let localStore;
+
+  beforeEach(() => {
+    localStore = createStore();
+    localState = localStore.state;
+  });
+
+  describe('alerts', () => {
+    describe('shows an alert about environments', () => {
+      let alert;
+
+      beforeEach(() => {
+        const f = file('.gitlab-ci.yml');
+        localState.openFiles.push(f);
+        localState.currentActivityView = 'repo-commit-section';
+        localState.environmentsGuidanceAlertDetected = true;
+        localState.environmentsGuidanceAlertDismissed = false;
+
+        const alertKey = getters.getAlert(localState)(f);
+        alert = getAlert(alertKey);
+      });
+
+      it('has a message suggesting to use environments', () => {
+        expect(alert.message).toEqual(EnvironmentsMessage);
+      });
+
+      it('dispatches to dismiss the callout on dismiss', () => {
+        jest.spyOn(localStore, 'dispatch').mockImplementation();
+        alert.dismiss(localStore);
+        expect(localStore.dispatch).toHaveBeenCalledWith('dismissEnvironmentsGuidance');
+      });
+
+      it('should be a tip alert', () => {
+        expect(alert.props).toEqual({ variant: 'tip' });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ide/stores/mutations/alert_spec.js b/spec/frontend/ide/stores/mutations/alert_spec.js
new file mode 100644
index 00000000000..2840ec4ebb7
--- /dev/null
+++ b/spec/frontend/ide/stores/mutations/alert_spec.js
@@ -0,0 +1,26 @@
+import * as types from '~/ide/stores/mutation_types';
+import mutations from '~/ide/stores/mutations/alert';
+
+describe('~/ide/stores/mutations/alert', () => {
+  const state = {};
+
+  describe(types.DETECT_ENVIRONMENTS_GUIDANCE_ALERT, () => {
+    it('checks the stages for any that configure environments', () => {
+      mutations[types.DETECT_ENVIRONMENTS_GUIDANCE_ALERT](state, {
+        nodes: [{ groups: { nodes: [{ jobs: { nodes: [{}] } }] } }],
+      });
+      expect(state.environmentsGuidanceAlertDetected).toBe(true);
+      mutations[types.DETECT_ENVIRONMENTS_GUIDANCE_ALERT](state, {
+        nodes: [{ groups: { nodes: [{ jobs: { nodes: [{ environment: {} }] } }] } }],
+      });
+      expect(state.environmentsGuidanceAlertDetected).toBe(false);
+    });
+  });
+
+  describe(types.DISMISS_ENVIRONMENTS_GUIDANCE_ALERT, () => {
+    it('stops environments guidance', () => {
+      mutations[types.DISMISS_ENVIRONMENTS_GUIDANCE_ALERT](state);
+      expect(state.environmentsGuidanceAlertDismissed).toBe(true);
+    });
+  });
+});