diff options
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue | 16 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js | 32 |
2 files changed, 43 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue index e951a863811..5f61e9fbe80 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue @@ -1,10 +1,22 @@ <script> +import { __ } from '~/locale'; + export default { props: { labelsWebUrl: { type: String, required: true, }, + createLabelTitle: { + type: String, + required: false, + default: () => __('Create new label'), + }, + manageLabelsTitle: { + type: String, + required: false, + default: () => __('Manage labels'), + }, }, }; </script> @@ -17,7 +29,7 @@ export default { href="#" class="dropdown-toggle-page" > - {{ __('Create new label') }} + {{ createLabelTitle }} </a> </li> <li> @@ -26,7 +38,7 @@ export default { class="dropdown-external-link" :href="labelsWebUrl" > - {{ __('Manage labels') }} + {{ manageLabelsTitle }} </a> </li> </ul> diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js index 809e0327b1c..0f4fa716f8a 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js @@ -6,15 +6,23 @@ import { mockConfig } from './mock_data'; import mountComponent from '../../../../helpers/vue_mount_component_helper'; -const createComponent = (labelsWebUrl = mockConfig.labelsWebUrl) => { +const createComponent = ( + labelsWebUrl = mockConfig.labelsWebUrl, + createLabelTitle, + manageLabelsTitle, +) => { const Component = Vue.extend(dropdownFooterComponent); return mountComponent(Component, { labelsWebUrl, + createLabelTitle, + manageLabelsTitle, }); }; describe('DropdownFooterComponent', () => { + const createLabelTitle = 'Create project label'; + const manageLabelsTitle = 'Manage project labels'; let vm; beforeEach(() => { @@ -26,17 +34,35 @@ describe('DropdownFooterComponent', () => { }); describe('template', () => { - it('renders `Create new label` link element', () => { + it('renders link element with `Create new label` when `createLabelTitle` prop is not provided', () => { const createLabelEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-toggle-page'); expect(createLabelEl).not.toBeNull(); expect(createLabelEl.innerText.trim()).toBe('Create new label'); }); - it('renders `Manage labels` link element', () => { + it('renders link element with value of `createLabelTitle` prop', () => { + const vmWithCreateLabelTitle = createComponent(mockConfig.labelsWebUrl, createLabelTitle); + const createLabelEl = vmWithCreateLabelTitle.$el.querySelector('.dropdown-footer-list .dropdown-toggle-page'); + expect(createLabelEl.innerText.trim()).toBe(createLabelTitle); + vmWithCreateLabelTitle.$destroy(); + }); + + it('renders link element with `Manage labels` when `manageLabelsTitle` prop is not provided', () => { const manageLabelsEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-external-link'); expect(manageLabelsEl).not.toBeNull(); expect(manageLabelsEl.getAttribute('href')).toBe(vm.labelsWebUrl); expect(manageLabelsEl.innerText.trim()).toBe('Manage labels'); }); + + it('renders link element with value of `manageLabelsTitle` prop', () => { + const vmWithManageLabelsTitle = createComponent( + mockConfig.labelsWebUrl, + createLabelTitle, + manageLabelsTitle, + ); + const manageLabelsEl = vmWithManageLabelsTitle.$el.querySelector('.dropdown-footer-list .dropdown-external-link'); + expect(manageLabelsEl.innerText.trim()).toBe(manageLabelsTitle); + vmWithManageLabelsTitle.$destroy(); + }); }); }); |