From ab85af0f318ccbcfdd508e7a2f85788f26831785 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Sat, 22 Feb 2020 00:09:11 +0000 Subject: Add latest changes from gitlab-org/gitlab@master --- .../components/ci_variable_modal_spec.js | 93 ++++++++++++++++++++++ .../components/ci_variable_settings_spec.js | 39 +++++++++ .../components/ci_variable_table_spec.js | 89 +++++++++++++++++++++ .../ci_variable_list/services/mock_data.js | 18 ----- spec/frontend/ci_variable_list/store/utils_spec.js | 8 +- .../__snapshots__/self_monitor_form_spec.js.snap | 76 ++++++++++++++++++ .../__snapshots__/self_monitor_spec.js.snap | 76 ------------------ .../components/self_monitor_form_spec.js | 83 +++++++++++++++++++ .../self_monitor/components/self_monitor_spec.js | 83 ------------------- 9 files changed, 384 insertions(+), 181 deletions(-) create mode 100644 spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js 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 create mode 100644 spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap delete mode 100644 spec/frontend/self_monitor/components/__snapshots__/self_monitor_spec.js.snap create mode 100644 spec/frontend/self_monitor/components/self_monitor_form_spec.js delete mode 100644 spec/frontend/self_monitor/components/self_monitor_spec.js (limited to 'spec') diff --git a/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js new file mode 100644 index 00000000000..be2c017cc7e --- /dev/null +++ b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js @@ -0,0 +1,93 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { GlModal } from '@gitlab/ui'; +import CiVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue'; +import createStore from '~/ci_variable_list/store'; +import mockData from '../services/mock_data'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Ci variable modal', () => { + let wrapper; + let store; + + const createComponent = () => { + store = createStore(); + wrapper = shallowMount(CiVariableModal, { + localVue, + store, + }); + }; + + const findModal = () => wrapper.find(GlModal); + + beforeEach(() => { + createComponent(); + jest.spyOn(store, 'dispatch').mockImplementation(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('button is disabled when no key/value pair are present', () => { + expect(findModal().props('actionPrimary').attributes.disabled).toBeTruthy(); + }); + + it('masked checkbox is disabled when value does not meet regex requirements', () => { + expect(wrapper.find({ ref: 'masked-ci-variable' }).attributes('disabled')).toBeTruthy(); + }); + + describe('Adding a new variable', () => { + beforeEach(() => { + const [variable] = mockData.mockVariables; + store.state.variable = variable; + }); + + it('button is enabled when key/value pair are present', () => { + expect(findModal().props('actionPrimary').attributes.disabled).toBeFalsy(); + }); + + it('masked checkbox is enabled when value meets regex requirements', () => { + store.state.maskableRegex = '^[a-zA-Z0-9_+=/@:-]{8,}$'; + return wrapper.vm.$nextTick(() => { + expect(wrapper.find({ ref: 'masked-ci-variable' }).attributes('disabled')).toBeFalsy(); + }); + }); + + it('Add variable button dispatches addVariable action', () => { + findModal().vm.$emit('ok'); + expect(store.dispatch).toHaveBeenCalledWith('addVariable'); + }); + + it('Clears the modal state once modal is hidden', () => { + findModal().vm.$emit('hidden'); + expect(store.dispatch).toHaveBeenCalledWith('clearModal'); + }); + }); + + describe('Editing a variable', () => { + beforeEach(() => { + const [variable] = mockData.mockVariables; + store.state.variableBeingEdited = variable; + }); + + it('button text is Update variable when updating', () => { + expect(wrapper.vm.modalActionText).toBe('Update Variable'); + }); + + it('Update variable button dispatches updateVariable with correct variable', () => { + findModal().vm.$emit('ok'); + expect(store.dispatch).toHaveBeenCalledWith( + 'updateVariable', + store.state.variableBeingEdited, + ); + }); + + it('Resets the editing state once modal is hidden', () => { + findModal().vm.$emit('hidden'); + expect(store.dispatch).toHaveBeenCalledWith('resetEditing'); + }); + }); +}); 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 00000000000..7dcd82eac5e --- /dev/null +++ b/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js @@ -0,0 +1,39 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import CiVariableSettings from '~/ci_variable_list/components/ci_variable_settings.vue'; +import createStore from '~/ci_variable_list/store'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Ci variable table', () => { + let wrapper; + let store; + let isGroup; + + const createComponent = groupState => { + store = createStore(); + store.state.isGroup = groupState; + jest.spyOn(store, 'dispatch').mockImplementation(); + wrapper = shallowMount(CiVariableSettings, { + localVue, + store, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + it('dispatches fetchEnvironments when mounted', () => { + isGroup = false; + createComponent(isGroup); + expect(store.dispatch).toHaveBeenCalledWith('fetchEnvironments'); + }); + + it('does not dispatch fetchenvironments when in group context', () => { + isGroup = true; + createComponent(isGroup); + expect(store.dispatch).not.toHaveBeenCalled(); + }); +}); 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 00000000000..973a9c51f16 --- /dev/null +++ b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js @@ -0,0 +1,89 @@ +import Vuex from 'vuex'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { GlTable } from '@gitlab/ui'; +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); + +describe('Ci variable table', () => { + let wrapper; + let store; + + const createComponent = () => { + store = createStore(); + store.state.isGroup = true; + jest.spyOn(store, 'dispatch').mockImplementation(); + wrapper = mount(CiVariableTable, { + localVue, + store, + }); + }; + + const findDeleteButton = () => wrapper.find({ ref: 'delete-ci-variable' }); + 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 findTable = () => wrapper.find(GlTable); + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('dispatches fetchVariables when mounted', () => { + expect(store.dispatch).toHaveBeenCalledWith('fetchVariables'); + }); + + it('fields prop does not contain environment_scope if group', () => { + expect(findTable().props('fields')).not.toEqual( + expect.arrayContaining([ + expect.objectContaining({ + key: 'environment_scope', + label: 'Environment Scope', + }), + ]), + ); + }); + + describe('Renders correct data', () => { + it('displays empty message when variables are not present', () => { + expect(findEmptyVariablesPlaceholder().exists()).toBe(true); + }); + + it('displays correct amount of variables present and no empty message', () => { + store.state.variables = mockData.mockVariables; + + return wrapper.vm.$nextTick(() => { + expect(wrapper.findAll('.js-ci-variable-row').length).toBe(1); + expect(findEmptyVariablesPlaceholder().exists()).toBe(false); + }); + }); + }); + + describe('Table click actions', () => { + beforeEach(() => { + store.state.variables = mockData.mockVariables; + }); + + it('dispatches deleteVariable with correct variable to delete', () => { + findDeleteButton().trigger('click'); + expect(store.dispatch).toHaveBeenCalledWith('deleteVariable', mockData.mockVariables[0]); + }); + + it('reveals secret values when button is clicked', () => { + findRevealButton().trigger('click'); + expect(store.dispatch).toHaveBeenCalledWith('toggleValues', false); + }); + + it('dispatches editVariable with correct variable to edit', () => { + findEditButton().trigger('click'); + expect(store.dispatch).toHaveBeenCalledWith('editVariable', mockData.mockVariables[0]); + }); + }); +}); diff --git a/spec/frontend/ci_variable_list/services/mock_data.js b/spec/frontend/ci_variable_list/services/mock_data.js index 89473b57af9..b04cd223d42 100644 --- a/spec/frontend/ci_variable_list/services/mock_data.js +++ b/spec/frontend/ci_variable_list/services/mock_data.js @@ -9,24 +9,6 @@ export default { value: 'test_val', variable_type: 'Variable', }, - { - environment_scope: 'All environments', - id: 114, - key: 'test_var_2', - masked: false, - protected: false, - value: 'test_val_2', - variable_type: 'Variable', - }, - { - environment_scope: 'All environments', - id: 115, - key: 'test_var_3', - masked: false, - protected: false, - value: 'test_val_3', - variable_type: 'Variable', - }, ], mockVariablesApi: [ diff --git a/spec/frontend/ci_variable_list/store/utils_spec.js b/spec/frontend/ci_variable_list/store/utils_spec.js index 9d5dd6b4f29..070bc996d75 100644 --- a/spec/frontend/ci_variable_list/store/utils_spec.js +++ b/spec/frontend/ci_variable_list/store/utils_spec.js @@ -17,8 +17,8 @@ describe('CI variables store utils', () => { environment_scope: '*', id: 113, key: 'test_var', - masked: false, - protected: false, + masked: 'false', + protected: 'false', value: 'test_val', variable_type: 'env_var', }); @@ -27,8 +27,8 @@ describe('CI variables store utils', () => { environment_scope: '*', id: 114, key: 'test_var_2', - masked: false, - protected: false, + masked: 'false', + protected: 'false', value: 'test_val_2', variable_type: 'file', }); diff --git a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap new file mode 100644 index 00000000000..955716ccbca --- /dev/null +++ b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap @@ -0,0 +1,76 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`self monitor component When the self monitor project has not been created default state to match the default snapshot 1`] = ` +
+
+

+ + Self monitoring + +

+ + + Expand + + +

+ + Enable or disable instance self monitoring + +

+
+ +
+
+

+ Enabling this feature creates a project that can be used to monitor the health of your instance. +

+ + + + +
+
+ + +
+ + Disabling this feature will delete the self monitoring project. Are you sure you want to delete the project? + +
+ +
+`; diff --git a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_spec.js.snap b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_spec.js.snap deleted file mode 100644 index 955716ccbca..00000000000 --- a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_spec.js.snap +++ /dev/null @@ -1,76 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`self monitor component When the self monitor project has not been created default state to match the default snapshot 1`] = ` -
-
-

- - Self monitoring - -

- - - Expand - - -

- - Enable or disable instance self monitoring - -

-
- -
-
-

- Enabling this feature creates a project that can be used to monitor the health of your instance. -

- - - - -
-
- - -
- - Disabling this feature will delete the self monitoring project. Are you sure you want to delete the project? - -
- -
-`; diff --git a/spec/frontend/self_monitor/components/self_monitor_form_spec.js b/spec/frontend/self_monitor/components/self_monitor_form_spec.js new file mode 100644 index 00000000000..50b97ae914d --- /dev/null +++ b/spec/frontend/self_monitor/components/self_monitor_form_spec.js @@ -0,0 +1,83 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; +import SelfMonitor from '~/self_monitor/components/self_monitor_form.vue'; +import { createStore } from '~/self_monitor/store'; + +describe('self monitor component', () => { + let wrapper; + let store; + + describe('When the self monitor project has not been created', () => { + beforeEach(() => { + store = createStore({ + projectEnabled: false, + selfMonitoringProjectExists: false, + createSelfMonitoringProjectPath: '/create', + deleteSelfMonitoringProjectPath: '/delete', + }); + }); + + afterEach(() => { + if (wrapper.destroy) { + wrapper.destroy(); + } + }); + + describe('default state', () => { + it('to match the default snapshot', () => { + wrapper = shallowMount(SelfMonitor, { store }); + + expect(wrapper.element).toMatchSnapshot(); + }); + }); + + it('renders header text', () => { + wrapper = shallowMount(SelfMonitor, { store }); + + expect(wrapper.find('.js-section-header').text()).toBe('Self monitoring'); + }); + + describe('expand/collapse button', () => { + it('renders as an expand button by default', () => { + wrapper = shallowMount(SelfMonitor, { store }); + + const button = wrapper.find(GlButton); + + expect(button.text()).toBe('Expand'); + }); + }); + + describe('sub-header', () => { + it('renders descriptive text', () => { + wrapper = shallowMount(SelfMonitor, { store }); + + expect(wrapper.find('.js-section-sub-header').text()).toContain( + 'Enable or disable instance self monitoring', + ); + }); + }); + + describe('settings-content', () => { + it('renders the form description without a link', () => { + wrapper = shallowMount(SelfMonitor, { store }); + + expect(wrapper.vm.selfMonitoringFormText).toContain( + 'Enabling this feature creates a project that can be used to monitor the health of your instance.', + ); + }); + + it('renders the form description with a link', () => { + store = createStore({ + projectEnabled: true, + selfMonitoringProjectExists: true, + createSelfMonitoringProjectPath: '/create', + deleteSelfMonitoringProjectPath: '/delete', + }); + + wrapper = shallowMount(SelfMonitor, { store }); + + expect(wrapper.vm.selfMonitoringFormText).toContain(''); + }); + }); + }); +}); diff --git a/spec/frontend/self_monitor/components/self_monitor_spec.js b/spec/frontend/self_monitor/components/self_monitor_spec.js deleted file mode 100644 index 50b97ae914d..00000000000 --- a/spec/frontend/self_monitor/components/self_monitor_spec.js +++ /dev/null @@ -1,83 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import { GlButton } from '@gitlab/ui'; -import SelfMonitor from '~/self_monitor/components/self_monitor_form.vue'; -import { createStore } from '~/self_monitor/store'; - -describe('self monitor component', () => { - let wrapper; - let store; - - describe('When the self monitor project has not been created', () => { - beforeEach(() => { - store = createStore({ - projectEnabled: false, - selfMonitoringProjectExists: false, - createSelfMonitoringProjectPath: '/create', - deleteSelfMonitoringProjectPath: '/delete', - }); - }); - - afterEach(() => { - if (wrapper.destroy) { - wrapper.destroy(); - } - }); - - describe('default state', () => { - it('to match the default snapshot', () => { - wrapper = shallowMount(SelfMonitor, { store }); - - expect(wrapper.element).toMatchSnapshot(); - }); - }); - - it('renders header text', () => { - wrapper = shallowMount(SelfMonitor, { store }); - - expect(wrapper.find('.js-section-header').text()).toBe('Self monitoring'); - }); - - describe('expand/collapse button', () => { - it('renders as an expand button by default', () => { - wrapper = shallowMount(SelfMonitor, { store }); - - const button = wrapper.find(GlButton); - - expect(button.text()).toBe('Expand'); - }); - }); - - describe('sub-header', () => { - it('renders descriptive text', () => { - wrapper = shallowMount(SelfMonitor, { store }); - - expect(wrapper.find('.js-section-sub-header').text()).toContain( - 'Enable or disable instance self monitoring', - ); - }); - }); - - describe('settings-content', () => { - it('renders the form description without a link', () => { - wrapper = shallowMount(SelfMonitor, { store }); - - expect(wrapper.vm.selfMonitoringFormText).toContain( - 'Enabling this feature creates a project that can be used to monitor the health of your instance.', - ); - }); - - it('renders the form description with a link', () => { - store = createStore({ - projectEnabled: true, - selfMonitoringProjectExists: true, - createSelfMonitoringProjectPath: '/create', - deleteSelfMonitoringProjectPath: '/delete', - }); - - wrapper = shallowMount(SelfMonitor, { store }); - - expect(wrapper.vm.selfMonitoringFormText).toContain(''); - }); - }); - }); -}); -- cgit v1.2.3