Add latest changes from gitlab-org/gitlab@master

2 files changed, 82 insertions, 43 deletions

diff --git a/spec/frontend/environments/graphql/resolvers_spec.js b/spec/frontend/environments/graphql/resolvers_spec.js
index 320e4794de0..24fd4e45022 100644
--- a/spec/frontend/environments/graphql/resolvers_spec.js
+++ b/spec/frontend/environments/graphql/resolvers_spec.js
@@ -23,9 +23,10 @@ describe('~/frontend/environments/graphql/resolvers', () => {
   describe('environmentApp', () => {
     it('should fetch environments and map them to frontend data', async () => {
       const cache = { writeQuery: jest.fn() };
-      mock.onGet(ENDPOINT, { params: { nested: true } }).reply(200, environmentsApp, {});
+      const scope = 'available';
+      mock.onGet(ENDPOINT, { params: { nested: true, scope } }).reply(200, environmentsApp, {});
 
-      const app = await mockResolvers.Query.environmentApp(null, null, { cache });
+      const app = await mockResolvers.Query.environmentApp(null, { scope }, { cache });
       expect(app).toEqual(resolvedEnvironmentsApp);
       expect(cache.writeQuery).toHaveBeenCalledWith({
         query: pollIntervalQuery,
@@ -34,11 +35,12 @@ describe('~/frontend/environments/graphql/resolvers', () => {
     });
     it('should set the poll interval when there is one', async () => {
       const cache = { writeQuery: jest.fn() };
+      const scope = 'stopped';
       mock
-        .onGet(ENDPOINT, { params: { nested: true } })
+        .onGet(ENDPOINT, { params: { nested: true, scope } })
         .reply(200, environmentsApp, { 'poll-interval': 3000 });
 
-      await mockResolvers.Query.environmentApp(null, null, { cache });
+      await mockResolvers.Query.environmentApp(null, { scope }, { cache });
       expect(cache.writeQuery).toHaveBeenCalledWith({
         query: pollIntervalQuery,
         data: { interval: 3000 },
diff --git a/spec/frontend/environments/new_environments_app_spec.js b/spec/frontend/environments/new_environments_app_spec.js
index c4613bfe182..8efd722cc11 100644
--- a/spec/frontend/environments/new_environments_app_spec.js
+++ b/spec/frontend/environments/new_environments_app_spec.js
@@ -1,9 +1,9 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import EnvironmentsApp from '~/environments/components/new_environments_app.vue';
 import EnvironmentsFolder from '~/environments/components/new_environment_folder.vue';
 import { resolvedEnvironmentsApp, resolvedFolder } from './graphql/mock_data';
@@ -17,7 +17,10 @@ describe('~/environments/components/new_environments_app.vue', () => {
 
   const createApolloProvider = () => {
     const mockResolvers = {
-      Query: { environmentApp: environmentAppMock, folder: environmentFolderMock },
+      Query: {
+        environmentApp: environmentAppMock,
+        folder: environmentFolderMock,
+      },
     };
 
     return createMockApollo([], mockResolvers);
@@ -34,6 +37,16 @@ describe('~/environments/components/new_environments_app.vue', () => {
       apolloProvider,
     });
 
+  const createWrapperWithMocked = async ({ provide = {}, environmentsApp, folder }) => {
+    environmentAppMock.mockReturnValue(environmentsApp);
+    environmentFolderMock.mockReturnValue(folder);
+    const apolloProvider = createApolloProvider();
+    wrapper = createWrapper({ apolloProvider, provide });
+
+    await waitForPromises();
+    await nextTick();
+  };
+
   beforeEach(() => {
     environmentAppMock = jest.fn();
     environmentFolderMock = jest.fn();
@@ -44,13 +57,10 @@ describe('~/environments/components/new_environments_app.vue', () => {
   });
 
   it('should show all the folders that are fetched', async () => {
-    environmentAppMock.mockReturnValue(resolvedEnvironmentsApp);
-    environmentFolderMock.mockReturnValue(resolvedFolder);
-    const apolloProvider = createApolloProvider();
-    wrapper = createWrapper({ apolloProvider });
-
-    await waitForPromises();
-    await Vue.nextTick();
+    await createWrapperWithMocked({
+      environmentsApp: resolvedEnvironmentsApp,
+      folder: resolvedFolder,
+    });
 
     const text = wrapper.findAllComponents(EnvironmentsFolder).wrappers.map((w) => w.text());
 
@@ -59,64 +69,91 @@ describe('~/environments/components/new_environments_app.vue', () => {
   });
 
   it('should show a button to create a new environment', async () => {
-    environmentAppMock.mockReturnValue(resolvedEnvironmentsApp);
-    environmentFolderMock.mockReturnValue(resolvedFolder);
-    const apolloProvider = createApolloProvider();
-    wrapper = createWrapper({ apolloProvider });
-
-    await waitForPromises();
-    await Vue.nextTick();
+    await createWrapperWithMocked({
+      environmentsApp: resolvedEnvironmentsApp,
+      folder: resolvedFolder,
+    });
 
     const button = wrapper.findByRole('link', { name: s__('Environments|New environment') });
     expect(button.attributes('href')).toBe('/environments/new');
   });
 
   it('should not show a button to create a new environment if the user has no permissions', async () => {
-    environmentAppMock.mockReturnValue(resolvedEnvironmentsApp);
-    environmentFolderMock.mockReturnValue(resolvedFolder);
-    const apolloProvider = createApolloProvider();
-    wrapper = createWrapper({
-      apolloProvider,
+    await createWrapperWithMocked({
+      environmentsApp: resolvedEnvironmentsApp,
+      folder: resolvedFolder,
       provide: { canCreateEnvironment: false, newEnvironmentPath: '' },
     });
 
-    await waitForPromises();
-    await Vue.nextTick();
-
     const button = wrapper.findByRole('link', { name: s__('Environments|New environment') });
     expect(button.exists()).toBe(false);
   });
 
   it('should show a button to open the review app modal', async () => {
-    environmentAppMock.mockReturnValue(resolvedEnvironmentsApp);
-    environmentFolderMock.mockReturnValue(resolvedFolder);
-    const apolloProvider = createApolloProvider();
-    wrapper = createWrapper({ apolloProvider });
-
-    await waitForPromises();
-    await Vue.nextTick();
+    await createWrapperWithMocked({
+      environmentsApp: resolvedEnvironmentsApp,
+      folder: resolvedFolder,
+    });
 
     const button = wrapper.findByRole('button', { name: s__('Environments|Enable review app') });
     button.trigger('click');
 
-    await Vue.nextTick();
+    await nextTick();
 
     expect(wrapper.findByText(s__('ReviewApp|Enable Review App')).exists()).toBe(true);
   });
 
   it('should not show a button to open the review app modal if review apps are configured', async () => {
-    environmentAppMock.mockReturnValue({
-      ...resolvedEnvironmentsApp,
-      reviewApp: { canSetupReviewApp: false },
+    await createWrapperWithMocked({
+      environmentsApp: {
+        ...resolvedEnvironmentsApp,
+        reviewApp: { canSetupReviewApp: false },
+      },
+      folder: resolvedFolder,
+    });
+    await waitForPromises();
+    await nextTick();
+
+    const button = wrapper.findByRole('button', { name: s__('Environments|Enable review app') });
+    expect(button.exists()).toBe(false);
+  });
+
+  it('should show tabs for available and stopped environmets', async () => {
+    await createWrapperWithMocked({
+      environmentsApp: resolvedEnvironmentsApp,
+      folder: resolvedFolder,
     });
+
+    const [available, stopped] = wrapper.findAllByRole('tab').wrappers;
+
+    expect(available.text()).toContain(__('Available'));
+    expect(available.text()).toContain(resolvedEnvironmentsApp.availableCount);
+    expect(stopped.text()).toContain(__('Stopped'));
+    expect(stopped.text()).toContain(resolvedEnvironmentsApp.stoppedCount);
+  });
+
+  it('should change the requested scope on tab change', async () => {
+    environmentAppMock.mockReturnValue(resolvedEnvironmentsApp);
     environmentFolderMock.mockReturnValue(resolvedFolder);
     const apolloProvider = createApolloProvider();
     wrapper = createWrapper({ apolloProvider });
 
     await waitForPromises();
-    await Vue.nextTick();
+    await nextTick();
+    const stopped = wrapper.findByRole('tab', {
+      name: `${__('Stopped')} ${resolvedEnvironmentsApp.stoppedCount}`,
+    });
 
-    const button = wrapper.findByRole('button', { name: s__('Environments|Enable review app') });
-    expect(button.exists()).toBe(false);
+    stopped.trigger('click');
+
+    await nextTick();
+    await waitForPromises();
+
+    expect(environmentAppMock).toHaveBeenCalledWith(
+      expect.anything(),
+      { scope: 'stopped' },
+      expect.anything(),
+      expect.anything(),
+    );
   });
 });