1 files changed, 81 insertions, 18 deletions

diff --git a/spec/frontend/environments/environments_app_spec.js b/spec/frontend/environments/environments_app_spec.js
index fe32bf918dd..bb114e31063 100644
--- a/spec/frontend/environments/environments_app_spec.js
+++ b/spec/frontend/environments/environments_app_spec.js
@@ -1,9 +1,11 @@
 import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import EnableReviewAppModal from '~/environments/components/enable_review_app_modal.vue';
 import Container from '~/environments/components/container.vue';
 import EmptyState from '~/environments/components/empty_state.vue';
 import EnvironmentsApp from '~/environments/components/environments_app.vue';
+import axios from '~/lib/utils/axios_utils';
 import { environment, folder } from './mock_data';
 
 describe('Environment', () => {
@@ -34,12 +36,18 @@ describe('Environment', () => {
     });
   };
 
-  const createWrapper = (shallow = false) => {
+  const createWrapper = (shallow = false, props = {}) => {
     const fn = shallow ? shallowMount : mount;
-    wrapper = fn(EnvironmentsApp, { propsData: mockData });
+    wrapper = extendedWrapper(fn(EnvironmentsApp, { propsData: { ...mockData, ...props } }));
     return axios.waitForAll();
   };
 
+  const findEnableReviewAppButton = () => wrapper.findByTestId('enable-review-app');
+  const findEnableReviewAppModal = () => wrapper.findAll(EnableReviewAppModal);
+  const findNewEnvironmentButton = () => wrapper.findByTestId('new-environment');
+  const findEnvironmentsTabAvailable = () => wrapper.find('.js-environments-tab-available > a');
+  const findEnvironmentsTabStopped = () => wrapper.find('.js-environments-tab-stopped > a');
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
   });
@@ -59,19 +67,6 @@ describe('Environment', () => {
       it('should render the empty state', () => {
         expect(wrapper.find(EmptyState).exists()).toBe(true);
       });
-
-      describe('when it is possible to enable a review app', () => {
-        beforeEach(() => {
-          mockRequest(200, { environments: [], review_app: { can_setup_review_app: true } });
-          return createWrapper();
-        });
-
-        it('should render the enable review app button', () => {
-          expect(wrapper.find('.js-enable-review-app-button').text()).toContain(
-            'Enable review app',
-          );
-        });
-      });
     });
 
     describe('with paginated environments', () => {
@@ -86,7 +81,7 @@ describe('Environment', () => {
         return createWrapper();
       });
 
-      it('should render a conatiner table with environments', () => {
+      it('should render a container table with environments', () => {
         const containerTable = wrapper.find(Container);
 
         expect(containerTable.exists()).toBe(true);
@@ -108,9 +103,16 @@ describe('Environment', () => {
 
         it('should make an API request when using tabs', () => {
           jest.spyOn(wrapper.vm, 'updateContent').mockImplementation(() => {});
-          wrapper.find('.js-environments-tab-stopped').trigger('click');
+          findEnvironmentsTabStopped().trigger('click');
           expect(wrapper.vm.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
         });
+
+        it('should not make the same API request when clicking on the current scope tab', () => {
+          // component starts at available
+          jest.spyOn(wrapper.vm, 'updateContent').mockImplementation(() => {});
+          findEnvironmentsTabAvailable().trigger('click');
+          expect(wrapper.vm.updateContent).toHaveBeenCalledTimes(0);
+        });
       });
     });
   });
@@ -165,4 +167,65 @@ describe('Environment', () => {
       expect(wrapper.find('.text-center > a.btn').text()).toContain('Show all');
     });
   });
+
+  describe('environment button', () => {
+    describe('when user can create environment', () => {
+      beforeEach(() => {
+        mockRequest(200, { environments: [] });
+        return createWrapper(true);
+      });
+
+      it('should render', () => {
+        expect(findNewEnvironmentButton().exists()).toBe(true);
+      });
+    });
+
+    describe('when user can not create environment', () => {
+      beforeEach(() => {
+        mockRequest(200, { environments: [] });
+        return createWrapper(true, { ...mockData, canCreateEnvironment: false });
+      });
+
+      it('should not render', () => {
+        expect(findNewEnvironmentButton().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('review app modal', () => {
+    describe('when it is not possible to enable a review app', () => {
+      beforeEach(() => {
+        mockRequest(200, { environments: [] });
+        return createWrapper(true);
+      });
+
+      it('should not render the enable review app button', () => {
+        expect(findEnableReviewAppButton().exists()).toBe(false);
+      });
+
+      it('should not render a review app modal', () => {
+        const modal = findEnableReviewAppModal();
+        expect(modal).toHaveLength(0);
+        expect(modal.exists()).toBe(false);
+      });
+    });
+
+    describe('when it is possible to enable a review app', () => {
+      beforeEach(() => {
+        mockRequest(200, { environments: [], review_app: { can_setup_review_app: true } });
+        return createWrapper(true);
+      });
+
+      it('should render the enable review app button', () => {
+        expect(findEnableReviewAppButton().exists()).toBe(true);
+        expect(findEnableReviewAppButton().text()).toContain('Enable review app');
+      });
+
+      it('should render only one review app modal', () => {
+        const modal = findEnableReviewAppModal();
+        expect(modal).toHaveLength(1);
+        expect(modal.at(0).exists()).toBe(true);
+      });
+    });
+  });
 });