1 files changed, 44 insertions, 23 deletions

diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js
index 32af2ec4de9..12ca9a78369 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js
@@ -1,4 +1,3 @@
-import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import CiVariableSettings from '~/ci/ci_variable_list/components/ci_variable_settings.vue';
 import ciVariableModal from '~/ci/ci_variable_list/components/ci_variable_modal.vue';
@@ -16,12 +15,14 @@ describe('Ci variable table', () => {
   let wrapper;
 
   const defaultProps = {
+    areEnvironmentsLoading: false,
     areScopedVariablesAvailable: true,
     entity: 'project',
     environments: mapEnvironmentNames(mockEnvs),
     hideEnvironmentScope: false,
     isLoading: false,
     maxVariableLimit: 5,
+    pageInfo: { after: '' },
     variables: mockVariablesWithScopes(projectString),
   };
 
@@ -37,10 +38,6 @@ describe('Ci variable table', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('props passing', () => {
     it('passes props down correctly to the ci table', () => {
       createComponent();
@@ -49,6 +46,7 @@ describe('Ci variable table', () => {
         entity: 'project',
         isLoading: defaultProps.isLoading,
         maxVariableLimit: defaultProps.maxVariableLimit,
+        pageInfo: defaultProps.pageInfo,
         variables: defaultProps.variables,
       });
     });
@@ -56,10 +54,10 @@ describe('Ci variable table', () => {
     it('passes props down correctly to the ci modal', async () => {
       createComponent();
 
-      findCiVariableTable().vm.$emit('set-selected-variable');
-      await nextTick();
+      await findCiVariableTable().vm.$emit('set-selected-variable');
 
       expect(findCiVariableModal().props()).toEqual({
+        areEnvironmentsLoading: defaultProps.areEnvironmentsLoading,
         areScopedVariablesAvailable: defaultProps.areScopedVariablesAvailable,
         environments: defaultProps.environments,
         hideEnvironmentScope: defaultProps.hideEnvironmentScope,
@@ -76,15 +74,13 @@ describe('Ci variable table', () => {
     });
 
     it('passes down ADD mode when receiving an empty variable', async () => {
-      findCiVariableTable().vm.$emit('set-selected-variable');
-      await nextTick();
+      await findCiVariableTable().vm.$emit('set-selected-variable');
 
       expect(findCiVariableModal().props('mode')).toBe(ADD_VARIABLE_ACTION);
     });
 
     it('passes down EDIT mode when receiving a variable', async () => {
-      findCiVariableTable().vm.$emit('set-selected-variable', newVariable);
-      await nextTick();
+      await findCiVariableTable().vm.$emit('set-selected-variable', newVariable);
 
       expect(findCiVariableModal().props('mode')).toBe(EDIT_VARIABLE_ACTION);
     });
@@ -100,25 +96,21 @@ describe('Ci variable table', () => {
     });
 
     it('shows modal when adding a new variable', async () => {
-      findCiVariableTable().vm.$emit('set-selected-variable');
-      await nextTick();
+      await findCiVariableTable().vm.$emit('set-selected-variable');
 
       expect(findCiVariableModal().exists()).toBe(true);
     });
 
     it('shows modal when updating a variable', async () => {
-      findCiVariableTable().vm.$emit('set-selected-variable', newVariable);
-      await nextTick();
+      await findCiVariableTable().vm.$emit('set-selected-variable', newVariable);
 
       expect(findCiVariableModal().exists()).toBe(true);
     });
 
     it('hides modal when receiving the event from the modal', async () => {
-      findCiVariableTable().vm.$emit('set-selected-variable');
-      await nextTick();
+      await findCiVariableTable().vm.$emit('set-selected-variable');
 
-      findCiVariableModal().vm.$emit('hideModal');
-      await nextTick();
+      await findCiVariableModal().vm.$emit('hideModal');
 
       expect(findCiVariableModal().exists()).toBe(false);
     });
@@ -135,13 +127,42 @@ describe('Ci variable table', () => {
       ${'update-variable'}
       ${'delete-variable'}
     `('bubbles up the $eventName event', async ({ eventName }) => {
-      findCiVariableTable().vm.$emit('set-selected-variable');
-      await nextTick();
+      await findCiVariableTable().vm.$emit('set-selected-variable');
 
-      findCiVariableModal().vm.$emit(eventName, newVariable);
-      await nextTick();
+      await findCiVariableModal().vm.$emit(eventName, newVariable);
 
       expect(wrapper.emitted(eventName)).toEqual([[newVariable]]);
     });
   });
+
+  describe('pages events', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it.each`
+      eventName             | args
+      ${'handle-prev-page'} | ${undefined}
+      ${'handle-next-page'} | ${undefined}
+      ${'sort-changed'}     | ${{ sortDesc: true }}
+    `('bubbles up the $eventName event', async ({ args, eventName }) => {
+      await findCiVariableTable().vm.$emit(eventName, args);
+
+      expect(wrapper.emitted(eventName)).toEqual([[args]]);
+    });
+  });
+
+  describe('environment events', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('bubbles up the search event', async () => {
+      await findCiVariableTable().vm.$emit('set-selected-variable');
+
+      await findCiVariableModal().vm.$emit('search-environment-scope', 'staging');
+
+      expect(wrapper.emitted('search-environment-scope')).toEqual([['staging']]);
+    });
+  });
 });