From 06781f2a25f5b5f475141817442ee6d58ce7ee8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Caplette?= <fcaplette@gitlab.com>
Date: Thu, 4 Aug 2022 14:39:09 -0400
Subject: [PATCH 1/4] Add ci variable settings and table components

In the series of commits to migrate the CI/CD
variables to graphQL, this commit introduce
the final version of the settings and table
components.
---
 .../components/ci_variable_settings.vue       |  88 +++++++++++++-
 .../components/ci_variable_table.vue          |  75 +++++++++---
 .../components/ci_variable_settings_spec.js   | 113 ++++++++++++++++++
 .../components/ci_variable_table_spec.js      | 101 ++++++++++++++++
 4 files changed, 358 insertions(+), 19 deletions(-)
 create mode 100644 spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js
 create mode 100644 spec/frontend/ci_variable_list/components/ci_variable_table_spec.js

diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
index 4cc00eb01d934e..7b2f143e0af5f8 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
@@ -1,9 +1,93 @@
 <script>
-export default {};
+import { ADD_VARIABLE_ACTION, EDIT_VARIABLE_ACTION } from '../constants';
+import { createJoinedEnvironments } from '../utils';
+import CiVariableTable from './ci_variable_table.vue';
+import CiVariableModal from './ci_variable_modal.vue';
+
+export default {
+  components: {
+    CiVariableTable,
+    CiVariableModal,
+  },
+  props: {
+    areScopedVariablesAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    environments: {
+      type: Array,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    variables: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedVariable: {},
+      showModal: false,
+      mode: ADD_VARIABLE_ACTION,
+    };
+  },
+  computed: {
+    joinedEnvironments() {
+      return createJoinedEnvironments(this.variables, this.environments);
+    },
+  },
+  methods: {
+    addVariable(variable) {
+      this.$emit('add-variable', variable);
+    },
+    deleteVariable(variable) {
+      this.$emit('delete-variable', variable);
+    },
+    updateVariable(variable) {
+      this.$emit('update-variable', variable);
+    },
+    hideModal() {
+      this.showModal = false;
+    },
+    setSelectedVariable(variable = null) {
+      if (!variable) {
+        this.selectedVariable = {};
+        this.mode = ADD_VARIABLE_ACTION;
+      } else {
+        this.selectedVariable = variable;
+        this.mode = EDIT_VARIABLE_ACTION;
+      }
+
+      this.showModal = true;
+    },
+  },
+};
 </script>
 
 <template>
   <div class="row">
-    <div class="col-lg-12"></div>
+    <div class="col-lg-12">
+      <ci-variable-table
+        :is-loading="isLoading"
+        :variables="variables"
+        @set-selected-variable="setSelectedVariable"
+      />
+      <ci-variable-modal
+        v-if="showModal"
+        :are-scoped-variables-available="areScopedVariablesAvailable"
+        :environments="joinedEnvironments"
+        :mode="mode"
+        :selected-variable="selectedVariable"
+        @add-variable="addVariable"
+        @delete-variable="deleteVariable"
+        @hideModal="hideModal"
+        @update-variable="updateVariable"
+      />
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
index f078234829acc7..1bb94080694704 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
@@ -1,10 +1,17 @@
 <script>
