diff options
Diffstat (limited to 'spec/frontend/ci_variable_list/components/ci_variable_table_spec.js')
-rw-r--r-- | spec/frontend/ci_variable_list/components/ci_variable_table_spec.js | 46 |
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); }); }); |