1 files changed, 31 insertions, 15 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 8367c3f6bb8..62f9ae4eb4e 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
@@ -1,11 +1,11 @@
-import { createLocalVue, mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import CiVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
 import createStore from '~/ci_variable_list/store';
 import mockData from '../services/mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('Ci variable table', () => {
   let wrapper;
@@ -14,16 +14,15 @@ describe('Ci variable table', () => {
   const createComponent = () => {
     store = createStore();
     jest.spyOn(store, 'dispatch').mockImplementation();
-    wrapper = mount(CiVariableTable, {
+    wrapper = mountExtended(CiVariableTable, {
       attachTo: document.body,
-      localVue,
       store,
     });
   };
 
-  const findRevealButton = () => wrapper.find({ ref: 'secret-value-reveal-button' });
-  const findEditButton = () => wrapper.find({ ref: 'edit-ci-variable' });
-  const findEmptyVariablesPlaceholder = () => wrapper.find({ ref: 'empty-variables' });
+  const findRevealButton = () => wrapper.findByText('Reveal values');
+  const findEditButton = () => wrapper.findByLabelText('Edit');
+  const findEmptyVariablesPlaceholder = () => wrapper.findByText('There are no variables yet.');
 
   beforeEach(() => {
     createComponent();
@@ -37,18 +36,35 @@ describe('Ci variable table', () => {
     expect(store.dispatch).toHaveBeenCalledWith('fetchVariables');
   });
 
-  describe('Renders correct data', () => {
-    it('displays empty message when variables are not present', () => {
+  describe('When table is empty', () => {
+    beforeEach(() => {
+      store.state.variables = [];
+    });
+
+    it('displays empty message', () => {
       expect(findEmptyVariablesPlaceholder().exists()).toBe(true);
     });
 
-    it('displays correct amount of variables present and no empty message', () => {
+    it('hides the reveal button', () => {
+      expect(findRevealButton().exists()).toBe(false);
+    });
+  });
+
+  describe('When table has variables', () => {
+    beforeEach(() => {
       store.state.variables = mockData.mockVariables;
+    });
+
+    it('does not display the empty message', () => {
+      expect(findEmptyVariablesPlaceholder().exists()).toBe(false);
+    });
+
+    it('displays the reveal button', () => {
+      expect(findRevealButton().exists()).toBe(true);
+    });
 
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.findAll('.js-ci-variable-row').length).toBe(1);
-        expect(findEmptyVariablesPlaceholder().exists()).toBe(false);
-      });
+    it('displays the correct amount of variables', async () => {
+      expect(wrapper.findAll('.js-ci-variable-row')).toHaveLength(1);
     });
   });