-import { GlTable, GlButton, GlModalDirective, GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { mapState, mapActions } from 'vuex';
+import {
+  GlButton,
+  GlIcon,
+  GlLoadingIcon,
+  GlModalDirective,
+  GlTable,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
-import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
+import { ADD_CI_VARIABLE_MODAL_ID, variableText } from '../constants';
+import { convertEnvironmentScope } from '../utils';
 import CiVariablePopover from './ci_variable_popover.vue';
 
 export default {
@@ -14,7 +21,7 @@ export default {
   iconSize: 16,
   fields: [
     {
-      key: 'variable_type',
+      key: 'variableType',
       label: s__('CiVariables|Type'),
       customStyle: { width: '70px' },
     },
@@ -41,7 +48,7 @@ export default {
       customStyle: { width: '100px' },
     },
     {
-      key: 'environment_scope',
+      key: 'environmentScope',
       label: s__('CiVariables|Environments'),
       customStyle: { width: '20%' },
     },
@@ -56,6 +63,7 @@ export default {
     CiVariablePopover,
     GlButton,
     GlIcon,
+    GlLoadingIcon,
     GlTable,
     TooltipOnTruncate,
   },
@@ -64,10 +72,25 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [glFeatureFlagsMixin()],
+  props: {
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    variables: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      areValuesHidden: true,
+    };
+  },
   computed: {
-    ...mapState(['variables', 'valuesHidden', 'isLoading', 'isDeleting']),
     valuesButtonText() {
-      return this.valuesHidden ? __('Reveal values') : __('Hide values');
+      return this.areValuesHidden ? __('Reveal values') : __('Hide values');
     },
     isTableEmpty() {
       return !this.variables || this.variables.length === 0;
@@ -76,18 +99,28 @@ export default {
       return this.$options.fields;
     },
   },
-  mounted() {
-    this.fetchVariables();
-  },
   methods: {
-    ...mapActions(['fetchVariables', 'toggleValues', 'editVariable']),
+    convertEnvironmentScopeValue(env) {
+      return convertEnvironmentScope(env);
+    },
+    generateTypeText(item) {
+      return variableText[item.variableType];
+    },
+    toggleHiddenState() {
+      this.areValuesHidden = !this.areValuesHidden;
+    },
+    setSelectedVariable(variable = null) {
+      this.$emit('set-selected-variable', variable);
+    },
   },
 };
 </script>
 
 <template>
   <div class="ci-variable-table" data-testid="ci-variable-table">
+    <gl-loading-icon v-if="isLoading" />
     <gl-table
+      v-else
       :fields="fields"
       :items="variables"
       tbody-tr-class="js-ci-variable-row"
@@ -104,6 +137,11 @@ export default {
       <template #table-colgroup="scope">
         <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" />
       </template>
+      <template #cell(variableType)="{ item }">
+        <div class="gl-pt-2">
+          {{ generateTypeText(item) }}
+        </div>
+      </template>
       <template #cell(key)="{ item }">
         <div class="gl-display-flex gl-align-items-center">
           <tooltip-on-truncate :title="item.key" truncate-target="child">
@@ -125,11 +163,12 @@ export default {
       </template>
       <template #cell(value)="{ item }">
         <div class="gl-display-flex gl-align-items-center">
-          <span v-if="valuesHidden">*********************</span>
+          <span v-if="areValuesHidden" data-testid="hiddenValue">*********************</span>
           <span
             v-else
             :id="`ci-variable-value-${item.id}`"
             class="gl-display-inline-block gl-max-w-full gl-text-truncate"
+            data-testid="revealedValue"
             >{{ item.value }}</span
           >
           <gl-button
@@ -150,16 +189,16 @@ export default {
         <gl-icon v-if="item.masked" :size="$options.iconSize" :name="$options.trueIcon" />
         <gl-icon v-else :size="$options.iconSize" :name="$options.falseIcon" />
       </template>
-      <template #cell(environment_scope)="{ item }">
+      <template #cell(environmentScope)="{ item }">
         <div class="gl-display-flex">
           <span
             :id="`ci-variable-env-${item.id}`"
             class="gl-display-inline-block gl-max-w-full gl-text-truncate"
-            >{{ item.environment_scope }}</span
+            >{{ convertEnvironmentScopeValue(item.environmentScope) }}</span
           >
           <ci-variable-popover
             :target="`ci-variable-env-${item.id}`"
-            :value="item.environment_scope"
+            :value="convertEnvironmentScopeValue(item.environmentScope)"
             :tooltip-text="__('Copy environment')"
           />
         </div>
@@ -170,7 +209,7 @@ export default {
           icon="pencil"
           :aria-label="__('Edit')"
           data-qa-selector="edit_ci_variable_button"
-          @click="editVariable(item)"
+          @click="setSelectedVariable(item)"
         />
       </template>
       <template #empty>
@@ -186,12 +225,14 @@ export default {
         data-qa-selector="add_ci_variable_button"
         variant="confirm"
         category="primary"
+        :aria-label="__('Add')"
+        @click="setSelectedVariable()"
         >{{ __('Add variable') }}</gl-button
       >
       <gl-button
         v-if="!isTableEmpty"
         data-qa-selector="reveal_ci_variable_value_button"
-        @click="toggleValues(!valuesHidden)"
+        @click="toggleHiddenState"
         >{{ valuesButtonText }}</gl-button
       >
     </div>
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js
new file mode 100644
index 00000000000000..7a807b704bdf26
--- /dev/null
+++ b/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js
@@ -0,0 +1,113 @@
+import { shallowMount } from '@vue/test-utils';
+import CiVariableSettings from '~/ci_variable_list/components/ci_variable_settings.vue';
+import ciVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue';
+import ciVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
+import { ADD_VARIABLE_ACTION, EDIT_VARIABLE_ACTION } from '~/ci_variable_list/constants';
+import { createJoinedEnvironments, mapEnvironmentNames } from '~/ci_variable_list/utils';
+
+import { mockEnvs, mockVariablesWithScopes, newVariable } from '../mocks';
+
+describe('Ci variable table', () => {
+  let wrapper;
+
+  const defaultProps = {
+    areScopedVariablesAvailable: true,
+    environments: mapEnvironmentNames(mockEnvs),
+    isLoading: false,
+    variables: mockVariablesWithScopes,
+  };
+
+  const findCiVariableTable = () => wrapper.findComponent(ciVariableTable);
+  const findCiVariableModal = () => wrapper.findComponent(ciVariableModal);
+
+  const createComponent = () => {
+    wrapper = shallowMount(CiVariableSettings, {
+      propsData: {
+        ...defaultProps,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('props passing', () => {
+    it('passes props down correctly to the ci table', () => {
+      expect(findCiVariableTable().props()).toEqual({
+        isLoading: defaultProps.isLoading,
+        variables: defaultProps.variables,
+      });
+    });
+
+    it('passes props down correctly to the ci modal', async () => {
+      await findCiVariableTable().vm.$emit('set-selected-variable');
+
+      expect(findCiVariableModal().props()).toEqual({
+        areScopedVariablesAvailable: defaultProps.areScopedVariablesAvailable,
+        environments: createJoinedEnvironments(defaultProps.variables, defaultProps.environments),
+        mode: ADD_VARIABLE_ACTION,
+        selectedVariable: {},
+      });
+    });
+  });
+
+  describe('modal mode', () => {
+    it('passes down ADD mode when receiving an empty variable', async () => {
+      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 () => {
+      await findCiVariableTable().vm.$emit('set-selected-variable', newVariable);
+
+      expect(findCiVariableModal().props('mode')).toBe(EDIT_VARIABLE_ACTION);
+    });
+  });
+
+  describe('variable modal', () => {
+    it('is hidden by default', () => {
+      expect(findCiVariableModal().exists()).toBe(false);
+    });
+
+    it('shows modal when adding a new variable', async () => {
+      await findCiVariableTable().vm.$emit('set-selected-variable');
+
+      expect(findCiVariableModal().exists()).toBe(true);
+    });
+
+    it('shows modal when updating a variable', async () => {
+      await findCiVariableTable().vm.$emit('set-selected-variable', newVariable);
+
+      expect(findCiVariableModal().exists()).toBe(true);
+    });
+
+    it('hides modal when receiving the event from the modal', async () => {
+      await findCiVariableTable().vm.$emit('set-selected-variable');
+      await findCiVariableModal().vm.$emit('hideModal');
+
+      expect(findCiVariableModal().exists()).toBe(false);
+    });
+  });
+
+  describe('variable events', () => {
+    it.each`
+      eventName
+      ${'add-variable'}
+      ${'update-variable'}
+      ${'delete-variable'}
+    `('bubbles up the $eventName event', async ({ eventName }) => {
+      jest.spyOn(wrapper.vm, '$emit');
+
+      await findCiVariableTable().vm.$emit('set-selected-variable');
+      await findCiVariableModal().vm.$emit(eventName, newVariable);
+
+      expect(wrapper.emitted(eventName)).toEqual([[newVariable]]);
+    });
+  });
+});
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
new file mode 100644
index 00000000000000..2b3f5a928fce70
--- /dev/null
+++ b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
@@ -0,0 +1,101 @@
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import CiVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
+import { mockVariables } from '../mocks';
+
+describe('Ci variable table', () => {
+  let wrapper;
+
+  const defaultProps = {
+    isLoading: false,
+    variables: mockVariables,
+  };
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = mountExtended(CiVariableTable, {
+      attachTo: document.body,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  const findRevealButton = () => wrapper.findByText('Reveal values');
+  const findAddButton = () => wrapper.findByLabelText('Add');
+  const findEditButton = () => wrapper.findByLabelText('Edit');
+  const findEmptyVariablesPlaceholder = () => wrapper.findByText('There are no variables yet.');
+  const findHiddenValues = () => wrapper.findAll('[data-testid="hiddenValue"]');
+  const findRevealedValues = () => wrapper.findAll('[data-testid="revealedValue"]');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('When table is empty', () => {
+    beforeEach(() => {
+      createComponent({ props: { variables: [] } });
+    });
+
+    it('displays empty message', () => {
+      expect(findEmptyVariablesPlaceholder().exists()).toBe(true);
+    });
+
+    it('hides the reveal button', () => {
+      expect(findRevealButton().exists()).toBe(false);
+    });
+  });
+
+  describe('When table has variables', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('does not display the empty message', () => {
+      expect(findEmptyVariablesPlaceholder().exists()).toBe(false);
+    });
+
+    it('displays the reveal button', () => {
+      expect(findRevealButton().exists()).toBe(true);
+    });
+
+    it('displays the correct amount of variables', async () => {
+      expect(wrapper.findAll('.js-ci-variable-row')).toHaveLength(defaultProps.variables.length);
+    });
+  });
+
+  describe('Table click actions', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('reveals secret values when button is clicked', async () => {
+      expect(findHiddenValues()).toHaveLength(defaultProps.variables.length);
+      expect(findRevealedValues()).toHaveLength(0);
+
+      await findRevealButton().trigger('click');
+
+      expect(findHiddenValues()).toHaveLength(0);
+      expect(findRevealedValues()).toHaveLength(defaultProps.variables.length);
+    });
+
+    it('dispatches `setSelectedVarriable` with correct variable to edit', async () => {
+      jest.spyOn(wrapper.vm, '$emit');
+
+      await findEditButton().trigger('click');
+
+      expect(wrapper.emitted('set-selected-variable')).toEqual([[defaultProps.variables[0]]]);
+    });
+
+    it('dispatches `setSelectedVarriable` with no variable when adding a new one', async () => {
+      jest.spyOn(wrapper.vm, '$emit');
+
+      await findAddButton().trigger('click');
+
+      expect(wrapper.emitted('set-selected-variable')).toEqual([[null]]);
+    });
+  });
+});
-- 
GitLab


From 06ebbfcd49e442bac1f1cfb7ddcc8d177cb9ce2e Mon Sep 17 00:00:00 2001
From: Mireya Andres <mandres@gitlab.com>
Date: Tue, 9 Aug 2022 15:20:46 +0000
Subject: [PATCH 2/4] Apply 2 suggestion(s) to 1 file(s)

---
 .../ci_variable_list/components/ci_variable_table_spec.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
index 2b3f5a928fce70..29ad68c5e776f1 100644
--- a/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
@@ -82,7 +82,7 @@ describe('Ci variable table', () => {
       expect(findRevealedValues()).toHaveLength(defaultProps.variables.length);
     });
 
-    it('dispatches `setSelectedVarriable` with correct variable to edit', async () => {
+    it('dispatches `setSelectedVariable` with correct variable to edit', async () => {
       jest.spyOn(wrapper.vm, '$emit');
 
       await findEditButton().trigger('click');
@@ -90,7 +90,7 @@ describe('Ci variable table', () => {
       expect(wrapper.emitted('set-selected-variable')).toEqual([[defaultProps.variables[0]]]);
     });
 
-    it('dispatches `setSelectedVarriable` with no variable when adding a new one', async () => {
+    it('dispatches `setSelectedVariable` with no variable when adding a new one', async () => {
       jest.spyOn(wrapper.vm, '$emit');
 
       await findAddButton().trigger('click');
-- 
GitLab


From dddcaa48f9d5374b40257a868a97a5ec7357797e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Caplette?= <fcaplette@gitlab.com>
Date: Tue, 9 Aug 2022 12:58:48 -0400
Subject: [PATCH 3/4] Address reviewer feedback

---
 .../components/ci_variable_settings.vue              | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
index 7b2f143e0af5f8..29578c6f710662 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
@@ -1,5 +1,5 @@
 <script>
-import { ADD_VARIABLE_ACTION, EDIT_VARIABLE_ACTION } from '../constants';
+import { ADD_VARIABLE_ACTION, EDIT_VARIABLE_ACTION, VARIABLE_ACTIONS } from '../constants';
 import { createJoinedEnvironments } from '../utils';
 import CiVariableTable from './ci_variable_table.vue';
 import CiVariableModal from './ci_variable_modal.vue';
@@ -32,14 +32,16 @@ export default {
   data() {
     return {
       selectedVariable: {},
-      showModal: false,
-      mode: ADD_VARIABLE_ACTION,
+      mode: null,
     };
   },
   computed: {
     joinedEnvironments() {
       return createJoinedEnvironments(this.variables, this.environments);
     },
+    showModal() {
+      return VARIABLE_ACTIONS.includes(this.mode);
+    },
   },
   methods: {
     addVariable(variable) {
@@ -52,7 +54,7 @@ export default {
       this.$emit('update-variable', variable);
     },
     hideModal() {
-      this.showModal = false;
+      this.mode = null;
     },
     setSelectedVariable(variable = null) {
       if (!variable) {
@@ -62,8 +64,6 @@ export default {
         this.selectedVariable = variable;
         this.mode = EDIT_VARIABLE_ACTION;
       }
-
-      this.showModal = true;
     },
   },
 };
-- 
GitLab


From 2eb220a55ae5eee62ae8ee5d8f6eeb0015353084 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Caplette?= <fcaplette@gitlab.com>
Date: Wed, 10 Aug 2022 09:43:02 -0400
Subject: [PATCH 4/4] Address maintainer feedback

---
 .../components/ci_variable_settings_spec.js   | 30 ++++++++++++-------
 .../components/ci_variable_table_spec.js      |  4 ---
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js
index 7a807b704bdf26..fb79611229ceb7 100644
--- a/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import CiVariableSettings from '~/ci_variable_list/components/ci_variable_settings.vue';
 import ciVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue';
@@ -45,7 +46,8 @@ describe('Ci variable table', () => {
     });
 
     it('passes props down correctly to the ci modal', async () => {
-      await findCiVariableTable().vm.$emit('set-selected-variable');
+      findCiVariableTable().vm.$emit('set-selected-variable');
+      await nextTick();
 
       expect(findCiVariableModal().props()).toEqual({
         areScopedVariablesAvailable: defaultProps.areScopedVariablesAvailable,
@@ -58,13 +60,15 @@ describe('Ci variable table', () => {
 
   describe('modal mode', () => {
     it('passes down ADD mode when receiving an empty variable', async () => {
-      await findCiVariableTable().vm.$emit('set-selected-variable');
+      findCiVariableTable().vm.$emit('set-selected-variable');
+      await nextTick();
 
       expect(findCiVariableModal().props('mode')).toBe(ADD_VARIABLE_ACTION);
     });
 
     it('passes down EDIT mode when receiving a variable', async () => {
-      await findCiVariableTable().vm.$emit('set-selected-variable', newVariable);
+      findCiVariableTable().vm.$emit('set-selected-variable', newVariable);
+      await nextTick();
 
       expect(findCiVariableModal().props('mode')).toBe(EDIT_VARIABLE_ACTION);
     });
@@ -76,20 +80,25 @@ describe('Ci variable table', () => {
     });
 
     it('shows modal when adding a new variable', async () => {
-      await findCiVariableTable().vm.$emit('set-selected-variable');
+      findCiVariableTable().vm.$emit('set-selected-variable');
+      await nextTick();
 
       expect(findCiVariableModal().exists()).toBe(true);
     });
 
     it('shows modal when updating a variable', async () => {
-      await findCiVariableTable().vm.$emit('set-selected-variable', newVariable);
+      findCiVariableTable().vm.$emit('set-selected-variable', newVariable);
+      await nextTick();
 
       expect(findCiVariableModal().exists()).toBe(true);
     });
 
     it('hides modal when receiving the event from the modal', async () => {
-      await findCiVariableTable().vm.$emit('set-selected-variable');
-      await findCiVariableModal().vm.$emit('hideModal');
+      findCiVariableTable().vm.$emit('set-selected-variable');
+      await nextTick();
+
+      findCiVariableModal().vm.$emit('hideModal');
+      await nextTick();
 
       expect(findCiVariableModal().exists()).toBe(false);
     });
@@ -102,10 +111,11 @@ describe('Ci variable table', () => {
       ${'update-variable'}
       ${'delete-variable'}
     `('bubbles up the $eventName event', async ({ eventName }) => {
-      jest.spyOn(wrapper.vm, '$emit');
+      findCiVariableTable().vm.$emit('set-selected-variable');
+      await nextTick();
 
-      await findCiVariableTable().vm.$emit('set-selected-variable');
-      await findCiVariableModal().vm.$emit(eventName, newVariable);
+      findCiVariableModal().vm.$emit(eventName, newVariable);
+      await nextTick();
 
       expect(wrapper.emitted(eventName)).toEqual([[newVariable]]);
     });
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
index 29ad68c5e776f1..b5b4881aa44241 100644
--- a/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
@@ -83,16 +83,12 @@ describe('Ci variable table', () => {
     });
 
     it('dispatches `setSelectedVariable` with correct variable to edit', async () => {
-      jest.spyOn(wrapper.vm, '$emit');
-
       await findEditButton().trigger('click');
 
       expect(wrapper.emitted('set-selected-variable')).toEqual([[defaultProps.variables[0]]]);
     });
 
     it('dispatches `setSelectedVariable` with no variable when adding a new one', async () => {
-      jest.spyOn(wrapper.vm, '$emit');
-
       await findAddButton().trigger('click');
 
       expect(wrapper.emitted('set-selected-variable')).toEqual([[null]]);
-- 
GitLab