diff options
2 files changed, 23 insertions, 4 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue index 4200d1e8473..34a07f33a23 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue @@ -1,5 +1,14 @@ <script> +import { __ } from '~/locale'; + export default { + props: { + headerTitle: { + type: String, + required: false, + default: () => __('Create new label'), + }, + }, created() { this.suggestedColors = gon.suggested_label_colors; }, @@ -21,7 +30,7 @@ export default { > </i> </button> - {{ __('Create new label') }} + {{ headerTitle }} <button type="button" class="dropdown-title-button dropdown-menu-close" diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js index f07aefb2f87..5cb4bb6fea6 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js @@ -6,10 +6,12 @@ import { mockSuggestedColors } from './mock_data'; import mountComponent from '../../../../helpers/vue_mount_component_helper'; -const createComponent = () => { +const createComponent = (headerTitle) => { const Component = Vue.extend(dropdownCreateLabelComponent); - return mountComponent(Component); + return mountComponent(Component, { + headerTitle, + }); }; describe('DropdownCreateLabelComponent', () => { @@ -41,11 +43,19 @@ describe('DropdownCreateLabelComponent', () => { expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null); }); - it('renders component header element', () => { + it('renders component header element as `Create new label` when `headerTitle` prop is not provided', () => { const headerEl = vm.$el.querySelector('.dropdown-title'); expect(headerEl.innerText.trim()).toContain('Create new label'); }); + it('renders component header element with value of `headerTitle` prop', () => { + const headerTitle = 'Create project label'; + const vmWithHeaderTitle = createComponent(headerTitle); + const headerEl = vmWithHeaderTitle.$el.querySelector('.dropdown-title'); + expect(headerEl.innerText.trim()).toContain(headerTitle); + vmWithHeaderTitle.$destroy(); + }); + it('renders `Close` button on component header', () => { const closeButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close'); expect(closeButtonEl).not.toBe(null); |