diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue index 402763e2e21d15f31d97e90dee5fcce818998831..55a6a1ace552bf494a741950777881aa12a1cf08 100644 --- a/app/assets/javascripts/registry/settings/components/settings_form.vue +++ b/app/assets/javascripts/registry/settings/components/settings_form.vue @@ -1,6 +1,6 @@ <script> -import { mapActions } from 'vuex'; -import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea, GlButton } from '@gitlab/ui'; +import { mapActions, mapState } from 'vuex'; +import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea, GlButton, GlCard } from '@gitlab/ui'; import { s__, __, sprintf } from '~/locale'; import { NAME_REGEX_LENGTH } from '../constants'; import { mapComputed } from '~/vuex_shared/bindings'; @@ -12,19 +12,25 @@ export default { GlFormSelect, GlFormTextarea, GlButton, + GlCard, }, labelsConfig: { cols: 3, align: 'right', }, computed: { - ...mapComputed('settings', 'updateSettings', [ - 'enabled', - 'cadence', - 'older_than', - 'keep_n', - 'name_regex', - ]), + ...mapState(['formOptions']), + ...mapComputed( + [ + 'enabled', + { key: 'cadence', getter: 'getCadence' }, + { key: 'older_than', getter: 'getOlderThan' }, + { key: 'keep_n', getter: 'getKeepN' }, + 'name_regex', + ], + 'updateSettings', + 'settings', + ), policyEnabledText() { return this.enabled ? __('enabled') : __('disabled'); }, @@ -66,12 +72,12 @@ export default { </script> <template> - <div class="card"> - <form ref="form-element" @submit.prevent="saveSettings" @reset.prevent="resetSettings"> - <div class="card-header"> + <form ref="form-element" @submit.prevent="saveSettings" @reset.prevent="resetSettings"> + <gl-card> + <template #header> {{ s__('ContainerRegistry|Tag expiration policy') }} - </div> - <div class="card-body"> + </template> + <template> <gl-form-group id="expiration-policy-toggle-group" :label-cols="$options.labelsConfig.cols" @@ -92,9 +98,10 @@ export default { label-for="expiration-policy-interval" :label="s__('ContainerRegistry|Expiration interval:')" > - <gl-form-select id="expiration-policy-interval" v-model="older_than"> - <option value="1">{{ __('Option 1') }}</option> - <option value="2">{{ __('Option 2') }}</option> + <gl-form-select id="expiration-policy-interval" v-model="older_than" :disabled="!enabled"> + <option v-for="option in formOptions.olderThan" :key="option.key" :value="option.key"> + {{ option.label }} + </option> </gl-form-select> </gl-form-group> @@ -105,9 +112,10 @@ export default { label-for="expiration-policy-schedule" :label="s__('ContainerRegistry|Expiration schedule:')" > - <gl-form-select id="expiration-policy-schedule" v-model="cadence"> - <option value="1">{{ __('Option 1') }}</option> - <option value="2">{{ __('Option 2') }}</option> + <gl-form-select id="expiration-policy-schedule" v-model="cadence" :disabled="!enabled"> + <option v-for="option in formOptions.cadence" :key="option.key" :value="option.key"> + {{ option.label }} + </option> </gl-form-select> </gl-form-group> @@ -118,9 +126,10 @@ export default { label-for="expiration-policy-latest" :label="s__('ContainerRegistry|Expiration latest:')" > - <gl-form-select id="expiration-policy-latest" v-model="keep_n"> - <option value="1">{{ __('Option 1') }}</option> - <option value="2">{{ __('Option 2') }}</option> + <gl-form-select id="expiration-policy-latest" v-model="keep_n" :disabled="!enabled"> + <option v-for="option in formOptions.keepN" :key="option.key" :value="option.key"> + {{ option.label }} + </option> </gl-form-select> </gl-form-group> @@ -140,19 +149,30 @@ export default { v-model="name_regex" :placeholder="nameRegexPlaceholder" :state="nameRegexState" + :disabled="!enabled" trim /> <template #description> <span ref="regex-description" v-html="regexHelpText"></span> </template> </gl-form-group> - </div> - <div class="card-footer text-right"> - <gl-button ref="cancel-button" type="reset">{{ __('Cancel') }}</gl-button> - <gl-button ref="save-button" type="submit" :disabled="formIsValid" variant="success"> - {{ __('Save Expiration Policy') }} - </gl-button> - </div> - </form> - </div> + </template> + <template #footer> + <div class="d-flex justify-content-end"> + <gl-button ref="cancel-button" type="reset" class="mr-2 d-block">{{ + __('Cancel') + }}</gl-button> + <gl-button + ref="save-button" + type="submit" + :disabled="formIsValid" + variant="success" + class="d-block" + > + {{ __('Save expiration policy') }} + </gl-button> + </div> + </template> + </gl-card> + </form> </template> diff --git a/app/assets/javascripts/registry/settings/store/getters.js b/app/assets/javascripts/registry/settings/store/getters.js new file mode 100644 index 0000000000000000000000000000000000000000..fc32a9f08e4b3b922de3e3c19df87f25458cb2f7 --- /dev/null +++ b/app/assets/javascripts/registry/settings/store/getters.js @@ -0,0 +1,8 @@ +import { findDefaultOption } from '../utils'; + +export const getCadence = state => + state.settings.cadence || findDefaultOption(state.formOptions.cadence); +export const getKeepN = state => + state.settings.keep_n || findDefaultOption(state.formOptions.keepN); +export const getOlderThan = state => + state.settings.older_than || findDefaultOption(state.formOptions.olderThan); diff --git a/app/assets/javascripts/registry/settings/store/index.js b/app/assets/javascripts/registry/settings/store/index.js index 91a35aac149c7b24450342f3e44b80df5d1c5ee2..c2500454d8eb739437f70c9f1ac0ee192c543b76 100644 --- a/app/assets/javascripts/registry/settings/store/index.js +++ b/app/assets/javascripts/registry/settings/store/index.js @@ -2,6 +2,7 @@ import Vue from 'vue'; import Vuex from 'vuex'; import * as actions from './actions'; import mutations from './mutations'; +import * as getters from './getters'; import state from './state'; Vue.use(Vuex); @@ -11,6 +12,7 @@ export const createStore = () => state, actions, mutations, + getters, }); export default createStore(); diff --git a/app/assets/javascripts/registry/settings/store/mutations.js b/app/assets/javascripts/registry/settings/store/mutations.js index b8384fd4a45a120abc3167210ae176a3f1a40d7b..25a67cc69734cf3a167e93366cccf22d8719b2c4 100644 --- a/app/assets/javascripts/registry/settings/store/mutations.js +++ b/app/assets/javascripts/registry/settings/store/mutations.js @@ -3,6 +3,11 @@ import * as types from './mutation_types'; export default { [types.SET_INITIAL_STATE](state, initialState) { state.projectId = initialState.projectId; + state.formOptions = { + cadence: JSON.parse(initialState.cadenceOptions), + keepN: JSON.parse(initialState.keepNOptions), + olderThan: JSON.parse(initialState.olderThanOptions), + }; }, [types.UPDATE_SETTINGS](state, settings) { state.settings = { ...state.settings, ...settings }; diff --git a/app/assets/javascripts/registry/settings/store/state.js b/app/assets/javascripts/registry/settings/store/state.js index c3a26083c9fa8e2ce9fc12dba33950ba218193b4..50c882e1839d3c8be4d717a7b3fdaf7741cad4a9 100644 --- a/app/assets/javascripts/registry/settings/store/state.js +++ b/app/assets/javascripts/registry/settings/store/state.js @@ -23,4 +23,8 @@ export default () => ({ * Same structure as settings, above but Frozen object and used only in case the user clicks 'cancel' */ original: {}, + /* + * Contains the options used to populate the form selects + */ + formOptions: {}, }); diff --git a/app/assets/javascripts/registry/settings/utils.js b/app/assets/javascripts/registry/settings/utils.js new file mode 100644 index 0000000000000000000000000000000000000000..75af401e96d2350483a58c73028c8e25e588e7f3 --- /dev/null +++ b/app/assets/javascripts/registry/settings/utils.js @@ -0,0 +1,6 @@ +export const findDefaultOption = options => { + const item = options.find(o => o.default); + return item ? item.key : null; +}; + +export default () => {}; diff --git a/app/assets/javascripts/vuex_shared/bindings.js b/app/assets/javascripts/vuex_shared/bindings.js index 51035ebc8a854965161eb03ee3aaf13f74c28dbc..817a90f814940fbe8cd49fe8265224d98b0d26ff 100644 --- a/app/assets/javascripts/vuex_shared/bindings.js +++ b/app/assets/javascripts/vuex_shared/bindings.js @@ -1,9 +1,29 @@ -export const mapComputed = (root, updateFn, list) => { +/** + * Returns computed properties two way bound to vuex + * + * @param {(string[]|Object[])} list - list of string matching state keys or list objects + * @param {string} list[].key - the key matching the key present in the vuex state + * @param {string} list[].getter - the name of the getter, leave it empty to not use a getter + * @param {string} list[].updateFn - the name of the action, leave it empty to use the default action + * @param {string} defaultUpdateFn - the default function to dispatch + * @param {string} root - the key of the state where to search fo they keys described in list + * @returns {Object} a dictionary with all the computed properties generated + */ +export const mapComputed = (list, defaultUpdateFn, root) => { const result = {}; - list.forEach(key => { + list.forEach(item => { + const [getter, key, updateFn] = + typeof item === 'string' + ? [false, item, defaultUpdateFn] + : [item.getter, item.key, item.updateFn || defaultUpdateFn]; result[key] = { get() { - return this.$store.state[root][key]; + if (getter) { + return this.$store.getters[getter]; + } else if (root) { + return this.$store.state[root][key]; + } + return this.$store.state[key]; }, set(value) { this.$store.dispatch(updateFn, { [key]: value }); diff --git a/app/views/projects/registry/settings/_index.haml b/app/views/projects/registry/settings/_index.haml index d023a0834458aab1d5b2d2786fe2057d5d79bddc..0e0341a99239f268e5435bbf3a6a494ff05bfe33 100644 --- a/app/views/projects/registry/settings/_index.haml +++ b/app/views/projects/registry/settings/_index.haml @@ -1 +1,4 @@ -#js-registry-settings{ data: { project_id: @project.id, } } +#js-registry-settings{ data: { project_id: @project.id, + cadence_options: cadence_options.to_json, + keep_n_options: keep_n_options.to_json, + older_than_options: older_than_options.to_json} } diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 638ecd7e38ea3ce58ac17c10083b12c7dedf1e84..33685efb7080883a4f7ee34efb251ee5ac4fa902 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -12603,12 +12603,6 @@ msgstr "" msgid "OperationsDashboard|The operations dashboard provides a summary of each project's operational health, including pipeline and alert statuses." msgstr "" -msgid "Option 1" -msgstr "" - -msgid "Option 2" -msgstr "" - msgid "Optional" msgstr "" @@ -15739,9 +15733,6 @@ msgstr "" msgid "Save Changes" msgstr "" -msgid "Save Expiration Policy" -msgstr "" - msgid "Save anyway" msgstr "" @@ -15757,6 +15748,9 @@ msgstr "" msgid "Save comment" msgstr "" +msgid "Save expiration policy" +msgstr "" + msgid "Save password" msgstr "" diff --git a/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap b/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap index 9724033f3c95e9ce348ca7b91eeffc83aa2c0ad5..bef4674bd8be304b5be1e8faf44c48274afc2341 100644 --- a/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap +++ b/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap @@ -1,10 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Settings Form renders 1`] = ` -<div - class="card" -> - <form> +<form> + <div + class="card" + > + <!----> <div class="card-header" > @@ -12,11 +13,13 @@ exports[`Settings Form renders 1`] = ` Tag expiration policy </div> - <div class="card-body" > - <gl-form-group-stub + <!----> + <!----> + + <glformgroup-stub id="expiration-policy-toggle-group" label="Expiration policy:" label-align="right" @@ -26,7 +29,7 @@ exports[`Settings Form renders 1`] = ` <div class="d-flex align-items-start" > - <gl-toggle-stub + <gltoggle-stub id="expiration-policy-toggle" labeloff="Toggle Status: OFF" labelon="Toggle Status: ON" @@ -41,81 +44,96 @@ exports[`Settings Form renders 1`] = ` </strong> </span> </div> - </gl-form-group-stub> + </glformgroup-stub> - <gl-form-group-stub + <glformgroup-stub id="expiration-policy-interval-group" label="Expiration interval:" label-align="right" label-cols="3" label-for="expiration-policy-interval" > - <gl-form-select-stub + <glformselect-stub + disabled="true" id="expiration-policy-interval" + value="bar" > <option - value="1" + value="foo" > - Option 1 + + Foo + </option> - <option - value="2" + value="bar" > - Option 2 + + Bar + </option> - </gl-form-select-stub> - </gl-form-group-stub> + </glformselect-stub> + </glformgroup-stub> - <gl-form-group-stub + <glformgroup-stub id="expiration-policy-schedule-group" label="Expiration schedule:" label-align="right" label-cols="3" label-for="expiration-policy-schedule" > - <gl-form-select-stub + <glformselect-stub + disabled="true" id="expiration-policy-schedule" + value="bar" > <option - value="1" + value="foo" > - Option 1 + + Foo + </option> - <option - value="2" + value="bar" > - Option 2 + + Bar + </option> - </gl-form-select-stub> - </gl-form-group-stub> + </glformselect-stub> + </glformgroup-stub> - <gl-form-group-stub + <glformgroup-stub id="expiration-policy-latest-group" label="Expiration latest:" label-align="right" label-cols="3" label-for="expiration-policy-latest" > - <gl-form-select-stub + <glformselect-stub + disabled="true" id="expiration-policy-latest" + value="bar" > <option - value="1" + value="foo" > - Option 1 + + Foo + </option> - <option - value="2" + value="bar" > - Option 2 + + Bar + </option> - </gl-form-select-stub> - </gl-form-group-stub> + </glformselect-stub> + </glformgroup-stub> - <gl-form-group-stub + <glformgroup-stub id="expiration-policy-name-matching-group" invalid-feedback="The value of this input should be less than 255 characters" label="Expire Docker tags with name matching:" @@ -123,33 +141,41 @@ exports[`Settings Form renders 1`] = ` label-cols="3" label-for="expiration-policy-name-matching" > - <gl-form-textarea-stub + <glformtextarea-stub + disabled="true" id="expiration-policy-name-matching" placeholder=".*" trim="" value="" /> - </gl-form-group-stub> + </glformgroup-stub> + </div> - <div - class="card-footer text-right" + class="card-footer" > - <gl-button-stub - type="reset" - > - Cancel - </gl-button-stub> - - <gl-button-stub - type="submit" - variant="success" + <div + class="d-flex justify-content-end" > + <glbutton-stub + class="mr-2 d-block" + type="reset" + > + Cancel + </glbutton-stub> + + <glbutton-stub + class="d-block" + type="submit" + variant="success" + > + + Save expiration policy - Save Expiration Policy - - </gl-button-stub> + </glbutton-stub> + </div> </div> - </form> -</div> + <!----> + </div> +</form> `; diff --git a/spec/frontend/registry/settings/components/settings_form_spec.js b/spec/frontend/registry/settings/components/settings_form_spec.js index b944e5a2ceabf71920b8afc3aa0e93f5c7903da3..bd733e965a49d742ba1c5ad0e96c247f9f89d803 100644 --- a/spec/frontend/registry/settings/components/settings_form_spec.js +++ b/spec/frontend/registry/settings/components/settings_form_spec.js @@ -1,8 +1,10 @@ import Vuex from 'vuex'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { mount, createLocalVue } from '@vue/test-utils'; +import stubChildren from 'helpers/stub_children'; import component from '~/registry/settings/components/settings_form.vue'; import { createStore } from '~/registry/settings/store/'; import { NAME_REGEX_LENGTH } from '~/registry/settings/constants'; +import { stringifiedFormOptions } from '../mock_data'; const localVue = createLocalVue(); localVue.use(Vuex); @@ -13,7 +15,6 @@ describe('Settings Form', () => { let saveSpy; let resetSpy; - const helpPagePath = 'foo'; const findFormGroup = name => wrapper.find(`#expiration-policy-${name}-group`); const findFormElements = (name, father = wrapper) => father.find(`#expiration-policy-${name}`); const findCancelButton = () => wrapper.find({ ref: 'cancel-button' }); @@ -23,7 +24,11 @@ describe('Settings Form', () => { const mountComponent = (options = {}) => { saveSpy = jest.fn(); resetSpy = jest.fn(); - wrapper = shallowMount(component, { + wrapper = mount(component, { + stubs: { + ...stubChildren(component), + GlCard: false, + }, store, methods: { saveSettings: saveSpy, @@ -35,7 +40,7 @@ describe('Settings Form', () => { beforeEach(() => { store = createStore(); - store.dispatch('setInitialState', { helpPagePath }); + store.dispatch('setInitialState', stringifiedFormOptions); mountComponent(); }); @@ -48,13 +53,13 @@ describe('Settings Form', () => { }); describe.each` - elementName | modelName | value - ${'toggle'} | ${'enabled'} | ${true} - ${'interval'} | ${'older_than'} | ${'foo'} - ${'schedule'} | ${'cadence'} | ${'foo'} - ${'latest'} | ${'keep_n'} | ${'foo'} - ${'name-matching'} | ${'name_regex'} | ${'foo'} - `('%s form element', ({ elementName, modelName, value }) => { + elementName | modelName | value | disabledByToggle + ${'toggle'} | ${'enabled'} | ${true} | ${'not disabled'} + ${'interval'} | ${'older_than'} | ${'foo'} | ${'disabled'} + ${'schedule'} | ${'cadence'} | ${'foo'} | ${'disabled'} + ${'latest'} | ${'keep_n'} | ${'foo'} | ${'disabled'} + ${'name-matching'} | ${'name_regex'} | ${'foo'} | ${'disabled'} + `('$elementName form element', ({ elementName, modelName, value, disabledByToggle }) => { let formGroup; beforeEach(() => { formGroup = findFormGroup(elementName); @@ -89,6 +94,12 @@ describe('Settings Form', () => { expect(wrapper.vm[modelName]).toBe(value); }); }); + + it(`${elementName} is ${disabledByToggle} by enabled set to false`, () => { + store.dispatch('updateSettings', { enabled: false }); + const expectation = disabledByToggle === 'disabled' ? 'true' : undefined; + expect(findFormElements(elementName, formGroup).attributes('disabled')).toBe(expectation); + }); }); describe('form actions', () => { diff --git a/spec/frontend/registry/settings/mock_data.js b/spec/frontend/registry/settings/mock_data.js new file mode 100644 index 0000000000000000000000000000000000000000..411363c2c95e4acdfdf96e7aada9cd82de9fc93c --- /dev/null +++ b/spec/frontend/registry/settings/mock_data.js @@ -0,0 +1,12 @@ +export const options = [{ key: 'foo', label: 'Foo' }, { key: 'bar', label: 'Bar', default: true }]; +export const stringifiedOptions = JSON.stringify(options); +export const stringifiedFormOptions = { + cadenceOptions: stringifiedOptions, + keepNOptions: stringifiedOptions, + olderThanOptions: stringifiedOptions, +}; +export const formOptions = { + cadence: options, + keepN: options, + olderThan: options, +}; diff --git a/spec/frontend/registry/settings/store/mutations_spec.js b/spec/frontend/registry/settings/store/mutations_spec.js index a8c7ed3bafa3a1bfbfca0f01ed0a7d6a870d15b3..1a0effbe125e79a8176c647dfb2715b388ef6439 100644 --- a/spec/frontend/registry/settings/store/mutations_spec.js +++ b/spec/frontend/registry/settings/store/mutations_spec.js @@ -1,6 +1,7 @@ import mutations from '~/registry/settings/store/mutations'; import * as types from '~/registry/settings/store/mutation_types'; import createState from '~/registry/settings/store/state'; +import { formOptions, stringifiedFormOptions } from '../mock_data'; describe('Mutations Registry Store', () => { let mockState; @@ -11,11 +12,14 @@ describe('Mutations Registry Store', () => { describe('SET_INITIAL_STATE', () => { it('should set the initial state', () => { - const payload = { helpPagePath: 'foo', projectId: 'bar' }; - const expectedState = { ...mockState, ...payload }; - mutations[types.SET_INITIAL_STATE](mockState, payload); + const expectedState = { ...mockState, projectId: 'foo', formOptions }; + mutations[types.SET_INITIAL_STATE](mockState, { + projectId: 'foo', + ...stringifiedFormOptions, + }); expect(mockState.projectId).toEqual(expectedState.projectId); + expect(mockState.formOptions).toEqual(expectedState.formOptions); }); }); diff --git a/spec/frontend/vuex_shared/bindings_spec.js b/spec/frontend/vuex_shared/bindings_spec.js index 022d9e8e84c2f2cebeac4a187153305b953828f1..0f91a09018f7fb81774a6038500761e12b4382e5 100644 --- a/spec/frontend/vuex_shared/bindings_spec.js +++ b/spec/frontend/vuex_shared/bindings_spec.js @@ -3,49 +3,77 @@ import { mapComputed } from '~/vuex_shared/bindings'; describe('Binding utils', () => { describe('mapComputed', () => { - const dummyComponent = { + const defaultArgs = [['baz'], 'bar', 'foo']; + + const createDummy = (mapComputedArgs = defaultArgs) => ({ computed: { - ...mapComputed('foo', 'bar', ['baz']), + ...mapComputed(...mapComputedArgs), }, render() { return null; }, + }); + + const mocks = { + $store: { + state: { + baz: 2, + foo: { + baz: 1, + }, + }, + getters: { + getBaz: 'foo', + }, + dispatch: jest.fn(), + }, }; - it('returns an object with keys equal to the last fn parameter ', () => { + + it('returns an object with keys equal to the first fn parameter ', () => { const keyList = ['foo1', 'foo2']; - const result = mapComputed('foo', 'bar', keyList); + const result = mapComputed(keyList, 'foo', 'bar'); expect(Object.keys(result)).toEqual(keyList); }); + it('returned object has set and get function', () => { - const result = mapComputed('foo', 'bar', ['baz']); + const result = mapComputed(['baz'], 'foo', 'bar'); expect(result.baz.set).toBeDefined(); expect(result.baz.get).toBeDefined(); }); - it('set function invokes $store.dispatch', () => { - const context = shallowMount(dummyComponent, { - mocks: { - $store: { - dispatch: jest.fn(), - }, - }, + describe('set function', () => { + it('invokes $store.dispatch', () => { + const context = shallowMount(createDummy(), { mocks }); + context.vm.baz = 'a'; + expect(context.vm.$store.dispatch).toHaveBeenCalledWith('bar', { baz: 'a' }); + }); + it('uses updateFn in list object mode if updateFn exists', () => { + const context = shallowMount(createDummy([[{ key: 'foo', updateFn: 'baz' }]]), { mocks }); + context.vm.foo = 'b'; + expect(context.vm.$store.dispatch).toHaveBeenCalledWith('baz', { foo: 'b' }); + }); + it('in list object mode defaults to defaultUpdateFn if updateFn do not exists', () => { + const context = shallowMount(createDummy([[{ key: 'foo' }], 'defaultFn']), { mocks }); + context.vm.foo = 'c'; + expect(context.vm.$store.dispatch).toHaveBeenCalledWith('defaultFn', { foo: 'c' }); }); - context.vm.baz = 'a'; - expect(context.vm.$store.dispatch).toHaveBeenCalledWith('bar', { baz: 'a' }); }); - it('get function returns $store.state[root][key]', () => { - const context = shallowMount(dummyComponent, { - mocks: { - $store: { - state: { - foo: { - baz: 1, - }, - }, - }, - }, + + describe('get function', () => { + it('if root is set returns $store.state[root][key]', () => { + const context = shallowMount(createDummy(), { mocks }); + expect(context.vm.baz).toBe(mocks.$store.state.foo.baz); + }); + + it('if root is not set returns $store.state[key]', () => { + const context = shallowMount(createDummy([['baz'], 'bar']), { mocks }); + expect(context.vm.baz).toBe(mocks.$store.state.baz); + }); + + it('when using getters it invoke the appropriate getter', () => { + const context = shallowMount(createDummy([[{ getter: 'getBaz', key: 'baz' }]]), { mocks }); + expect(context.vm.baz).toBe(mocks.$store.getters.getBaz); }); - expect(context.vm.baz).toBe(1); }); }); });